diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index c3bcb2053b9e..9f90f6e9316b 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -150,6 +150,7 @@ .ui5-slider-tooltip { display: flex; + font-family: var(--sapFontFamily); justify-content: center; align-items: center; visibility: hidden; @@ -195,6 +196,7 @@ text-align: center; display: inline-block; color: var(--_ui5_slider_label_color); + font-family: var(--sapFontFamily); font-size: var(--_ui5_slider_label_fontsize); padding-top: 0; box-sizing: border-box; diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 755eb6ba2d14..d6ce77cadc7c 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -344,7 +344,7 @@ /* Slider */ --_ui5_slider_handle_height: 1.25rem; - --_ui5_slider_handle_width: 1.25rem; + --_ui5_slider_handle_width: 1.5rem; --_ui5_slider_handle_top: -.5rem; --_ui5_slider_tooltip_height: 1rem; --_ui5_slider_tooltip_padding: 0.25rem; diff --git a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css index 2de72d32c18f..dbe087350eee 100644 --- a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css @@ -15,3 +15,10 @@ --_ui5_slider_handle_box_sizing: border-box; --_ui5_slider_tickmark_top: -.34375rem; } + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { +--_ui5_slider_handle_width: 1.25rem; +--_ui5_slider_handle_height: 1.25rem; +} diff --git a/packages/main/src/themes/sap_fiori_3/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css index 4079a56e6d86..c7c02ef10e05 100644 --- a/packages/main/src/themes/sap_fiori_3/sizes-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css @@ -15,4 +15,8 @@ /* Timeline Group Item */ --_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem; + + /* Slider, Range Slider */ + --_ui5_slider_handle_width: 1.25rem; + --_ui5_slider_handle_height: 1.25rem; } diff --git a/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css index 861d462d5255..06cc148f42b7 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css @@ -4,4 +4,11 @@ --_ui5_slider_inner_min_width: 4rem; --_ui5_range_slider_handle_background: transparent; --_ui5_range_slider_root_hover_handle_bg: transparent; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { +--_ui5_slider_handle_width: 1.25rem; +--_ui5_slider_handle_height: 1.25rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css index a27f56354911..fc8bffef6f09 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css @@ -12,4 +12,8 @@ --_ui5_timeline_tli_indicator_after_height: 50%; --_ui5_timeline_tli_indicator_after_top: -50%; --_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem); + + /* Slider, Range Slider */ + --_ui5_slider_handle_width: 1.25rem; + --_ui5_slider_handle_height: 1.25rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css index bb16053d7cc8..5fff98e70b9c 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css @@ -1,4 +1,10 @@ @import "../base/sizes-parameters.css"; +:root { + /* Slider, Range Slider */ + --_ui5_slider_handle_width: 1.25rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_top: -0.5rem; +} [data-ui5-compact-size], .ui5-content-density-compact, diff --git a/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css index bb16053d7cc8..5fff98e70b9c 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css @@ -1,4 +1,10 @@ @import "../base/sizes-parameters.css"; +:root { + /* Slider, Range Slider */ + --_ui5_slider_handle_width: 1.25rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_top: -0.5rem; +} [data-ui5-compact-size], .ui5-content-density-compact, diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css index ed7c07204790..8fa79db76b4a 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css @@ -20,7 +20,7 @@ --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_inner_height: 0.25rem; --_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); - --_ui5_slider_progress_border_radius: 0.375rem; + --_ui5_slider_progress_border_radius: 0.25rem; --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_container_background: var(--sapSlider_Background); --_ui5_slider_progress_container_dot_display: block; diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css index fbd6faa2fa83..f76e67e9e48c 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css @@ -20,7 +20,7 @@ --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_inner_height: 0.25rem; --_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); - --_ui5_slider_progress_border_radius: 0.375rem; + --_ui5_slider_progress_border_radius: 0.25rem; --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_container_background: var(--sapSlider_Background); --_ui5_slider_progress_container_dot_display: block;