feat(styles): added background styling [ci visual] (#5595)

SAP · Aug 30, 2024 · a2a039d · a2a039d
1 parent 0da41ac
commit a2a039d
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 0 deletions.
diff --git a/packages/styles/src/popover.scss b/packages/styles/src/popover.scss
@@ -6,13 +6,30 @@
 $block: #{$fd-namespace}-popover;
 $blockBody: #{$fd-namespace}-popover__body;
 
+body.fd-overlay-active::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--fdModal_BackgroundColor);
+  z-index: 999;
+  pointer-events: all;
+}
+
 .#{$block} {
   @include fd-reset();
 
   position: relative;
   display: inline-block;
   max-width: 100%;
 
+  &__modal {
+    position: relative;
+    z-index: 1000;
+  }
+
   &__control {
     @include fd-reset();
     @include fd-action-cursor();

diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
@@ -230,4 +230,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0.125rem 0 rgb(34 53 72 / 16%), 0 0.5rem 1rem 0 rgb(34 53 72 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 60%);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -231,4 +231,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0.125rem 0 rgb(0 0 0 / 16%), 0 0.5rem 1rem 0 rgb(0 0 0 / 32%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 60%);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -235,4 +235,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgb(255 255 255 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 80%);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -231,4 +231,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgb(0 0 0 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(255 255 255 / 80%);
 }
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -252,4 +252,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0.125rem 0 rgb(34 53 72 / 16%), 0 0.5rem 1rem 0 rgb(34 53 72 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 60%);
 }
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
@@ -240,4 +240,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0.125rem 0 rgb(34 53 72 / 16%), 0 0.5rem 1rem 0 rgb(34 53 72 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 20%);
 }
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -247,4 +247,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0.125rem 0 rgb(0 0 0 / 16%), 0 0.5rem 1rem 0 rgb(0 0 0 / 32%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 20%);
 }
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -235,4 +235,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgb(255 255 255 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(0 0 0 / 30%);
 }
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -235,4 +235,7 @@
 
   /** Splitter */
   --sapSplitPane_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgb(0 0 0 / 16%);
+
+  /** Modal */
+  --fdModal_BackgroundColor: rgb(255 255 255 / 80%);
 }