fix(ui5-button): fix Transparent button border in Fiori 3 & HCB (#789)

SAP · Sep 25, 2019 · bc00f1f · bc00f1f
1 parent 3af76de
commit bc00f1f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
@@ -217,10 +217,9 @@ bdi {
 
 :host([design="Transparent"]) {
 	background-color: var(--sapUiButtonLiteBackground);
-	border-color: var(--sapUiButtonLiteBorderColor);
 	color: var(--sapUiButtonLiteTextColor);
 	text-shadow: var(--_ui5_button_text_shadow);
-	border-color: transparent;
+	border-color: var(--_ui5_button_transparent_border_color);
 }
 
 :host([design="Transparent"]):hover {
@@ -234,7 +233,7 @@ bdi {
 }
 
 :host([design="Transparent"]:not([active]):hover) {
-	border-color: transparent;
+	border-color: var(--_ui5_button_transparent_hover_border_color);
 }
 
 /* IE Specific CSS */

diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css
@@ -17,7 +17,8 @@
 	--_ui5_button_focus_width: 1px;
 	--_ui5_button_focus_color: var(--sapUiContentFocusColor);
 
-
+	--_ui5_button_transparent_border_color: transparent;
+	--_ui5_button_transparent_hover_border_color: var(--sapUiButtonBorderColor);
 	--_ui5_button_active_border_color: var(--sapUiButtonActiveBorderColor);
 	--_ui5_button_positive_border_color: var(--sapUiButtonAcceptBorderColor);
 	--_ui5_button_positive_border_hover_color: var(--sapUiButtonAcceptHoverBorderColor);

diff --git a/packages/main/src/themes/sap_belize/Button-parameters.css b/packages/main/src/themes/sap_belize/Button-parameters.css
@@ -1 +1,5 @@
 @import "../base/Button-parameters.css";
+
+:root {
+	--_ui5_button_transparent_hover_border_color: transparent;
+}
diff --git a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css
@@ -9,6 +9,7 @@
 	--_ui5_button_positive_focus_border_color: transparent;
 	--_ui5_button_negative_focus_border_color: transparent;
 	--_ui5_button_negative_active_border_color: transparent;
+	--_ui5_button_transparent_border_color: var(--sapUiButtonBorderColor);
 	--_ui5_button_focus_width: 1px;
 	--_ui5_button_focus_color: var(--sapUiContentFocusColor);
 	--_ui5_button_focussed_border_color: transparent;