From 75673ef4dff492ba5648362bcc35332d22a82f11 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 19 Sep 2023 11:21:00 +0300 Subject: [PATCH 01/15] fix(ui5-switch): align 'off' text in RTL, add compact mode params --- packages/main/src/themes/Switch.css | 23 ++++++++++++++- .../src/themes/base/Switch-parameters.css | 5 ++++ .../themes/sap_horizon/Switch-parameters.css | 4 +++ .../sap_horizon_dark/Switch-parameters.css | 3 ++ .../sap_horizon_hcb/Switch-parameters.css | 29 +++++++++++++++++++ .../sap_horizon_hcw/Switch-parameters.css | 3 ++ 6 files changed, 66 insertions(+), 1 deletion(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 08ab32472658..0a2ceb0d03ae 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -142,6 +142,7 @@ height: 0; margin: 0; visibility: hidden; + appearance: none; -webkit-appearance: none; } @@ -372,7 +373,7 @@ } [dir="rtl"].ui5-switch-root .ui5-switch-text--on { - right: var(--_ui5_switch_text_active_left); + right: var(--_ui5_switch_text_active_left_alternate); left: var(--_ui5_switch_text_active_right); } @@ -380,3 +381,23 @@ 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); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index 30c9cd874c7a..fa3aa15427e6 100644 --- a/packages/main/src/themes/base/Switch-parameters.css +++ b/packages/main/src/themes/base/Switch-parameters.css @@ -136,6 +136,10 @@ --_ui5_switch_icon_width: 0.75rem; --_ui5_switch_icon_height: 0.75rem; + + /* RTL Parameters */ + --_ui5_switch_text_inactive_left_alternate_rtl: calc(-100% + 2rem); + --_ui5_switch_text_inactive_right_rtl: auto; } [data-ui5-compact-size], @@ -161,4 +165,5 @@ --_ui5_switch_text_font_size: var(--sapFontSmallSize); --_ui5_switch_text_width: none; --_ui5_switch_text_active_left: calc(-100% + 1.625rem); + --_ui5_switch_text_inactive_left_alternate_rtl: -2.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index 21c7fda0d64c..bd2149e626e6 100644 --- 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_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 9e1d2e2287eb..bb24a05f80f7 100644 --- 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_hcb/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css index 65ec9d460d15..6213bfe93daa 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,33 @@ --_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], +.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 diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index 75997d7e0d93..31621eec8933 100644 --- 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], From 109e953f69fcdf6f5e2b5bf56287b6bc5cf70b03 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Sun, 1 Oct 2023 10:58:46 +0300 Subject: [PATCH 02/15] fix(ui5-switch): move rtl styles to rtl-parameters.css --- packages/main/src/themes/Switch.css | 59 +++---------------- .../src/themes/base/Switch-parameters.css | 8 +-- .../main/src/themes/base/rtl-parameters.css | 12 ++++ .../themes/sap_horizon/Switch-parameters.css | 4 -- .../src/themes/sap_horizon/rtl-parameters.css | 14 +++++ .../sap_horizon_dark/Switch-parameters.css | 3 - .../sap_horizon_dark/rtl-parameters.css | 14 +++++ .../sap_horizon_dark_exp/rtl-parameters.css | 14 +++++ .../themes/sap_horizon_exp/rtl-parameters.css | 14 +++++ .../sap_horizon_hcb/Switch-parameters.css | 3 - .../sap_horizon_hcb/parameters-bundle.css | 2 +- .../themes/sap_horizon_hcb/rtl-parameters.css | 20 +++++++ .../sap_horizon_hcb_exp/parameters-bundle.css | 2 +- .../sap_horizon_hcb_exp/rtl-parameters.css | 20 +++++++ .../sap_horizon_hcw/Switch-parameters.css | 3 - .../sap_horizon_hcw/parameters-bundle.css | 2 +- .../themes/sap_horizon_hcw/rtl-parameters.css | 20 +++++++ .../sap_horizon_hcw_exp/parameters-bundle.css | 2 +- .../sap_horizon_hcw_exp/rtl-parameters.css | 20 +++++++ 19 files changed, 164 insertions(+), 72 deletions(-) create mode 100644 packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css create mode 100644 packages/main/src/themes/sap_horizon_hcb_exp/rtl-parameters.css create mode 100644 packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css create mode 100644 packages/main/src/themes/sap_horizon_hcw_exp/rtl-parameters.css diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 0a2ceb0d03ae..68058c4d1792 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -114,7 +114,8 @@ .ui5-switch-handle, .ui5-switch-text { - left: var(--_ui5_switch_handle_left); + left: var(--_ui5_switch_handle_left); /* -0.0625rem rtl horizon */ + right: var(--_ui5_switch_handle_right); /* 0.0625rem rtl horizon */ top: 50%; transform: translateY(-50%); } @@ -162,11 +163,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); + 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); - right: var(--_ui5_switch_text_inactive_right); + left: var(--_ui5_switch_text_inactive_left); /* auto - rtl horizon */ + right: var(--_ui5_switch_text_inactive_right); /* 0.125rem - rtl horizon */ } /* handle */ @@ -338,14 +340,15 @@ color: var(--_ui5_switch_text_active_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; - left: var(--_ui5_switch_text_active_left_alternate); + left: var(--_ui5_switch_text_active_left_alternate); /* auto for rtl base, calc(-100% + 2rem) for normal base */ + right: var(--_ui5_switch_text_active_right); /* calc(-100% + 2rem) for rtl base, auto for normal base */ } .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); + left: var(--_ui5_switch_text_inactive_left_alternate); /* auto rtl horizon */ + right: var(--_ui5_switch_text_inactive_right_alternate); /* 0.0625rem rtl horizon */ } .ui5-switch-root .ui5-switch-no-label-icon-on, @@ -356,48 +359,4 @@ .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); } \ No newline at end of file diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index fa3aa15427e6..cd877cc60d86 100644 --- 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.125rem; + --_ui5_switch_text_inactive_right: 0.1875rem; --_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,9 +137,8 @@ --_ui5_switch_icon_width: 0.75rem; --_ui5_switch_icon_height: 0.75rem; - /* RTL Parameters */ - --_ui5_switch_text_inactive_left_alternate_rtl: calc(-100% + 2rem); - --_ui5_switch_text_inactive_right_rtl: auto; + --_ui5_switch_handle_right: auto; + --_ui5_switch_text_active_right_alternate: auto; } [data-ui5-compact-size], @@ -165,5 +164,4 @@ --_ui5_switch_text_font_size: var(--sapFontSmallSize); --_ui5_switch_text_width: none; --_ui5_switch_text_active_left: calc(-100% + 1.625rem); - --_ui5_switch_text_inactive_left_alternate_rtl: -2.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index c00ddb146c57..3b1ad01c2159 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -58,4 +58,16 @@ --_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); /* translateX(1.5rem) translateX(-100%) compact mode base */ + --_ui5_switch_transform: translateX(-100%) translateX(1.875rem); /* translateX(1.5rem) translateX(-100%) compact mode base - check --_ui5_switch_rtl_transform */ + --_ui5_switch_text_active_right: calc(-100% + 2rem); + --_ui5_switch_text_active_left_alternate: auto; + --_ui5_switch_text_inactive_left_alternate: 0.125rem; /* auto for horizon rtl */ + --_ui5_switch_text_inactive_right_alternate: auto; + --_ui5_switch_text_inactive_left: 0.125rem; /* auto for horizon rtl */ + --_ui5_switch_text_inactive_right: auto; /* 0.1875rem for horizon rtl */ + --_ui5_switch_text_active_left: auto; + --_ui5_switch_text_active_right_alternate: calc(-100% + 2rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index bd2149e626e6..21c7fda0d64c 100644 --- a/packages/main/src/themes/sap_horizon/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon/Switch-parameters.css @@ -124,10 +124,6 @@ --_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 index c61f63a0b675..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon/rtl-parameters.css @@ -3,4 +3,18 @@ [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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index bb24a05f80f7..9e1d2e2287eb 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -123,9 +123,6 @@ --_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 index c61f63a0b675..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css @@ -3,4 +3,18 @@ [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); } \ No newline at end of file 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 index c61f63a0b675..22018c9b6340 100644 --- 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,4 +3,18 @@ [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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css index c61f63a0b675..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css @@ -3,4 +3,18 @@ [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); } \ 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 6213bfe93daa..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,9 +143,6 @@ --_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 index 23927b95e3b5..011b5dbda299 100644 --- 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 "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css new file mode 100644 index 000000000000..22018c9b6340 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css @@ -0,0 +1,20 @@ +@import "../base/rtl-parameters.css"; + +[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); +} \ No newline at end of file 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 index 23927b95e3b5..011b5dbda299 100644 --- 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 "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file 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 new file mode 100644 index 000000000000..22018c9b6340 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_hcb_exp/rtl-parameters.css @@ -0,0 +1,20 @@ +@import "../base/rtl-parameters.css"; + +[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); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index 31621eec8933..75997d7e0d93 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -123,9 +123,6 @@ --_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 index 417d4eba47fe..5a892cd2ca7d 100644 --- 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 "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css new file mode 100644 index 000000000000..22018c9b6340 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css @@ -0,0 +1,20 @@ +@import "../base/rtl-parameters.css"; + +[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); +} \ No newline at end of file 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 index 417d4eba47fe..5a892cd2ca7d 100644 --- 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 "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file 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 new file mode 100644 index 000000000000..22018c9b6340 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_hcw_exp/rtl-parameters.css @@ -0,0 +1,20 @@ +@import "../base/rtl-parameters.css"; + +[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); +} \ No newline at end of file From 9a9ab825b49749271f30665f61dda0d4b9afff1f Mon Sep 17 00:00:00 2001 From: hinzzx Date: Sun, 1 Oct 2023 11:07:42 +0300 Subject: [PATCH 03/15] fix(ui5-switch): remove redunant comments --- packages/main/src/themes/Switch.css | 12 ++++++------ packages/main/src/themes/base/rtl-parameters.css | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 68058c4d1792..fc584224d9b8 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -114,8 +114,8 @@ .ui5-switch-handle, .ui5-switch-text { - left: var(--_ui5_switch_handle_left); /* -0.0625rem rtl horizon */ - right: var(--_ui5_switch_handle_right); /* 0.0625rem rtl horizon */ + left: var(--_ui5_switch_handle_left); + right: var(--_ui5_switch_handle_right); top: 50%; transform: translateY(-50%); } @@ -340,15 +340,15 @@ color: var(--_ui5_switch_text_active_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; - left: var(--_ui5_switch_text_active_left_alternate); /* auto for rtl base, calc(-100% + 2rem) for normal base */ - right: var(--_ui5_switch_text_active_right); /* calc(-100% + 2rem) for rtl base, auto for normal base */ + 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); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; - left: var(--_ui5_switch_text_inactive_left_alternate); /* auto rtl horizon */ - right: var(--_ui5_switch_text_inactive_right_alternate); /* 0.0625rem rtl horizon */ + left: var(--_ui5_switch_text_inactive_left_alternate); + right: var(--_ui5_switch_text_inactive_right_alternate); } .ui5-switch-root .ui5-switch-no-label-icon-on, diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 3b1ad01c2159..0cfcf333a884 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -60,14 +60,14 @@ --_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); /* translateX(1.5rem) translateX(-100%) compact mode base */ - --_ui5_switch_transform: translateX(-100%) translateX(1.875rem); /* translateX(1.5rem) translateX(-100%) compact mode base - check --_ui5_switch_rtl_transform */ + --_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; /* auto for horizon rtl */ + --_ui5_switch_text_inactive_left_alternate: 0.125rem; --_ui5_switch_text_inactive_right_alternate: auto; - --_ui5_switch_text_inactive_left: 0.125rem; /* auto for horizon rtl */ - --_ui5_switch_text_inactive_right: auto; /* 0.1875rem for horizon rtl */ + --_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); } \ No newline at end of file From 1bab9700b3fa43e3db3d656835abaeb135f10a08 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Sun, 1 Oct 2023 11:09:48 +0300 Subject: [PATCH 04/15] fix(ui5-switch): remove redunant comments --- packages/main/src/themes/Switch.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index fc584224d9b8..5b47ea0746dc 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -167,8 +167,8 @@ } .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 */ From 09d6562739402a91cc7d1984a9a24572fa30fc54 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Fri, 10 Nov 2023 13:33:17 +0200 Subject: [PATCH 05/15] fix(ui5-switch): remove unused vars --- packages/main/src/themes/base/Switch-parameters.css | 5 ----- packages/main/src/themes/sap_horizon/Switch-parameters.css | 5 ----- .../main/src/themes/sap_horizon_dark/Switch-parameters.css | 4 ---- .../src/themes/sap_horizon_dark_exp/Switch-parameters.css | 5 ----- .../main/src/themes/sap_horizon_exp/Switch-parameters.css | 5 ----- .../main/src/themes/sap_horizon_hcb/Switch-parameters.css | 7 ------- .../src/themes/sap_horizon_hcb_exp/Switch-parameters.css | 4 ---- .../main/src/themes/sap_horizon_hcw/Switch-parameters.css | 5 ----- .../src/themes/sap_horizon_hcw_exp/Switch-parameters.css | 5 ----- 9 files changed, 45 deletions(-) diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index cd877cc60d86..a25a47814269 100644 --- a/packages/main/src/themes/base/Switch-parameters.css +++ b/packages/main/src/themes/base/Switch-parameters.css @@ -26,9 +26,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.875rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.875rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - /* switch track */ --_ui5_switch_track_with_label_width: 100%; --_ui5_switch_track_with_label_height: 1.375rem; @@ -151,8 +148,6 @@ --_ui5_switch_root_outline_bottom: 0; --_ui5_switch_transform: translateX(100%) translateX(-1.5rem); --_ui5_switch_transform_with_label: translateX(100%) translateX( -1.5rem); - --_ui5_switch_rtl_transform: translateX(1.5rem) translateX(-100%); - --_ui5_switch_rtl_transform_with_label: translateX(1.5rem) translateX(-100%); --_ui5_switch_track_with_label_width: 100%; --_ui5_switch_track_with_label_height: 1.375rem; --_ui5_switch_track_width: 100%; diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index 21c7fda0d64c..b612bd6b3499 100644 --- a/packages/main/src/themes/sap_horizon/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon/Switch-parameters.css @@ -23,9 +23,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -137,8 +134,6 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 9e1d2e2287eb..8a5bde009522 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -22,8 +22,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); /* track */ --_ui5_switch_track_width: 2.5rem; @@ -135,8 +133,6 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css index 900e5c76509e..cde853f552cc 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css @@ -22,9 +22,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -132,8 +129,6 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css index f9364cc20203..ccdcca8cfdfc 100644 --- a/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css @@ -23,9 +23,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -134,8 +131,6 @@ --_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; 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 7ad853e1fd2c..c1a46f937f7e 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css @@ -30,11 +30,6 @@ --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); --_ui5_switch_compact_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_compact_rtl_transform: translateX(1.375rem) translateX(-100%); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - --_ui5_switch_compact_rtl_transform_with_label: translateX(1.875rem) translateX(-100%); - /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_compact_width: 2rem; @@ -155,8 +150,6 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css index 17955ea429bf..95dee4dc5906 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css @@ -30,10 +30,6 @@ --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); --_ui5_switch_compact_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_compact_rtl_transform: translateX(1.375rem) translateX(-100%); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - --_ui5_switch_compact_rtl_transform_with_label: translateX(1.875rem) translateX(-100%); /* track */ --_ui5_switch_track_width: 2.5rem; diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index 75997d7e0d93..5534db4ae795 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -23,9 +23,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -135,8 +132,6 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css index c724cf6383c1..5a930db128c9 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css @@ -23,9 +23,6 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); - --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); - --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); - /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -133,8 +130,6 @@ --_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; From 85c4503b4661c596946cc7c33a80bd8af19826e2 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Mon, 13 Nov 2023 17:37:52 +0200 Subject: [PATCH 06/15] fix(ui5-switch): draft test commit for review --- packages/main/src/themes/Switch.css | 12 ++++++++++++ packages/main/src/themes/base/rtl-parameters.css | 12 ++++++++++++ packages/main/src/themes/base/sizes-parameters.css | 3 +++ .../main/src/themes/sap_horizon/rtl-parameters.css | 13 +++++++++++++ .../src/themes/sap_horizon/sizes-parameters.css | 3 +++ .../src/themes/sap_horizon_dark/rtl-parameters.css | 9 +++++++++ .../src/themes/sap_horizon_hcb/rtl-parameters.css | 10 ++++++++++ .../src/themes/sap_horizon_hcw/rtl-parameters.css | 9 +++++++++ packages/main/test/pages/Switch.html | 2 +- 9 files changed, 72 insertions(+), 1 deletion(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 5b47ea0746dc..e2a69d50df47 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -260,6 +260,18 @@ transform: var(--_ui5_switch_transform); } +.ui5-switch-root.ui5-switch-desktop.ui5-switch--no-label.ui5-switch--checked .ui5-switch-slider, +.ui5-switch-root.ui5-switch-desktop.ui5-switch--checked.ui5-switch--semantic .ui5-switch-slider { + right: var(--test_var); /* 0.225rem horizon rtl compact scenario, + 0.375 for the base one ( 0.325rem for base for rtl compact -> .ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider ) +} */ +} + + +.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider { + right: var(--test_var1); +} + /* switch semantic icon and type noLabel icon in horizon theme */ .ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon, .ui5-switch-root.ui5-switch--semantic .ui5-switch-text, diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 0cfcf333a884..2aa9114ff9c0 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -1,4 +1,7 @@ :root, [dir="ltr"] { + --test_var: 0; + --test_var1: 0; + --_ui5_rotation_90deg: rotate(90deg); --_ui5_rotation_minus_90deg: rotate(-90deg); @@ -70,4 +73,13 @@ --_ui5_switch_text_inactive_right: auto; --_ui5_switch_text_active_left: auto; --_ui5_switch_text_active_right_alternate: calc(-100% + 2rem); +} + +[dir="rtl"][data-ui5-compact-size], +[dir="rtl"] .ui5-content-density-compact, +[dir="rtl"] .sapUiSizeCompact { + --test_var: 0.375rem; + --test_var1: 0.345rem; + + --_ui5_switch_text_active_right_alternate: calc(-100% + 1.575rem); } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index fd596afbfb4e..1552523d777b 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -148,6 +148,9 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { + + --_ui5_switch_text_active_left_alternate: calc(-100% + 1.575rem); + --_ui5_button_base_height: var(--sapElement_Compact_Height); --_ui5_button_base_padding: 0.4375rem; --_ui5_button_base_min_width: 2rem; diff --git a/packages/main/src/themes/sap_horizon/rtl-parameters.css b/packages/main/src/themes/sap_horizon/rtl-parameters.css index 22018c9b6340..bde320ca6551 100644 --- a/packages/main/src/themes/sap_horizon/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon/rtl-parameters.css @@ -1,5 +1,9 @@ @import "../base/rtl-parameters.css"; +:root { + --test_var: 0; +} + [dir="rtl"] { --_ui5_segmented_btn_item_border_left: 0.0625rem; --_ui5_segmented_btn_item_border_right: 0.0625rem; @@ -17,4 +21,13 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); +} + +[dir="rtl"][data-ui5-compact-size], +[dir="rtl"] .ui5-content-density-compact, +[dir="rtl"] .sapUiSizeCompact { + --test_var: 0.225rem; + --test_var1: 0; + + --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css index 3508bf0179ef..1ec07c0c00ff 100644 --- a/packages/main/src/themes/sap_horizon/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon/sizes-parameters.css @@ -17,6 +17,9 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { + + --_ui5_switch_text_active_left_alternate: calc(-100% + 2.675rem); + --_ui5_textarea_padding_top: 0.1875rem; --_ui5_textarea_padding_bottom: 0.125rem; --_ui5_checkbox_focus_position: 0.25rem; diff --git a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css index 22018c9b6340..28d8877bdbf7 100644 --- a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css @@ -17,4 +17,13 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); +} + +[dir="rtl"][data-ui5-compact-size], +[dir="rtl"] .ui5-content-density-compact, +[dir="rtl"] .sapUiSizeCompact { + --test_var: 0.225rem; + --test_var1: 0; + + --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css index 22018c9b6340..1011a19774d6 100644 --- a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css @@ -17,4 +17,14 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); +} + + +[dir="rtl"][data-ui5-compact-size], +[dir="rtl"] .ui5-content-density-compact, +[dir="rtl"] .sapUiSizeCompact { + --test_var: 0.225rem; + --test_var1: 0; + + --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css index 22018c9b6340..28d8877bdbf7 100644 --- a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css @@ -17,4 +17,13 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); +} + +[dir="rtl"][data-ui5-compact-size], +[dir="rtl"] .ui5-content-density-compact, +[dir="rtl"] .sapUiSizeCompact { + --test_var: 0.225rem; + --test_var1: 0; + + --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/test/pages/Switch.html b/packages/main/test/pages/Switch.html index bc481cee961e..23d768111642 100644 --- a/packages/main/test/pages/Switch.html +++ b/packages/main/test/pages/Switch.html @@ -14,7 +14,7 @@ - +

Default Switch

From ba24ad6eaa9868c969b015afcdb7a6de8a8095a3 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 14 Nov 2023 14:16:58 +0200 Subject: [PATCH 07/15] Revert "fix(ui5-switch): draft test commit for review" This reverts commit 85c4503b4661c596946cc7c33a80bd8af19826e2. --- packages/main/src/themes/Switch.css | 12 ------------ packages/main/src/themes/base/rtl-parameters.css | 12 ------------ packages/main/src/themes/base/sizes-parameters.css | 3 --- .../main/src/themes/sap_horizon/rtl-parameters.css | 13 ------------- .../src/themes/sap_horizon/sizes-parameters.css | 3 --- .../src/themes/sap_horizon_dark/rtl-parameters.css | 9 --------- .../src/themes/sap_horizon_hcb/rtl-parameters.css | 10 ---------- .../src/themes/sap_horizon_hcw/rtl-parameters.css | 9 --------- packages/main/test/pages/Switch.html | 2 +- 9 files changed, 1 insertion(+), 72 deletions(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index e2a69d50df47..5b47ea0746dc 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -260,18 +260,6 @@ transform: var(--_ui5_switch_transform); } -.ui5-switch-root.ui5-switch-desktop.ui5-switch--no-label.ui5-switch--checked .ui5-switch-slider, -.ui5-switch-root.ui5-switch-desktop.ui5-switch--checked.ui5-switch--semantic .ui5-switch-slider { - right: var(--test_var); /* 0.225rem horizon rtl compact scenario, - 0.375 for the base one ( 0.325rem for base for rtl compact -> .ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider ) -} */ -} - - -.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--no-label):not(.ui5-switch--semantic) .ui5-switch-slider { - right: var(--test_var1); -} - /* switch semantic icon and type noLabel icon in horizon theme */ .ui5-switch-text .ui5-switch-text--on .ui5-switch-no-label-icon, .ui5-switch-root.ui5-switch--semantic .ui5-switch-text, diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 2aa9114ff9c0..0cfcf333a884 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -1,7 +1,4 @@ :root, [dir="ltr"] { - --test_var: 0; - --test_var1: 0; - --_ui5_rotation_90deg: rotate(90deg); --_ui5_rotation_minus_90deg: rotate(-90deg); @@ -73,13 +70,4 @@ --_ui5_switch_text_inactive_right: auto; --_ui5_switch_text_active_left: auto; --_ui5_switch_text_active_right_alternate: calc(-100% + 2rem); -} - -[dir="rtl"][data-ui5-compact-size], -[dir="rtl"] .ui5-content-density-compact, -[dir="rtl"] .sapUiSizeCompact { - --test_var: 0.375rem; - --test_var1: 0.345rem; - - --_ui5_switch_text_active_right_alternate: calc(-100% + 1.575rem); } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 1552523d777b..fd596afbfb4e 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -148,9 +148,6 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - - --_ui5_switch_text_active_left_alternate: calc(-100% + 1.575rem); - --_ui5_button_base_height: var(--sapElement_Compact_Height); --_ui5_button_base_padding: 0.4375rem; --_ui5_button_base_min_width: 2rem; diff --git a/packages/main/src/themes/sap_horizon/rtl-parameters.css b/packages/main/src/themes/sap_horizon/rtl-parameters.css index bde320ca6551..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon/rtl-parameters.css @@ -1,9 +1,5 @@ @import "../base/rtl-parameters.css"; -:root { - --test_var: 0; -} - [dir="rtl"] { --_ui5_segmented_btn_item_border_left: 0.0625rem; --_ui5_segmented_btn_item_border_right: 0.0625rem; @@ -21,13 +17,4 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); -} - -[dir="rtl"][data-ui5-compact-size], -[dir="rtl"] .ui5-content-density-compact, -[dir="rtl"] .sapUiSizeCompact { - --test_var: 0.225rem; - --test_var1: 0; - - --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css index 1ec07c0c00ff..3508bf0179ef 100644 --- a/packages/main/src/themes/sap_horizon/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon/sizes-parameters.css @@ -17,9 +17,6 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - - --_ui5_switch_text_active_left_alternate: calc(-100% + 2.675rem); - --_ui5_textarea_padding_top: 0.1875rem; --_ui5_textarea_padding_bottom: 0.125rem; --_ui5_checkbox_focus_position: 0.25rem; diff --git a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css index 28d8877bdbf7..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css @@ -17,13 +17,4 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); -} - -[dir="rtl"][data-ui5-compact-size], -[dir="rtl"] .ui5-content-density-compact, -[dir="rtl"] .sapUiSizeCompact { - --test_var: 0.225rem; - --test_var1: 0; - - --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css index 1011a19774d6..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css @@ -17,14 +17,4 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); -} - - -[dir="rtl"][data-ui5-compact-size], -[dir="rtl"] .ui5-content-density-compact, -[dir="rtl"] .sapUiSizeCompact { - --test_var: 0.225rem; - --test_var1: 0; - - --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css index 28d8877bdbf7..22018c9b6340 100644 --- a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css @@ -17,13 +17,4 @@ --_ui5_switch_text_active_right_alternate: 0.1875rem; --_ui5_switch_transform: translateX(-100%) translateX(1.625rem); -} - -[dir="rtl"][data-ui5-compact-size], -[dir="rtl"] .ui5-content-density-compact, -[dir="rtl"] .sapUiSizeCompact { - --test_var: 0.225rem; - --test_var1: 0; - - --_ui5_switch_text_active_right_alternate: calc(-100% + 2.075rem); } \ No newline at end of file diff --git a/packages/main/test/pages/Switch.html b/packages/main/test/pages/Switch.html index 23d768111642..bc481cee961e 100644 --- a/packages/main/test/pages/Switch.html +++ b/packages/main/test/pages/Switch.html @@ -14,7 +14,7 @@ - +

