Merge pull request #663 from danskernesdigitalebibliotek/fix/DDFLSBP-…

…679-style-link-fra-gebyrsiden-til-overskredne-lan-pa-mobil Adjust layout for .warning-bar component for smaller screens [DDFLSBP-679]
danskernesdigitalebibliotek · Jul 2, 2024 · a2d69f6 · a2d69f6
2 parents c9d44ff + 4ad93db
commit a2d69f6
Showing 1 changed file with 42 additions and 17 deletions.
diff --git a/src/stories/Library/warning-status/warning-status.scss b/src/stories/Library/warning-status/warning-status.scss
@@ -2,32 +2,57 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
   padding: $s-md;
 
   @include media-query__small {
+    flex-direction: row;
     padding: $s-md $s-xl;
   }
-}
 
-.warning-bar__icon {
-  margin-right: $s-md;
-  min-width: 40px;
-}
+  &__icon {
+    margin-right: $s-md;
+    min-width: 40px;
+  }
 
-.warning-bar__left {
-  display: flex;
-  align-items: center;
-}
+  &__left {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: flex-start;
 
-.warning-bar__right {
-  display: flex;
-  align-items: center;
-}
+    @include media-query__small {
+      width: auto;
+    }
+  }
 
-.warning-bar__owes {
-  margin-right: $s-sm;
+  &__right {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: $s-md;
 
-  @include media-query__small {
-    margin-right: $s-lg;
+    &:empty {
+      margin-top: 0;
+    }
+
+    @include media-query__small {
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      width: auto;
+      margin-top: 0;
+    }
+  }
+
+  &__owes {
+    margin-right: $s-sm;
+    margin-bottom: $s-sm;
+
+    @include media-query__small {
+      margin-right: $s-lg;
+      margin-bottom: 0;
+    }
   }
 }