From 981c38837f2ede3e12b336cb5e91a5794ed66bac Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Tue, 12 Mar 2024 14:24:02 +0100 Subject: [PATCH 01/11] feat(styles): New focus mixin --- .changeset/beige-pans-kiss.md | 5 ++++ .../.storybook/styles/preview.scss | 6 +++++ .../src/shared/tile/tile.component.scss | 4 ++++ packages/styles/src/components/button.scss | 2 +- .../styles/src/components/form-check.scss | 9 +++----- packages/styles/src/mixins/_forms.scss | 1 + packages/styles/src/mixins/_utilities.scss | 23 +++++++++++++++++++ packages/styles/src/placeholders/_close.scss | 2 +- packages/styles/src/placeholders/_color.scss | 2 ++ packages/styles/src/variables/_color.scss | 2 ++ 10 files changed, 48 insertions(+), 8 deletions(-) create mode 100644 .changeset/beige-pans-kiss.md diff --git a/.changeset/beige-pans-kiss.md b/.changeset/beige-pans-kiss.md new file mode 100644 index 0000000000..5cc3ebe7c2 --- /dev/null +++ b/.changeset/beige-pans-kiss.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Adjusted focus styles with new color for button, checkbox, radio, switch, rating elements. diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 0ff2ed3fe7..947a250a06 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -2,6 +2,7 @@ // TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed @use '@swisspost/design-system-styles/intranet.scss'; @use '@swisspost/design-system-styles/core.scss' as post; +@use '@swisspost/design-system-styles/mixins/utilities'; #storybook-root, #storybook-docs { @@ -66,6 +67,11 @@ display: inline-block; } } + + // General styles for content + a{ + @include utilities.focus-style(); + } } pre { diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss index 4a3a1406f5..fae7f73886 100644 --- a/packages/documentation/src/shared/tile/tile.component.scss +++ b/packages/documentation/src/shared/tile/tile.component.scss @@ -6,6 +6,10 @@ $tile-size: var(--post-docs-tile-size, 120px); $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2)); :host{ + a { + @include utilities.focus-style(); + } + .tile { display: flex; flex-direction: column; diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index ea7683ac2c..7ef0153f15 100644 --- a/packages/styles/src/components/button.scss +++ b/packages/styles/src/components/button.scss @@ -18,7 +18,7 @@ .btn { @include button-mx.button-size(); - @include forms.focus-outline(); + @include utilities.focus-style(); // Resets display: inline-flex; diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss index f3fdc3140b..7daaedea43 100644 --- a/packages/styles/src/components/form-check.scss +++ b/packages/styles/src/components/form-check.scss @@ -14,6 +14,8 @@ row-gap: form-check.$form-check-row-gap; margin-bottom: form-check.$form-check-margin-bottom; + @include utility-mx.focus-style(); + &-inline { display: inline-flex; } @@ -38,6 +40,7 @@ } &-input { + @include utility-mx.focus-style-none(); display: inline-flex; flex: 0 auto; appearance: none; @@ -47,12 +50,6 @@ border: form-check.$form-check-input-border-width solid rgba(var(--post-contrast-color-rgb), 0.8); - &:focus { - outline: none; - border-color: currentColor; - box-shadow: form-check.$form-check-input-focus-box-shadow; - } - &::after { content: ''; display: block; diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index 48445dfba5..912d3820a2 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -47,6 +47,7 @@ min-height: forms.$input-height-lg; } +/* Deprecated use the one in utilities.scss */ @mixin focus-outline { outline: none; outline-offset: forms.$input-focus-outline-thickness; diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index 4f6453b70c..0b65e0f0d0 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -1,3 +1,5 @@ +@use '../variables/spacing'; + @mixin reset-list() { margin: 0; padding: 0; @@ -79,3 +81,24 @@ @content; } } + +@mixin focus-style-none { + outline: none; +} + +@mixin focus-style { + outline: none; + outline-offset: spacing.$size-line; + + &:is(:focus-visible, :focus-within, .pretend-focus) { + outline: spacing.$size-line solid var(--post-focus-color); + border-radius: 4px; + + @include high-contrast-mode() { + outline-color: Highlight; + } + + // In case rules need to be slightly adjusted + @content; + } +} diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss index 0b2694f274..6af35e8631 100644 --- a/packages/styles/src/placeholders/_close.scss +++ b/packages/styles/src/placeholders/_close.scss @@ -10,7 +10,7 @@ %btn-close { @include button-mx.reset-button; - @include forms-mx.focus-outline; + @include utilities-mx.focus-style(); border-radius: close.$close-border-radius; color: close.$close-color; transition: close.$close-transition; diff --git a/packages/styles/src/placeholders/_color.scss b/packages/styles/src/placeholders/_color.scss index 9ed9d04f25..b0feedb88d 100644 --- a/packages/styles/src/placeholders/_color.scss +++ b/packages/styles/src/placeholders/_color.scss @@ -19,6 +19,7 @@ // light background variables %color-background-light-variables { --post-contrast-color: #{color.$black}; + --post-focus-color: #{color.$focus-light}; --post-contrast-color-inverted: #{color.$white}; @each $name, $color in color.$post-grays { @@ -45,6 +46,7 @@ // dark background variables %color-background-dark-variables { --post-contrast-color: #{color.$white}; + --post-focus-color: #{color.$white}; --post-contrast-color-inverted: #{color.$black}; --post-dark: #{color.$light}; --post-light: #{color.$dark}; diff --git a/packages/styles/src/variables/_color.scss b/packages/styles/src/variables/_color.scss index aeade15ddd..9711f03355 100644 --- a/packages/styles/src/variables/_color.scss +++ b/packages/styles/src/variables/_color.scss @@ -24,6 +24,8 @@ $black: #000; $dark: $gray-80; $light: $gray-background-light; +$focus-light: #1976c8; + // Accent colors $nightblue-dark: #004976; $nightblue-bright: #0076a8; From 7bdd13c6f2bbed1cedeb4d1d66a6b42e9990cdad Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Wed, 13 Mar 2024 08:36:45 +0100 Subject: [PATCH 02/11] feat(styles): Input range progress webkit box-shadow workaround --- .changeset/forty-knives-love.md | 5 ++ .../form-range-custom-demo.component.html | 11 +--- .../form-range-custom-demo.module.ts | 3 +- .../form-range.directive.ts | 63 ------------------- .../form-range-demo-page.component.html | 13 ---- .../form-range-demo.component.html | 11 +--- .../datepicker-demo-page.component.html | 2 - .../styles/src/components/form-range.scss | 28 ++++++--- 8 files changed, 28 insertions(+), 108 deletions(-) create mode 100644 .changeset/forty-knives-love.md delete mode 100644 packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range.directive.ts diff --git a/.changeset/forty-knives-love.md b/.changeset/forty-knives-love.md new file mode 100644 index 0000000000..f7b7e0188d --- /dev/null +++ b/.changeset/forty-knives-love.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Added a workaround to display progress bar on input range and on webkit browsers without JavaScript. diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html index f1a72d62e7..ebf4bd1ee9 100644 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html +++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-custom-demo/form-range-custom-demo.component.html @@ -1,18 +1,11 @@ - + @@ -21,7 +14,6 @@ { - this.updateStyleProperties(); - }); - if (this.control) { - this.controlSub = this.control.valueChanges.subscribe(() => { - this.updateStyleProperties(); - }); - } - // handle the changes of attributes values, note: can only be detected if setted by - // elem.setAttribute. - // elem.value = '42' will _not_ trigger the mutation observer - this.mutationObserver = new MutationObserver(mutationsList => { - for (let mutation of mutationsList) { - if ( - mutation.type === 'attributes' && - ['value', 'min', 'max'].indexOf(mutation.attributeName) >= 0 - ) { - this.updateStyleProperties(); - break; - } - } - }); - this.mutationObserver.observe(elem, { attributes: true }); - } - - ngOnDestroy() { - this.mutationObserver.disconnect(); - if (this.controlSub) { - this.controlSub.unsubscribe(); - } - } -} diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html index ce5a000db6..ee89078958 100644 --- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html +++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html @@ -4,19 +4,6 @@

