Fixes after review

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>
Orange-OpenSource · Nov 10, 2022 · 5f1e17f · 5f1e17f
1 parent 3a79033
commit 5f1e17f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1161,7 +1161,7 @@ $form-range-thumb-focus-box-shadow: null !default;
 $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-hover-bg: $black !default; // Boosted mod
 $form-range-thumb-active-bg: $primary !default; // Boosted mod
-$form-range-thumb-active-border:  $border-width solid $primary !default; // Boosted mod
+$form-range-thumb-active-border-color: $primary !default; // Boosted mod
 $form-range-thumb-disabled-bg: $gray-500 !default;
 $form-range-thumb-transition: background-color $transition-duration $transition-timing, border-color $transition-duration $transition-timing, box-shadow $transition-duration $transition-timing !default;
 // scss-docs-end form-range-variables

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
@@ -12,18 +12,12 @@
  appearance: none;
 
  &:focus {
- // Boosted mod: better focus visibility
+ outline: 0;
+
  // Pseudo-elements must be split across multiple rulesets to have an effect.
  // No box-shadow() mixin for focus accessibility.
- &::-webkit-slider-thumb {
- border-color: $form-range-thumb-active-border;
- box-shadow: $form-range-thumb-focus-box-shadow;
- }
- &::-moz-range-thumb {
- border-color: $form-range-thumb-active-border;
- box-shadow: $form-range-thumb-focus-box-shadow;
- }
- // End mod
+ &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  }
 
  &::-moz-focus-outer {
@@ -45,17 +39,15 @@
 
  // Boosted mod
  &:hover {
- border: $form-range-thumb-border;
  @include gradient-bg($form-range-thumb-hover-bg);
  }
  // End mod
 
  &:active {
  cursor: grabbing; // Boosted mod
- border: $form-range-thumb-active-border; // Boosted mod
+ border-color: $form-range-thumb-active-border-color; // Boosted mod
  @include gradient-bg($form-range-thumb-active-bg);
  }
-
  }
 
  &::-webkit-slider-runnable-track {
@@ -89,7 +81,7 @@
 
  &:active {
  cursor: grabbing; // Boosted mod
- border: $form-range-thumb-active-border; // Boosted mod
+ border-color: $form-range-thumb-active-border-color; // Boosted mod
  @include gradient-bg($form-range-thumb-active-bg);
  }
  }

diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md
@@ -37,22 +37,27 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
 
 - `@mixin button-size()` has a new interface including a new optional parameter for button letter spacing.
 
+- <span class="badge bg-danger">Breaking</span> `$form-range-thumb-active-border` does'nt exist any more. It has been replaced by `$form-range-thumb-active-border-color`.
+
 - <details class="mb-2">
  <summary><span class="badge bg-success">New</span> CSS variables:</summary>
  <ul>
  <li><code>--bs-btn-letter-spacing</code></li>
  </ul>
  </details>
 
+
 - <details class="mb-2">
  <summary><span class="badge bg-success">New</span> Sass variables:</summary>
  <ul>
  <li><code>$btn-letter-spacing</code></li>
  <li><code>$btn-letter-spacing-lg</code></li>
  <li><code>$btn-letter-spacing-sm</code></li>
+ <li><code>$form-range-thumb-active-border-color</code></li>
  </ul>
  </details>
 
+
 ## v5.2.1
 
 <hr class="mb-4">