From 0b05fc9bd317e9da8bcbe206e0aa2dd956e76739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Thu, 15 Dec 2022 21:21:59 +0100
Subject: [PATCH] Use allBelow and allAbove

---
 .../src/shared/menu/SearchBar.module.scss                   | 6 ++++--
 .../src/components/accordion/style/_accordion.scss          | 6 +++---
 .../src/components/date-picker/style/_date-picker.scss      | 4 ++--
 .../src/components/dropdown/style/_dropdown.scss            | 2 +-
 .../src/components/form-row/style/_form-row.scss            | 6 +++---
 .../src/components/toggle-button/style/_toggle-button.scss  | 2 +-
 .../src/fragments/drawer-list/style/_drawer-list.scss       | 2 +-
 7 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss
index f7f4a0cc63f..4301b835032 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss
+++ b/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss
@@ -1,7 +1,9 @@
+@import '@dnb/eufemia/src/style/core/utilities.scss';
+
 .autocompleteStyle {
   :global {
     margin-right: 1rem;
-    @media (max-width: 40em) {
+    @include allBelow(small) {
       margin-right: 0.5rem;
     }
 
@@ -9,7 +11,7 @@
       &,
       input {
         width: 40vw;
-        @media (max-width: 40em) {
+        @include allBelow(small) {
           width: 50vw;
         }
       }
diff --git a/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss b/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss
index d554236a5ea..6402e3e339a 100644
--- a/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss
+++ b/packages/dnb-eufemia/src/components/accordion/style/_accordion.scss
@@ -145,7 +145,7 @@
     position: static;
     max-width: 60rem;
 
-    @media screen and (min-width: 40em) {
+    @include allAbove(small) {
       &__header {
         width: 40%; // 40% / 60%
       }
@@ -171,7 +171,7 @@
     // }
   }
   &-group--single-container & > &__header &__header__icon {
-    @media screen and (min-width: 40em) {
+    @include allAbove(small) {
       transform: rotate(-90deg);
     }
   }
@@ -181,7 +181,7 @@
       &__children {
         max-width: 60rem;
 
-        @media screen and (min-width: 40em) {
+        @include allAbove(small) {
           position: relative;
           display: flex;
           flex-direction: column;
diff --git a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss
index 072b0e1e289..e08cd7a5c18 100644
--- a/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss
+++ b/packages/dnb-eufemia/src/components/date-picker/style/_date-picker.scss
@@ -224,8 +224,8 @@
     user-select: none;
     -webkit-user-select: none; // Safari / Touch fix
 
-    // Wrap aleady on 50em, because 40em is too narrow in range mode
-    @media screen and (max-width: 60em) {
+    // Wrap already on 50em, because 40em is too narrow in range mode
+    @include allBelow(medium) {
       flex-direction: column;
     }
   }
diff --git a/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss
index d4848c87f1c..8850839ab98 100644
--- a/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss
+++ b/packages/dnb-eufemia/src/components/dropdown/style/_dropdown.scss
@@ -143,7 +143,7 @@
       border-radius: 50%;
     }
   }
-  @media screen and (min-width: 40em) {
+  @include allAbove(small) {
     &--action-menu &__shell &__text {
       padding: 0 0.5rem;
     }
diff --git a/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss b/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss
index f883d71811f..a5c84e3b486 100644
--- a/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss
+++ b/packages/dnb-eufemia/src/components/form-row/style/_form-row.scss
@@ -62,7 +62,7 @@
         grid-row: row2-start / row2-end;
 
         // if not mobile
-        @media screen and (min-width: 40em) {
+        @include allAbove(small) {
           &--default {
             margin-top: -1.5rem;
           }
@@ -103,7 +103,7 @@
 
         margin-right: 1rem;
 
-        @media screen and (min-width: 40em) {
+        @include allAbove(small) {
           text-align: right;
         }
       }
@@ -133,7 +133,7 @@
     }
   }
   &--centered#{&}:not(#{&}--vertical) &__content {
-    @media screen and (min-width: 40em) {
+    @include allAbove(small) {
       align-items: center;
     }
   }
diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss b/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss
index 5425114101c..f6aa07e23d9 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss
+++ b/packages/dnb-eufemia/src/components/toggle-button/style/_toggle-button.scss
@@ -185,7 +185,7 @@
   }
 
   // default spacing for a single toggle button
-  @media screen and (min-width: 40em) {
+  @include allAbove(small) {
     .dnb-form-label + & {
       transform: translateY(-0.5rem);
     }
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss
index 67c4e230bd2..13b71798a83 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/_drawer-list.scss
@@ -402,7 +402,7 @@
       align-items: center;
     }
   }
-  @media screen and (min-width: 40em) {
+  @include allAbove(small) {
     &--action-menu#{&}--is-popup#{&}--left &__list {
       left: 0;
     }