fix: add panel box-shadow (#1944)

* fix: add box-shadow to panel * fix: remove box-shadow from inner card and panels
Kajabi · Sep 3, 2024 · 0d4fbc8 · 0d4fbc8
1 parent 9bbafcc
commit 0d4fbc8
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 0 deletions.
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss
@@ -1,6 +1,11 @@
 .docs-panel {
   @include sage-panel;
 
+  .sage-card,
+  .sage-panel {
+    box-shadow: none;
+  }
+
   @media screen and (min-width: sage-breakpoint(lg-min)) {
     padding: 5rem;
   }

diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -15,6 +15,11 @@ $-sage-card-background: transparent;
   width: 100%;
   background-color: sage-color(white);
   box-shadow: sage-shadow(md);
+
+  .sage-card,
+  .sage-panel & {
+    box-shadow: none;
+  }
 }
 
 .sage-card--border-dashed {

diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -94,6 +94,11 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     }
   }
 
+  .sage-card & ,
+  .sage-panel & {
+    box-shadow: none;
+  }
+
   .sage-tabs--layout-default &:not(:last-child) {
     @media (max-width: sage-breakpoint(sm-max)) {
       margin-bottom: sage-spacing(sm);

diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss
@@ -7,6 +7,11 @@
 .sage-panel {
   @include sage-panel;
   @include sage-grid-panel;
+
+  .sage-card &,
+  .sage-panel {
+    box-shadow: none;
+  }
 }
 
 .sage-panel-grid {

diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -14,6 +14,11 @@ $-stat-box-image-max-width: rem(48px);
   box-shadow: sage-shadow(md);
   background-color: sage-color(white);
 
+  .sage-card &,
+  .sage-panel & {
+    box-shadow: none;
+  }
+
   &.sage-stat-box--raised {
     box-shadow: sage-shadow(sm);
     border: 0;

diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -44,6 +44,11 @@ $-switch-toggle-size: rem(16px);
     border-radius: sage-border(radius);
     box-shadow: sage-shadow(md);
     background-color: sage-color(white);
+
+    .sage-card &,
+    .sage-panel & {
+      box-shadow: none;
+    }
   }
 
   &.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,11 @@ $-transaction-card-price-max-width: rem(100px);
 .sage-transaction-card {
   @include sage-card;
 
+  .sage-card &,
+  .sage-panel & {
+    box-shadow: none;
+  }
+
   position: relative;
   width: 100%;
   background-color: sage-color(white);

diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
@@ -658,6 +658,7 @@
   background-color: sage-color(white);
   border: sage-border();
   border-radius: sage-border(radius-large);
+  box-shadow: sage-shadow(md);
 }
 
 ///