fix(box like components): add white background and md box shadow

Kajabi · Aug 6, 2024 · 5132ab4 · 5132ab4
1 parent 51da890
commit 5132ab4
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 2 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -11,6 +11,8 @@ $-sage-card-background: transparent;
 .sage-card {
   @include sage-card();
 
+  background-color: sage-color(white);
+  box-shadow: sage-shadow(md);
   position: relative;
   width: 100%;
 }

diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -41,8 +41,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
   padding: sage-spacing();
   text-decoration: none;
   color: $-choice-color-default;
+  background-color: sage-color(white);
   border: sage-border();
   border-radius: sage-border(radius-large);
+  box-shadow: sage-shadow(md);
   transition: map-get($sage-transitions, default);
   transition-property: color, background-color, border-color, box-shadow;
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -9,8 +9,10 @@ $-stat-box-image-max-width: rem(48px);
 .sage-stat-box {
   // Styles here
   @include sage-card($grid: false);
+  background-color: sage-color(white);
   padding: rem(18px) sage-spacing(sm);
   border-radius: sage-border(radius-large);
+  box-shadow: sage-shadow(md);
 
   &.sage-stat-box--raised {
     box-shadow: sage-shadow(sm);

diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -39,9 +39,11 @@ $-switch-toggle-size: rem(16px);
 
   &.sage-switch--has-border {
     align-items: center;
+    background-color: sage-color(white);
     padding: sage-spacing(card);
     border: sage-border();
     border-radius: sage-border(radius);
+    box-shadow: sage-shadow(md);
   }
 
   &.sage-switch--toggle-right {

diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -11,6 +11,8 @@ $-transaction-card-price-max-width: rem(100px);
 .sage-transaction-card {
   @include sage-card;
 
+  background-color: sage-color(white);
+  box-shadow: sage-shadow(md);
   position: relative;
   width: 100%;
 

diff --git a/packages/sage-assets/lib/stylesheets/layout/_container.scss b/packages/sage-assets/lib/stylesheets/layout/_container.scss
@@ -6,6 +6,8 @@
 
 
 .sage-container {
+  background-color: sage-color(white);
+  box-shadow: sage-shadow(md);
   width: 100%;
   margin: 0 auto;
 

diff --git a/packages/sage-assets/lib/stylesheets/layout/_frame.scss b/packages/sage-assets/lib/stylesheets/layout/_frame.scss
@@ -145,7 +145,7 @@ $-sage-frame-wraps: (
 // 2. Variables for default settings
 //
 $-sage-frame-alignment: top-left;
-$-sage-frame-background: transparent;
+$-sage-frame-background: sage-color(white);
 $-sage-frame-border: none;
 $-sage-frame-border-radius: none;
 $-sage-frame-direction: vertical;
@@ -163,6 +163,7 @@ $-sage-frame-wrap: none;
 
 // Root element
 .sage-frame {
+  background-color: $-sage-frame-background;
   display: flex;
 
   // Add default settings
@@ -242,7 +243,7 @@ $-sage-frame-wrap: none;
   .sage-frame--gap-#{$-key} {
     gap: #{$-val};
   }
-  
+
   .sage-frame--padding-#{$-key} {
     padding: #{$_val};
   }