remove breakpoints mixins

basher · Nov 11, 2024 · 25dd82f · 25dd82f
1 parent d86444f
commit 25dd82f
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 66 deletions.
diff --git a/ui/src/css/components/_banner.scss b/ui/src/css/components/_banner.scss
@@ -31,8 +31,9 @@ Dependencies.
             padding-inline: var(--gutter-s);
         }
 
+        // TODO: Replace with container query.
         /* stylelint-disable-next-line order/order */
-        @include bp-medium {
+        @media (width > 48em) {
             display: grid;
             grid-template-areas: 'fullwidth';
             place-items: center start;
@@ -57,7 +58,8 @@ Dependencies.
     }
 
     &__overlay {
-        @include bp-medium {
+        // TODO: Replace with container query.
+        @media (width > 48em) {
             // Example, so text is legible above image.
             background: linear-gradient(
                 to right,
@@ -69,7 +71,8 @@ Dependencies.
         }
 
         + .banner__content {
-            @include bp-medium {
+            // TODO: Replace with container query.
+            @media (width > 48em) {
                 /* stylelint-disable-next-line max-nesting-depth */
                 @media (prefers-color-scheme: dark) {
                     --color-text: 0 0% 20%;

diff --git a/ui/src/css/global/_typography.scss b/ui/src/css/global/_typography.scss
@@ -3,7 +3,7 @@
 Dependencies.
 ----------------------------------------------------------------------------
 */
-@use '../mixins' as *;
+// @use '../mixins' as *;
 @use '../base' as *;
 
 /*

diff --git a/ui/src/css/layouts/_grid.scss b/ui/src/css/layouts/_grid.scss
@@ -41,7 +41,7 @@ Dependencies.
 
     // Fallback.
     @supports not (container-type: inline-size) {
-        @include bp-medium {
+        @media (min-width: 48.0625em) {
             grid-template-columns:
                 minmax(var(--grid-item-min-width), var(--grid-asymmetric-col1))
                 minmax(var(--grid-item-min-width), var(--grid-asymmetric-col2));

diff --git a/ui/src/css/mixins/_breakpoints.scss b/ui/src/css/mixins/_breakpoints.scss
diff --git a/ui/src/css/mixins/_index.scss b/ui/src/css/mixins/_index.scss
@@ -1,3 +1,2 @@
-@forward 'breakpoints';
 @forward 'focus';
 @forward 'form-field-reset';
diff --git a/ui/src/css/web-components/_webui-tabs.scss b/ui/src/css/web-components/_webui-tabs.scss
@@ -21,7 +21,8 @@ webui-tabs {
     }
 
     &[data-vertical] {
-        @include bp-medium {
+        // TODO: Replace with container query.
+        @media (width > 48em) {
             display: grid;
             gap: var(--gutter-m);
             grid-template-areas: 'tabs content';