🔧 chore(forms.scss): Fix issue where range slider does not slide

from start to end #217
Spiderpig86 · Oct 16, 2023 · 77582e7 · 77582e7
1 parent 634f947
commit 77582e7
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 3 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -12350,6 +12350,12 @@ select[type=color] {
   padding: 0.55rem 0.8rem !important;
 }
 
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset])[type=range],
+select[type=range] {
+  outline: 0;
+  padding: 0;
+}
+
 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]).input-success,
 select.input-success {
   border-color: #0dd157;
@@ -12493,6 +12499,16 @@ input[type=text].input-focused,
   box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, 0.45), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
 }
 
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus[type=range],
+select:focus[type=range],
+textarea:focus[type=range],
+textarea[type=text]:focus[type=range],
+input[type=text].input-focused[type=range],
+.input-focused[type=range] {
+  box-shadow: none;
+  outline: 0;
+}
+
 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus.input-success,
 select:focus.input-success,
 textarea:focus.input-success,

diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -10929,6 +10929,12 @@ select[type=color] {
   padding: 0.55rem 0.8rem !important;
 }
 
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset])[type=range],
+select[type=range] {
+  outline: 0;
+  padding: 0;
+}
+
 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]).input-success,
 select.input-success {
   border-color: #0dd157;
@@ -11072,6 +11078,16 @@ input[type=text].input-focused,
   box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, 0.45), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
 }
 
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus[type=range],
+select:focus[type=range],
+textarea:focus[type=range],
+textarea[type=text]:focus[type=range],
+input[type=text].input-focused[type=range],
+.input-focused[type=range] {
+  box-shadow: none;
+  outline: 0;
+}
+
 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus.input-success,
 select:focus.input-success,
 textarea:focus.input-success,

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -10930,6 +10930,12 @@ select[type=color] {
   padding: 0.55rem 0.8rem !important;
 }
 
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset])[type=range],
+select[type=range] {
+  outline: 0;
+  padding: 0;
+}
+
 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]).input-success,
 select.input-success {
   border-color: #0dd157;
@@ -11073,6 +11079,16 @@ input[type=text].input-focused,
   box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, 0.45), inset 0px 1px 8px rgba(0, 0, 0, 0.07);
 }
 
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus[type=range],
+select:focus[type=range],
+textarea:focus[type=range],
+textarea[type=text]:focus[type=range],
+input[type=text].input-focused[type=range],
+.input-focused[type=range] {
+  box-shadow: none;
+  outline: 0;
+}
+
 input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):focus.input-success,
 select:focus.input-success,
 textarea:focus.input-success,

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/components/forms.scss b/src/components/forms.scss
@@ -103,6 +103,11 @@
             background-color: #fff;
             padding: 0.55rem 0.8rem !important;
         }
+
+        &[type='range'] {
+            outline: 0;
+            padding: 0;
+        }
 
         &.input-success {
             @include input-success();
@@ -133,6 +138,11 @@
         box-shadow: 0 0 0 0.2rem transparentize($cirrus-input-border, $focus-opacity),
             inset 0px 1px 8px rgba(0, 0, 0, 0.07);
 
+        &[type='range'] {
+            box-shadow: none;
+            outline: 0;
+        }
+
         &.input-success {
             @include input-success();
             background-color: rgba(0, 224, 0, 0.05) !important;