chore(documentation): update color-swatches for better responsiveness

swisspost · Apr 3, 2024 · 1d8f69c · 1d8f69c
1 parent fcd1d63
commit 1d8f69c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 4 deletions.
diff --git a/packages/documentation/src/stories/foundation/color/color.styles.scss b/packages/documentation/src/stories/foundation/color/color.styles.scss
@@ -2,7 +2,11 @@
 
 .color-swatch__section {
   display: grid;
-  grid-template-columns: minmax(max-content, 25%) 20% auto;
+  grid-template-columns: minmax(max-content, 25%) minmax(100px, auto) minmax(max-content, 50%);
+
+  @include post.media-breakpoint-down(md) {
+    display: block;
+  }
 }
 
 .color-swatch {
@@ -27,6 +31,7 @@
       }
     }
     .description__value {
+      margin: 0;
       font-weight: post.$font-weight-light;
       font-size: post.$font-size-14;
     }
@@ -41,7 +46,7 @@
       height: 100%;
       border-radius: post.$border-radius;
       box-shadow: post.$elevation-1;
-      min-height: 1em * post.$line-height-base * 2;
+      min-height: 1rem * post.$line-height-base * 2.5;
       font-size: post.$size-small-regular;
 
       > div {
@@ -80,10 +85,35 @@
       }
     }
   }
+
   .black {
     background-color: post.$black;
   }
   .white {
     background-color: post.$white;
   }
+
+  @include post.media-breakpoint-down(md) {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: 40% 60%;
+
+    .color-swatch__description {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    .color-swatch__color {
+      grid-row: 2;
+      grid-column: 1 / 3;
+      padding-top: 0;
+      padding-inline: 0;
+      border-top: 0 none;
+    }
+
+    .color-swatch__props {
+      grid-row: 1;
+      grid-column: 2;
+    }
+  }
 }
diff --git a/packages/documentation/src/stories/utilities/background/background.styles.scss b/packages/documentation/src/stories/utilities/background/background.styles.scss
@@ -2,7 +2,11 @@
 
 .background-container__section {
   display: grid;
-  grid-template-columns: minmax(max-content, 25%) 20% auto;
+  grid-template-columns: minmax(max-content, 25%) minmax(100px, auto) minmax(max-content, 50%);
+
+  @include post.media-breakpoint-down(md) {
+    display: block;
+  }
 }
 
 .background-container {
@@ -36,7 +40,7 @@
       height: 100%;
       border-radius: post.$border-radius;
       box-shadow: post.$elevation-1;
-      min-height: 1em * post.$line-height-base * 2;
+      min-height: 1rem * post.$line-height-base * 2.5;
     }
   }
 
@@ -53,4 +57,28 @@
       }
     }
   }
+
+  @include post.media-breakpoint-down(md) {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: 40% 60%;
+
+    .background-container__description {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    .background-container__background {
+      grid-row: 2;
+      grid-column: 1 / 3;
+      padding-top: 0;
+      padding-inline: 0;
+      border-top: 0 none;
+    }
+
+    .background-container__props {
+      grid-row: 1;
+      grid-column: 2;
+    }
+  }
 }