-
-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Upgrade to Polaris v12 styles (#388)
* Add ability to preview Polaris v12 * Pin the @shopify/polaris to 11.26 in package.json * Fix banners * Fix styling, buttons and typography * Add `polaris_html_classes` helper (#366) * Update html to better suit * Fix OptionList Checkbox styles (#367) * Update cards * Add Inter font (#371) * Fix path to font * Fix Modals * Scope ul css better on cards * Fix pagination * Fix ActionLists and Page -> ActionMenu * Minor padding adjustment * Fix NavigationList * Improve preview * Fix Popover * Fix filter popovers * Fix Tooltips * Improve banners v12 styles (#379) * Fix FormBuilder errors_summary rendering within page (#381) * Fix padding for card without title (#382) * Improve styles for banners within cards * Fix Buttons * Fix ActionList buttons * Fix ActionList--active * Fix CalloutCard * Fix SaveBar * Fix shadow of active primary button * Fix Headings * Make iconOnly buttons square * Fix card section borders * Fix path to font on production * Reduce font size of help text component * Fix card section border paddings * Fix list bottom margin * Adjust Polaris-FormLayout padding * Fix date and time input styles * Popover fix - from using in real apps (#391) * Remove unnecessary append_to_body argument * Reorganize css files (#398) --------- Co-authored-by: Bjorn Forsberg <bjorn@forsbergplustwo.com>
- Loading branch information
1 parent
cb7041b
commit f30705f
Showing
76 changed files
with
1,552 additions
and
3,788 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4,099 changes: 591 additions & 3,508 deletions
4,099
app/assets/stylesheets/polaris_view_components.css
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,28 @@ | ||
| @import "./polaris_view_components/fonts.pcss"; | ||
| @import "@shopify/polaris/build/esm/styles.css"; | ||
| @import "./polaris_view_components/variables.pcss"; | ||
|
|
||
| @import "./polaris_view_components/action_list.pcss"; | ||
| @import "./polaris_view_components/banner.pcss"; | ||
| @import "./polaris_view_components/button.pcss"; | ||
| @import "./polaris_view_components/callout_card.pcss"; | ||
| @import "./polaris_view_components/card.pcss"; | ||
| @import "./polaris_view_components/custom.pcss"; | ||
| @import "./polaris_view_components/data_table.pcss"; | ||
| @import "./polaris_view_components/footer_help.pcss"; | ||
| @import "./polaris_view_components/form_layout.pcss"; | ||
| @import "./polaris_view_components/index_table.pcss"; | ||
| @import "./polaris_view_components/list.pcss"; | ||
| @import "./polaris_view_components/modal.pcss"; | ||
| @import "./polaris_view_components/navigation.pcss"; | ||
| @import "./polaris_view_components/navigation_list_component.pcss"; | ||
| @import "./polaris_view_components/option_list.pcss"; | ||
| @import "./polaris_view_components/page.pcss"; | ||
| @import "./polaris_view_components/pagination.pcss"; | ||
| @import "./polaris_view_components/popover.pcss"; | ||
| @import "./polaris_view_components/save_bar.pcss"; | ||
| @import "./polaris_view_components/shopify_navigation.pcss"; | ||
| @import "./polaris_view_components/spacer_component.pcss"; | ||
| @import "./polaris_view_components/tabs.pcss"; | ||
| @import "./polaris_view_components/text_fields.pcss"; | ||
| @import "./polaris_view_components/tooltip_component.pcss"; | ||
| @import "./polaris_view_components/navigation_list_component.pcss"; | ||
| @import "./polaris_view_components/custom.pcss"; |
25 changes: 25 additions & 0 deletions
25
app/assets/stylesheets/polaris_view_components/action_list.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList { | ||
| .Polaris-ActionMenu-SecondaryAction a, | ||
| .Polaris-ActionMenu-SecondaryAction button, | ||
| .Polaris-ActionList__Item { | ||
| padding: var(--p-space-200); | ||
| background: transparent !important; | ||
|
|
||
| &:hover { | ||
| background: var(--p-color-bg-surface-secondary-hover) !important; | ||
| } | ||
|
|
||
| &.Polaris-ActionList--active { | ||
| background: var(--p-color-bg-surface-secondary-active) !important; | ||
| } | ||
|
|
||
| &.Polaris-ActionList--destructive { | ||
| &:hover { | ||
| background: var(--p-color-bg-surface-critical-hover) !important; | ||
| } | ||
| svg { | ||
| fill: var(--p-color-text-critical); | ||
| } | ||
| } | ||
| } | ||
| } |
108 changes: 108 additions & 0 deletions
108
app/assets/stylesheets/polaris_view_components/banner.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| html[class~="Polaris-Summer-Editions-2023"] .Polaris-Banner { | ||
| .Polaris-Banner__InlineIcon { | ||
| padding: var(--p-space-100); | ||
| border-radius: var(--p-border-radius-200); | ||
| width: 1.75rem; | ||
| height: 1.75rem; | ||
| } | ||
|
|
||
| .Polaris-Banner__DismissButton { | ||
| display: flex; | ||
| width: 1.75rem; | ||
| height: 1.75rem; | ||
| } | ||
|
|
||
| &.Polaris-Banner--withinPage { | ||
| .Polaris-Banner__TopBar { | ||
| padding: var(--p-space-300); | ||
|
|
||
| @media (min-width: 30.625em) { | ||
| border-top-left-radius: var(--p-border-radius-300); | ||
| border-top-right-radius: var(--p-border-radius-300); | ||
| } | ||
| } | ||
| &.Polaris-Banner--statusInfo { | ||
| .Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon { | ||
| color: var(--p-color-text-info-on-bg-fill); | ||
| background-color: var(--p-color-bg-fill-info); | ||
|
|
||
| svg { | ||
| fill: var(--p-color-text-info-on-bg-fill) !important; | ||
| } | ||
| } | ||
| } | ||
| &.Polaris-Banner--statusSuccess { | ||
| .Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon { | ||
| color: var(--p-color-text-success-on-bg-fill); | ||
| background-color: var(--p-color-bg-fill-success); | ||
|
|
||
| svg { | ||
| fill: var(--p-color-text-success-on-bg-fill) !important; | ||
| } | ||
| } | ||
| } | ||
| &.Polaris-Banner--statusWarning { | ||
| .Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon { | ||
| color: var(--p-color-text-warning-on-bg-fill); | ||
| background-color: var(--p-color-bg-fill-warning); | ||
|
|
||
| svg { | ||
| fill: var(--p-color-text-warning-on-bg-fill) !important; | ||
| } | ||
| } | ||
| } | ||
| &.Polaris-Banner--statusCritical { | ||
| .Polaris-Banner__TopBar, .Polaris-Banner__InlineIcon { | ||
| color: var(--p-color-text-critical-on-bg-fill); | ||
| background-color: var(--p-color-bg-fill-critical); | ||
|
|
||
| svg { | ||
| fill: var(--p-color-text-critical-on-bg-fill) !important; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.Polaris-Banner--onlyTitle { | ||
| .Polaris-Banner__TopBar { | ||
| @media (min-width: 30.625em) { | ||
| border-radius: var(--p-border-radius-300) !important; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.Polaris-Banner--withinContentContainer { | ||
| .Polaris-Banner__InlineIcon { | ||
| padding: calc(var(--p-space-100) * -1); | ||
| margin-left: calc(var(--p-space-100) * -1); | ||
| margin-bottom: calc(var(--p-space-200) * -1); | ||
| } | ||
|
|
||
| .Polaris-Banner__DismissButton { | ||
| padding: calc(var(--p-space-100) * -1); | ||
| margin-top: calc(var(--p-space-100) * -1); | ||
| margin-right: calc(var(--p-space-100) * -1); | ||
| margin-bottom: calc(var(--p-space-100) * -1); | ||
| } | ||
|
|
||
| .Polaris-Banner__ContainerContentWrapper { | ||
| margin-top: 2px; | ||
| } | ||
|
|
||
| &.Polaris-Banner--statusInfo { | ||
| background-color: var(--p-color-bg-surface-info); | ||
| } | ||
|
|
||
| &.Polaris-Banner--statusSuccess { | ||
| background-color: var(--p-color-bg-surface-success); | ||
| } | ||
|
|
||
| &.Polaris-Banner--statusWarning { | ||
| background-color: var(--p-color-bg-surface-warning); | ||
| } | ||
|
|
||
| &.Polaris-Banner--statusCritical { | ||
| background-color: var(--p-color-bg-surface-critical); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.