From 1418bf32c23d62bb043d9507804c0bcbfcb7c8a7 Mon Sep 17 00:00:00 2001 From: Jess Telford Date: Fri, 12 Jan 2024 13:14:09 +1100 Subject: [PATCH] Use @custom-media across all of Polaris React --- .../SecondaryAction.module.scss | 2 +- .../components/AppProvider/AppProvider.scss | 2 +- .../src/components/Banner/Banner.module.scss | 2 +- .../src/components/Bleed/Bleed.module.scss | 8 ++-- .../BulkActions/BulkActions.module.scss | 4 +- .../CalloutCard/CalloutCard.module.scss | 2 +- .../src/components/Choice/Choice.module.scss | 4 +- .../DataTable/DataTable.module.scss | 8 ++-- .../DescriptionList.module.scss | 6 +-- .../EmptyState/EmptyState.module.scss | 2 +- .../components/Filters/Filters.module.scss | 20 +++++----- .../FilterPill/FilterPill.module.scss | 8 ++-- .../src/components/Frame/Frame.module.scss | 18 ++++----- .../ContextualSaveBar.module.scss | 8 ++-- .../Frame/components/Toast/Toast.module.scss | 2 +- .../src/components/Grid/Grid.module.scss | 8 ++-- .../Grid/components/Cell/Cell.module.scss | 16 ++++---- .../IndexFilters/IndexFilters.module.scss | 8 ++-- .../Container/Container.module.scss | 2 +- .../IndexTable/IndexTable.module.scss | 28 +++++++------- .../src/components/Layout/Layout.module.scss | 2 +- .../LegacyCard/LegacyCard.module.scss | 16 ++++---- .../ConnectedFilterControl.module.scss | 2 +- .../MediaCard/MediaCard.module.scss | 8 ++-- .../src/components/Modal/Modal.module.scss | 2 +- .../components/Dialog/Dialog.module.scss | 16 ++++---- .../Navigation/Navigation.module.scss | 38 +++++++++---------- .../src/components/Navigation/_variables.scss | 8 ++-- .../src/components/Page/Page.module.scss | 2 +- .../Page/components/Header/Header.module.scss | 16 ++++---- .../PageActions/PageActions.module.scss | 2 +- .../RadioButton/RadioButton.module.scss | 2 +- .../DualThumb/DualThumb.module.scss | 2 +- .../SingleThumb/SingleThumb.module.scss | 4 +- .../ResourceItem/ResourceItem.module.scss | 6 +-- .../ResourceList/ResourceList.module.scss | 12 +++--- .../src/components/Select/Select.module.scss | 6 +-- .../SettingAction/SettingAction.module.scss | 2 +- .../src/components/Sheet/Sheet.module.scss | 4 +- .../SkeletonDisplayText.module.scss | 2 +- .../src/components/Tabs/Tabs.module.scss | 14 +++---- .../src/components/Tag/Tag.module.scss | 8 ++-- .../TextField/TextField.module.scss | 8 ++-- .../src/components/TopBar/TopBar.module.scss | 12 +++--- .../TopBar/components/Menu/Menu.module.scss | 2 +- .../components/Search/Search.module.scss | 6 +-- .../components/UserMenu/UserMenu.module.scss | 2 +- polaris-react/src/styles/shared/_page.scss | 2 +- .../src/styles/shared/_responsive-props.scss | 8 ++-- .../src/styles/shared/_typography.scss | 2 +- 50 files changed, 187 insertions(+), 187 deletions(-) diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.scss index 88827c56aa4..dca3e9c723d 100644 --- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.scss +++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.module.scss @@ -40,7 +40,7 @@ background-color: var(--p-color-bg-fill-disabled) !important; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { border: none !important; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include focus-ring($border-width: 0); diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss index 67bd8ba0e15..8b22c38842c 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.scss +++ b/polaris-react/src/components/AppProvider/AppProvider.scss @@ -40,7 +40,7 @@ html { font-sizes on descendant elements: */ @supports (font: -apple-system-body) { - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { html { font: -apple-system-body; } diff --git a/polaris-react/src/components/Banner/Banner.module.scss b/polaris-react/src/components/Banner/Banner.module.scss index ce4001b4010..0cff2a02f46 100644 --- a/polaris-react/src/components/Banner/Banner.module.scss +++ b/polaris-react/src/components/Banner/Banner.module.scss @@ -28,7 +28,7 @@ $borderRadius: var(--p-border-radius-0) ); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { @include shadow-bevel( $boxShadow: var(--p-shadow-200), $borderRadius: var(--p-border-radius-300) diff --git a/polaris-react/src/components/Bleed/Bleed.module.scss b/polaris-react/src/components/Bleed/Bleed.module.scss index e94c9f78a7c..d2da1b6fcd7 100644 --- a/polaris-react/src/components/Bleed/Bleed.module.scss +++ b/polaris-react/src/components/Bleed/Bleed.module.scss @@ -32,7 +32,7 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-xs)); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-sm)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -43,7 +43,7 @@ margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-sm)); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-md)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -54,7 +54,7 @@ margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-md)); } - @media #{$p-breakpoints-lg-up} { + @media (--p-breakpoints-lg-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-lg)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -65,7 +65,7 @@ margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-lg)); } - @media #{$p-breakpoints-xl-up} { + @media (--p-breakpoints-xl-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-xl)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/BulkActions/BulkActions.module.scss b/polaris-react/src/components/BulkActions/BulkActions.module.scss index 0c9ebb22e94..69069834c91 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.module.scss +++ b/polaris-react/src/components/BulkActions/BulkActions.module.scss @@ -64,14 +64,14 @@ $bulk-actions-button-stacking-order: ( $borderRadius: var(--p-border-radius-300) ); - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { // stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space > div > div:first-child { flex: 1 1 auto; } } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { width: auto; justify-content: flex-start; margin-right: var(--p-space-200); diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.module.scss b/polaris-react/src/components/CalloutCard/CalloutCard.module.scss index b401f554743..408cdc3fe66 100644 --- a/polaris-react/src/components/CalloutCard/CalloutCard.module.scss +++ b/polaris-react/src/components/CalloutCard/CalloutCard.module.scss @@ -10,7 +10,7 @@ flex: 0 0 auto; width: 100px; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { display: block; margin-left: var(--p-space-500); } diff --git a/polaris-react/src/components/Choice/Choice.module.scss b/polaris-react/src/components/Choice/Choice.module.scss index 2b568c5f0c7..b592fcb7d23 100644 --- a/polaris-react/src/components/Choice/Choice.module.scss +++ b/polaris-react/src/components/Choice/Choice.module.scss @@ -128,7 +128,7 @@ // stylelint-disable-next-line -- Polaris component custom properties --pc-choice-size: 18px; - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { // stylelint-disable-next-line -- Polaris component custom properties --pc-choice-size: 20px; } @@ -158,7 +158,7 @@ // stylelint-disable-next-line -- Polaris component custom properties --pc-choice-size: 18px; - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { // stylelint-disable-next-line -- Polaris component custom properties --pc-choice-size: 20px; } diff --git a/polaris-react/src/components/DataTable/DataTable.module.scss b/polaris-react/src/components/DataTable/DataTable.module.scss index b139698554b..530d878eb70 100644 --- a/polaris-react/src/components/DataTable/DataTable.module.scss +++ b/polaris-react/src/components/DataTable/DataTable.module.scss @@ -9,7 +9,7 @@ border-radius: 0; overflow: hidden; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-radius: var(--p-border-radius-300); } } @@ -22,7 +22,7 @@ width: 100%; padding: var(--p-space-400) var(--p-space-300); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { justify-content: flex-end; } } @@ -207,7 +207,7 @@ .hoverable { .Cell-hovered { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { background: var(--p-color-bg-surface-hover); } } @@ -401,7 +401,7 @@ top: 0; left: 0; - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: 1; } diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.module.scss b/polaris-react/src/components/DescriptionList/DescriptionList.module.scss index a75e0941e7e..6386c2cafb4 100644 --- a/polaris-react/src/components/DescriptionList/DescriptionList.module.scss +++ b/polaris-react/src/components/DescriptionList/DescriptionList.module.scss @@ -5,7 +5,7 @@ padding: 0; word-break: break-word; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { display: flex; flex-wrap: wrap; align-items: flex-start; @@ -20,7 +20,7 @@ padding: var(--p-space-200) 0 var(--p-space-100); } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { flex: 0 1 25%; padding: var(--p-space-400) var(--p-space-400) var(--p-space-400) 0; @@ -48,7 +48,7 @@ border-top: var(--p-border-width-025) solid var(--p-color-border-secondary); } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { flex: 1 1 51%; padding: var(--p-space-400) 0; diff --git a/polaris-react/src/components/EmptyState/EmptyState.module.scss b/polaris-react/src/components/EmptyState/EmptyState.module.scss index fa0cf9c1df0..b57c5e18408 100644 --- a/polaris-react/src/components/EmptyState/EmptyState.module.scss +++ b/polaris-react/src/components/EmptyState/EmptyState.module.scss @@ -1,7 +1,7 @@ @import '../../styles/common'; .imageContained { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { position: initial; width: 100%; } diff --git a/polaris-react/src/components/Filters/Filters.module.scss b/polaris-react/src/components/Filters/Filters.module.scss index 392c449d685..3bd2f632a14 100644 --- a/polaris-react/src/components/Filters/Filters.module.scss +++ b/polaris-react/src/components/Filters/Filters.module.scss @@ -9,7 +9,7 @@ background: var(--p-color-bg-surface); } -@media #{$p-breakpoints-sm-down} { +@media (--p-breakpoints-sm-down) { .Container { border-top-left-radius: 0; border-top-right-radius: 0; @@ -25,11 +25,11 @@ height: 53px; overflow: hidden; - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { background: var(--p-color-bg-surface); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { height: auto; overflow: visible; } @@ -51,7 +51,7 @@ padding: var(--p-space-300); } -@media #{$p-breakpoints-md-up} { +@media (--p-breakpoints-md-up) { .FiltersInner { overflow: visible; flex-wrap: wrap; @@ -86,7 +86,7 @@ fill: var(--p-color-icon); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-400); height: 24px; @@ -140,7 +140,7 @@ span { margin-right: var(--p-space-050); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-right: var(--p-space-025); } } @@ -148,13 +148,13 @@ svg { width: var(--p-space-500); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { width: var(--p-space-400); } } } -@media #{$p-breakpoints-md-down} { +@media (--p-breakpoints-md-down) { .FiltersWrapperWithAddButton { position: relative; @@ -211,7 +211,7 @@ align-items: center; justify-content: flex-start; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { flex-wrap: wrap; } } @@ -225,7 +225,7 @@ } } -@media #{$p-breakpoints-md-down} { +@media (--p-breakpoints-md-down) { .ClearAll { margin-left: 0; padding-right: var(--p-space-400); diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.module.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.module.scss index 1288bd4166b..e7451de1b6a 100644 --- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.module.scss +++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.module.scss @@ -78,7 +78,7 @@ padding: 0 var(--p-space-200) 0 var(--p-space-300); height: 26px; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding: 0 var(--p-space-100) 0 var(--p-space-200); height: 22px; } @@ -91,7 +91,7 @@ .ActiveFilterButton .ToggleButton { padding-right: var(--p-space-050); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding-right: 0; } } @@ -101,7 +101,7 @@ @include focus-ring; margin-right: var(--p-space-200); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-right: var(--p-space-100); } @@ -112,7 +112,7 @@ } .IconWrapper { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { scale: 0.8; } } diff --git a/polaris-react/src/components/Frame/Frame.module.scss b/polaris-react/src/components/Frame/Frame.module.scss index 9379e6a8a10..fbc33e293c6 100644 --- a/polaris-react/src/components/Frame/Frame.module.scss +++ b/polaris-react/src/components/Frame/Frame.module.scss @@ -17,7 +17,7 @@ $sidebar-breakpoint: 1200px; background-color: transparent; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: calc(100% - var(--pc-frame-offset, 0px)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -42,7 +42,7 @@ $sidebar-breakpoint: 1200px; display: none !important; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: 1; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -128,7 +128,7 @@ $sidebar-breakpoint: 1200px; outline: none; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { display: none; } @@ -156,7 +156,7 @@ $sidebar-breakpoint: 1200px; display: none !important; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY left: var(--pc-frame-offset); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -171,7 +171,7 @@ $sidebar-breakpoint: 1200px; left: 0; width: 100%; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY left: var(--pc-frame-offset); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -185,7 +185,7 @@ $sidebar-breakpoint: 1200px; align-items: stretch; min-width: 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties max-width: calc(100vw - var(--pc-app-provider-scrollbar-width)); // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list @@ -198,7 +198,7 @@ $sidebar-breakpoint: 1200px; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include safe-area-for(padding-bottom, 0, bottom); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { .hasNav & { padding-left: $layout-width-nav-base; @media print { @@ -240,7 +240,7 @@ $sidebar-breakpoint: 1200px; bottom: 0; width: 100%; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY left: var(--pc-frame-offset); @@ -274,7 +274,7 @@ $sidebar-breakpoint: 1200px; display: none !important; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { .hasNav & { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY left: var(--pc-frame-offset); diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss index cb7a5d7892f..6846e66fe09 100644 --- a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss +++ b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.module.scss @@ -30,7 +30,7 @@ .LogoContainer { display: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { display: flex; flex: 0 0 $layout-width-nav-base; align-items: center; @@ -52,11 +52,11 @@ margin: 0 auto; padding: 0 var(--p-space-400); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: 0 var(--p-space-500); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding: 0 var(--p-space-800); } } @@ -118,7 +118,7 @@ .ContextControl { display: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { display: block; width: $layout-width-nav-base; } diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.module.scss b/polaris-react/src/components/Frame/components/Toast/Toast.module.scss index 4247c017a02..69f6a8c32c6 100644 --- a/polaris-react/src/components/Frame/components/Toast/Toast.module.scss +++ b/polaris-react/src/components/Frame/components/Toast/Toast.module.scss @@ -17,7 +17,7 @@ $Backdrop-opacity: 0.88; $borderRadius: var(--p-border-radius-200) ); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: var(--p-space-300); } diff --git a/polaris-react/src/components/Grid/Grid.module.scss b/polaris-react/src/components/Grid/Grid.module.scss index 2a29a0f880a..41d67ae7bfe 100644 --- a/polaris-react/src/components/Grid/Grid.module.scss +++ b/polaris-react/src/components/Grid/Grid.module.scss @@ -22,7 +22,7 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-template-columns: repeat(var(--pc-grid-columns-xs), minmax(0, 1fr)); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-grid-gap-sm, var(--p-space-400)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -31,7 +31,7 @@ grid-template-columns: repeat(var(--pc-grid-columns-sm), minmax(0, 1fr)); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-grid-gap-md, var(--p-space-400)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -40,7 +40,7 @@ grid-template-columns: repeat(var(--pc-grid-columns-md), minmax(0, 1fr)); } - @media #{$p-breakpoints-lg-up} { + @media (--p-breakpoints-lg-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-grid-gap-lg, var(--p-space-400)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -49,7 +49,7 @@ grid-template-columns: repeat(var(--pc-grid-columns-lg), minmax(0, 1fr)); } - @media #{$p-breakpoints-xl-up} { + @media (--p-breakpoints-xl-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-grid-gap-xl, var(--p-space-400)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/Grid/components/Cell/Cell.module.scss b/polaris-react/src/components/Grid/components/Cell/Cell.module.scss index a2746d9105f..7a60de5badf 100644 --- a/polaris-react/src/components/Grid/components/Cell/Cell.module.scss +++ b/polaris-react/src/components/Grid/components/Cell/Cell.module.scss @@ -20,28 +20,28 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-column: var(--pc-column-xs); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-row: var(--pc-row-sm); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-column: var(--pc-column-sm); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-row: var(--pc-row-md); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-column: var(--pc-column-md); } - @media #{$p-breakpoints-lg-up} { + @media (--p-breakpoints-lg-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-row: var(--pc-row-lg); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-column: var(--pc-column-lg); } - @media #{$p-breakpoints-xl-up} { + @media (--p-breakpoints-xl-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY grid-row: var(--pc-row-xl); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -55,7 +55,7 @@ } } -@media #{$p-breakpoints-sm-up} { +@media (--p-breakpoints-sm-up) { @for $i from 1 through 6 { .Cell-#{$i}-column-sm { grid-column-end: span #{$i}; @@ -63,7 +63,7 @@ } } -@media #{$p-breakpoints-md-up} { +@media (--p-breakpoints-md-up) { @for $i from 1 through 6 { .Cell-#{$i}-column-md { grid-column-end: span #{$i}; @@ -71,7 +71,7 @@ } } -@media #{$p-breakpoints-lg-up} { +@media (--p-breakpoints-lg-up) { @for $i from 1 through 12 { .Cell-#{$i}-column-lg { grid-column-end: span #{$i}; @@ -79,7 +79,7 @@ } } -@media #{$p-breakpoints-xl-up} { +@media (--p-breakpoints-xl-up) { @for $i from 1 through 12 { .Cell-#{$i}-column-xl { grid-column-end: span #{$i}; diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.module.scss b/polaris-react/src/components/IndexFilters/IndexFilters.module.scss index 02c0769cffd..e74306a9115 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.module.scss +++ b/polaris-react/src/components/IndexFilters/IndexFilters.module.scss @@ -7,14 +7,14 @@ $spinner-size: 20px; width: 100%; } -@media #{$p-breakpoints-sm-up} { +@media (--p-breakpoints-sm-up) { .IndexFiltersWrapper { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY height: auto !important; } } -@media #{$p-breakpoints-sm-down} { +@media (--p-breakpoints-sm-down) { .IndexFilters.IndexFiltersSticky { position: fixed; z-index: var(--p-z-index-1); @@ -32,7 +32,7 @@ $spinner-size: 20px; flex: 1; height: 44px; - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { height: var(--p-space-1200); } } @@ -88,7 +88,7 @@ $spinner-size: 20px; justify-content: flex-start; padding: var(--p-space-150) var(--p-space-200); - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { position: relative; padding: var(--p-space-200); height: 3rem; diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.module.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.module.scss index a70c2ba9cd8..4eccfa9332c 100644 --- a/polaris-react/src/components/IndexFilters/components/Container/Container.module.scss +++ b/polaris-react/src/components/IndexFilters/components/Container/Container.module.scss @@ -7,7 +7,7 @@ background: var(--p-color-bg-surface); } -@media #{$p-breakpoints-sm-down} { +@media (--p-breakpoints-sm-down) { .Container { border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/polaris-react/src/components/IndexTable/IndexTable.module.scss b/polaris-react/src/components/IndexTable/IndexTable.module.scss index c6518e4c6c0..c2a15b868c9 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.module.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.module.scss @@ -12,7 +12,7 @@ position: relative; border-radius: 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-radius: inherit; border-start-start-radius: 0; border-start-end-radius: 0; @@ -121,7 +121,7 @@ $loading-panel-height: 53px; // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .TableCell-first + .TableCell, .TableHeading-second { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { filter: drop-shadow(1px 0 0 var(--p-color-border-secondary)); } } @@ -287,7 +287,7 @@ $loading-panel-height: 53px; .TableCell-first { left: var(--pc-index-table-checkbox-child-offset); z-index: var(--pc-table-shifted-checkbox-z-index); - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { left: var(--pc-index-table-checkbox-child-offset-sm); } @@ -303,7 +303,7 @@ $loading-panel-height: 53px; top: 0; right: var(--pc-index-table-checkbox-child-offset); background-color: var(--p-color-bg-surface); - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { width: calc( var(--pc-index-table-checkbox-child-offset-sm) + var(--pc-index-table-checkbox-padding-right) @@ -319,7 +319,7 @@ $loading-panel-height: 53px; var(--pc-index-table-checkbox-child-offset) + var(--pc-index-table-cell-padding) ); - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { padding-left: calc( var(--pc-index-table-checkbox-child-offset-sm) + var(--pc-index-table-cell-padding) @@ -1059,7 +1059,7 @@ $loading-panel-height: 53px; .Table-sticky { // stylelint-disable-next-line selector-max-combinators, selector-max-class -- generated by polaris-migrator DO NOT COPY .TableCell-first + .TableCell { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { position: sticky; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: var(--pc-index-table-sticky-cell); @@ -1068,7 +1068,7 @@ $loading-panel-height: 53px; .TableHeading-second { &:not(.TableHeading-unselectable) { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { position: sticky; left: 0; // stylelint-disable-next-line -- second column (first heading item) overlaps other headings on horizontal scroll @@ -1125,7 +1125,7 @@ $loading-panel-height: 53px; // stylelint-disable -- Polaris component custom properties &.Table-sticky .TableRow-child .TableCell:first-child { padding-left: var(--pc-index-table-checkbox-child-offset); - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { padding-left: var(--pc-index-table-checkbox-child-offset-sm); } } @@ -1243,7 +1243,7 @@ $loading-panel-height: 53px; .Table-sticky-scrolling { .TableCell:last-child, .TableHeading-last { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { filter: drop-shadow(-1px 0 0 var(--p-color-border)); } } @@ -1251,7 +1251,7 @@ $loading-panel-height: 53px; .Table-sticky-last { .TableCell:last-child { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { position: sticky; right: 0; background-color: var(--p-color-bg-surface); @@ -1261,7 +1261,7 @@ $loading-panel-height: 53px; } .TableHeading-last { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { position: sticky; right: 0; background-color: var(--p-color-bg-surface-secondary); @@ -1311,7 +1311,7 @@ $loading-panel-height: 53px; .StickyTableHeading-second { padding-left: 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { display: none; } @@ -1329,7 +1329,7 @@ $loading-panel-height: 53px; ); display: none; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { display: block; } } @@ -1397,7 +1397,7 @@ $scroll-bar-size: var(--p-space-200); padding: var(--p-space-050); background-color: var(--p-color-bg-surface); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-bottom-right-radius: var(--p-border-radius-200); border-bottom-left-radius: var(--p-border-radius-200); padding: var(--p-space-050) var(--p-space-200); diff --git a/polaris-react/src/components/Layout/Layout.module.scss b/polaris-react/src/components/Layout/Layout.module.scss index 08d19fcd640..77ce67b4cc9 100644 --- a/polaris-react/src/components/Layout/Layout.module.scss +++ b/polaris-react/src/components/Layout/Layout.module.scss @@ -82,7 +82,7 @@ $relative-size: $primary-basis / $secondary-basis; flex: 1 1 $secondary-basis; padding: var(--p-space-400) var(--p-space-400) 0 0; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding-bottom: var(--p-space-400); } } diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.module.scss b/polaris-react/src/components/LegacyCard/LegacyCard.module.scss index be0e624272b..cd04a8ebb3d 100644 --- a/polaris-react/src/components/LegacyCard/LegacyCard.module.scss +++ b/polaris-react/src/components/LegacyCard/LegacyCard.module.scss @@ -26,7 +26,7 @@ } } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-radius: var(--p-border-radius-200); @include shadow-bevel( @@ -73,11 +73,11 @@ .Header { padding: var(--p-space-400) var(--p-space-400) 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: var(--p-space-200) var(--p-space-400) 0; } - @media print and #{$p-breakpoints-sm-up} { + @media print and (--p-breakpoints-sm-up) { padding: var(--p-space-200) var(--p-space-400) 0; } } @@ -85,7 +85,7 @@ .Section { padding: var(--p-space-200) var(--p-space-400); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: var(--p-space-200) var(--p-space-400); } @@ -106,7 +106,7 @@ .Section-fullWidth { padding: var(--p-space-400) 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: var(--p-space-400) 0; } } @@ -114,7 +114,7 @@ .Section-flush { padding: 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: 0; } } @@ -149,7 +149,7 @@ padding-left: var(--p-space-400); padding-right: var(--p-space-400); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding-left: var(--p-space-400); padding-right: var(--p-space-400); } @@ -179,7 +179,7 @@ padding: 0 var(--p-space-400) var(--p-space-400); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: 0 var(--p-space-400) var(--p-space-400); } diff --git a/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.module.scss b/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.module.scss index 4b85e44bdfb..e468dac099e 100644 --- a/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.module.scss +++ b/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.module.scss @@ -126,7 +126,7 @@ flex-grow: 0; margin-left: var(--p-space-200); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-left: 0; } } diff --git a/polaris-react/src/components/MediaCard/MediaCard.module.scss b/polaris-react/src/components/MediaCard/MediaCard.module.scss index 163308dca36..741ad75e49b 100644 --- a/polaris-react/src/components/MediaCard/MediaCard.module.scss +++ b/polaris-react/src/components/MediaCard/MediaCard.module.scss @@ -10,7 +10,7 @@ flex-flow: column nowrap; } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { flex-flow: column nowrap; } } @@ -21,7 +21,7 @@ &:not(.portrait) { flex-basis: 40%; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { border-top-right-radius: 0; border-top-left-radius: var(--p-border-radius-200); border-bottom-left-radius: var(--p-border-radius-200); @@ -32,7 +32,7 @@ } } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-top-left-radius: var(--p-border-radius-200); border-top-right-radius: var(--p-border-radius-200); } @@ -57,7 +57,7 @@ padding-top: var(--p-space-200); } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { padding-top: var(--p-space-200); } } diff --git a/polaris-react/src/components/Modal/Modal.module.scss b/polaris-react/src/components/Modal/Modal.module.scss index 79e5be9e9b9..47188e0a512 100644 --- a/polaris-react/src/components/Modal/Modal.module.scss +++ b/polaris-react/src/components/Modal/Modal.module.scss @@ -12,7 +12,7 @@ $small-width: 620px; max-width: 100vw; border: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { max-width: $small-width; } } diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.module.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.module.scss index 95203a4c7b6..5bcc210bfb0 100644 --- a/polaris-react/src/components/Modal/components/Dialog/Dialog.module.scss +++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.module.scss @@ -21,7 +21,7 @@ $large-width: 980px; // Resume pointer-events on .Modal below pointer-events: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { justify-content: center; } } @@ -48,12 +48,12 @@ $large-width: 980px; border: var(--p-border-width-025) solid transparent; } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { bottom: 0; max-height: 100%; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { position: relative; max-width: $small-width; margin: 0 auto; @@ -61,7 +61,7 @@ $large-width: 980px; } &.limitHeight { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @media (min-height: ((($height-limit + $vertical-spacing) / 16px) * 1em)) { max-height: $height-limit; @@ -70,24 +70,24 @@ $large-width: 980px; } &.sizeSmall { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { max-width: $xsmall-width; } } &.sizeLarge { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { max-width: calc(100% - var(--p-space-1600)); } - @media #{$p-breakpoints-lg-up} { + @media (--p-breakpoints-lg-up) { max-width: $large-width; } } &.sizeFullScreen { height: 100%; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { height: unset; } } diff --git a/polaris-react/src/components/Navigation/Navigation.module.scss b/polaris-react/src/components/Navigation/Navigation.module.scss index 6bfd469059f..89cbef9f98b 100644 --- a/polaris-react/src/components/Navigation/Navigation.module.scss +++ b/polaris-react/src/components/Navigation/Navigation.module.scss @@ -29,7 +29,7 @@ $nav-max-width: 360px; outline: none; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { max-width: $layout-width-nav-base; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include safe-area-for(max-width, $layout-width-nav-base, left); @@ -45,7 +45,7 @@ $nav-max-width: 360px; margin-bottom: var(--p-space-400); min-height: $top-bar-height; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { display: none; } } @@ -59,7 +59,7 @@ $nav-max-width: 360px; max-width: 100%; padding-top: var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding-top: var(--p-space-400); } @@ -71,7 +71,7 @@ $nav-max-width: 360px; .LogoContainer { display: none; - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { display: flex; flex: 0 0 $top-bar-height; align-items: center; @@ -152,7 +152,7 @@ $nav-max-width: 360px; } &.ItemInnerWrapper-display-actions-on-hover { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { &:is(:hover, :focus-visible) { // stylelint-disable max-nesting-depth, selector-max-class, selector-max-specificity -- set background .SecondaryActions { @@ -181,7 +181,7 @@ $nav-max-width: 360px; background-color: var(--p-color-nav-bg-surface-active); &.ItemInnerWrapper-display-actions-on-hover { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { .SecondaryActions { &::before { // stylelint-disable-next-line -- required for fade effect @@ -211,7 +211,7 @@ $nav-max-width: 360px; background: var(--p-color-nav-bg-surface-selected); &.ItemInnerWrapper-display-actions-on-hover { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable max-nesting-depth, selector-max-class, selector-max-specificity -- set background .SecondaryActions { background: var(--p-color-nav-bg-surface-selected); @@ -258,7 +258,7 @@ $nav-max-width: 360px; } &.ItemInnerWrapper-display-actions-on-hover { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable max-nesting-depth, selector-max-class, selector-max-specificity -- set background .SecondaryActions { background: var(--secondary-actions-on-hover-background-color); @@ -320,7 +320,7 @@ $nav-max-width: 360px; background-color: var(--p-color-nav-bg-surface-active); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-weight: var(--p-font-weight-medium); } } @@ -344,7 +344,7 @@ $nav-max-width: 360px; opacity: 1; transition: opacity var(--p-motion-duration-150) var(--p-motion-ease-out); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { top: 0; } } @@ -369,7 +369,7 @@ $nav-max-width: 360px; margin-top: var(--p-space-200); margin-right: var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin: var(--p-space-100); margin-right: var(--p-space-100); margin-top: var(--p-space-100); @@ -411,7 +411,7 @@ $nav-max-width: 360px; margin-top: var(--p-space-200); margin-bottom: var(--p-space-200); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-325); line-height: var(--p-font-line-height-500); margin-top: var(--p-space-100); @@ -437,7 +437,7 @@ $nav-max-width: 360px; margin-right: var(--p-space-050); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { height: nav(desktop-height); } } @@ -450,7 +450,7 @@ $nav-max-width: 360px; } .ItemInnerWrapper-display-actions-on-hover { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { .SecondaryActions { position: absolute; top: 0; @@ -516,7 +516,7 @@ $nav-max-width: 360px; fill: var(--p-color-icon); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { height: calc(100% - var(--p-space-100)); padding: calc(var(--p-space-100) - var(--p-space-050)); } @@ -631,7 +631,7 @@ $nav-max-width: 360px; color: var(--p-color-text-brand); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-350); line-height: 1; } @@ -798,12 +798,12 @@ $nav-max-width: 360px; margin-top: calc(var(--p-space-200) + var(--p-space-050)); margin-bottom: calc(var(--p-space-200) + var(--p-space-050)); - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { font-size: var(--p-font-size-350); line-height: var(--p-font-line-height-500); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-top: var(--p-space-100); margin-bottom: var(--p-space-100); } @@ -831,7 +831,7 @@ $nav-max-width: 360px; fill: var(--p-color-icon); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { height: nav(desktop-nav-height); // stylelint-disable selector-max-combinators -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss index 1a64a36ffe4..74bff3f06ca 100644 --- a/polaris-react/src/components/Navigation/_variables.scss +++ b/polaris-react/src/components/Navigation/_variables.scss @@ -61,7 +61,7 @@ $nav-animation-variables: ( @include no-focus-ring; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-400); font-weight: var(--p-font-weight-medium); line-height: var(--p-font-line-height-800); @@ -112,7 +112,7 @@ $nav-animation-variables: ( margin-right: var(--p-space-200); margin-bottom: var(--p-space-200); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-top: var(--p-space-100); margin-right: var(--p-space-200); margin-bottom: var(--p-space-100); @@ -191,12 +191,12 @@ $nav-animation-variables: ( line-height: var(--p-font-line-height-500); font-size: var(--p-font-size-350); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-top: var(--p-space-100); margin-bottom: var(--p-space-100); } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY font-size: 15px; line-height: var(--p-font-line-height-500); diff --git a/polaris-react/src/components/Page/Page.module.scss b/polaris-react/src/components/Page/Page.module.scss index 63fba179214..1d6500d540b 100644 --- a/polaris-react/src/components/Page/Page.module.scss +++ b/polaris-react/src/components/Page/Page.module.scss @@ -36,7 +36,7 @@ body { .Content { padding: var(--p-space-200) 0; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding-top: var(--p-space-500); } } diff --git a/polaris-react/src/components/Page/components/Header/Header.module.scss b/polaris-react/src/components/Page/components/Header/Header.module.scss index 04ad29bcf15..c014372f545 100644 --- a/polaris-react/src/components/Page/components/Header/Header.module.scss +++ b/polaris-react/src/components/Page/components/Header/Header.module.scss @@ -8,7 +8,7 @@ $action-menu-rollup-computed-width: 40px; align-self: center; flex: 1 1 auto; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { margin-top: 0; } } @@ -48,7 +48,7 @@ $action-menu-rollup-computed-width: 40px; margin-top: 0; margin-left: var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-left: var(--p-space-200); } } @@ -90,14 +90,14 @@ $action-menu-rollup-computed-width: 40px; white-space: nowrap; .noBreadcrumbs & { - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { margin-left: 0; } } } .AdditionalMetaData { - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { margin-left: calc( var(--p-space-500) + var(--p-space-200) + var(--p-space-100) ); @@ -134,13 +134,13 @@ $action-menu-rollup-computed-width: 40px; } .longTitle { - @media #{$p-breakpoints-lg-down} { + @media (--p-breakpoints-lg-down) { @include condensed-layout; } } .mediumTitle:not(.noBreadcrumbs) { - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { @include condensed-layout; } } @@ -153,14 +153,14 @@ $action-menu-rollup-computed-width: 40px; // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY .RightAlign { margin-bottom: var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-bottom: 0; } } // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY .Row { flex-wrap: wrap-reverse; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { flex-wrap: nowrap; } } diff --git a/polaris-react/src/components/PageActions/PageActions.module.scss b/polaris-react/src/components/PageActions/PageActions.module.scss index d14908d8192..b33488d4a46 100644 --- a/polaris-react/src/components/PageActions/PageActions.module.scss +++ b/polaris-react/src/components/PageActions/PageActions.module.scss @@ -6,7 +6,7 @@ border-top: 0; padding: var(--p-space-400); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: var(--p-space-400) 0; } } diff --git a/polaris-react/src/components/RadioButton/RadioButton.module.scss b/polaris-react/src/components/RadioButton/RadioButton.module.scss index 8c33cd76e0f..d81f276590a 100644 --- a/polaris-react/src/components/RadioButton/RadioButton.module.scss +++ b/polaris-react/src/components/RadioButton/RadioButton.module.scss @@ -103,7 +103,7 @@ // ::before is the selected dot, ::after the focus-ring - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { // stylelint-disable-next-line -- Polaris component custom properties --pc-icon-size-small: 10px; } diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss index f0115d5b5ab..fb8346cadb4 100644 --- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss +++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss @@ -185,7 +185,7 @@ $range-output-size: 32px; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY transform: translateY(calc(-1 * var(--pc-range-slider-output-spacing))); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list transform: translateY( calc(-1 * (var(--pc-range-slider-output-spacing) * 0.5)) diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss index 9efeea9c035..e85ebdd7c75 100644 --- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss +++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss @@ -57,7 +57,7 @@ @include track-dashed; } - @media #{$p-breakpoints-sm-down} { + @media (--p-breakpoints-sm-down) { height: 44px; } } @@ -295,7 +295,7 @@ $range-output-translate-x: calc( // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY transform: translateY(calc(-1 * var(--pc-range-slider-output-spacing))); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- polaris/conventions/polaris/custom-property-allowed-list transform: translateY( calc(-1 * (var(--pc-range-slider-output-spacing) * 0.4)) diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.module.scss b/polaris-react/src/components/ResourceItem/ResourceItem.module.scss index a5ac8a189fc..fcbaafee50e 100644 --- a/polaris-react/src/components/ResourceItem/ResourceItem.module.scss +++ b/polaris-react/src/components/ResourceItem/ResourceItem.module.scss @@ -129,7 +129,7 @@ z-index: var(--pc-resource-item-clickable-stacking-order); border-radius: var(--p-border-radius-0); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-radius: var(--p-border-radius-300); &:first-of-type { @@ -146,7 +146,7 @@ &:only-child { border-radius: var(--p-border-radius-0); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { border-radius: var(--p-border-radius-300); } } @@ -155,7 +155,7 @@ &.selectable { border-radius: var(--p-border-radius-0); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { // stylelint-disable-next-line -- set border radius for last selectable item to match ResourceList border radius &:last-child { border-bottom-left-radius: var(--p-border-radius-300); diff --git a/polaris-react/src/components/ResourceList/ResourceList.module.scss b/polaris-react/src/components/ResourceList/ResourceList.module.scss index 2b46ec6569a..a5b03997e91 100644 --- a/polaris-react/src/components/ResourceList/ResourceList.module.scss +++ b/polaris-react/src/components/ResourceList/ResourceList.module.scss @@ -71,7 +71,7 @@ $item-wrapper-loading-height: 64px; align-items: center; padding: var(--p-space-200) var(--p-space-300); // We reduce the min-height here to account for the Select shrinking to 32px at this breakpoint. - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { min-height: 48px; } } @@ -113,7 +113,7 @@ $item-wrapper-loading-height: 64px; padding-right: var(--p-space-200); } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { position: relative; left: auto; flex: 0 1 auto; @@ -147,7 +147,7 @@ $item-wrapper-loading-height: 64px; display: none; } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY .HeaderWrapper-hasSelect &, .HeaderWrapper-hasAlternateTool.HeaderWrapper-hasSelect &, @@ -174,7 +174,7 @@ $item-wrapper-loading-height: 64px; margin-top: var(--p-space-400); pointer-events: none; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { flex: 0 1 auto; align-self: flex-start; } @@ -210,7 +210,7 @@ $item-wrapper-loading-height: 64px; // container height: 100%; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { flex: 1; display: block; } @@ -220,7 +220,7 @@ $item-wrapper-loading-height: 64px; position: relative; flex: none; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { display: none; } } diff --git a/polaris-react/src/components/Select/Select.module.scss b/polaris-react/src/components/Select/Select.module.scss index 21b5f39eb07..dd9473bfe89 100644 --- a/polaris-react/src/components/Select/Select.module.scss +++ b/polaris-react/src/components/Select/Select.module.scss @@ -74,12 +74,12 @@ font-size: var(--p-font-size-400); line-height: var(--p-font-line-height-600); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { line-height: var(--p-font-line-height-500); font-size: var(--p-font-size-325); } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { // stylelint-disable-next-line selector-max-combinators, selector-max-type -- generated by polaris-migrator DO NOT COPY div > span { font-size: var(--p-font-size-400); @@ -123,7 +123,7 @@ appearance: none; border: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-350); line-height: var(--p-font-line-height-500); } diff --git a/polaris-react/src/components/SettingAction/SettingAction.module.scss b/polaris-react/src/components/SettingAction/SettingAction.module.scss index 0c7ade9f537..f84b460525a 100644 --- a/polaris-react/src/components/SettingAction/SettingAction.module.scss +++ b/polaris-react/src/components/SettingAction/SettingAction.module.scss @@ -24,7 +24,7 @@ $feature-width: 350px; } .Action { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin-top: var(--p-space-600); } } diff --git a/polaris-react/src/components/Sheet/Sheet.module.scss b/polaris-react/src/components/Sheet/Sheet.module.scss index 9467d505aae..a566af68c30 100644 --- a/polaris-react/src/components/Sheet/Sheet.module.scss +++ b/polaris-react/src/components/Sheet/Sheet.module.scss @@ -14,7 +14,7 @@ $sheet-desktop-width: 380px; border-left: var(--p-border-width-025) solid var(--p-color-border-secondary); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { right: 0; width: $sheet-desktop-width; } @@ -32,7 +32,7 @@ $sheet-desktop-width: 380px; bottom: 0; left: 0; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { left: auto; width: $sheet-desktop-width; } diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.module.scss b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.module.scss index 231ddce8348..f96b15c8c12 100644 --- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.module.scss +++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.module.scss @@ -4,7 +4,7 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY height: var(--pc-skeleton-display-text-height); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY height: var(--pc-skeleton-display-text-height-not-condensed); } diff --git a/polaris-react/src/components/Tabs/Tabs.module.scss b/polaris-react/src/components/Tabs/Tabs.module.scss index 73db7ca149b..5b67ad8cb7e 100644 --- a/polaris-react/src/components/Tabs/Tabs.module.scss +++ b/polaris-react/src/components/Tabs/Tabs.module.scss @@ -7,7 +7,7 @@ } .Outer { - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { max-width: 100%; overflow: hidden; height: unset; @@ -16,7 +16,7 @@ } .Wrapper { - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { overflow: auto; -webkit-overflow-scrolling: touch; padding: var(--p-space-200); @@ -24,7 +24,7 @@ } .WrapperWithNewButton { - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { position: relative; display: inline-flex; padding-right: var(--p-space-800); @@ -32,7 +32,7 @@ } .ButtonWrapper { - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { display: flex; align-items: center; justify-content: flex-start; @@ -48,7 +48,7 @@ list-style: none; gap: var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { padding: 0 var(--p-space-100); flex-wrap: wrap; align-items: stretch; @@ -123,7 +123,7 @@ fill: currentColor; } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-300); line-height: var(--p-font-line-height-400); height: 1.75rem; @@ -309,7 +309,7 @@ .NewTab { padding: 0 var(--p-space-200) 0 var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { position: absolute; right: 0; top: 0; diff --git a/polaris-react/src/components/Tag/Tag.module.scss b/polaris-react/src/components/Tag/Tag.module.scss index bc799b26fe9..f8ec864a1ba 100644 --- a/polaris-react/src/components/Tag/Tag.module.scss +++ b/polaris-react/src/components/Tag/Tag.module.scss @@ -58,7 +58,7 @@ $button-size: 20px; color: var(--p-color-text-disabled); } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { font-size: var(--p-font-size-300); } } @@ -81,7 +81,7 @@ $button-size: 20px; padding-inline-end: 0; } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { min-height: $height; } } @@ -96,7 +96,7 @@ $button-size: 20px; white-space: nowrap; vertical-align: middle; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { font-size: var(--p-font-size-300); } } @@ -166,7 +166,7 @@ $button-size: 20px; font-size: var(--p-font-size-325); line-height: var(--p-font-line-height-500); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { font-size: var(--p-font-size-300); } } diff --git a/polaris-react/src/components/TextField/TextField.module.scss b/polaris-react/src/components/TextField/TextField.module.scss index b32a8c1b501..c0e7164ea38 100644 --- a/polaris-react/src/components/TextField/TextField.module.scss +++ b/polaris-react/src/components/TextField/TextField.module.scss @@ -214,7 +214,7 @@ $spinner-icon-size: 12px; color: var(--p-color-text); align-items: center; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-325); line-height: var(--p-font-line-height-500); } @@ -340,7 +340,7 @@ $spinner-icon-size: 12px; color: var(--p-color-text-secondary); user-select: none; line-height: var(--p-font-line-height-600); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-325); line-height: var(--p-font-line-height-500); } @@ -377,7 +377,7 @@ $spinner-icon-size: 12px; padding-right: 0; } - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { max-height: 328px; } } @@ -391,7 +391,7 @@ $spinner-icon-size: 12px; text-align: right; line-height: var(--p-font-line-height-600); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-325); line-height: var(--p-font-line-height-500); } diff --git a/polaris-react/src/components/TopBar/TopBar.module.scss b/polaris-react/src/components/TopBar/TopBar.module.scss index d4082daf8bd..8c9a82e2754 100644 --- a/polaris-react/src/components/TopBar/TopBar.module.scss +++ b/polaris-react/src/components/TopBar/TopBar.module.scss @@ -16,7 +16,7 @@ $right-column: 1fr; background-color: var(--p-color-bg-inverse); gap: var(--p-space-100); - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { gap: var(--p-space-600); grid-template-columns: $left-column-md-up $search-column $right-column; } @@ -41,7 +41,7 @@ $right-column: 1fr; .LogoDisplayControl { display: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { display: flex; } } @@ -78,12 +78,12 @@ $right-column: 1fr; .ContextControl { display: none; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { width: $layout-width-nav-base; display: block; } - @media #{$p-breakpoints-xl-up} { + @media (--p-breakpoints-xl-up) { width: $layout-width-nav-base; } } @@ -118,7 +118,7 @@ $right-column: 1fr; width: calc(100% + var(--p-space-500)); height: calc(100% + var(--p-space-500)); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { display: none; } @@ -149,7 +149,7 @@ $right-column: 1fr; justify-content: center; height: 100%; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { position: relative; } } diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss index a219022b589..d65a2015e22 100644 --- a/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss +++ b/polaris-react/src/components/TopBar/components/Menu/Menu.module.scss @@ -72,7 +72,7 @@ $activator-variables: ( } } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { margin-right: var(--p-space-200); background-color: var(--p-color-bg-inverse); diff --git a/polaris-react/src/components/TopBar/components/Search/Search.module.scss b/polaris-react/src/components/TopBar/components/Search/Search.module.scss index 3254847a42f..866c0137c40 100644 --- a/polaris-react/src/components/TopBar/components/Search/Search.module.scss +++ b/polaris-react/src/components/TopBar/components/Search/Search.module.scss @@ -12,7 +12,7 @@ box-shadow: var(--p-shadow-600); overflow: hidden; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { position: absolute; top: 100%; max-width: $search-max-width; @@ -20,7 +20,7 @@ border-radius: var(--p-border-radius-200); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { margin: var(--p-space-100) var(--p-space-800) 0; } } @@ -41,7 +41,7 @@ max-height: calc(100vh - #{$top-bar-height}); margin: 0; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { max-height: 60vh; } } diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss index 877085f9941..135a3ae7d7c 100644 --- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss +++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.module.scss @@ -11,7 +11,7 @@ line-height: var(--p-font-line-height-400); } - @media #{$p-breakpoints-md-down} { + @media (--p-breakpoints-md-down) { display: none; } } diff --git a/polaris-react/src/styles/shared/_page.scss b/polaris-react/src/styles/shared/_page.scss index d6880766d9b..ecf8ae8c9dd 100644 --- a/polaris-react/src/styles/shared/_page.scss +++ b/polaris-react/src/styles/shared/_page.scss @@ -6,7 +6,7 @@ $page-max-width: $layout-width-primary-max + $layout-width-secondary-max + padding: 0; max-width: $page-max-width; - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { padding: 0 var(--p-space-600); } } diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss index ae7dccd8f8f..093947dac6c 100644 --- a/polaris-react/src/styles/shared/_responsive-props.scss +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -26,14 +26,14 @@ #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); - @media #{$p-breakpoints-sm-up} { + @media (--p-breakpoints-sm-up) { #{$declarationProp}: var( --pc-#{$componentName}-#{$componentProp}-sm, var(--pc-#{$componentName}-#{$componentProp}-xs) ); } - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { #{$declarationProp}: var( --pc-#{$componentName}-#{$componentProp}-md, var( @@ -43,7 +43,7 @@ ); } - @media #{$p-breakpoints-lg-up} { + @media (--p-breakpoints-lg-up) { #{$declarationProp}: var( --pc-#{$componentName}-#{$componentProp}-lg, var( @@ -56,7 +56,7 @@ ); } - @media #{$p-breakpoints-xl-up} { + @media (--p-breakpoints-xl-up) { #{$declarationProp}: var( --pc-#{$componentName}-#{$componentProp}-xl, var( diff --git a/polaris-react/src/styles/shared/_typography.scss b/polaris-react/src/styles/shared/_typography.scss index ee212016636..355c8b9da9c 100644 --- a/polaris-react/src/styles/shared/_typography.scss +++ b/polaris-react/src/styles/shared/_typography.scss @@ -5,7 +5,7 @@ border: none; letter-spacing: initial; - @media #{$p-breakpoints-md-up} { + @media (--p-breakpoints-md-up) { font-size: var(--p-font-size-350); } }