diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 08ab32472658..da75c2a226f4 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -114,7 +114,7 @@ .ui5-switch-handle, .ui5-switch-text { - left: var(--_ui5_switch_handle_left); + inset-inline-start: var(--_ui5_switch_handle_left); top: 50%; transform: translateY(-50%); } @@ -123,8 +123,8 @@ .ui5-switch-desktop.ui5-switch-root:focus::after { content: ""; position: absolute; - left: var(--_ui5_switch_root_outline_left); - right: var(--_ui5_switch_root_outline_right); + inset-inline-start: var(--_ui5_switch_root_outline_left); + inset-inline-end: var(--_ui5_switch_root_outline_right); top: var(--_ui5_switch_root_outline_top); bottom: var(--_ui5_switch_root_outline_bottom); border: var(--_ui5_switch_focus_outline); @@ -137,11 +137,12 @@ /* switch hidden input */ .ui5-switch-root .ui5-switch-input { position: absolute; - left: 0; + inset-inline-start: 0; width: 0; height: 0; margin: 0; visibility: hidden; + appearance: none; -webkit-appearance: none; } @@ -160,12 +161,12 @@ .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); + inset-inline-start: var(--_ui5_switch_text_active_left); } .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); + inset-inline-start: var(--_ui5_switch_text_inactive_left); + inset-inline-end: var(--_ui5_switch_text_inactive_right); } /* handle */ @@ -337,14 +338,14 @@ color: var(--_ui5_switch_text_active_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; - left: var(--_ui5_switch_text_active_left_alternate); + inset-inline-start: var(--_ui5_switch_text_active_left_alternate); } .ui5-switch-root .ui5-switch-text--off { color: var(--_ui5_switch_text_inactive_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; - left: var(--_ui5_switch_text_inactive_left_alternate); - right: var(--_ui5_switch_text_inactive_right_alternate); + inset-inline-start: var(--_ui5_switch_text_inactive_left_alternate); + inset-inline-end: var(--_ui5_switch_text_inactive_right_alternate); } .ui5-switch-root .ui5-switch-no-label-icon-on, @@ -364,19 +365,4 @@ [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); - 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); -} +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css index 65ec9d460d15..7ad853e1fd2c 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css @@ -143,4 +143,30 @@ --_ui5_switch_icon_width: 1rem; --_ui5_switch_icon_height: 1rem; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_switch_width: 3rem; + --_ui5_switch_min_width: none; + --_ui5_switch_with_label_width: 3.75rem; + --_ui5_switch_root_outline_top: 0.25rem; + --_ui5_switch_root_outline_bottom: 0.25rem; + --_ui5_switch_transform: translateX(100%) translateX(-1.375rem); + --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%); + --_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%); + --_ui5_switch_track_width: 2rem; + --_ui5_switch_track_height: 1.25rem; + --_ui5_switch_track_with_label_width: 2.75rem; + --_ui5_switch_track_with_label_height: 1.25rem; + --_ui5_switch_handle_width: 1.25rem; + --_ui5_switch_handle_height: 1rem; + --_ui5_switch_handle_with_label_width: 1.75rem; + --_ui5_switch_handle_with_label_height: 1rem; + --_ui5_switch_text_font_size: var(--sapFontSize); + --_ui5_switch_text_width: 1rem; + --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; } \ No newline at end of file