Use min-width instead of range syntax, remove unnecessary classes

Amsterdam · Oct 26, 2023 · bcf7ab3 · bcf7ab3
1 parent dfbb19d
commit bcf7ab3
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 14 deletions.
diff --git a/packages/css/src/grid-cell/grid-cell.scss b/packages/css/src/grid-cell/grid-cell.scss
@@ -18,17 +18,7 @@
     grid-column-start: $i;
   }
 
-  @media screen and (width < $amsterdam-breakpoint-medium) {
-    .amsterdam-page-grid > .amsterdam-narrow-grid-span-#{$i} {
-      grid-column-end: span $i;
-    }
-
-    .amsterdam-page-grid > .amsterdam-narrow-grid-start-#{$i} {
-      grid-column-start: $i;
-    }
-  }
-
-  @media screen and ($amsterdam-breakpoint-medium <= width < $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
     .amsterdam-page-grid > .amsterdam-medium-grid-span-#{$i} {
       grid-column-end: span $i;
     }
@@ -38,7 +28,7 @@
     }
   }
 
-  @media screen and (width >= $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
     .amsterdam-page-grid > .amsterdam-wide-grid-span-#{$i} {
       grid-column-end: span $i;
     }

diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx
@@ -32,7 +32,7 @@ export const gridColumnClassNames = (start?: PageGridColumnValue, span?: PageGri
       const [narrow, medium, wide] = start
 
       classes.push(
-        `amsterdam-narrow-grid-start-${narrow}`,
+        `amsterdam-grid-start-${narrow}`,
         `amsterdam-medium-grid-start-${medium}`,
         `amsterdam-wide-grid-start-${wide}`,
       )
@@ -46,7 +46,7 @@ export const gridColumnClassNames = (start?: PageGridColumnValue, span?: PageGri
       const [narrow, medium, wide] = span
 
       classes.push(
-        `amsterdam-narrow-grid-span-${narrow}`,
+        `amsterdam-grid-span-${narrow}`,
         `amsterdam-medium-grid-span-${medium}`,
         `amsterdam-wide-grid-span-${wide}`,
       )