feat(range): change hover and active colors (#1605)

Signed-off-by: Isabelle Chanclou <[email protected]> Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Louis-Maxime Piton <[email protected]>
Orange-OpenSource · Apr 4, 2023 · 03612e8 · 03612e8
1 parent 58ccd72
commit 03612e8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1268,10 +1268,9 @@ $form-range-thumb-border-radius: 50% !default;
 $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
 $form-range-thumb-focus-box-shadow: null !default; // Boosted mod
 $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg: null !default;
-// fusv-disable
-$form-range-thumb-active-border: $component-active-bg !default; // Boosted mod // Deprecated in v5.2.0
-// fusv-enable
+$form-range-thumb-hover-bg: $black !default; // Boosted mod
+$form-range-thumb-active-bg: $primary !default; // Boosted mod: instead of `tint-color($component-active-bg, 70%)`
+$form-range-thumb-active-border: $primary !default; // Boosted mod
 $form-range-thumb-disabled-bg: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 $form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing !default; // Boosted mod: no box shadow
 // scss-docs-end form-range-variables

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
@@ -50,8 +50,15 @@
  @include transition($form-range-thumb-transition);
  appearance: none;
 
+ // Boosted mod
+ &:hover {
+ @include gradient-bg($form-range-thumb-hover-bg);
+ }
+ // End mod
+
  &:active {
  cursor: grabbing; // Boosted mod
+ border-color: $form-range-thumb-active-border; // Boosted mod
  @include gradient-bg($form-range-thumb-active-bg);
  }
  }
@@ -78,8 +85,16 @@
  @include transition($form-range-thumb-transition);
  appearance: none;
 
+ // Boosted mod
+ &:hover {
+ border: $form-range-thumb-border;
+ @include gradient-bg($form-range-thumb-hover-bg);
+ }
+ // End mod
+
  &:active {
  cursor: grabbing; // Boosted mod
+ border-color: $form-range-thumb-active-border; // Boosted mod
  @include gradient-bg($form-range-thumb-active-bg);
  }
  }

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -413,6 +413,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
  <li><code>$form-invalid-border-color-dark</code></li>
  <li><code>$form-invalid-color</code></li>
  <li><code>$form-invalid-color-dark</code></li>
+ <li><code>$form-range-thumb-hover-bg</code></li>
  <li><code>$form-valid-border-color</code></li>
  <li><code>$form-valid-border-color-dark</code></li>
  <li><code>$form-valid-color</code></li>
@@ -680,7 +681,6 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
  <li><code>$accordion-body-padding-y</code></li>
  <li><code>$btn-close-focus-shadow</code></li>
  <li><code>$card-spacer-y</code></li>
- <li><code>$form-range-thumb-active-border</code></li>
  <li><code>$form-star-focus-box-shadow</code></li>
  <li><code>$form-star-focus-color</code></li>
  <li><code>$form-star-focus-color-dark</code></li>