Form range

-

Recommended form range

-
-

- It is recommended to add the - - FormRangeDirective - - to your project so that the range inputs behavior is complete. -

-
- Example range - + diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html index 5d26e6047b..fa53d16d87 100644 --- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html +++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html @@ -95,7 +95,6 @@

Simple datepicker

Datepicker with validation Date: Wed, 13 Mar 2024 10:23:42 +0100 Subject: [PATCH 03/11] Improve mixin --- packages/styles/src/mixins/_utilities.scss | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index 0b65e0f0d0..58fd54bb27 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -1,4 +1,5 @@ @use '../variables/spacing'; +@use '../variables/commons'; @mixin reset-list() { margin: 0; @@ -86,13 +87,11 @@ outline: none; } -@mixin focus-style { - outline: none; - outline-offset: spacing.$size-line; - - &:is(:focus-visible, :focus-within, .pretend-focus) { +@mixin focus-style($border-radius: commons.$border-radius, $vendor-prefix: '') { + &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} { + outline-offset: spacing.$size-line; outline: spacing.$size-line solid var(--post-focus-color); - border-radius: 4px; + border-radius: $border-radius; @include high-contrast-mode() { outline-color: Highlight; @@ -102,3 +101,9 @@ @content; } } + +@mixin focus-style-custom($vendor-prefix: '') { + &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} { + @content; + } +} From 8ee9914afe1fd5e41188f90b5b77cb4ffa62fcd3 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 14 Mar 2024 11:36:46 +0100 Subject: [PATCH 04/11] Add focus state --- .../styles/src/components/form-range.scss | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index 05e30943ba..d1637be1d2 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -11,10 +11,16 @@ @use './../mixins/utilities'; $webkit-track-height: 1px; +$webkit-progress-height-adjustment: 2px; $webkit-thumb-width: 33px; +$webkit-thumb-focus-offset: 4px; +$webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; .form-range { - overflow-x: hidden; + &::-webkit-slider-container { + overflow-x: clip; + padding-inline: 4px; + } &::-moz-range-thumb { border-radius: 50%; @@ -33,18 +39,25 @@ $webkit-thumb-width: 33px; &::-webkit-slider-thumb { // Source: https://antvil.github.io/css-sos/sos/progress/ - box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$black; + box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw color.$black; clip-path: polygon( - 0 0, - 100% 0, - 100% 100%, - 0 100%, - 0 calc(50% + $webkit-track-height), - -100vw calc(50% + $webkit-track-height), - -100vw calc(50% - $webkit-track-height), - 0 calc(50% - $webkit-track-height) + 0 (-($webkit-thumb-focus-offset)), + $webkit-thumb-focus-width (-($webkit-thumb-focus-offset)), + $webkit-thumb-focus-width $webkit-thumb-focus-width, + 0 $webkit-thumb-focus-width, + -($webkit-thumb-focus-offset) calc(50% + $webkit-progress-height-adjustment), + -100vw calc(50% + $webkit-progress-height-adjustment), + -100vw calc(50% - $webkit-progress-height-adjustment), + -($webkit-thumb-focus-offset) calc(50% - $webkit-progress-height-adjustment) ); } + + + @include utilities.focus-style(50%, '::-moz-range-thumb') { + box-shadow: none; // Remove default style + } + + @include utilities.focus-style(50%, '::-webkit-slider-thumb'); } &:disabled, @@ -76,7 +89,7 @@ $webkit-thumb-width: 33px; } &::-webkit-slider-thumb { - box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw Highlight; + box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw Highlight !important; background-color: ButtonFace; border-color: ButtonBorder; } From 11d08ec7acf134c42b756c0cd74c9e7e1f304ca5 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 14 Mar 2024 11:48:01 +0100 Subject: [PATCH 05/11] Add hover state, height and disabled style --- .../styles/src/components/form-range.scss | 52 ++++++++++++++----- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index d1637be1d2..400864b855 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -10,7 +10,7 @@ @use './../variables/components/forms'; @use './../mixins/utilities'; -$webkit-track-height: 1px; +$track-height: 4px; $webkit-progress-height-adjustment: 2px; $webkit-thumb-width: 33px; $webkit-thumb-focus-offset: 4px; @@ -28,6 +28,29 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; cursor: pointer; } + &::-webkit-slider-thumb { + // Source: https://antvil.github.io/css-sos/sos/progress/ + clip-path: polygon( + 0 (-($webkit-thumb-focus-offset)), + $webkit-thumb-focus-width (-($webkit-thumb-focus-offset)), + $webkit-thumb-focus-width $webkit-thumb-focus-width, + 0 $webkit-thumb-focus-width, + -($webkit-thumb-focus-offset) calc(50% + $webkit-progress-height-adjustment), + -100vw calc(50% + $webkit-progress-height-adjustment), + -100vw calc(50% - $webkit-progress-height-adjustment), + -($webkit-thumb-focus-offset) calc(50% - $webkit-progress-height-adjustment) + ); + } + + &::-webkit-slider-runnable-track { + height: $track-height; + } + + &::-moz-range-track, + &::-moz-range-progress { + height: $track-height; + } + &:not(:disabled, .disabled) { &::-webkit-slider-runnable-track { background-color: color.$gray-20; @@ -38,20 +61,18 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; } &::-webkit-slider-thumb { - // Source: https://antvil.github.io/css-sos/sos/progress/ box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw color.$black; - clip-path: polygon( - 0 (-($webkit-thumb-focus-offset)), - $webkit-thumb-focus-width (-($webkit-thumb-focus-offset)), - $webkit-thumb-focus-width $webkit-thumb-focus-width, - 0 $webkit-thumb-focus-width, - -($webkit-thumb-focus-offset) calc(50% + $webkit-progress-height-adjustment), - -100vw calc(50% + $webkit-progress-height-adjustment), - -100vw calc(50% - $webkit-progress-height-adjustment), - -($webkit-thumb-focus-offset) calc(50% - $webkit-progress-height-adjustment) - ); } + &:hover { + &::-webkit-slider-thumb { + border-width: 3px; + } + + &::-moz-range-thumb { + border-width: 3px; + } + } @include utilities.focus-style(50%, '::-moz-range-thumb') { box-shadow: none; // Remove default style @@ -64,10 +85,17 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; &.disabled { &::-webkit-slider-thumb { border-color: forms.$form-range-thumb-disabled-border-color; + border-style: dashed; + box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw color.$gray-40; } &::-moz-range-thumb { border-color: forms.$form-range-thumb-disabled-border-color; + border-style: dashed; + } + + &::-moz-range-progress { + background-color: color.$gray-40; } } From 948c6a224c9b8ec5afbc0263f5f030178411074e Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 14 Mar 2024 11:51:25 +0100 Subject: [PATCH 06/11] Lint --- packages/styles/src/components/form-range.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index 400864b855..f810af4f82 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -31,14 +31,14 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; &::-webkit-slider-thumb { // Source: https://antvil.github.io/css-sos/sos/progress/ clip-path: polygon( - 0 (-($webkit-thumb-focus-offset)), - $webkit-thumb-focus-width (-($webkit-thumb-focus-offset)), - $webkit-thumb-focus-width $webkit-thumb-focus-width, - 0 $webkit-thumb-focus-width, - -($webkit-thumb-focus-offset) calc(50% + $webkit-progress-height-adjustment), - -100vw calc(50% + $webkit-progress-height-adjustment), - -100vw calc(50% - $webkit-progress-height-adjustment), - -($webkit-thumb-focus-offset) calc(50% - $webkit-progress-height-adjustment) + 0 (-($webkit-thumb-focus-offset)), + $webkit-thumb-focus-width (-($webkit-thumb-focus-offset)), + $webkit-thumb-focus-width $webkit-thumb-focus-width, + 0 $webkit-thumb-focus-width, + -($webkit-thumb-focus-offset) calc(50% + $webkit-progress-height-adjustment), + -100vw calc(50% + $webkit-progress-height-adjustment), + -100vw calc(50% - $webkit-progress-height-adjustment), + -($webkit-thumb-focus-offset) calc(50% - $webkit-progress-height-adjustment) ); } From deae02b03dc2d216baf59eda247031bad542c503 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Tue, 19 Mar 2024 14:21:49 +0100 Subject: [PATCH 07/11] Remove focus state on thumb and apply on parent. Improve disabled state --- .../styles/src/components/form-range.scss | 69 +++++++++---------- 1 file changed, 33 insertions(+), 36 deletions(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index f810af4f82..8c3b2fe0dd 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -13,13 +13,20 @@ $track-height: 4px; $webkit-progress-height-adjustment: 2px; $webkit-thumb-width: 33px; -$webkit-thumb-focus-offset: 4px; -$webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; + +:has(> .form-range) { + @include utilities.focus-style(); +} + +@supports not selector(:has(> .form-range)) { + .form-range { + @include utilities.focus-style(); + } +} .form-range { &::-webkit-slider-container { overflow-x: clip; - padding-inline: 4px; } &::-moz-range-thumb { @@ -28,24 +35,24 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; cursor: pointer; } + &::-webkit-slider-runnable-track { + height: $track-height; + } + &::-webkit-slider-thumb { // Source: https://antvil.github.io/css-sos/sos/progress/ clip-path: polygon( - 0 (-($webkit-thumb-focus-offset)), - $webkit-thumb-focus-width (-($webkit-thumb-focus-offset)), - $webkit-thumb-focus-width $webkit-thumb-focus-width, - 0 $webkit-thumb-focus-width, - -($webkit-thumb-focus-offset) calc(50% + $webkit-progress-height-adjustment), + 0 (-($webkit-thumb-width)), + $webkit-thumb-width 0, + $webkit-thumb-width $webkit-thumb-width, + 0 $webkit-thumb-width, + 0 calc(50% + $webkit-progress-height-adjustment), -100vw calc(50% + $webkit-progress-height-adjustment), -100vw calc(50% - $webkit-progress-height-adjustment), - -($webkit-thumb-focus-offset) calc(50% - $webkit-progress-height-adjustment) + 0 calc(50% - $webkit-progress-height-adjustment) ); } - &::-webkit-slider-runnable-track { - height: $track-height; - } - &::-moz-range-track, &::-moz-range-progress { height: $track-height; @@ -61,7 +68,7 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; } &::-webkit-slider-thumb { - box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw color.$black; + box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$black; } &:hover { @@ -76,9 +83,8 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; @include utilities.focus-style(50%, '::-moz-range-thumb') { box-shadow: none; // Remove default style + outline: none; } - - @include utilities.focus-style(50%, '::-webkit-slider-thumb'); } &:disabled, @@ -86,7 +92,7 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; &::-webkit-slider-thumb { border-color: forms.$form-range-thumb-disabled-border-color; border-style: dashed; - box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw color.$gray-40; + box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw color.$gray-40; } &::-moz-range-thumb { @@ -111,13 +117,20 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work forced-color-adjust: none; + &::-webkit-slider-thumb { + box-shadow: calc(-100vw - $webkit-thumb-width) 0 0 100vw SelectedItem !important; + } + + &::-moz-range-progress { + background-color: SelectedItem !important; + } + &:not(:disabled, .disabled) { &::-webkit-slider-runnable-track { background-color: ButtonBorder; } &::-webkit-slider-thumb { - box-shadow: calc(-100vw - $webkit-thumb-focus-width) 0 0 100vw Highlight !important; background-color: ButtonFace; border-color: ButtonBorder; } @@ -126,38 +139,22 @@ $webkit-thumb-focus-width: $webkit-thumb-width + $webkit-thumb-focus-offset; background-color: ButtonText; } - &::-moz-range-progress { - background-color: Highlight; - } - &::-moz-range-thumb { background-color: ButtonFace; border-color: ButtonText; } - - &:focus-visible { - &::-webkit-slider-thumb { - outline-offset: commons.$border-thick; - outline: commons.$border-thick solid Highlight; - } - - &::-moz-range-thumb { - outline-offset: commons.$border-thick; - outline: commons.$border-thick solid Highlight; - } - } } &:disabled, &.disabled { &::-webkit-slider-thumb { background-color: ButtonFace; - border-color: ButtonBorder; + border-color: GrayText; } &::-moz-range-thumb { background-color: ButtonFace; - border-color: ButtonBorder; + border-color: GrayText; } } } From 9b60b9fa633984d2aa1684fa205e4a32ad0206a6 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:48:52 +0100 Subject: [PATCH 08/11] Tiny design improvement from Co-authored-by: oliverschuerch --- packages/styles/src/components/form-range.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index 8c3b2fe0dd..14fa5982a6 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -12,7 +12,7 @@ $track-height: 4px; $webkit-progress-height-adjustment: 2px; -$webkit-thumb-width: 33px; +$webkit-thumb-width: 32px; :has(> .form-range) { @include utilities.focus-style(); @@ -42,14 +42,16 @@ $webkit-thumb-width: 33px; &::-webkit-slider-thumb { // Source: https://antvil.github.io/css-sos/sos/progress/ clip-path: polygon( - 0 (-($webkit-thumb-width)), + 0 calc(50% - $track-height * 0.5), + 1px calc(50% - #{$track-height * 0.5 + 4px}), + 1px 0, $webkit-thumb-width 0, $webkit-thumb-width $webkit-thumb-width, - 0 $webkit-thumb-width, - 0 calc(50% + $webkit-progress-height-adjustment), - -100vw calc(50% + $webkit-progress-height-adjustment), - -100vw calc(50% - $webkit-progress-height-adjustment), - 0 calc(50% - $webkit-progress-height-adjustment) + 1px $webkit-thumb-width, + 1px calc(50% + #{$track-height * 0.5 + 4px}), + 0 calc(50% + #{$track-height * 0.5}), + -100vw calc(50% + #{$track-height * 0.5}), + -100vw calc(50% - #{$track-height * 0.5}) ); } From a27b5d950c90f5f131021b28c1a4885877c228df Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:51:05 +0100 Subject: [PATCH 09/11] Fix focus-style mixin argument number --- packages/styles/src/components/form-range.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index 14fa5982a6..06dada1d6e 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -83,7 +83,7 @@ $webkit-thumb-width: 32px; } } - @include utilities.focus-style(50%, '::-moz-range-thumb') { + @include utilities.focus-style('::-moz-range-thumb') { box-shadow: none; // Remove default style outline: none; } From 4ccc4816be8f46fe728a3d36d3980b0e0385f8ad Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:57:00 +0100 Subject: [PATCH 10/11] Fix border-radius --- packages/styles/src/components/form-range.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index 06dada1d6e..c485e90cff 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -84,6 +84,7 @@ $webkit-thumb-width: 32px; } @include utilities.focus-style('::-moz-range-thumb') { + border-radius: 50% !important; box-shadow: none; // Remove default style outline: none; } From c88eb17023bdf6de4366754ef321af70d9cdca57 Mon Sep 17 00:00:00 2001 From: imagoiq <12294151+imagoiq@users.noreply.github.com> Date: Thu, 21 Mar 2024 11:01:12 +0100 Subject: [PATCH 11/11] Fix on moz thumb --- packages/styles/src/components/form-range.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss index c485e90cff..66f698fdf2 100644 --- a/packages/styles/src/components/form-range.scss +++ b/packages/styles/src/components/form-range.scss @@ -83,8 +83,7 @@ $webkit-thumb-width: 32px; } } - @include utilities.focus-style('::-moz-range-thumb') { - border-radius: 50% !important; + @include utilities.focus-style-custom('::-moz-range-thumb') { box-shadow: none; // Remove default style outline: none; }