From c6e8ec3c3bf30ec0d121c0533e3079011ed5fd62 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Mon, 12 Aug 2024 16:41:34 -0500
Subject: [PATCH] fix: add panel box-shadow (#1944)

* fix: add box-shadow to panel

* fix: remove box-shadow from inner card and panels
---
 docs/lib/sage-frontend/stylesheets/docs/_panel.scss          | 5 +++++
 packages/sage-assets/lib/stylesheets/components/_card.scss   | 5 +++++
 packages/sage-assets/lib/stylesheets/components/_choice.scss | 5 +++++
 packages/sage-assets/lib/stylesheets/components/_panel.scss  | 5 +++++
 .../sage-assets/lib/stylesheets/components/_stat_box.scss    | 5 +++++
 packages/sage-assets/lib/stylesheets/components/_switch.scss | 5 +++++
 .../lib/stylesheets/components/_transaction_card.scss        | 5 +++++
 packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss  | 1 +
 8 files changed, 36 insertions(+)

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_panel.scss b/docs/lib/sage-frontend/stylesheets/docs/_panel.scss
index e0111826e4..e9be56793c 100644
--- 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
index bdf618bdbc..c0a3270c1e 100644
--- 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
index dbf3546708..489b0fdf2a 100644
--- 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
index 31d92f60f4..e6789cc4a0 100644
--- 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
index ba35c08783..e5bd2d53de 100644
--- 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
index 4cb8d7168e..79b2c63b6c 100644
--- 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
index 993c524f2d..d3bff0080b 100644
--- 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
index 955cad1369..f22dd91f6b 100644
--- 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);
 }
 
 ///