revert(ui5-switch): revert previous commits

SAP · Nov 14, 2023 · bcba08a · bcba08a
1 parent cc01145
commit bcba08a
Show file tree

Hide file tree

Showing 20 changed files with 68 additions and 161 deletions.
diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css
@@ -115,7 +115,6 @@
 .ui5-switch-handle,
 .ui5-switch-text {
 	left: var(--_ui5_switch_handle_left);
-	right: var(--_ui5_switch_handle_right);
 	top: 50%;
 	transform: translateY(-50%);
 }
@@ -163,12 +162,11 @@
 .ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on, 
 .ui5-switch-root.ui5-switch--checked.ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--on {
 	left: var(--_ui5_switch_text_active_left);
-	right: var(--_ui5_switch_text_active_right_alternate);
 }
 .ui5-switch-root:not(.ui5-switch--checked).ui5-switch--semantic .ui5-switch-text--off,
 .ui5-switch-root:not(.ui5-switch--checked).ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--off {
-	left: var(--_ui5_switch_text_inactive_left); /* auto - rtl horizon */
-	right: var(--_ui5_switch_text_inactive_right); /* 0.125rem - rtl horizon */
+	left: var(--_ui5_switch_text_inactive_left);
+	right: var(--_ui5_switch_text_inactive_right);
 }
 
 /* handle */
@@ -341,7 +339,6 @@
 	overflow: var(--_ui5_switch_text_overflow);
 	text-overflow: ellipsis;
 	left: var(--_ui5_switch_text_active_left_alternate);
-	right: var(--_ui5_switch_text_active_right);
 }
 .ui5-switch-root .ui5-switch-text--off {
 	color: var(--_ui5_switch_text_inactive_color);
@@ -359,4 +356,48 @@
 .ui5-switch-root .ui5-switch-no-label-icon-off,
 .ui5-switch-root .ui5-switch-icon-off {
 	color: var(--_ui5_switch_text_inactive_color);
+}
+
+/* RTL */
+[dir="rtl"].ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider {
+	transform: var(--_ui5_switch_rtl_transform_with_label);
+}
+
+[dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
+	transform: var(--_ui5_switch_rtl_transform);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-handle {
+	left: auto;
+	right: var(--_ui5_switch_handle_left);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
+	right: var(--_ui5_switch_text_active_left_alternate);
+	left: var(--_ui5_switch_text_active_right);
+}
+
+[dir="rtl"].ui5-switch-root .ui5-switch-text--off {
+	right: var(--_ui5_switch_text_inactive_left);
+	left: var(--_ui5_switch_text_inactive_right);
+}
+
+[dir="rtl"].ui5-switch-root:not(.ui5-switch--checked).ui5-switch--semantic .ui5-switch-text--off,
+[dir="rtl"].ui5-switch-root:not(.ui5-switch--checked).ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--off {
+	left: var(--_ui5_switch_text_inactive_right);
+	right: var(--_ui5_switch_text_inactive_left);
+}
+
+[dir="rtl"].ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on, 
+[dir="rtl"].ui5-switch-root.ui5-switch--checked.ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--on {
+	right: var(--_ui5_switch_text_active_left);
+	left: auto;
+}
+
+[dir="rtl"].ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-text--on {
+	right: var(--_ui5_switch_text_inactive_left_alternate_rtl);
+}
+
+[dir="rtl"].ui5-switch-root:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-text--off {
+	right: var(--_ui5_switch_text_inactive_right_rtl);
 }
diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css
@@ -117,7 +117,7 @@
 
 	--_ui5_switch_text_inactive_left: auto;
 	--_ui5_switch_text_inactive_left_alternate: auto;
-	--_ui5_switch_text_inactive_right: 0.1875rem;
+	--_ui5_switch_text_inactive_right: 0.125rem;
 	--_ui5_switch_text_inactive_right_alternate: 0.125rem;
 	--_ui5_switch_text_active_left: calc(-100% + 2rem);
 	--_ui5_switch_text_active_left_alternate: calc(-100% + 2rem);
@@ -137,8 +137,9 @@
 	--_ui5_switch_icon_width: 0.75rem;
 	--_ui5_switch_icon_height: 0.75rem;
 
-	--_ui5_switch_handle_right: auto;
-	--_ui5_switch_text_active_right_alternate: auto;
+	/* RTL Parameters */
+	--_ui5_switch_text_inactive_left_alternate_rtl: calc(-100% + 2rem);
+	--_ui5_switch_text_inactive_right_rtl: auto;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css
@@ -58,16 +58,4 @@
 	--_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor);
 	--_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor);
 	--_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
-
-	--_ui5_switch_handle_right: -0.0625rem;
-	--_ui5_switch_transform_with_label: translateX(-100%) translateX(1.875rem);
-	--_ui5_switch_transform: translateX(-100%) translateX(1.875rem);
-	--_ui5_switch_text_active_right: calc(-100% + 2rem);
-	--_ui5_switch_text_active_left_alternate: auto;
-	--_ui5_switch_text_inactive_left_alternate: 0.125rem;
-	--_ui5_switch_text_inactive_right_alternate: auto;
-	--_ui5_switch_text_inactive_left: 0.125rem;
-	--_ui5_switch_text_inactive_right: auto;
-	--_ui5_switch_text_active_left: auto;
-	--_ui5_switch_text_active_right_alternate: calc(-100% + 2rem);
 }
diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css
@@ -124,6 +124,10 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+
+	/* RTL Parameters */
+	--_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem;
+	--_ui5_switch_text_inactive_right_rtl: 0.0625rem;
 }
 
 

diff --git a/packages/main/src/themes/sap_horizon/rtl-parameters.css b/packages/main/src/themes/sap_horizon/rtl-parameters.css
@@ -3,18 +3,4 @@
 [dir="rtl"] {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
-
-	--_ui5_switch_handle_left: -0.0625rem;
-	--_ui5_switch_handle_right: 0.0625rem;
-
-	--_ui5_switch_text_inactive_left: auto;
-	--_ui5_switch_text_inactive_right: 0.1875rem;
-	--_ui5_switch_text_inactive_left_alternate: auto;
-	--_ui5_switch_text_inactive_right_alternate: 0;
-
-	--_ui5_switch_text_active_left_alternate: 0.0625rem;
-	--_ui5_switch_text_active_right: 0.0625rem;
-	--_ui5_switch_text_active_right_alternate: 0.1875rem;
-
-	--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css
@@ -123,6 +123,9 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+
+	/* RTL Parameters */
+	--_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css
@@ -3,18 +3,4 @@
 [dir="rtl"] {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
-
-	--_ui5_switch_handle_left: -0.0625rem;
-	--_ui5_switch_handle_right: 0.0625rem;
-
-	--_ui5_switch_text_inactive_left: auto;
-	--_ui5_switch_text_inactive_right: 0.1875rem;
-	--_ui5_switch_text_inactive_left_alternate: auto;
-	--_ui5_switch_text_inactive_right_alternate: 0;
-
-	--_ui5_switch_text_active_left_alternate: 0.0625rem;
-	--_ui5_switch_text_active_right: 0.0625rem;
-	--_ui5_switch_text_active_right_alternate: 0.1875rem;
-
-	--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css
@@ -3,18 +3,4 @@
 [dir="rtl"] {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
-
-	--_ui5_switch_handle_left: -0.0625rem;
-	--_ui5_switch_handle_right: 0.0625rem;
-
-	--_ui5_switch_text_inactive_left: auto;
-	--_ui5_switch_text_inactive_right: 0.1875rem;
-	--_ui5_switch_text_inactive_left_alternate: auto;
-	--_ui5_switch_text_inactive_right_alternate: 0;
-
-	--_ui5_switch_text_active_left_alternate: 0.0625rem;
-	--_ui5_switch_text_active_right: 0.0625rem;
-	--_ui5_switch_text_active_right_alternate: 0.1875rem;
-
-	--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
 }
diff --git a/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css
@@ -3,18 +3,4 @@
 [dir="rtl"] {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
-
-	--_ui5_switch_handle_left: -0.0625rem;
-	--_ui5_switch_handle_right: 0.0625rem;
-
-	--_ui5_switch_text_inactive_left: auto;
-	--_ui5_switch_text_inactive_right: 0.1875rem;
-	--_ui5_switch_text_inactive_left_alternate: auto;
-	--_ui5_switch_text_inactive_right_alternate: 0;
-
-	--_ui5_switch_text_active_left_alternate: 0.0625rem;
-	--_ui5_switch_text_active_right: 0.0625rem;
-	--_ui5_switch_text_active_right_alternate: 0.1875rem;
-
-	--_ui5_switch_transform: translateX(-100%) translateX(1.625rem);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css
@@ -143,6 +143,9 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+
+	/* RTL Parameters */
+	--_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -54,4 +54,4 @@
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "./rtl-parameters.css";
+@import "../base/rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -54,4 +54,4 @@
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "./rtl-parameters.css";
+@import "../base/rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/rtl-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css
@@ -123,6 +123,9 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+
+	/* RTL Parameters */
+	--_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem;
 }
 
 [data-ui5-compact-size],

diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -54,4 +54,4 @@
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "./rtl-parameters.css";
+@import "../base/rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -54,4 +54,4 @@
 @import "./SliderBase-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "./rtl-parameters.css";
+@import "../base/rtl-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/rtl-parameters.css
diff --git a/packages/main/test/pages/Switch.html b/packages/main/test/pages/Switch.html
@@ -14,7 +14,7 @@
 </head>
 
 <link rel="stylesheet" type="text/css" href="./styles/Switch.css">
-<body class="switch1auto">
+<body class="switch1auto" dir="rtl" data-ui5-compact-size>
 	<h3>Default Switch</h3>
 	<div class="switch2auto">
 		<ui5-switch class="switch3auto" text-on="On" text-off="Off"></ui5-switch>