diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index d04924f9826e..35ead3009be4 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -6,35 +6,54 @@ .ui5-segmented-button-root { display: flex; - margin: 0; - padding: 0; + margin: 0; + padding: 0; + background-color: var(--_ui5_segmented_btn_background_color); + border-radius: var(--_ui5_segmented_btn_inner_border_radius); } ::slotted([ui5-segmented-button-item]) { - border-radius: 0; + border-radius: var(--_ui5_segmented_btn_inner_border_radius); height: var(--_ui5_button_base_height); min-width: 2.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + border: var(--_ui5_segmented_btn_inner_border); +} + +::slotted([ui5-segmented-button-item][pressed]) { + border: 0.0625rem solid var(--sapButton_Selected_BorderColor) } ::slotted([ui5-segmented-button-item]:nth-child(odd)) { - border: 1px solid var(--sapButton_Selected_BorderColor); - border-right: 0; - border-left: 0; + border-right: var(--_ui5_segmented_btn_inner_border_odd_child); + border-left: var(--_ui5_segmented_btn_inner_border_odd_child); +} + +::slotted([ui5-segmented-button-item][pressed]:nth-child(odd)) { + border-right: var(--_ui5_segmented_btn_inner_pressed_border_odd_child); + border-left: var(--_ui5_segmented_btn_inner_pressed_border_odd_child); } ::slotted([ui5-segmented-button-item]:last-child) { border-top-right-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); - border-right: 1px solid var(--sapButton_Selected_BorderColor); + border-right: var(--_ui5_segmented_btn_inner_border); +} + +::slotted([ui5-segmented-button-item][pressed]:last-child) { + border-right: 0.0625rem solid var(--sapButton_Selected_BorderColor); } ::slotted([ui5-segmented-button-item]:first-child) { border-top-left-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); - border-left: 1px solid var(--sapButton_Selected_BorderColor); + border-left: var(--_ui5_segmented_btn_inner_border); +} + +::slotted([ui5-segmented-button-item][pressed]:first-child) { + border-left: 0.0625rem solid var(--sapButton_Selected_BorderColor); } [dir="rtl"] ::slotted([ui5-segmented-button-item]:first-child) { @@ -42,7 +61,11 @@ border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: 0; border-bottom-left-radius: 0; - border-right: 1px solid var(--sapButton_Selected_BorderColor); + border-right: var(--_ui5_segmented_btn_inner_border); +} + +[dir="rtl"] ::slotted([ui5-segmented-button-item][pressed]:first-child) { + border-right: 0.0625rem solid var(--sapButton_Selected_BorderColor); } [dir="rtl"] ::slotted([ui5-segmented-button-item]:last-child) { @@ -50,7 +73,11 @@ border-bottom-right-radius: 0; border-top-left-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); - border-left: 1px solid var(--sapButton_Selected_BorderColor); + border-left: var(--_ui5_segmented_btn_inner_border); +} + +[dir="rtl"] ::slotted([ui5-segmented-button-item][pressed]:last-child) { + border-left: 0.0625rem solid var(--sapButton_Selected_BorderColor); } [dir="rtl"] ::slotted([ui5-segmented-button-item]:only-child) { @@ -58,4 +85,4 @@ border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius); border-top-left-radius: var(--_ui5_segmented_btn_border_radius); border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius); -} +} \ No newline at end of file diff --git a/packages/main/src/themes/base/SegmentedButtton-parameters.css b/packages/main/src/themes/base/SegmentedButtton-parameters.css new file mode 100644 index 000000000000..c937b7f4554b --- /dev/null +++ b/packages/main/src/themes/base/SegmentedButtton-parameters.css @@ -0,0 +1,8 @@ +:root { + --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); + --_ui5_segmented_btn_inner_border_odd_child: 0; + --_ui5_segmented_btn_inner_pressed_border_odd_child: 0; + --_ui5_segmented_btn_border_radius: 0.35rem; + --_ui5_segmented_btn_inner_border_radius: 0; + --_ui5_segmented_btn_background_color: transparent; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index d48fd4691a73..6efe32e8f3e9 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -23,6 +23,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 0bd572e59ce2..40a45d26c04f 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -23,6 +23,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "./RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css index e4646a14b078..417c6e332e3a 100644 --- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css @@ -23,6 +23,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters"; @import "./RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index 5caeac5839a5..ed622102566c 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -22,6 +22,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "../base/ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index b6104e860fc0..9b7cf9afa2b9 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -22,6 +22,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "../base/ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "../base/Select-parameters.css"; @import "../base/Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 5882d7bf8bf5..58bcef5102d8 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -23,6 +23,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters"; @import "./RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 5882d7bf8bf5..58bcef5102d8 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -23,6 +23,7 @@ @import "../base/PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters"; @import "./RadioButton-parameters.css"; +@import "../base/SegmentedButtton-parameters.css"; @import "./Select-parameters.css"; @import "./Switch-parameters.css"; @import "./TabContainer-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css new file mode 100644 index 000000000000..7ae7e3eafeb7 --- /dev/null +++ b/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css @@ -0,0 +1,10 @@ +@import "../base/SegmentedButtton-parameters.css"; + +:root { + --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; + --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; + --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); + --_ui5_segmented_btn_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: 0.5rem; + --_ui5_segmented_btn_background_color: var(--sapButton_Background); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css index cc8f2630e9bd..4681bb2db319 100644 --- a/packages/main/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css @@ -26,6 +26,7 @@ @import "./ProgressIndicator-parameters.css"; @import "../base/RadioButton-parameters.css"; @import "./RatingIndicator-parameters.css"; +@import "./SegmentedButtton-parameters.css"; @import "./RadioButton-parameters.css"; @import "../base/Select-parameters.css"; @import "./SelectPopover-parameters.css";