diff --git a/packages/main/src/SplitButton.hbs b/packages/main/src/SplitButton.hbs
index fdda448627c9..be74198b224d 100644
--- a/packages/main/src/SplitButton.hbs
+++ b/packages/main/src/SplitButton.hbs
@@ -28,12 +28,8 @@
{{/if}}
-
-
-
-
{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}
{{textButtonAccText}}
diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css
index 6062ec00e7d6..5dd13334d576 100644
--- a/packages/main/src/themes/SplitButton.css
+++ b/packages/main/src/themes/SplitButton.css
@@ -2,7 +2,7 @@
@import "./InvisibleTextStyles.css";
:host(:not([hidden])) {
- display: inline-block;
+ display: inline-flex;
height: 100%;
border-radius: var(--_ui5_button_border_radius);
background-color: var(--sapButton_Background);
@@ -97,10 +97,7 @@
content: "";
position: absolute;
box-sizing: border-box;
- left: 0.125rem;
- top: 0.125rem;
- right: 0.125rem;
- bottom: 0.125rem;
+ inset: 0.125rem;
border: var(--_ui5_split_button_focused_border);
pointer-events: none;
border-radius: var(--_ui5_split_button_focused_border_radius);
@@ -111,7 +108,7 @@
}
.ui5-split-button-root {
- display: inline-block;
+ display: inline-flex;
position: relative;
width: inherit;
}
@@ -123,25 +120,23 @@
}
.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-start-end-radius: var(--_ui5_split_button_hover_border_radius);
+ border-end-end-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-inline-end-width: var(--_ui5_split_button_text_button_right_border_width);
border-color: var(--_ui5_split_text_button_border_color);
background-color: var(--_ui5_split_text_button_background_color);
vertical-align: top;
- width: inherit;
+ flex-grow: 1;
}
.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);
+ border-start-end-radius: var(--_ui5_split_button_hover_border_radius);
+ border-end-end-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);
+ border-inline-end: var(--_ui5_split_text_button_hover_border_right);
}
.ui5-split-text-button[design="Emphasized"] {
border: var(--_ui5_split_text_button_emphasized_border);
@@ -149,33 +144,26 @@
}
.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);
+ border-inline-end: var(--_ui5_split_text_button_positive_hover_border_right);
}
.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);
+ border-inline-end: var(--_ui5_split_text_button_negative_hover_border_right);
}
.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);
+ border-inline-end: var(--_ui5_split_text_button_attention_hover_border_right);
}
.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);
+ border-inline-end: var(--_ui5_split_text_button_transparent_hover_border_right);
}
.ui5-split-text-button[active][design="Emphasized"] {
@@ -213,60 +201,20 @@
outline: 0;
}
-.ui5-split-arrow-button-wrapper {
- position: absolute;
- top: 0;
- right: 0;
-}
-
.ui5-split-arrow-button {
- border-top-left-radius: var(--_ui5_split_button_hover_border_radius);
- border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius);
+ border-start-start-radius: var(--_ui5_split_button_hover_border_radius);
+ border-end-start-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-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-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-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-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[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);
- border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
+ position: relative;
+ border-width: 0.0625rem;
+ overflow: visible;
}
.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);
+ border-start-start-radius: var(--_ui5_split_button_hover_border_radius);
+ border-end-start-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);
@@ -275,12 +223,10 @@
.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);
+ box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow, none)
}
-
-.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);
+[dir="rtl"].ui5-split-arrow-button[design="Emphasized"]:hover {
+ box-shadow: var(--_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl, none);
}
.ui5-split-arrow-button[design="Positive"]:hover {
@@ -308,111 +254,65 @@
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;
+ width: 0.0625rem;
+ background-color: var(--sapButton_TextColor);
+ inset-inline-start: var(--_ui5_split_button_middle_separator_left);
+ inset-block-start: var(--_ui5_split_button_middle_separator_top);
height: var(--_ui5_split_button_middle_separator_height);
- border: 0 solid var(--sapButton_TextColor);
- border-left-width: 0.0625rem;
}
-.ui5-split-arrow-button[design="Emphasized"]:before {
+.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;
+ inset-inline-start: var(--_ui5_split_button_middle_separator_left);
+ inset-block-start: var(--_ui5_split_button_middle_separator_top);
+ inset-inline-end: 0;
height: var(--_ui5_split_button_middle_separator_height);
- border: 0 solid var(--sapButton_TextColor);
- border-left-width: 0.0625rem;
+ width: 0.0625rem;
}
-[dir="rtl"] .ui5-split-arrow-button:before {
- content: "";
- position: absolute;
- box-sizing: border-box;
- pointer-events: none;
- right: var(--_ui5_split_button_middle_separator_left);
- top: var(--_ui5_split_button_middle_separator_top);
- left: 0;
- height: var(--_ui5_split_button_middle_separator_height);
- border: 0 solid var(--sapButton_TextColor);
- border-right-width: 0.0625rem;
- border-left-width: 0;
-}
-
-.ui5-split-text-button:hover + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button:before,
+.ui5-split-text-button:hover + .ui5-split-arrow-button:before,
.ui5-split-arrow-button:hover:before {
display: var(--_ui5_split_button_middle_separator_hover_display);
}
-/* separator colors */
-.ui5-split-arrow-button[design="Transparent"]:before {
- border-color: var(--sapButton_Lite_TextColor);
-}
-
-.ui5-split-arrow-button[design="Emphasized"]:before {
- border-color: var(--sapButton_Emphasized_TextColor);
+.ui5-split-arrow-button[design="Emphasized"]:hover:before {
+ display: var(--_ui5_split_button_middle_separator_hover_display_emphasized);
}
-.ui5-split-arrow-button[design="Positive"]:before {
- border-color: var(--sapButton_Accept_TextColor);
-}
-
-.ui5-split-arrow-button[design="Negative"]:before {
- border-color: var(--sapButton_Reject_TextColor);
-}
-
-.ui5-split-arrow-button[design="Attention"]:before {
- border-color: var(--_ui5_split_button_attention_separator_color_default);
+/* separator colors */
+.ui5-split-arrow-button[design="Transparent"]::before {
+ background-color: var(--sapButton_Lite_TextColor);
}
-.ui5-split-text-button[dir="rtl"] {
- border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0;
- border-width: var(--sapButton_BorderWidth);
- margin-right: 0;
- margin-left: var(--_ui5_split_button_text_button_width);
+.ui5-split-arrow-button[design="Emphasized"]::before {
+ background-color: var(--sapButton_Emphasized_TextColor);
}
-.ui5-split-text-button[design="Emphasized"][dir="rtl"] {
- border-width: var(--_ui5_split_text_button_emphasized_border_width_rtl);
+.ui5-split-arrow-button[design="Positive"]::before {
+ background-color: var(--sapButton_Accept_TextColor);
}
-.ui5-split-arrow-button-wrapper[dir="rtl"] {
- left: 0;
- right: auto;
+.ui5-split-arrow-button[design="Negative"]::before {
+ background-color: var(--sapButton_Reject_TextColor);
}
-[dir="rtl"] .ui5-split-arrow-button {
- border-radius: var(--_ui5_button_border_radius) 0 0 var(--_ui5_button_border_radius);
+.ui5-split-arrow-button[design="Attention"]::before {
+ background-color: var(--_ui5_split_button_attention_separator_color_default);
}
.ui5-split-arrow-button[focused]::part(button)::after {
- border-top-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
- border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
+ border-start-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
+ border-end-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
}
.ui5-split-text-button[focused]::part(button)::after {
- border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
- border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-}
-
-[dir="rtl"] .ui5-split-arrow-button[focused]::part(button)::after {
- border-top-left-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
- border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
- border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
- border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
-}
-
-.ui5-split-text-button[dir="rtl"][focused]::part(button)::after {
- border-top-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
- 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);
+ border-start-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
+ border-end-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
}
.ui5-split-text-button[active][design="Emphasized"] {
@@ -438,30 +338,30 @@
:host([active-arrow-button]) .ui5-split-arrow-button::before,
.ui5-split-arrow-button[active]::before,
-.ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
- border-color: transparent;
+.ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+ background-color: var(--sapButton_TextColor);
}
:host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button::before,
:host([design="Emphasized"]) .ui5-split-arrow-button[active]::before,
-:host([design="Emphasized"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
- border-color: var(--_ui5_split_button_emphasized_separator_color);
+:host([design="Emphasized"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+ background-color: var(--_ui5_split_button_emphasized_separator_color);
}
:host([design="Positive"][active-arrow-button]) .ui5-split-arrow-button::before,
:host([design="Positive"]) .ui5-split-arrow-button[active]::before,
-:host([design="Positive"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
- border-color: var(--_ui5_split_button_positive_separator_color);
+:host([design="Positive"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+ background-color: var(--_ui5_split_button_positive_separator_color);
}
:host([design="Negative"][active-arrow-button]) .ui5-split-arrow-button::before,
:host([design="Negative"]) .ui5-split-arrow-button[active]::before,
-:host([design="Negative"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
- border-color: var(--_ui5_split_button_negative_separator_color);
+:host([design="Negative"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+ background-color: var(--_ui5_split_button_negative_separator_color);
}
:host([design="Attention"][active-arrow-button]) .ui5-split-arrow-button::before,
:host([design="Attention"]) .ui5-split-arrow-button[active]::before,
-:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
- border-color: var(--_ui5_split_button_attention_separator_color);
-}
\ No newline at end of file
+:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
+ background-color: var(--_ui5_split_button_attention_separator_color);
+}
diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css
index 17a2f5c11ab4..91decf73e176 100644
--- a/packages/main/src/themes/base/SplitButton-parameters.css
+++ b/packages/main/src/themes/base/SplitButton-parameters.css
@@ -4,7 +4,7 @@
--_ui5_split_button_hover_border_radius: 0;
--_ui5_split_button_hover_border_radius: 0;
--_ui5_split_button_middle_separator_width: 0;
- --_ui5_split_button_middle_separator_left: 0;
+ --_ui5_split_button_middle_separator_left: -0.0625rem;
--_ui5_split_button_middle_separator_hover_display: block;
--_ui5_split_button_text_button_width: 2.25rem;
--_ui5_split_button_text_button_right_border_width: 0;
@@ -39,7 +39,7 @@
--_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_emphasized_border_width: 0.0625rem;
--_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
@@ -50,11 +50,6 @@
--_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);
@@ -77,21 +72,5 @@
--_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);
+ --_ui5_split_button_middle_separator_hover_display_emphasized: block;
}
\ 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..00a8636e237d 100644
--- a/packages/main/src/themes/base/rtl-parameters.css
+++ b/packages/main/src/themes/base/rtl-parameters.css
@@ -44,18 +44,4 @@
--_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/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 9087ead0e133..bc4a3d38e7c8 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -132,7 +132,7 @@
--_ui5_timeline_tli_indicator_before_without_icon_right: -1.9375rem;
/* SplitButton */
- --_ui5_split_button_middle_separator_top: 0;
+ --_ui5_split_button_middle_separator_top: -0.0625rem;
--_ui5_split_button_middle_separator_height: 2.25rem;
/* Toolbar */
@@ -304,7 +304,6 @@
--_ui5_slider_outer_height: 1.3125rem;
/* SplitButton */
- --_ui5_split_button_middle_separator_top: 0;
--_ui5_split_button_middle_separator_height: 1.625rem;
/* StepInput */
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 ef1956216ede..d4fda362ffa3 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
@@ -20,15 +20,14 @@
--_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;
+ --_ui5_split_arrow_button_emphasized_hover_border: 0.0625rem solid var(--sapButton_Emphasized_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_border_left: 0.0625rem;
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
}
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 5e220ca5ff8b..e096ee78344e 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
@@ -20,15 +20,15 @@
--_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: 0.0625rem 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;
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
}
\ 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 4596e032b102..36f15169b535 100644
--- a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
@@ -29,18 +29,5 @@
--_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);
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
}
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 4596e032b102..b6a9df81bc1a 100644
--- a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
@@ -28,19 +28,5 @@
--_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);
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
}
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 4596e032b102..26856f6acb4d 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
@@ -28,19 +28,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);
-
- /* 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 4596e032b102..26856f6acb4d 100644
--- a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
@@ -28,19 +28,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);
-
- /* 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 ef1956216ede..3c6f65e1667b 100644
--- a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css
@@ -20,15 +20,15 @@
--_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: 0.0625rem 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;
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
}
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 ef1956216ede..3c6f65e1667b 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
@@ -20,15 +20,15 @@
--_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: 0.0625rem 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;
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
}
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 ef1956216ede..3c6f65e1667b 100644
--- a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css
@@ -20,15 +20,15 @@
--_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: 0.0625rem 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;
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
}
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 ef1956216ede..917386d59c1e 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
@@ -20,15 +20,15 @@
--_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: 0.0625rem 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;
+ --_ui5_split_button_middle_separator_hover_display_emphasized: none;
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset -0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
+ --_ui5_split_arrow_button_emphasized_hover_box_shadow_rtl:
+ inset 0 -0.0625rem 0 var(--sapButton_BorderColor),
+ inset 0.0625rem 0 0 var(--sapButton_BorderColor),
+ inset 0 0.0625rem 0 var(--sapButton_BorderColor);
}
diff --git a/packages/main/test/pages/SplitButton.html b/packages/main/test/pages/SplitButton.html
index b3427816ab02..1ee7acd66e8f 100644
--- a/packages/main/test/pages/SplitButton.html
+++ b/packages/main/test/pages/SplitButton.html
@@ -14,11 +14,23 @@
-
+
+
+ Random Text
+
+
+
+ Random Text
+
+
+
+ Random Text
+
+