Default Switch

From 47d54434a2e60196c95d965491949e0d963af2e4 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 14 Nov 2023 14:18:08 +0200 Subject: [PATCH 08/15] Revert "fix(ui5-switch): remove unused vars" This reverts commit 09d6562739402a91cc7d1984a9a24572fa30fc54. --- packages/main/src/themes/base/Switch-parameters.css | 5 +++++ packages/main/src/themes/sap_horizon/Switch-parameters.css | 5 +++++ .../main/src/themes/sap_horizon_dark/Switch-parameters.css | 4 ++++ .../src/themes/sap_horizon_dark_exp/Switch-parameters.css | 5 +++++ .../main/src/themes/sap_horizon_exp/Switch-parameters.css | 5 +++++ .../main/src/themes/sap_horizon_hcb/Switch-parameters.css | 7 +++++++ .../src/themes/sap_horizon_hcb_exp/Switch-parameters.css | 4 ++++ .../main/src/themes/sap_horizon_hcw/Switch-parameters.css | 5 +++++ .../src/themes/sap_horizon_hcw_exp/Switch-parameters.css | 5 +++++ 9 files changed, 45 insertions(+) diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index a25a47814269..cd877cc60d86 100644 --- a/packages/main/src/themes/base/Switch-parameters.css +++ b/packages/main/src/themes/base/Switch-parameters.css @@ -26,6 +26,9 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.875rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.875rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + /* switch track */ --_ui5_switch_track_with_label_width: 100%; --_ui5_switch_track_with_label_height: 1.375rem; @@ -148,6 +151,8 @@ --_ui5_switch_root_outline_bottom: 0; --_ui5_switch_transform: translateX(100%) translateX(-1.5rem); --_ui5_switch_transform_with_label: translateX(100%) translateX( -1.5rem); + --_ui5_switch_rtl_transform: translateX(1.5rem) translateX(-100%); + --_ui5_switch_rtl_transform_with_label: translateX(1.5rem) translateX(-100%); --_ui5_switch_track_with_label_width: 100%; --_ui5_switch_track_with_label_height: 1.375rem; --_ui5_switch_track_width: 100%; diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index b612bd6b3499..21c7fda0d64c 100644 --- a/packages/main/src/themes/sap_horizon/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon/Switch-parameters.css @@ -23,6 +23,9 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -134,6 +137,8 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 8a5bde009522..9e1d2e2287eb 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -22,6 +22,8 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); /* track */ --_ui5_switch_track_width: 2.5rem; @@ -133,6 +135,8 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css index cde853f552cc..900e5c76509e 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/Switch-parameters.css @@ -22,6 +22,9 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -129,6 +132,8 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css index ccdcca8cfdfc..f9364cc20203 100644 --- a/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Switch-parameters.css @@ -23,6 +23,9 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -131,6 +134,8 @@ --_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; 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 c1a46f937f7e..7ad853e1fd2c 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css @@ -30,6 +30,11 @@ --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); --_ui5_switch_compact_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_compact_rtl_transform: translateX(1.375rem) translateX(-100%); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + --_ui5_switch_compact_rtl_transform_with_label: translateX(1.875rem) translateX(-100%); + /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_compact_width: 2rem; @@ -150,6 +155,8 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css index 95dee4dc5906..17955ea429bf 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/Switch-parameters.css @@ -30,6 +30,10 @@ --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); --_ui5_switch_compact_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_compact_rtl_transform: translateX(1.375rem) translateX(-100%); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + --_ui5_switch_compact_rtl_transform_with_label: translateX(1.875rem) translateX(-100%); /* track */ --_ui5_switch_track_width: 2.5rem; diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index 5534db4ae795..75997d7e0d93 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -23,6 +23,9 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -132,6 +135,8 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css index 5a930db128c9..c724cf6383c1 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/Switch-parameters.css @@ -23,6 +23,9 @@ --_ui5_switch_transform: translateX(100%) translateX(-1.625rem); --_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem); + --_ui5_switch_rtl_transform: translateX(-100%) translateX(1.625rem); + --_ui5_switch_rtl_transform_with_label: translateX(-100%) translateX(1.875rem); + /* track */ --_ui5_switch_track_width: 2.5rem; --_ui5_switch_track_height: 1.5rem; @@ -130,6 +133,8 @@ --_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; From cc01145e34f589dadac11efb3ee17bebd110431a Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 14 Nov 2023 14:23:24 +0200 Subject: [PATCH 09/15] Revert "fix(ui5-switch): remove redunant comments" This reverts commit 1bab9700b3fa43e3db3d656835abaeb135f10a08. --- packages/main/src/themes/Switch.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 5b47ea0746dc..fc584224d9b8 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -167,8 +167,8 @@ } .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); + left: var(--_ui5_switch_text_inactive_left); /* auto - rtl horizon */ + right: var(--_ui5_switch_text_inactive_right); /* 0.125rem - rtl horizon */ } /* handle */ From bcba08aced906cd403b358b57b1d13bd99b2e567 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 14 Nov 2023 15:26:54 +0200 Subject: [PATCH 10/15] revert(ui5-switch): revert previous commits --- packages/main/src/themes/Switch.css | 51 +++++++++++++++++-- .../src/themes/base/Switch-parameters.css | 7 +-- .../main/src/themes/base/rtl-parameters.css | 12 ----- .../themes/sap_horizon/Switch-parameters.css | 4 ++ .../src/themes/sap_horizon/rtl-parameters.css | 14 ----- .../sap_horizon_dark/Switch-parameters.css | 3 ++ .../sap_horizon_dark/rtl-parameters.css | 14 ----- .../sap_horizon_dark_exp/rtl-parameters.css | 14 ----- .../themes/sap_horizon_exp/rtl-parameters.css | 14 ----- .../sap_horizon_hcb/Switch-parameters.css | 3 ++ .../sap_horizon_hcb/parameters-bundle.css | 2 +- .../themes/sap_horizon_hcb/rtl-parameters.css | 20 -------- .../sap_horizon_hcb_exp/parameters-bundle.css | 2 +- .../sap_horizon_hcb_exp/rtl-parameters.css | 20 -------- .../sap_horizon_hcw/Switch-parameters.css | 3 ++ .../sap_horizon_hcw/parameters-bundle.css | 2 +- .../themes/sap_horizon_hcw/rtl-parameters.css | 20 -------- .../sap_horizon_hcw_exp/parameters-bundle.css | 2 +- .../sap_horizon_hcw_exp/rtl-parameters.css | 20 -------- packages/main/test/pages/Switch.html | 2 +- 20 files changed, 68 insertions(+), 161 deletions(-) delete mode 100644 packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcb_exp/rtl-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcw_exp/rtl-parameters.css diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index fc584224d9b8..0a2ceb0d03ae 100644 --- 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); } \ No newline at end of file diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index cd877cc60d86..6d6b41004286 100644 --- 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 index 0cfcf333a884..c00ddb146c57 100644 --- 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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index 21c7fda0d64c..bd2149e626e6 100644 --- 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 index 22018c9b6340..c61f63a0b675 100644 --- 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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 9e1d2e2287eb..bb24a05f80f7 100644 --- 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 index 22018c9b6340..c61f63a0b675 100644 --- 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); } \ No newline at end of file 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 index 22018c9b6340..c61f63a0b675 100644 --- 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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css index 22018c9b6340..c61f63a0b675 100644 --- 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); } \ 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 7ad853e1fd2c..6213bfe93daa 100644 --- 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 index 011b5dbda299..23927b95e3b5 100644 --- 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"; \ No newline at end of file +@import "../base/rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css deleted file mode 100644 index 22018c9b6340..000000000000 --- a/packages/main/src/themes/sap_horizon_hcb/rtl-parameters.css +++ /dev/null @@ -1,20 +0,0 @@ -@import "../base/rtl-parameters.css"; - -[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); -} \ No newline at end of file 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 index 011b5dbda299..23927b95e3b5 100644 --- 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"; \ No newline at end of file +@import "../base/rtl-parameters.css"; \ No newline at end of file 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 deleted file mode 100644 index 22018c9b6340..000000000000 --- a/packages/main/src/themes/sap_horizon_hcb_exp/rtl-parameters.css +++ /dev/null @@ -1,20 +0,0 @@ -@import "../base/rtl-parameters.css"; - -[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); -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index 75997d7e0d93..31621eec8933 100644 --- 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 index 5a892cd2ca7d..417d4eba47fe 100644 --- 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"; \ No newline at end of file +@import "../base/rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css b/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css deleted file mode 100644 index 22018c9b6340..000000000000 --- a/packages/main/src/themes/sap_horizon_hcw/rtl-parameters.css +++ /dev/null @@ -1,20 +0,0 @@ -@import "../base/rtl-parameters.css"; - -[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); -} \ No newline at end of file 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 index 5a892cd2ca7d..417d4eba47fe 100644 --- 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"; \ No newline at end of file +@import "../base/rtl-parameters.css"; \ No newline at end of file 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 deleted file mode 100644 index 22018c9b6340..000000000000 --- a/packages/main/src/themes/sap_horizon_hcw_exp/rtl-parameters.css +++ /dev/null @@ -1,20 +0,0 @@ -@import "../base/rtl-parameters.css"; - -[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); -} \ No newline at end of file diff --git a/packages/main/test/pages/Switch.html b/packages/main/test/pages/Switch.html index bc481cee961e..36957bd801eb 100644 --- a/packages/main/test/pages/Switch.html +++ b/packages/main/test/pages/Switch.html @@ -14,7 +14,7 @@ - +

