diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index 8a594a873cab..c10d90f967d1 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -10,7 +10,6 @@ --_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius); --_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius); --_ui5_input_background_color: var(--_ui5_shellbar_input_background_color); - --_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border); } .ui5-shellbar-root { @@ -216,6 +215,7 @@ slot[name="profile"] { } .ui5-shellbar-button { + --_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border); width: 2.5rem; } diff --git a/packages/fiori/src/themes/base/ShellBar-parameters.css b/packages/fiori/src/themes/base/ShellBar-parameters.css index d7c775e5cd84..c7f1385e75f1 100644 --- a/packages/fiori/src/themes/base/ShellBar-parameters.css +++ b/packages/fiori/src/themes/base/ShellBar-parameters.css @@ -1,24 +1,25 @@ -:root { - --_ui5_shellbar_root_height: 2.75rem; - --_ui5_shellbar_logo_outline_color: var(--sapContent_ContrastFocusColor); - --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color); - --_ui5_shellbar_outline_offset: -0.0625rem; - --_ui5_shellbar_logo_outline_offset: var(--_ui5_shellbar_outline_offset); - --_ui5_shellbar_button_box_shadow: none; - --_ui5_shellbar_button_border: none; - --_ui5_shellbar_button_border_radius: 0.25rem; - --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor); - --_ui5_shellbar_logo_outline_border_radius: 0; - --_ui5_shellbar_copilot_stop_color1: #C0D9F2; - --_ui5_shellbar_copilot_stop_color2: #FFFFFF; - --_ui5_shellbar_copilot_focus_offset: 0; - --_ui5_shellbar_search_button_size: 2.25rem; - --_ui5_shellbar_search_field_height: 2.25rem; - --_ui5_shellbar_search_button_border_radius: 0.25rem; - --_ui5_shellbar_search_field_background: var(--sapShellColor); - --_ui5_shellbar_search_field_border: 1px solid var(--sapShell_InteractiveBorderColor); - --_ui5_shellbar_search_field_color: var(--sapShell_TextColor); - --_ui5_shellbar_search_field_outline_focused: 1px dotted var(--sapContent_ContrastFocusColor); - --_ui5_shellbar_overflow_container_middle_height: 2.5rem; - --_ui5_shellbar_menu_button_title_font_size: 0.75rem; +:root { + --_ui5_shellbar_root_height: 2.75rem; + --_ui5_shellbar_logo_outline_color: var(--sapContent_ContrastFocusColor); + --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color); + --_ui5_shellbar_outline_offset: -0.0625rem; + --_ui5_shellbar_logo_outline_offset: var(--_ui5_shellbar_outline_offset); + --_ui5_shellbar_button_box_shadow: none; + --_ui5_shellbar_button_border: none; + --_ui5_shellbar_button_border_radius: 0.25rem; + --_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor); + --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor); + --_ui5_shellbar_logo_outline_border_radius: 0; + --_ui5_shellbar_copilot_stop_color1: #C0D9F2; + --_ui5_shellbar_copilot_stop_color2: #FFFFFF; + --_ui5_shellbar_copilot_focus_offset: 0; + --_ui5_shellbar_search_button_size: 2.25rem; + --_ui5_shellbar_search_field_height: 2.25rem; + --_ui5_shellbar_search_button_border_radius: 0.25rem; + --_ui5_shellbar_search_field_background: var(--sapShellColor); + --_ui5_shellbar_search_field_border: 1px solid var(--sapShell_InteractiveBorderColor); + --_ui5_shellbar_search_field_color: var(--sapShell_TextColor); + --_ui5_shellbar_search_field_outline_focused: 1px dotted var(--sapContent_ContrastFocusColor); + --_ui5_shellbar_overflow_container_middle_height: 2.5rem; + --_ui5_shellbar_menu_button_title_font_size: 0.75rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/ShellBar-parameters.css new file mode 100644 index 000000000000..2b7f59953cb9 --- /dev/null +++ b/packages/fiori/src/themes/sap_belize_hcb/ShellBar-parameters.css @@ -0,0 +1,5 @@ +@import "../base/ShellBar-parameters.css"; + +:root { + --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css index 76fedf0567b1..30004e7942cb 100644 --- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css @@ -13,3 +13,4 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./WizardTab-parameters.css"; +@import "./ShellBar-parameters.css"; diff --git a/packages/fiori/src/themes/sap_belize_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_belize_hcw/ShellBar-parameters.css new file mode 100644 index 000000000000..2b7f59953cb9 --- /dev/null +++ b/packages/fiori/src/themes/sap_belize_hcw/ShellBar-parameters.css @@ -0,0 +1,5 @@ +@import "../base/ShellBar-parameters.css"; + +:root { + --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css index 76fedf0567b1..30004e7942cb 100644 --- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css @@ -13,3 +13,4 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./WizardTab-parameters.css"; +@import "./ShellBar-parameters.css"; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css new file mode 100644 index 000000000000..2b7f59953cb9 --- /dev/null +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css @@ -0,0 +1,5 @@ +@import "../base/ShellBar-parameters.css"; + +:root { + --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 76fedf0567b1..30004e7942cb 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -13,3 +13,4 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./WizardTab-parameters.css"; +@import "./ShellBar-parameters.css"; diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css new file mode 100644 index 000000000000..2b7f59953cb9 --- /dev/null +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css @@ -0,0 +1,5 @@ +@import "../base/ShellBar-parameters.css"; + +:root { + --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 76fedf0567b1..30004e7942cb 100644 --- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -13,3 +13,4 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; @import "./WizardTab-parameters.css"; +@import "./ShellBar-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css index dc573b9456e3..d50e620170ae 100644 --- a/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/ShellBar-parameters.css @@ -1,34 +1,35 @@ -:root { - --_ui5_shellbar_root_height: 3.25rem; - --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); - --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color); - --_ui5_shellbar_logo_outline_offset: -0.125rem; - --_ui5_shellbar_outline_offset: -0.1875rem; - - --_ui5_shellbar_button_border: none; - --_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius); - --_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground); - --_ui5_shellbar_logo_border_radius: 0.5rem; - --_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow); - --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor); - --_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius); - --_ui5_shellbar_copilot_stop_color1: #0070F2; - --_ui5_shellbar_copilot_stop_color2: #EBF8FF; - --_ui5_shellbar_copilot_focus_offset: 3px; - --_ui5_shellbar_search_button_border_radius: 50%; - --_ui5_shellbar_search_button_size: 1.75rem; - --_ui5_shellbar_search_field_height: 2.25rem; - --_ui5_shellbar_search_field_background: var(--sapShell_InteractiveBackground); - --_ui5_shellbar_search_field_border: none; - --_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor); - --_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background); - --_ui5_shellbar_search_field_box_shadow_hover: var(--sapContent_Interaction_Shadow); - --_ui5_shellbar_overflow_container_middle_height: 3rem; - --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); -} - -:root { - --_ui5_shellbar_input_border_radius: 1.125rem; - --_ui5_shellbar_input_focus_border_radius: 1.125rem; - --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground); +:root { + --_ui5_shellbar_root_height: 3.25rem; + --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); + --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color); + --_ui5_shellbar_logo_outline_offset: -0.125rem; + --_ui5_shellbar_outline_offset: -0.1875rem; + + --_ui5_shellbar_button_border: none; + --_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_shellbar_button_focused_border: 0.125rem solid var(--sapContent_FocusColor); + --_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground); + --_ui5_shellbar_logo_border_radius: 0.5rem; + --_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow); + --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor); + --_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius); + --_ui5_shellbar_copilot_stop_color1: #0070F2; + --_ui5_shellbar_copilot_stop_color2: #EBF8FF; + --_ui5_shellbar_copilot_focus_offset: 3px; + --_ui5_shellbar_search_button_border_radius: 50%; + --_ui5_shellbar_search_button_size: 1.75rem; + --_ui5_shellbar_search_field_height: 2.25rem; + --_ui5_shellbar_search_field_background: var(--sapShell_InteractiveBackground); + --_ui5_shellbar_search_field_border: none; + --_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor); + --_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background); + --_ui5_shellbar_search_field_box_shadow_hover: var(--sapContent_Interaction_Shadow); + --_ui5_shellbar_overflow_container_middle_height: 3rem; + --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); +} + +:root { + --_ui5_shellbar_input_border_radius: 1.125rem; + --_ui5_shellbar_input_focus_border_radius: 1.125rem; + --_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css index 29b0c5118260..89ea7fecf7bd 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/ShellBar-parameters.css @@ -1,34 +1,35 @@ -:root { - --_ui5_shellbar_root_height: 3.25rem; - --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); - --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color); - --_ui5_shellbar_logo_outline_offset: -0.125rem; - --_ui5_shellbar_outline_offset: -0.1875rem; - - --_ui5_shellbar_button_border: none; - --_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius); - --_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground); - --_ui5_shellbar_logo_border_radius: 0.5rem; - --_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow); - --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor); - --_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius); - --_ui5_shellbar_copilot_stop_color1: #0070F2; - --_ui5_shellbar_copilot_stop_color2: #EBF8FF; - --_ui5_shellbar_copilot_focus_offset: 3px; - --_ui5_shellbar_search_button_border_radius: 50%; - --_ui5_shellbar_search_button_size: 1.75rem; - --_ui5_shellbar_search_field_height: 2.25rem; - --_ui5_shellbar_search_field_background: var(--sapShell_InteractiveBackground); - --_ui5_shellbar_search_field_border: none; - --_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor); - --_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background); - --_ui5_shellbar_search_field_box_shadow_hover: var(--sapContent_Interaction_Shadow); - --_ui5_shellbar_overflow_container_middle_height: 3rem; - --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); -} - -:root { - --_ui5_shellbar_border_radius: 1.125rem; - --_ui5_shellbar_focus_border_radius: 1.125rem; - --_ui5_shellbar_background_color: var(--sapShell_InteractiveBackground); +:root { + --_ui5_shellbar_root_height: 3.25rem; + --_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor); + --_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color); + --_ui5_shellbar_logo_outline_offset: -0.125rem; + --_ui5_shellbar_outline_offset: -0.1875rem; + + --_ui5_shellbar_button_border: none; + --_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_shellbar_button_focused_border: 0.125rem solid var(--sapContent_FocusColor); + --_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground); + --_ui5_shellbar_logo_border_radius: 0.5rem; + --_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow); + --_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor); + --_ui5_shellbar_logo_outline_border_radius: var(--sapField_BorderCornerRadius); + --_ui5_shellbar_copilot_stop_color1: #0070F2; + --_ui5_shellbar_copilot_stop_color2: #EBF8FF; + --_ui5_shellbar_copilot_focus_offset: 3px; + --_ui5_shellbar_search_button_border_radius: 50%; + --_ui5_shellbar_search_button_size: 1.75rem; + --_ui5_shellbar_search_field_height: 2.25rem; + --_ui5_shellbar_search_field_background: var(--sapShell_InteractiveBackground); + --_ui5_shellbar_search_field_border: none; + --_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor); + --_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background); + --_ui5_shellbar_search_field_box_shadow_hover: var(--sapContent_Interaction_Shadow); + --_ui5_shellbar_overflow_container_middle_height: 3rem; + --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); +} + +:root { + --_ui5_shellbar_border_radius: 1.125rem; + --_ui5_shellbar_focus_border_radius: 1.125rem; + --_ui5_shellbar_background_color: var(--sapShell_InteractiveBackground); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css index c039855a785b..51061e6dc404 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/ShellBar-parameters.css @@ -1,11 +1,12 @@ -@import "../base/ShellBar-parameters.css"; - -:root { - --_ui5_shellbar_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); - --_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius); - --_ui5_shellbar_button_badge_border: 1px solid var(--sapGroup_ContentBorderColor); - --_ui5_shellbar_outline_offset: -0.1875rem; - --_ui5_shellbar_search_field_height: 2.25rem; - --_ui5_shellbar_search_field_outline_focused: none; - --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); +@import "../base/ShellBar-parameters.css"; + +:root { + --_ui5_shellbar_button_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); + --_ui5_shellbar_button_badge_border: 1px solid var(--sapGroup_ContentBorderColor); + --_ui5_shellbar_outline_offset: -0.1875rem; + --_ui5_shellbar_search_field_height: 2.25rem; + --_ui5_shellbar_search_field_outline_focused: none; + --_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css new file mode 100644 index 000000000000..2b7f59953cb9 --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_hcw/ShellBar-parameters.css @@ -0,0 +1,5 @@ +@import "../base/ShellBar-parameters.css"; + +:root { + --_ui5_shellbar_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css index 50383d7364c0..47d7c10d4bc8 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css @@ -13,3 +13,4 @@ @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; @import "./WizardTab-parameters.css"; +@import "./ShellBar-parameters.css";