diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 71a6f13508d3..6bcbe010ca1d 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -1105,6 +1105,7 @@ class Select extends UI5Element implements IFormInputElement { }, responsivePopover: { "min-width": `${this.offsetWidth}px`, + "margin-top": "var(--sapField_BorderWidth)", }, }; } diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 94971eab04f4..5d70cb491b13 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -25,6 +25,7 @@ cursor: pointer; overflow: hidden; border-radius: var(--_ui5_input_border_radius); + background: var(--_ui5_select_bottom_border_gradient); } .ui5-select-label-root { diff --git a/packages/main/src/themes/base/Select-parameters.css b/packages/main/src/themes/base/Select-parameters.css index d7008031e5f1..18495f7104a9 100644 --- a/packages/main/src/themes/base/Select-parameters.css +++ b/packages/main/src/themes/base/Select-parameters.css @@ -3,6 +3,8 @@ --_ui5_select_label_color: var(--sapField_TextColor); --_ui5_select_icon_width: 2.25rem; --_ui5_select_icon_wrapper_height: 100%; + --_ui5_select_bottom_border_gradient: none; + --_ui5_select_icon_wrapper_state_height: 100%; } @container style(--ui5_content_density: compact) { diff --git a/packages/main/src/themes/sap_horizon/Select-parameters.css b/packages/main/src/themes/sap_horizon/Select-parameters.css index 546ea91390c8..edf106fbe0a2 100644 --- a/packages/main/src/themes/sap_horizon/Select-parameters.css +++ b/packages/main/src/themes/sap_horizon/Select-parameters.css @@ -2,8 +2,11 @@ :host { --_ui5_select_hover_icon_left_border: none; - --_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem); - --_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem); + --_ui5_select_icon_wrapper_height: 100%; + --_ui5_select_icon_wrapper_state_height: 100%; + --_ui5_input_icon_hover_bg: transparent; + --_ui5_input_icon_pressed_bg: transparent; + --_ui5_select_bottom_border_gradient: linear-gradient(var(--sapField_BorderColor), var(--sapField_BorderColor)) bottom / 100% var(--sapField_BorderWidth) no-repeat; --_ui5_input_focus_outline_color: var(--sapContent_FocusColor); --_ui5_input_readonly_focus_border_radius: 0; -} \ No newline at end of file +} diff --git a/packages/main/src/themes/sap_horizon_dark/Select-parameters.css b/packages/main/src/themes/sap_horizon_dark/Select-parameters.css index 546ea91390c8..edf106fbe0a2 100644 --- a/packages/main/src/themes/sap_horizon_dark/Select-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Select-parameters.css @@ -2,8 +2,11 @@ :host { --_ui5_select_hover_icon_left_border: none; - --_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem); - --_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem); + --_ui5_select_icon_wrapper_height: 100%; + --_ui5_select_icon_wrapper_state_height: 100%; + --_ui5_input_icon_hover_bg: transparent; + --_ui5_input_icon_pressed_bg: transparent; + --_ui5_select_bottom_border_gradient: linear-gradient(var(--sapField_BorderColor), var(--sapField_BorderColor)) bottom / 100% var(--sapField_BorderWidth) no-repeat; --_ui5_input_focus_outline_color: var(--sapContent_FocusColor); --_ui5_input_readonly_focus_border_radius: 0; -} \ No newline at end of file +}