Default Switch

From 92a7d6dca770b3a25fdcd1c846524c7052878375 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 14 Nov 2023 15:35:59 +0200 Subject: [PATCH 11/15] fix(ui5-switch): remove body tags --- packages/main/test/pages/Switch.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/pages/Switch.html b/packages/main/test/pages/Switch.html index 36957bd801eb..bc481cee961e 100644 --- a/packages/main/test/pages/Switch.html +++ b/packages/main/test/pages/Switch.html @@ -14,7 +14,7 @@ - +

Default Switch

From e47e0f128d8060e8c7b0a359cdf7a02661d9d8cd Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 14 Nov 2023 17:51:43 +0200 Subject: [PATCH 12/15] fix(ui5-switch): add missed paramteres for horizon themes --- packages/main/src/themes/sap_horizon_dark/Switch-parameters.css | 1 + packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css | 1 + packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index bb24a05f80f7..8c78750dbd35 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -126,6 +126,7 @@ /* RTL Parameters */ --_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem; + --_ui5_switch_text_inactive_right_rtl: 0.0625rem; } [data-ui5-compact-size], 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 6213bfe93daa..724d3c1df016 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css @@ -146,6 +146,7 @@ /* RTL Parameters */ --_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem; + --_ui5_switch_text_inactive_right_rtl: 0.0625rem; } [data-ui5-compact-size], diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index 31621eec8933..e0610eeaf920 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -126,6 +126,7 @@ /* RTL Parameters */ --_ui5_switch_text_inactive_left_alternate_rtl: 0.0625rem; + --_ui5_switch_text_inactive_right_rtl: 0.0625rem; } [data-ui5-compact-size], From 62d36793a2c6ba80869f84c292c2899399ee1be4 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 15 Nov 2023 17:45:13 +0200 Subject: [PATCH 13/15] fix(ui5-switch): remove most of the rtl selectors --- packages/main/src/themes/Switch.css | 55 ++++++----------------------- 1 file changed, 10 insertions(+), 45 deletions(-) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 0a2ceb0d03ae..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,7 +137,7 @@ /* switch hidden input */ .ui5-switch-root .ui5-switch-input { position: absolute; - left: 0; + inset-inline-start: 0; width: 0; height: 0; margin: 0; @@ -161,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 */ @@ -338,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, @@ -365,39 +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_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); } \ No newline at end of file From 10c39886e159c4b525b627a42603387bd13427fd Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 15 Nov 2023 17:50:35 +0200 Subject: [PATCH 14/15] fix(ui5-switch): remove unused variables from params --- packages/main/src/themes/base/Switch-parameters.css | 4 ---- packages/main/src/themes/sap_horizon/Switch-parameters.css | 4 ---- .../main/src/themes/sap_horizon_dark/Switch-parameters.css | 4 ---- .../main/src/themes/sap_horizon_hcb/Switch-parameters.css | 4 ---- .../main/src/themes/sap_horizon_hcw/Switch-parameters.css | 4 ---- 5 files changed, 20 deletions(-) diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index 6d6b41004286..30c9cd874c7a 100644 --- a/packages/main/src/themes/base/Switch-parameters.css +++ b/packages/main/src/themes/base/Switch-parameters.css @@ -136,10 +136,6 @@ --_ui5_switch_icon_width: 0.75rem; --_ui5_switch_icon_height: 0.75rem; - - /* 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/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index bd2149e626e6..21c7fda0d64c 100644 --- a/packages/main/src/themes/sap_horizon/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon/Switch-parameters.css @@ -124,10 +124,6 @@ --_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_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 8c78750dbd35..9e1d2e2287eb 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -123,10 +123,6 @@ --_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; } [data-ui5-compact-size], 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 724d3c1df016..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,10 +143,6 @@ --_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; } [data-ui5-compact-size], diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index e0610eeaf920..75997d7e0d93 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -123,10 +123,6 @@ --_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; } [data-ui5-compact-size], From 541d7168e1d6b152ed6f0008c369c49967f1257c Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 21 Nov 2023 08:38:47 +0200 Subject: [PATCH 15/15] chore: cmt css-vars-usage --- packages/theming/css-vars-usage.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json index 735786a897bc..fc34de6a48d6 100644 --- a/packages/theming/css-vars-usage.json +++ b/packages/theming/css-vars-usage.json @@ -118,7 +118,6 @@ "--sapButton_Lite_Hover_BorderColor", "--sapButton_Lite_Hover_TextColor", "--sapButton_Lite_TextColor", - "--sapButton_Negative_BorderColor", "--sapButton_Neutral_Background", "--sapButton_Reject_Active_Background", "--sapButton_Reject_Active_BorderColor",