Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-split-button): adapt visual design with new parameters #7584

Merged
merged 3 commits into from
Sep 18, 2023
Merged

feat(ui5-split-button): adapt visual design with new parameters #7584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
586be5c
feat(ui5-split-button): adapt visual design with new parameters
hinzzx Sep 13, 2023
be57ac0
fix(ui5-split-button): remove redunant comments
hinzzx Sep 13, 2023
870155e
fix(ui5-split-button): code review changes
hinzzx Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 188 additions & 16 deletions packages/main/src/themes/SplitButton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,45 @@
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])) {
background-color: var(--_ui5_split_button_transparent_disabled_background);
}

: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),
Expand Down Expand Up @@ -71,21 +82,88 @@
.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;
}

.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;
Expand All @@ -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);
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
75 changes: 74 additions & 1 deletion packages/main/src/themes/base/SplitButton-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Loading