diff --git a/packages/main/src/RangeSlider.ts b/packages/main/src/RangeSlider.ts index df9210077dde..edb58d58525c 100644 --- a/packages/main/src/RangeSlider.ts +++ b/packages/main/src/RangeSlider.ts @@ -1,6 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; +import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; @@ -1036,7 +1037,7 @@ class RangeSlider extends SliderBase implements IFormInputElement { progress: { "width": `${this._selectedRange! * 100}%`, "transform-origin": `${this.directionStart} top`, - [this.directionStart]: `${this._firstHandlePositionFromStart!}%`, + [this.directionStart]: `calc(${this._firstHandlePositionFromStart!}% + var(${getScopedVarName("--_ui5_slider_active_progress_left")}))`, }, startHandle: { [this.directionStart]: `${this._firstHandlePositionFromStart!}%`, diff --git a/packages/main/src/Slider.ts b/packages/main/src/Slider.ts index 7cf7be6568d4..32f61c6b5bc3 100644 --- a/packages/main/src/Slider.ts +++ b/packages/main/src/Slider.ts @@ -370,8 +370,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/RangeSlider.css b/packages/main/src/themes/RangeSlider.css index 293eb2ae3085..f9d9892697b4 100644 --- a/packages/main/src/themes/RangeSlider.css +++ b/packages/main/src/themes/RangeSlider.css @@ -42,6 +42,7 @@ .ui5-slider-progress { position: relative; + inset-inline-start: 0; } .ui5-slider-progress:focus::after { @@ -52,8 +53,8 @@ position: absolute; top: var(--_ui5_range_slider_progress_focus_top); left: var(--_ui5_range_slider_progress_focus_left); + right: var(--_ui5_range_slider_progress_focus_right); padding: var(--_ui5_range_slider_progress_focus_padding); - width: var(--_ui5_range_slider_progress_focus_width); height: var(--_ui5_range_slider_progress_focus_height); box-sizing: border-box; } diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index a8cd7e6ddf2d..069d6259abbc 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..40bc66a4bf3a 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/packages/main/src/themes/base/SliderBase-parameters.css @@ -3,21 +3,29 @@ --_ui5_slider_progress_container_background: var(--sapField_BorderColor); --_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_border_width: 0.0625rem; + --_ui5_slider_progress_border: solid var(--_ui5_slider_progress_border_width) 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: 3.3125rem; --_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; + --_ui5_slider_track_total_height: calc(var(--_ui5_slider_inner_height) + (2 * var(--_ui5_slider_progress_border_width))); + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2 - var(--_ui5_slider_progress_border_width)); --_ui5_slider_tickmark_bg: var(--sapField_BorderColor); --_ui5_slider_tickmark_in_range_bg: var(--sapButton_Active_Background); --_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background); @@ -27,7 +35,7 @@ --_ui5_slider_handle_outline_offset: 0.075rem; --_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor); --_ui5_slider_progress_outline_offset: -0.8125rem; - --_ui5_slider_tickmark_top: -0.375rem; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2 - var(--_ui5_slider_progress_border_width)); --_ui5_slider_disabled_opacity: 0.4; --_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize); --_ui5_slider_tooltip_color: var(--sapContent_LabelColor); @@ -49,9 +57,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: -.95rem; + --_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 +69,39 @@ --_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_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_start_end_point_left: -0.7rem; + --_ui5_slider_handle_icon_size: 0.875rem; --_ui5_slider_padding: 1rem 1.0625rem; + --_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2 - var(--_ui5_slider_progress_border_width)); } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 129d84d12957..5e8c0bcb5159 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -323,9 +323,7 @@ --_ui5-responsive_popover_header_height: 2.5rem; /* Slider */ - --_ui5_slider_handle_height: 1.25rem; --_ui5_slider_handle_width: 1.5rem; - --_ui5_slider_handle_top: -.5rem; --_ui5_slider_tooltip_height: 1rem; --_ui5_slider_tooltip_padding: 0.25rem; /* --_ui5_slider_tooltip_bottom: 1.875rem; */ 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..faca5a32cd93 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_track_total_height: var(--_ui5_slider_inner_height); --_ui5_range_slider_handle_background: transparent; --_ui5_range_slider_handle_active_background: transparent; --_ui5_slider_handle_background: var(--sapButton_Background); @@ -12,13 +12,20 @@ --_ui5_range_slider_root_active_handle_icon_display: none; --_ui5_slider_handle_width: 1.875rem; --_ui5_slider_handle_height: 1.875rem; + --_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor); + --_ui5_slider_handle_border_radius: 1rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); --_ui5_slider_handle_box_sizing: border-box; - --_ui5_slider_tickmark_top: -.34375rem; + --_ui5_slider_tickmark_height: 1rem; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { ---_ui5_slider_handle_width: 1.25rem; ---_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.5rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_tickmark_height: 0.75rem; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); } 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 c5c1831d4beb..65da2f3da290 100644 --- a/packages/main/src/themes/sap_fiori_3/sizes-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css @@ -13,8 +13,4 @@ .sapUiSizeCompact { /* ColorPicker */ --_ui5_color_picker_slider_handle_container_margin_top: none; - - /* 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 06cc148f42b7..6dd1925876cd 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,13 +2,25 @@ :root { --_ui5_slider_inner_min_width: 4rem; + --_ui5_slider_track_total_height: var(--_ui5_slider_inner_height); --_ui5_range_slider_handle_background: transparent; --_ui5_range_slider_root_hover_handle_bg: transparent; + --_ui5_slider_handle_width: 1.875rem; + --_ui5_slider_handle_height: 1.875rem; + --_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor); + --_ui5_slider_handle_border_radius: 1rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_handle_box_sizing: border-box; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); + --_ui5_slider_tickmark_height: 1rem; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { ---_ui5_slider_handle_width: 1.25rem; ---_ui5_slider_handle_height: 1.25rem; + --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.5rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_tickmark_height: 0.75rem; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); } \ 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 d3a9bf91ab93..031b97a85b9c 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 @@ -13,8 +13,4 @@ .sapUiSizeCompact { /* ColorPicker */ --_ui5_color_picker_slider_handle_container_margin_top: none; - - /* 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/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css index 900f0bc3eeba..64fff65b3807 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,15 +1,39 @@ @import "../base/SliderBase-parameters.css"; :root { - --_ui5_slider_inner_height: 0.375rem; + --_ui5_slider_inner_height: 0.375rem; /* Total height including border */ + --_ui5_slider_track_total_height: var(--_ui5_slider_inner_height); + --_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_hover_background: var(--sapButton_Hover_Background); - --_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_width: 1.875rem; + --_ui5_slider_handle_height: 1.875rem; + --_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor); + --_ui5_slider_handle_border_radius: 1rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 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: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); + --_ui5_slider_active_progress_border: none; + --_ui5_slider_active_progress_left: 0rem; + --_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); +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.5rem; + --_ui5_slider_handle_border_radius: 1rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_tickmark_height: 0.75rem; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); } \ 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 73b4668b6fa5..fee9fc154265 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..642f60fddf16 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,37 @@ @import "../base/SliderBase-parameters.css"; :root { - --_ui5_slider_inner_height: 0.375rem; + --_ui5_slider_inner_height: 0.375rem; /* Total height including border */ + --_ui5_slider_track_total_height: var(--_ui5_slider_inner_height); + --_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_width: 1.875rem; + --_ui5_slider_handle_height: 1.875rem; + --_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor); + --_ui5_slider_handle_border_radius: 1rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 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: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); + --_ui5_slider_active_progress_border: none; + --_ui5_slider_active_progress_left: 0rem; + --_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); +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_height: 1.5rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_tickmark_height: 0.75rem; + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); } \ 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 73b4668b6fa5..fee9fc154265 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 d9d94ac59601..3bbaf0cc9c6b 100644 --- a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css @@ -3,7 +3,6 @@ :root { --_ui5_slider_progress_container_background: var(--sapSlider_Background); --_ui5_slider_progress_container_dot_display: block; - --_ui5_slider_inner_min_width: 4rem; --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor); @@ -11,9 +10,6 @@ --_ui5_slider_handle_icon_display: inline-block; --_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor); --_ui5_slider_handle_border_radius: 0.5rem; - --_ui5_slider_handle_height: 1.5rem; - --_ui5_slider_handle_width: 2rem; - --_ui5_slider_handle_top: -0.625rem; --_ui5_slider_handle_font_family: "SAP-icons"; --_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor); @@ -27,45 +23,28 @@ --_ui5_range_slider_legacy_progress_focus_display: none; --_ui5_range_slider_progress_focus_display: block; --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor); - --_ui5_slider_label_fontsize: var(--sapFontSmallSize); - --_ui5_slider_label_color: var(--sapContent_LabelColor); - --_ui5_slider_tooltip_min_width: 2rem; --_ui5_slider_tooltip_padding: 0.25rem; - --_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize); - --_ui5_slider_tooltip_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_height: 1.375rem; --_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_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); --_ui5_slider_tooltip_border_box: border-box; - --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); --_ui5_range_slider_active_handle_icon_display: none; - --_ui5_range_slider_progress_focus_top: -1.063rem; - --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); + --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem); + --_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + var(--_ui5_slider_progress_border_width)); + --_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); + --_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); --_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem; - --_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_root_hover_handle_icon_display: inline-block; --_ui5_range_slider_root_hover_handle_bg: var(--_ui5_slider_handle_hover_background); --_ui5_range_slider_root_active_handle_icon_display: none; - --_ui5_slider_tickmark_height: .5rem; - --_ui5_slider_tickmark_top: -2px; --_ui5_slider_handle_box_sizing: border-box; --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); - --_ui5_slider_tooltip_bottom: 2rem; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_slider_handle_width: 1.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: -.938rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); - --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css index dc470e559d02..7b3362e02344 100644 --- a/packages/main/src/themes/sap_horizon/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon/sizes-parameters.css @@ -33,7 +33,6 @@ /* SplitButton */ --_ui5_split_button_middle_separator_top: 0.3125rem; --_ui5_split_button_middle_separator_height: 1rem; - --_ui5_slider_handle_top: -.5rem; --_ui5_slider_tooltip_height: 1.375rem; /* CheckBox */ 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 d9d94ac59601..3bbaf0cc9c6b 100644 --- a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css @@ -3,7 +3,6 @@ :root { --_ui5_slider_progress_container_background: var(--sapSlider_Background); --_ui5_slider_progress_container_dot_display: block; - --_ui5_slider_inner_min_width: 4rem; --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor); @@ -11,9 +10,6 @@ --_ui5_slider_handle_icon_display: inline-block; --_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor); --_ui5_slider_handle_border_radius: 0.5rem; - --_ui5_slider_handle_height: 1.5rem; - --_ui5_slider_handle_width: 2rem; - --_ui5_slider_handle_top: -0.625rem; --_ui5_slider_handle_font_family: "SAP-icons"; --_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor); @@ -27,45 +23,28 @@ --_ui5_range_slider_legacy_progress_focus_display: none; --_ui5_range_slider_progress_focus_display: block; --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor); - --_ui5_slider_label_fontsize: var(--sapFontSmallSize); - --_ui5_slider_label_color: var(--sapContent_LabelColor); - --_ui5_slider_tooltip_min_width: 2rem; --_ui5_slider_tooltip_padding: 0.25rem; - --_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize); - --_ui5_slider_tooltip_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_height: 1.375rem; --_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_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); --_ui5_slider_tooltip_border_box: border-box; - --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); --_ui5_range_slider_active_handle_icon_display: none; - --_ui5_range_slider_progress_focus_top: -1.063rem; - --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); + --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem); + --_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + var(--_ui5_slider_progress_border_width)); + --_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); + --_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); --_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem; - --_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_root_hover_handle_icon_display: inline-block; --_ui5_range_slider_root_hover_handle_bg: var(--_ui5_slider_handle_hover_background); --_ui5_range_slider_root_active_handle_icon_display: none; - --_ui5_slider_tickmark_height: .5rem; - --_ui5_slider_tickmark_top: -2px; --_ui5_slider_handle_box_sizing: border-box; --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); - --_ui5_slider_tooltip_bottom: 2rem; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_slider_handle_width: 1.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: -.938rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); - --_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px); } \ No newline at end of file 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..19cba3903450 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css @@ -2,15 +2,9 @@ :root { /* handle */ - --_ui5_slider_handle_height: 1.5rem; - --_ui5_slider_handle_width: 2rem; --_ui5_slider_handle_icon_display: inline-block; --_ui5_range_slider_root_hover_handle_icon_display: inline-block; - --_ui5_slider_handle_border_radius: 0.5rem; - --_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_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: none; @@ -18,8 +12,10 @@ --_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_progress_border_radius: 0.25rem; + --_ui5_slider_inner_height: 0.375rem; + --_ui5_slider_track_total_height: var(--_ui5_slider_inner_height); + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_container_background: var(--sapSlider_Background); --_ui5_slider_progress_container_dot_display: block; @@ -27,31 +23,23 @@ --_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_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); --_ui5_slider_progress_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor); --_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_progress_box_sizing: border-box; - --_ui5_slider_active_progress_box_sizing: border-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; - --_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize); - --_ui5_slider_tooltip_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_background: var(--sapField_Background); --_ui5_slider_tooltip_border_radius: var(--sapElement_BorderCornerRadius); --_ui5_slider_tooltip_border_color: var(--sapField_BorderColor); @@ -59,17 +47,22 @@ --_ui5_slider_tooltip_box_shadow: none; --_ui5_slider_tooltip_padding: 0.25rem; --_ui5_slider_tooltip_height: 1.375rem; - --_ui5_slider_tooltip_min_width: 2rem; - --_ui5_slider_tooltip_bottom: 2rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - 1px); --_ui5_slider_tooltip_border_box: border-box; --_ui5_slider_handle_focus_visibility: block; + + --_ui5_range_slider_legacy_progress_focus_display: none; + --_ui5_range_slider_progress_focus_display: block; + --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem); + --_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + 2 * var(--_ui5_slider_progress_border_width)); + --_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); + --_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); --_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..b074bcb31408 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css @@ -2,24 +2,20 @@ :root { /* handle */ - --_ui5_slider_handle_height: 1.5rem; - --_ui5_slider_handle_width: 2rem; --_ui5_slider_handle_icon_display: inline-block; --_ui5_range_slider_root_hover_handle_icon_display: inline-block; - --_ui5_slider_handle_border_radius: 0.5rem; - --_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_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); + --_ui5_slider_handle_outline: none; --_ui5_slider_handle_box_sizing: border-box; --_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_progress_border_radius: 0.25rem; + --_ui5_slider_inner_height: 0.375rem; + --_ui5_slider_track_total_height: var(--_ui5_slider_inner_height); + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); + --_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2); --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_container_background: var(--sapSlider_Background); --_ui5_slider_progress_container_dot_display: block; @@ -27,31 +23,23 @@ --_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_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); --_ui5_slider_progress_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor); --_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_progress_box_sizing: border-box; - --_ui5_slider_active_progress_box_sizing: border-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; - --_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize); - --_ui5_slider_tooltip_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_background: var(--sapField_Background); --_ui5_slider_tooltip_border_radius: var(--sapElement_BorderCornerRadius); --_ui5_slider_tooltip_border_color: var(--sapField_BorderColor); @@ -59,17 +47,23 @@ --_ui5_slider_tooltip_box_shadow: none; --_ui5_slider_tooltip_padding: 0.25rem; --_ui5_slider_tooltip_height: 1.375rem; - --_ui5_slider_tooltip_min_width: 2rem; - --_ui5_slider_tooltip_bottom: 2rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - 1px); --_ui5_slider_tooltip_border_box: border-box; --_ui5_slider_handle_focus_visibility: block; + + --_ui5_range_slider_legacy_progress_focus_display: none; + --_ui5_range_slider_progress_focus_display: block; + --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem); + --_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + 2 * var(--_ui5_slider_progress_border_width)); + --_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); + --_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width))); } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_slider_handle_width: 1.5rem; + --_ui5_slider_track_total_height: var(--_ui5_slider_inner_height); + --_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2); --_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); +}