diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 76b584e24f1e..600579bf98ae 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -47,13 +47,17 @@ background: var(--_ui5_slider_progress_background); border-radius: var(--_ui5_slider_progress_border_radius); height: var(--_ui5_slider_inner_height); - will-change: transform; position: relative; + outline: none; } -.ui5-slider-progress:focus { - outline: var(--_ui5_slider_progress_outline); - outline-offset: var(--_ui5_slider_progress_outline_offset); +.ui5-slider-progress:focus::after { + content: ''; + position: absolute; + width: 100%; + border: var(--_ui5_slider_progress_outline); + top: var(--_ui5_slider_progress_outline_offset); + height: var(--_ui5_slider_outer_height); } .ui5-slider-tickmarks { diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css index b69926826e99..c7aec2a28b76 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/packages/main/src/themes/base/SliderBase-parameters.css @@ -3,6 +3,7 @@ --_ui5_slider_progress_container_background: var(--sapField_BorderColor); --_ui5_slider_progress_border: none; --_ui5_slider_inner_height: 0.25rem; + --_ui5_slider_outer_height: 1.6875rem; --_ui5_slider_progress_border_radius: 0.25rem; --_ui5_slider_progress_background: var(--sapActiveColor); --_ui5_slider_handle_height: 1.625rem; @@ -18,7 +19,7 @@ --_ui5_slider_handle_outline_offset: 0.075rem; --_ui5_range_slider_handle_hover_background: rgba(var(--sapButton_Background), 0.25); --_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_slider_progress_outline_offset: 0.525rem; + --_ui5_slider_progress_outline_offset: -0.8125rem; --_ui5_slider_tickmark_color: #89919a; --_ui5_slider_tickmark_top: -0.375rem; --_ui5_slider_disabled_opacity: 0.4; diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 3d38132f6cbb..abf895195d92 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -232,6 +232,8 @@ --_ui5_slider_tooltip_height: 1rem; --_ui5_slider_tooltip_padding: 0.25rem; --_ui5_slider_tooltip_bottom: 1.825rem; + --_ui5_slider_progress_outline_offset: -0.625rem; + --_ui5_slider_outer_height: 1.3125rem; /* Table */ --_ui5_load_more_text_height: 2.625rem;