fix(ui5-switch): align text/icon properly in switch handle (#7350)

Currently there was a case where we apply left, right CSS properties, which were intended for ui5-switch instances, which are using icons in their handles ( f.e basic switch with no text set, switch with design="Graphical", and so on). However these styles were applying even for switches, which had text-on and text-off properties, which caused a slight misalignment. Now the content in the ui5-switch handles, are properly aligned.
SAP · Jul 26, 2023 · 5a7f41f · 5a7f41f
1 parent bac8b19
commit 5a7f41f
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css
@@ -158,12 +158,14 @@
 	visibility: var(--_ui5_switch_text_hidden);
 }
 
-.ui5-switch-root.ui5-switch--checked .ui5-switch-text--on {
+.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);
 }
-.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--off {
+.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);
-	right: var(--_ui5_switch_text_inactive_right)
+	right: var(--_ui5_switch_text_inactive_right);
 }
 
 /* handle */