Update component files to use CSS range syntax (#5316)

* Update _patterns_article-pagination.scss * Update _patterns_matrix.scss * Update _patterns_navigation.scss * Update _patterns_pull-quotes.scss * Update _patterns_table-mobile-card.scss
canonical · Aug 20, 2024 · 2e1b69c · 2e1b69c
1 parent 416588d
commit 2e1b69c
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/scss/_patterns_article-pagination.scss b/scss/_patterns_article-pagination.scss
@@ -55,7 +55,7 @@
     padding-left: $sp-xx-large;
     text-align: left;
 
-    @media (max-width: $breakpoint-x-small - 1) {
+    @media (width < $breakpoint-x-small) {
       margin-right: 0;
       width: auto;
 
@@ -84,7 +84,7 @@
     padding-right: $sp-xx-large;
     text-align: right;
 
-    @media (max-width: $breakpoint-x-small - 1) {
+    @media (width < $breakpoint-x-small) {
       width: 100%;
     }
 

diff --git a/scss/_patterns_matrix.scss b/scss/_patterns_matrix.scss
@@ -31,7 +31,7 @@
       width: 33.333%;
     }
 
-    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+    @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
       flex-direction: column;
 
       &:nth-child(2),
@@ -142,7 +142,7 @@
   .p-matrix__desc {
     margin-bottom: $spv-nudge-compensation;
 
-    @media (max-width: $breakpoint-heading-threshold - 1) {
+    @media (width < $breakpoint-heading-threshold) {
       margin-top: -#{$sp-unit};
     }
 

diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss
@@ -688,7 +688,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
       top: $spv--large * 2 + map-get($line-heights, default-text);
     }
 
-    @media (max-width: ($breakpoint-navigation-threshold - 1)) {
+    @media (width < $breakpoint-navigation-threshold) {
       box-shadow: none;
     }
   }

diff --git a/scss/_patterns_pull-quotes.scss b/scss/_patterns_pull-quotes.scss
@@ -109,7 +109,7 @@
   .p-pull-quote--large {
     .p-pull-quote__quote {
       &:first-of-type::before {
-        @media (max-width: $breakpoint-heading-threshold - 1) {
+        @media (width < $breakpoint-heading-threshold) {
           top: 0.75rem;
         }
       }

diff --git a/scss/_patterns_table-mobile-card.scss b/scss/_patterns_table-mobile-card.scss
@@ -10,7 +10,7 @@
       text-align: left;
     }
 
-    @media (max-width: $threshold-6-12-col - 1) {
+    @media (width < $threshold-6-12-col) {
       @supports (display: grid) {
         thead {
           display: none;