diff --git a/packages/main/src/Slider.ts b/packages/main/src/Slider.ts index 791377e0f5f3..907b259ab8b5 100644 --- a/packages/main/src/Slider.ts +++ b/packages/main/src/Slider.ts @@ -312,8 +312,8 @@ class Slider extends SliderBase implements IFormInputElement { get styles() { return { progress: { - "transform": `scaleX(${this._progressPercentage})`, - "transform-origin": `${this.directionStart} top`, + "width": `${this._handlePositionFromStart}%`, + "border": this._handlePositionFromStart === 0 ? "none" : "", }, handle: { [this.directionStart]: `${this._handlePositionFromStart}%`, diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 1649fabe8dc1..139efc50b328 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -19,7 +19,7 @@ .ui5-slider-root { box-sizing: border-box; - height: 3.3125rem; + height: var(--_ui5_slider_root_height); outline: none; padding: var(--_ui5_slider_padding); touch-action: none; @@ -68,13 +68,13 @@ .ui5-slider-progress { background: var(--_ui5_slider_progress_background); - border-radius: var(--_ui5_slider_progress_border_radius); - height: var(--_ui5_slider_progress_height); - position: relative; + border-radius: var(--_ui5_slider_active_progress_border_radius); + height: var(--_ui5_slider_active_progress_height); + position: absolute; outline: none; - box-sizing: var(--_ui5_slider_active_progress_box_sizing); + box-sizing: content-box; border: var(--_ui5_slider_active_progress_border); - left: var(--_ui5_slider_active_progress_left); + inset-inline-start: var(--_ui5_slider_active_progress_left); top: var(--_ui5_slider_active_progress_top); } @@ -247,9 +247,9 @@ } :host([show-tickmarks]) .ui5-slider-progress { - height: var(--_ui5_slider_no_tickmarks_progress_height); + height: var(--_ui5_slider_no_tickmarks_active_progress_height); border: var(--_ui5_slider_no_tickmarks_active_progress_border); - left: var(--_ui5_slider_no_tickmarks_active_progress_left); + inset-inline-start: var(--_ui5_slider_no_tickmarks_active_progress_left); top: var(--_ui5_slider_no_tickmarks_active_progress_top); } diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css index 02c7760224f2..97bee726847c 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/packages/main/src/themes/base/SliderBase-parameters.css @@ -4,17 +4,23 @@ --_ui5_slider_progress_container_dot_display: none; --_ui5_slider_progress_container_dot_background: var(--sapField_BorderColor); --_ui5_slider_progress_border: solid 0.0625rem var(--sapSlider_BorderColor); + --_ui5_slider_progress_before_background: transparent; + --_ui5_slider_progress_after_background: transparent; + --_ui5_slider_progress_before_border: none; + --_ui5_slider_progress_after_border: none; --_ui5_slider_padding: 1.406rem 1.0625rem; + --_ui5_slider_root_height: 2.75rem; --_ui5_slider_inner_height: 0.25rem; + --_ui5_slider_inner_min_width: 4rem; --_ui5_slider_outer_height: 1.6875rem; --_ui5_slider_progress_border_radius: 0.25rem; --_ui5_slider_progress_background: var(--sapActiveColor); --_ui5_slider_handle_icon_display: none; --_ui5_range_slider_root_hover_handle_icon_display: none; - --_ui5_slider_handle_height: 1.625rem; - --_ui5_slider_handle_width: 1.625rem; - --_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor); - --_ui5_slider_handle_border_radius: 1rem; + --_ui5_slider_handle_height: 1.5rem; + --_ui5_slider_handle_width: 2rem; + --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); + --_ui5_slider_handle_border_radius: 0.5rem; --_ui5_slider_handle_background: var(--sapButton_Background); --_ui5_range_slider_handle_background: #FFF; --_ui5_slider_handle_top: -0.825rem; @@ -49,9 +55,9 @@ --_ui5_range_slider_progress_focus_height: 2rem; --_ui5_range_slider_legacy_progress_focus_display: block; --_ui5_slider_handle_focus_width: 0; - --_ui5_slider_start_end_point_size: .375rem; - --_ui5_slider_start_end_point_left: -0.875rem; - --_ui5_slider_start_end_point_top: -.1875rem; + --_ui5_slider_start_end_point_size: 0.5rem; + --_ui5_slider_start_end_point_left: -0.75rem; + --_ui5_slider_start_end_point_top: -0.1875rem; --_ui5_slider_handle_background_focus: var(--sapButton_Active_Background); --_ui5_slider_handle_focused_tooltip_distance: var(--_ui5_slider_tooltip_bottom); --_ui5_slider_handle_box_sizing: content-box; @@ -61,33 +67,40 @@ --_ui5_range_slider_handle_background_focus: transparent; --_ui5_range_slider_progress_focus_width: 100%; --_ui5_range_slider_root_active_handle_icon_display: none; - --_ui5_slider_tickmark_height: 1rem; - --_ui5_slider_tickmark_top: -.3125rem; + --_ui5_slider_tickmark_height: 0.5rem; + --_ui5_slider_tickmark_top: -0.125rem; --_ui5_slider_progress_box_sizing: border-box; --_ui5_slider_active_progress_box_sizing: content-box; - --_ui5_slider_tickmark_in_range_bg: var(--sapField_BorderColor); --_ui5_range_slider_focus_outline_width: 100%; --_ui5_slider_progress_outline_offset_left: 0; --_ui5_range_slider_focus_outline_radius: 0; --_ui5_slider_progress_container_top: 0; - --_ui5_slider_progress_height: 100%; + --_ui5_slider_progress_height: 0.25rem; --_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor); - --_ui5_slider_active_progress_left: 0; - --_ui5_slider_active_progress_top: 0; + --_ui5_slider_active_progress_border_radius: 0.25rem; + --_ui5_slider_active_progress_left: -0.0625rem; + --_ui5_slider_active_progress_top: -0.0625rem; + --_ui5_slider_active_progress_padding: 0.125rem; + --_ui5_slider_active_progress_height: calc(var(--_ui5_slider_progress_height) - 0.125rem); --_ui5_slider_no_tickmarks_progress_container_top: var(--_ui5_slider_progress_container_top); --_ui5_slider_no_tickmarks_progress_height: var(--_ui5_slider_progress_height); --_ui5_slider_no_tickmarks_active_progress_border: var(--_ui5_slider_active_progress_border); - --_ui5_slider_no_tickmarks_active_progress_left: var(--_ui5_slider_active_progress_left); - --_ui5_slider_no_tickmarks_active_progress_top: var(--_ui5_slider_active_progress_top); + --_ui5_slider_no_tickmarks_active_progress_left: -0.0625rem; + --_ui5_slider_no_tickmarks_active_progress_top: -0.0625rem; + --_ui5_slider_no_tickmarks_active_progress_height: calc(var(--_ui5_slider_no_tickmarks_progress_height) - 0.125rem); --_ui5_slider_handle_focus_visibility: none; - --_ui5_slider_handle_icon_size: 1rem; + --_ui5_slider_handle_icon_size: 0.875rem; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_slider_handle_icon_size: .875rem; + --_ui5_slider_handle_icon_size: 0.875rem; --_ui5_slider_padding: 1rem 1.0625rem; + --_ui5_slider_root_height: 2rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_top: -0.5rem; } \ No newline at end of file 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 dbe087350eee..3c453e259162 100644 --- a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_slider_inner_min_width: 4rem; --_ui5_range_slider_handle_background_focus: transparent; - --_ui5_slider_handle_top: -.875rem; + --_ui5_slider_handle_top: -0.8125rem; --_ui5_range_slider_handle_background: transparent; --_ui5_range_slider_handle_active_background: transparent; --_ui5_slider_handle_background: var(--sapButton_Background); @@ -13,7 +13,8 @@ --_ui5_slider_handle_width: 1.875rem; --_ui5_slider_handle_height: 1.875rem; --_ui5_slider_handle_box_sizing: border-box; - --_ui5_slider_tickmark_top: -.34375rem; + --_ui5_slider_tickmark_height: 1rem; + --_ui5_slider_tickmark_top: -0.375rem; } [data-ui5-compact-size], 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 06cc148f42b7..f78502c66f79 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 @@ -2,6 +2,7 @@ :root { --_ui5_slider_inner_min_width: 4rem; + --_ui5_slider_handle_top: -0.6875rem; --_ui5_range_slider_handle_background: transparent; --_ui5_range_slider_root_hover_handle_bg: transparent; } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css index 900f0bc3eeba..965c1aebf82c 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css @@ -1,7 +1,8 @@ @import "../base/SliderBase-parameters.css"; :root { - --_ui5_slider_inner_height: 0.375rem; + --_ui5_slider_inner_height: 0.375rem; /* Total height including border */ + --_ui5_slider_progress_box_sizing: border-box; --_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor); --_ui5_slider_progress_border_radius: 0.375rem; --_ui5_range_slider_handle_background: transparent; @@ -9,7 +10,17 @@ --_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor); --_ui5_slider_handle_height: 1.65rem; --_ui5_slider_handle_width: 1.65rem; - --_ui5_slider_handle_top: -0.75rem; + --_ui5_slider_handle_top: -0.6375rem; /* -(1.65rem handle - 0.375rem track) / 2 */ + --_ui5_slider_handle_box_sizing: border-box; --_ui5_slider_progress_background: var(--sapSelectedColor); - --_ui5_slider_tickmark_top: -0.2525rem; + --_ui5_slider_tickmark_height: 1rem; + --_ui5_slider_tickmark_top: -0.3125rem; /* -(1rem tickmark - 0.375rem track) / 2 */ + --_ui5_slider_active_progress_border: none; + --_ui5_slider_active_progress_left: 0; + --_ui5_slider_active_progress_top: 0; + --_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height); + --_ui5_slider_no_tickmarks_active_progress_border: none; + --_ui5_slider_no_tickmarks_active_progress_left: 0; + --_ui5_slider_no_tickmarks_active_progress_top: 0; + --_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height); } \ No newline at end of file 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 03b0ab12e1dc..8a6ebecf2fd4 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,10 +1,5 @@ @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; - /* ColorPicker */ --_ui5_color_picker_slider_handle_container_margin_top: -0.125rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css index ba3d67c3fffa..b830f737b2d4 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css @@ -1,14 +1,25 @@ @import "../base/SliderBase-parameters.css"; :root { - --_ui5_slider_inner_height: 0.375rem; + --_ui5_slider_inner_height: 0.375rem; /* Total height including border */ + --_ui5_slider_progress_box_sizing: border-box; --_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor); --_ui5_slider_progress_border_radius: 0.375rem; --_ui5_range_slider_handle_background: transparent; --_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor); --_ui5_slider_handle_height: 1.65rem; --_ui5_slider_handle_width: 1.65rem; - --_ui5_slider_handle_top: -0.75rem; + --_ui5_slider_handle_top: -0.6375rem; /* -(1.65rem handle - 0.375rem track) / 2 */ + --_ui5_slider_handle_box_sizing: border-box; --_ui5_slider_progress_background: var(--sapSelectedColor); - --_ui5_slider_tickmark_top: -0.2525rem; + --_ui5_slider_tickmark_height: 1rem; + --_ui5_slider_tickmark_top: -0.3125rem; /* -(1rem tickmark - 0.375rem track) / 2 */ + --_ui5_slider_active_progress_border: none; + --_ui5_slider_active_progress_left: 0; + --_ui5_slider_active_progress_top: 0; + --_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height); + --_ui5_slider_no_tickmarks_active_progress_border: none; + --_ui5_slider_no_tickmarks_active_progress_left: 0; + --_ui5_slider_no_tickmarks_active_progress_top: 0; + --_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height); } \ No newline at end of file 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 03b0ab12e1dc..8a6ebecf2fd4 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,10 +1,5 @@ @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; - /* ColorPicker */ --_ui5_color_picker_slider_handle_container_margin_top: -0.125rem; } diff --git a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css index aa272d218433..58a92544a1e9 100644 --- a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css @@ -37,7 +37,7 @@ --_ui5_slider_handle_focus_width: 1px; --_ui5_slider_start_end_point_size: .5rem; --_ui5_slider_start_end_point_left: -.75rem; - --_ui5_slider_start_end_point_top: -0.125rem; + --_ui5_slider_start_end_point_top: -0.1875rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); --_ui5_slider_tooltip_border_box: border-box; @@ -62,6 +62,8 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_top: -0.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); --_ui5_range_slider_progress_focus_top: -.8125rem; diff --git a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css index aa272d218433..58a92544a1e9 100644 --- a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css @@ -37,7 +37,7 @@ --_ui5_slider_handle_focus_width: 1px; --_ui5_slider_start_end_point_size: .5rem; --_ui5_slider_start_end_point_left: -.75rem; - --_ui5_slider_start_end_point_top: -0.125rem; + --_ui5_slider_start_end_point_top: -0.1875rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); --_ui5_slider_tooltip_border_box: border-box; @@ -62,6 +62,8 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_top: -0.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); --_ui5_range_slider_progress_focus_top: -.8125rem; 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 1b175ec2c10b..ad8c7da84b54 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css @@ -10,7 +10,7 @@ --_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background); --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border); - --_ui5_slider_handle_top: -.5625rem; + --_ui5_slider_handle_top: -0.5625rem; --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: none; @@ -18,7 +18,7 @@ --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); --_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background); --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); - --_ui5_slider_inner_height: 0.25rem; + --_ui5_slider_inner_height: 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); @@ -27,7 +27,7 @@ --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor); --_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor); --_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); - --_ui5_slider_start_end_point_top: -3px; + --_ui5_slider_start_end_point_top: -0.1875rem; --_ui5_slider_progress_outline_offset: -14px; --_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px); --_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px); @@ -35,17 +35,16 @@ --_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px); --_ui5_range_slider_focus_outline_radius: .5rem; --_ui5_slider_tickmark_height: .5rem; - --_ui5_slider_tickmark_top: -.125rem; + --_ui5_slider_tickmark_top: -0.0625rem; /* -(0.5rem tickmark - 0.375rem track) / 2 */ --_ui5_slider_progress_box_sizing: border-box; - --_ui5_slider_active_progress_box_sizing: border-box; + --_ui5_slider_active_progress_box_sizing: content-box; - --_ui5_slider_progress_container_top: .0625rem; + --_ui5_slider_progress_container_top: 0; --_ui5_slider_progress_height: .375rem; - --_ui5_slider_active_progress_left: -.0625rem; - --_ui5_slider_active_progress_top: -.15625rem; + --_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor); + --_ui5_slider_active_progress_top: -.0625rem; --_ui5_slider_no_tickmarks_progress_container_top: 0; - --_ui5_slider_no_tickmarks_progress_height: 100%; --_ui5_slider_no_tickmarks_active_progress_border: none; --_ui5_slider_no_tickmarks_active_progress_left: 0; --_ui5_slider_no_tickmarks_active_progress_top: 0; @@ -70,6 +69,8 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_top: -0.5rem; --_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px); --_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 10px); --_ui5_slider_progress_outline_offset: calc((-1 * var(--_ui5_slider_outer_height)) + 1rem); 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 75ed72d05557..14ead9b44f0e 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css @@ -10,7 +10,7 @@ --_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background); --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border); - --_ui5_slider_handle_top: -.5625rem; + --_ui5_slider_handle_top: -0.5625rem; --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor); @@ -18,7 +18,7 @@ --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); --_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background); --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); - --_ui5_slider_inner_height: 0.25rem; + --_ui5_slider_inner_height: 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); @@ -27,7 +27,7 @@ --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor); --_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor); --_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); - --_ui5_slider_start_end_point_top: -3px; + --_ui5_slider_start_end_point_top: -0.1875rem; --_ui5_slider_progress_outline_offset: -14px; --_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px); --_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px); @@ -35,17 +35,16 @@ --_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px); --_ui5_range_slider_focus_outline_radius: .5rem; --_ui5_slider_tickmark_height: .5rem; - --_ui5_slider_tickmark_top: -.125rem; + --_ui5_slider_tickmark_top: -0.0625rem; /* -(0.5rem tickmark - 0.375rem track) / 2 */ --_ui5_slider_progress_box_sizing: border-box; - --_ui5_slider_active_progress_box_sizing: border-box; + --_ui5_slider_active_progress_box_sizing: content-box; - --_ui5_slider_progress_container_top: .0625rem; + --_ui5_slider_progress_container_top: 0; --_ui5_slider_progress_height: .375rem; - --_ui5_slider_active_progress_left: -.0625rem; - --_ui5_slider_active_progress_top: -.15625rem; + --_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor); + --_ui5_slider_active_progress_top: -.0625rem; --_ui5_slider_no_tickmarks_progress_container_top: 0; - --_ui5_slider_no_tickmarks_progress_height: 100%; --_ui5_slider_no_tickmarks_active_progress_border: none; --_ui5_slider_no_tickmarks_active_progress_left: 0; --_ui5_slider_no_tickmarks_active_progress_top: 0; @@ -70,6 +69,8 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_top: -0.5rem; --_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px); --_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 10px); --_ui5_slider_progress_outline_offset: calc((-1 * var(--_ui5_slider_outer_height)) + 1rem); diff --git a/packages/main/test/pages/Slider.html b/packages/main/test/pages/Slider.html index caa84a7e9042..895c6cf2432f 100644 --- a/packages/main/test/pages/Slider.html +++ b/packages/main/test/pages/Slider.html @@ -24,6 +24,29 @@ +
+
+ +
+ + + + + + + + +
+
+
+ +
+ + +
+
+
+

Basic Slider

@@ -81,6 +104,38 @@

Event Testing Result Slider

inputTooltipSlider.addEventListener("ui5-change", () => { eventResultSlider.setAttribute("value", parseInt(eventResultSlider.getAttribute("value")) + 1); }); + + // Theme switcher + const themeButtons = document.querySelectorAll('.theme-buttons button'); + themeButtons.forEach(button => { + button.addEventListener('click', async () => { + const theme = button.getAttribute('data-theme'); + await window["sap-ui-webcomponents-bundle"].configuration.setTheme(theme); + document.body.setAttribute('sap-ui-theme', theme); + + // Update active state + themeButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + }); + }); + + // Density mode switcher + const densityButtons = document.querySelectorAll('.density-buttons button'); + densityButtons.forEach(button => { + button.addEventListener('click', () => { + const density = button.getAttribute('data-density'); + + if (density === 'compact') { + document.body.classList.add('ui5-content-density-compact'); + } else { + document.body.classList.remove('ui5-content-density-compact'); + } + + // Update active state + densityButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + }); + }); diff --git a/packages/main/test/pages/styles/Slider.css b/packages/main/test/pages/styles/Slider.css index f31e46cbb5ce..7a697f00bc33 100644 --- a/packages/main/test/pages/styles/Slider.css +++ b/packages/main/test/pages/styles/Slider.css @@ -34,3 +34,53 @@ h2 { margin-left: 20%; margin-top: 50px; } + +.control-panel { + position: sticky; + top: 0; + background: var(--sapBackgroundColor); + padding: 1rem; + border-bottom: 1px solid var(--sapGroup_ContentBorderColor); + z-index: 1000; + display: flex; + gap: 2rem; + flex-wrap: wrap; + align-items: center; +} + +.control-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.control-group label { + font-weight: bold; + font-size: 0.875rem; +} + +.theme-buttons, .density-buttons { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.theme-buttons button, .density-buttons button { + padding: 0.5rem 1rem; + cursor: pointer; + border: 1px solid var(--sapButton_BorderColor); + background: var(--sapButton_Background); + color: var(--sapButton_TextColor); + border-radius: 0.25rem; + font-size: 0.875rem; +} + +.theme-buttons button:hover, .density-buttons button:hover { + background: var(--sapButton_Hover_Background); +} + +.theme-buttons button.active, .density-buttons button.active { + background: var(--sapButton_Emphasized_Background); + color: var(--sapButton_Emphasized_TextColor); + border-color: var(--sapButton_Emphasized_BorderColor); +}