feat(ui5-popover, ui5-responsive-popover): implement sap_horizon theme (

#4020) Related to: #4032
SAP · Sep 30, 2021 · 441776e · 441776e
1 parent bab54f6
commit 441776e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 1 deletion.
diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
@@ -21,6 +21,14 @@
 	max-width: calc(100vw - (100vw - 100%) - 2 * var(--_ui5_popup_viewport_margin));
 }
 
+:host([opened][actual-placement-type="Top"]) {
+	margin-top: var(--_ui5-popover-margin-bottom);
+}
+
+:host([opened][actual-placement-type="Bottom"]) {
+	margin-top: var(--_ui5-popover-margin-top);
+}
+
 /* pointing upward arrow */
 :host([actual-placement-type="Bottom"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);

diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -4,7 +4,7 @@
     min-width: 6.25rem;
     background: var(--sapGroup_ContentBackground);
     box-shadow: var(--sapContent_Shadow2);
-    border-radius: 0.25rem;
+    border-radius: var(--_ui5-popup-border-radius);
     min-height: 2rem;
     box-sizing: border-box;
 }

diff --git a/packages/main/src/themes/base/PopupsCommon-parameters.css b/packages/main/src/themes/base/PopupsCommon-parameters.css
@@ -1,4 +1,5 @@
 :root {
 	--_ui5_popup_content_padding: .4375em;
 	--_ui5_popup_viewport_margin: 10px;
+	--_ui5-popup-border-radius: 0.25rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/Popover-parameters.css b/packages/main/src/themes/sap_horizon/Popover-parameters.css
@@ -0,0 +1,5 @@
+:root {
+    --_ui5-popover-margin-top: 8px;
+    --_ui5-popover-margin-bottom: -8px;
+    --_ui5-popup-border-radius: .5rem;
+}
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -19,6 +19,7 @@
 @import "../base/MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
+@import "./Popover-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "../base/Select-parameters.css";