diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css index 8d243fe03003..19136bcf2b29 100644 --- a/packages/main/src/themes/SplitButton.css +++ b/packages/main/src/themes/SplitButton.css @@ -6,26 +6,36 @@ height: 100%; border-radius: var(--_ui5_button_border_radius); background-color: var(--sapButton_Background); + box-shadow: var(--_ui5_split_button_host_default_box_shadow); +} + +:host([disabled]:not([hidden])) { + pointer-events: none; } :host([design="Positive"]:not([hidden])) { background-color: var(--sapButton_Accept_Background); + box-shadow: var(--_ui5_split_button_host_positive_box_shadow); } :host([design="Negative"]:not([hidden])) { background-color: var(--sapButton_Reject_Background); + box-shadow: var(--_ui5_split_button_host_negative_box_shadow); } :host([design="Attention"]:not([hidden])) { background-color: var(--sapButton_Attention_Background); + box-shadow: var(--_ui5_split_button_host_attention_box_shadow); } :host([design="Emphasized"]:not([hidden])) { background-color: var(--sapButton_Emphasized_Background); + box-shadow: var(--_ui5_split_button_host_emphasized_box_shadow); } :host([design="Transparent"]:not([hidden])) { - background-color: transparent; + background-color: var(--sapButton_Lite_Background); + box-shadow: var(--_ui5_split_button_host_transparent_box_shadow); } :host([design="Transparent"][disabled]:not([hidden])) { @@ -33,7 +43,8 @@ } :host([design="Transparent"]:not([hidden]):not([disabled]):hover) { - background-color: var(--_ui5_split_button_transparent_hover_background); + background-color: var(--_ui5_split_button_host_transparent_hover_background); + box-shadow: var(--_ui5_split_button_host_transparent_hover_box_shadow); } :host([design="Transparent"]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button:not(:hover), @@ -71,8 +82,11 @@ .ui5-split-text-button { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius); + border-width: 0.0625rem; border-right-width: var(--_ui5_split_button_text_button_right_border_width); margin-right: var(--_ui5_split_button_text_button_width); + border-color: var(--_ui5_split_text_button_border_color); + background-color: var(--_ui5_split_text_button_background_color); vertical-align: top; width: inherit; } @@ -80,12 +94,76 @@ .ui5-split-text-button:hover { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius); + background-color: var(--sapButton_Hover_Background); + box-shadow: none; + border: var(--_ui5_split_text_button_hover_border); + border-right: var(--_ui5_split_text_button_hover_border_right); + border-left: var(--_ui5_split_text_button_hover_border_left); +} +.ui5-split-text-button[design="Emphasized"] { + border: var(--_ui5_split_text_button_emphasized_border); + border-width: var(--_ui5_split_text_button_emphasized_border_width); +} +.ui5-split-text-button[design="Emphasized"]:hover { + background-color: var(--sapButton_Emphasized_Hover_Background); + border: var(--_ui5_split_text_button_emphasized_hover_border); + border-right: var(--_ui5_split_text_button_emphasized_hover_border_right); + border-left: var(--_ui5_split_text_button_emphasized_hover_border_left); +} +.ui5-split-text-button[design="Positive"]:hover { + background-color: var(--sapButton_Accept_Hover_Background); + border: var(--_ui5_split_text_button_positive_hover_border); + border-right: var(--_ui5_split_text_button_positive_hover_border_right); + border-left: var(--_ui5_split_text_button_positive_hover_border_left); +} +.ui5-split-text-button[design="Negative"]:hover { + background-color: var(--sapButton_Reject_Hover_Background); + border: var(--_ui5_split_text_button_negative_hover_border); + border-right: var(--_ui5_split_text_button_negative_hover_border_right); + border-left: var(--_ui5_split_text_button_negative_hover_border_left); +} +.ui5-split-text-button[design="Attention"]:hover { + background-color: var(--sapButton_Attention_Hover_Background); + border: var(--_ui5_split_text_button_attention_hover_border); + border-right: var(--_ui5_split_text_button_attention_hover_border_right); + border-left: var(--_ui5_split_text_button_attention_hover_border_left); +} +.ui5-split-text-button[design="Transparent"]:hover { + background-color: var(--_ui5_split_button_transparent_hover_background); + border: var(--_ui5_split_text_button_transparent_hover_border); + border-right: var(--_ui5_split_text_button_transparent_hover_border_right); + border-left: var(--_ui5_split_text_button_transparent_hover_border_left); } .ui5-split-text-button[active] { outline: 0; } +.ui5-split-text-button[active][design="Emphasized"] { + background-color: var(--sapButton_Selected_Background); + color: var(--sapButton_Emphasized_Active_TextColor); +} +.ui5-split-text-button[active][design="Negative"] { + background-color: var(--sapButton_Reject_Selected_Background); + color: var(--sapButton_Reject_Active_TextColor); +} +.ui5-split-text-button[active][design="Positive"] { + background-color: var(--sapButton_Accept_Selected_Background); + color: var(--sapButton_Accept_Active_TextColor); +} +.ui5-split-text-button[active][design="Attention"] { + background-color: var(--sapButton_Attention_Selected_Background); + color: var(--sapButton_Attention_Active_TextColor); +} +.ui5-split-text-button[active][design="Default"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} +.ui5-split-text-button[active][design="Transparent"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} + .ui5-split-arrow-button-wrapper { position: absolute; top: 0; @@ -96,28 +174,41 @@ border-top-left-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); width: 2.25rem; + border-color: var(--_ui5_split_text_button_border_color); + background-color: var(--_ui5_split_text_button_background_color); } -.ui5-split-arrow-button[active][design="Default"], -.ui5-split-arrow-button[active][design="Emphasized"], -.ui5-split-arrow-button[active][design="Transparent"] { - background-color: var(--sapButton_Selected_Background); +.ui5-split-text-button[dir="rtl"]:hover { + border-top-left-radius: var(--_ui5_split_button_hover_border_radius); + border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); + border-left: var(--_ui5_split_text_button_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Negative"] { - background-color: var(--sapButton_Reject_Selected_Background); + +.ui5-split-text-button[design="Emphasized"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_emphasized_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_emphasized_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Positive"] { - background-color: var(--sapButton_Accept_Selected_Background); + +.ui5-split-text-button[design="Positive"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_positive_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_positive_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Attention"] { - background-color: var(--sapButton_Attention_Selected_Background); + +.ui5-split-text-button[design="Negative"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_negative_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_negative_hover_border_right_rtl); } -.ui5-split-text-button[dir="rtl"]:hover { - border-top-left-radius: var(--_ui5_split_button_hover_border_radius); - border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); +.ui5-split-text-button[design="Attention"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_attention_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_attention_hover_border_right_rtl); } +.ui5-split-text-button[design="Transparent"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_transparent_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_transparent_hover_border_right_rtl); +} [dir="rtl"] .ui5-split-arrow-button:hover { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); @@ -127,6 +218,40 @@ .ui5-split-arrow-button:hover { border-top-left-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); + background-color: var(--sapButton_Hover_Background); + box-shadow: none; + border: var(--_ui5_split_arrow_button_hover_border); +} + +.ui5-split-arrow-button[design="Emphasized"]:hover { + background-color: var(--sapButton_Emphasized_Hover_Background); + border: var(--_ui5_split_arrow_button_emphasized_hover_border); + border-left-width: var(--sapButton_BorderWidth); +} + +.ui5-split-arrow-button-wrapper[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"]:hover { + border-left-width: var(--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl); + border-right-width: var(--sapButton_BorderWidth); +} + +.ui5-split-arrow-button[design="Positive"]:hover { + background-color: var(--sapButton_Accept_Hover_Background); + border: var(--_ui5_split_arrow_button_positive_hover_border); +} + +.ui5-split-arrow-button[design="Negative"]:hover { + background-color: var(--sapButton_Reject_Hover_Background); + border: var(--_ui5_split_arrow_button_negative_hover_border); +} + +.ui5-split-arrow-button[design="Attention"]:hover { + background-color: var(--sapButton_Attention_Hover_Background); + border: var(--_ui5_split_arrow_button_attention_hover_border); +} + +.ui5-split-arrow-button[design="Transparent"]:hover { + background-color: var(--_ui5_split_button_transparent_hover_background); + border: var(--_ui5_split_arrow_button_transparent_hover_border); } .ui5-split-arrow-button:before { @@ -142,6 +267,19 @@ border-left-width: 0.0625rem; } +.ui5-split-arrow-button[design="Emphasized"]:before { + content: ""; + position: absolute; + box-sizing: border-box; + pointer-events: none; + left: var(--_ui5_split_button_middle_separator_left); + top: var(--_ui5_split_button_middle_separator_top); + right: 0; + height: var(--_ui5_split_button_middle_separator_height); + border: 0 solid var(--sapButton_TextColor); + border-left-width: 0.0625rem; +} + [dir="rtl"] .ui5-split-arrow-button:before { content: ""; position: absolute; @@ -184,11 +322,15 @@ .ui5-split-text-button[dir="rtl"] { border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0; - border-width: 1px 1px 1px 0; + border-width: var(--sapButton_BorderWidth); margin-right: 0; margin-left: var(--_ui5_split_button_text_button_width); } +.ui5-split-text-button[design="Emphasized"][dir="rtl"] { + border-width: var(--_ui5_split_text_button_emphasized_border_width_rtl); +} + .ui5-split-arrow-button-wrapper[dir="rtl"] { left: 0; right: auto; @@ -222,4 +364,34 @@ border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner); border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer); border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer); +} + +.ui5-split-arrow-button[active][design="Emphasized"] { + background-color: var(--sapButton_Selected_Background); + color: var(--sapButton_Emphasized_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Negative"] { + background-color: var(--sapButton_Reject_Selected_Background); + color: var(--sapButton_Reject_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Positive"] { + background-color: var(--sapButton_Accept_Selected_Background); + color: var(--sapButton_Accept_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Attention"] { + background-color: var(--sapButton_Attention_Selected_Background); + color: var(--sapButton_Attention_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Default"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Transparent"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css index 241b851d378e..97651414dfc5 100644 --- a/packages/main/src/themes/base/SplitButton-parameters.css +++ b/packages/main/src/themes/base/SplitButton-parameters.css @@ -10,8 +10,81 @@ --_ui5_split_button_text_button_width: 2.25rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Background); + --_ui5_split_button_host_transparent_hover_background: transparent; --_ui5_split_button_transparent_hover_color: var(--sapButton_Lite_TextColor); --_ui5_split_button_transparent_disabled_background: transparent; --_ui5_split_button_inner_focused_border_radius_outer: 0.25rem; --_ui5_split_button_inner_focused_border_radius_inner: 0; -} + + --_ui5_split_button_host_default_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); + --_ui5_split_button_host_attention_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Attention_BorderColor); + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Emphasized_BorderColor); + --_ui5_split_button_host_positive_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Accept_BorderColor); + --_ui5_split_button_host_negative_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Reject_BorderColor); + --_ui5_split_button_host_transparent_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Lite_BorderColor); + + --_ui5_split_button_host_transparent_hover_box_shadow: none; + + --_ui5_split_text_button_border_color: transparent; + --_ui5_split_text_button_background_color: transparent; + + + --_ui5_split_text_button_emphasized_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + + + --_ui5_split_text_button_emphasized_border_width: 0.0625rem 0 0.0625rem 0.0625rem; + + + --_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + + --_--_ui5_split_button_text_button_border_width_rtl: 0.0625rem 0.0625rem 0.0625rem 0; + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.0625rem; + + + --_ui5_split_arrow_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_arrow_button_negative_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_arrow_button_attention_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_arrow_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_hover_border_right: none; + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: none; + --_ui5_split_text_button_negative_hover_border_right: none; + --_ui5_split_text_button_attention_hover_border_right: none; + --_ui5_split_text_button_transparent_hover_border_right: none; + + --_ui5_split_text_button_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + + --_ui5_split_text_button_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: var(--sapButton_BorderWidth); +} \ 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 00a8636e237d..c00ddb146c57 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -44,4 +44,18 @@ --_ui5_segmented_btn_item_border_left: 0.0625rem; --_ui5_segmented_btn_item_border_right: 0px; --_ui5-shellbar-notification-btn-count-offset: auto; + + --_ui5_split_text_button_hover_border_left: none; + --_ui5_split_text_button_emphasized_hover_border_left: none; + --_ui5_split_text_button_positive_hover_border_left: none; + --_ui5_split_text_button_negative_hover_border_left: none; + --_ui5_split_text_button_attention_hover_border_left: none; + --_ui5_split_text_button_transparent_hover_border_left: none; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css index 18295daedf13..42b79a644297 100644 --- a/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css @@ -7,4 +7,7 @@ --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css index 18295daedf13..42b79a644297 100644 --- a/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css @@ -7,4 +7,7 @@ --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css index 0499686433d7..5e220ca5ff8b 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); -} + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_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); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_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); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_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); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_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); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; }