Use traditional syntax for media queries (#707)

Amsterdam · Nov 1, 2023 · 2fcdf49 · 2fcdf49
1 parent 3d25409
commit 2fcdf49
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 34 deletions.
diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss
@@ -30,7 +30,7 @@
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 

diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss
@@ -34,7 +34,7 @@
   font-weight: var(--amsterdam-alert-title-font-weight);
   line-height: var(--amsterdam-alert-title-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-alert-title-wide-font-size);
   }
 

diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss
@@ -29,7 +29,7 @@
     content: close-quote;
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-blockquote-wide-font-size);
   }
 

diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -18,7 +18,7 @@
   font-weight: var(--amsterdam-breadcrumb-font-weight);
   line-height: var(--amsterdam-breadcrumb-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-breadcrumb-wide-font-size);
   }
 }

diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
@@ -13,7 +13,7 @@
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
 

diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss
@@ -34,7 +34,7 @@
     width: 100%;
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
   }
 }
@@ -65,7 +65,7 @@
     }
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
 

diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss
@@ -16,7 +16,7 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
 

diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss
@@ -25,7 +25,7 @@
   font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
@@ -34,7 +34,7 @@
   font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
@@ -43,7 +43,7 @@
   font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
@@ -52,7 +52,7 @@
   font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }

diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/icon/icon.scss
@@ -17,7 +17,7 @@
 .amsterdam-icon--size-3 {
   height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
   }
 }
@@ -26,15 +26,15 @@
   height: var(--amsterdam-icon-size-3-icon-size-narrow);
   width: var(--amsterdam-icon-size-3-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-3-icon-size-wide);
     width: var(--amsterdam-icon-size-3-icon-size-wide);
   }
 }
 .amsterdam-icon--size-4 {
   height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
   }
 }
@@ -43,7 +43,7 @@
   height: var(--amsterdam-icon-size-4-icon-size-narrow);
   width: var(--amsterdam-icon-size-4-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-4-icon-size-wide);
     width: var(--amsterdam-icon-size-4-icon-size-wide);
   }
@@ -52,7 +52,7 @@
 .amsterdam-icon--size-5 {
   height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
   }
 }
@@ -61,7 +61,7 @@
   height: var(--amsterdam-icon-size-5-icon-size-narrow);
   width: var(--amsterdam-icon-size-5-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-5-icon-size-wide);
     width: var(--amsterdam-icon-size-5-icon-size-wide);
   }
@@ -70,7 +70,7 @@
 .amsterdam-icon--size-6 {
   height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
   }
 }
@@ -79,7 +79,7 @@
   height: var(--amsterdam-icon-size-6-icon-size-narrow);
   width: var(--amsterdam-icon-size-6-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-6-icon-size-wide);
     width: var(--amsterdam-icon-size-6-icon-size-wide);
   }
@@ -88,7 +88,7 @@
 .amsterdam-icon--size-7 {
   height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
   }
 }
@@ -97,7 +97,7 @@
   height: var(--amsterdam-icon-size-7-icon-size-narrow);
   width: var(--amsterdam-icon-size-7-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-7-icon-size-wide);
     width: var(--amsterdam-icon-size-7-icon-size-wide);
   }

diff --git a/packages/css/src/link/link.scss b/packages/css/src/link/link.scss
@@ -34,7 +34,7 @@
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-link-standalone-wide-font-size);
   }
 }
@@ -70,7 +70,7 @@
     text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
   }
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-link-in-list-wide-font-size);
   }
 }

diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/ordered-list/ordered-list.scss
@@ -31,7 +31,7 @@
   line-height: var(--amsterdam-ordered-list-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-ordered-list-wide-font-size);
   }
 

diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/page-heading/page-heading.scss
@@ -20,7 +20,7 @@
   font-weight: var(--amsterdam-page-heading-font-weight);
   line-height: var(--amsterdam-page-heading-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-page-heading-wide-font-size);
   }
 

diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/page-menu/page-menu.scss
@@ -49,7 +49,7 @@
   text-decoration: var(--amsterdam-page-menu-item-text-decoration);
   touch-action: manipulation;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-page-menu-item-wide-font-size);
   }
 }

diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/paragraph/paragraph.scss
@@ -18,7 +18,7 @@
   font-weight: var(--amsterdam-paragraph-font-weight);
   line-height: var(--amsterdam-paragraph-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-wide-font-size);
   }
 
@@ -29,7 +29,7 @@
   font-size: var(--amsterdam-paragraph-small-narrow-font-size);
   line-height: var(--amsterdam-paragraph-small-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-small-wide-font-size);
   }
 }
@@ -38,7 +38,7 @@
   font-size: var(--amsterdam-paragraph-large-narrow-font-size);
   line-height: var(--amsterdam-paragraph-large-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-large-wide-font-size);
   }
 }

diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/top-task-link/top-task-link.scss
@@ -26,7 +26,7 @@
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
   line-height: var(--amsterdam-top-task-link-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-label-wide-font-size);
   }
 
@@ -47,7 +47,7 @@
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
   line-height: var(--amsterdam-top-task-link-description-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-description-wide-font-size);
   }
 

diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/unordered-list/unordered-list.scss
@@ -31,7 +31,7 @@
   line-height: var(--amsterdam-unordered-list-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-unordered-list-wide-font-size);
   }
 

diff --git a/storybook/storybook-docs/src/breakpoint.stories.mdx b/storybook/storybook-docs/src/breakpoint.stories.mdx
@@ -14,7 +14,7 @@ Bijvoorbeeld:
 .class {
   /* Your narrow styling */
 
-  @media screen and (width > $amsterdam-breakpoint-wide) {
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
     /* Your wide styling */
   }
 }