Merge branch 'develop' into feature/UIDS-1224-add-async-searchable-mu…

…ltiSelect-and-searchable-multiSelect-types
user-interviews · May 23, 2024 · a813b1d · a813b1d
2 parents 6448958 + 8b3e758
commit a813b1d
Show file tree

Hide file tree

Showing 14 changed files with 942 additions and 17 deletions.
diff --git a/scss/cards.scss b/scss/cards.scss
@@ -1,7 +1,3 @@
 $card-xs-spacing: 16px;
 $card-sm-spacing: 20px;
 $card-spacing: 24px;
-$card-width: 896px;
-$card-width-md: 640px;
-$card-width-sm: 512px;
-$card-width-xs: 240px;
diff --git a/scss/css_properties.scss b/scss/css_properties.scss
@@ -255,4 +255,9 @@
   --z-index-overlay: calc(var(--z-index-fixed) - 1); // Sits just under --z-index-fixed
   --z-index-table-cell-sticky-column: var(--z-index-10); // Sits under --z-index-table-foot-sticky-row
   --z-index-table-foot-sticky-row: var(--z-index-11); // Sits above var(--z-index-table-cell-sticky-column)
+
+  --card-width-xs: 240px;
+  --card-width-sm: 512px;
+  --card-width-md: 640px;
+  --card-width-lg: 896px;
 }
diff --git a/src/Card/Card.scss b/src/Card/Card.scss
@@ -61,25 +61,25 @@
 
   &--lg {
     @include media-breakpoint-up(sm) {
-      max-width: $card-width;
+      max-width: var(--card-width-lg);
     }
   }
 
   &--md {
     @include media-breakpoint-up(sm) {
-      max-width: $card-width-md;
+      max-width: var(--card-width-md);
     }
   }
 
   &--sm {
     @include media-breakpoint-up(sm) {
-      max-width: $card-width-sm;
+      max-width: var(--card-width-sm);
     }
   }
 
   &--xs {
     @include media-breakpoint-up(sm) {
-      max-width: $card-width-xs;
+      max-width: var(--card-width-xs);
     }
 
     .Card__helper-text {

diff --git a/src/CardStack/CardStack.scss b/src/CardStack/CardStack.scss
@@ -17,18 +17,18 @@ $card-stack-horizontal-padding: 12px;
   }
 
   &--xs {
-   max-width: $card-width-xs
+   max-width: var(--card-width-xs);
   }
 
   &--sm {
-    max-width: $card-width-sm;
+    max-width: var(--card-width-sm);
   }
 
   &--md {
-    max-width: $card-width-md;
+    max-width: var(--card-width-md);
   }
 
   &--lg {
-    max-width: $card-width;
+    max-width: var(--card-width-lg);
   }
 }