We style the form, not bootstrap (#947)

levkk · web-flow · commit d48a4b26e119 · 2023-08-25T09:50:52.000-07:00
diff --git a/pgml-dashboard/static/css/bootstrap-theme.scss b/pgml-dashboard/static/css/bootstrap-theme.scss
@@ -20,7 +20,15 @@
 @import "./bootstrap-5.3.0-alpha1/scss/containers";
 @import "./bootstrap-5.3.0-alpha1/scss/grid";
 @import "./bootstrap-5.3.0-alpha1/scss/tables";
-@import "./bootstrap-5.3.0-alpha1/scss/forms";
+
+@import "./bootstrap-5.3.0-alpha1/scss/forms/labels";
+@import "./bootstrap-5.3.0-alpha1/scss/forms/form-text";
+@import "./bootstrap-5.3.0-alpha1/scss/forms/form-control";
+@import "./bootstrap-5.3.0-alpha1/scss/forms/form-select";
+@import "./bootstrap-5.3.0-alpha1/scss/forms/form-check";
+// Do not import form-range, we style it ourselves entirely
+// @import "../bootstrap-5.3.0-alpha1/scss/forms/form-range";
+
 @import "./bootstrap-5.3.0-alpha1/scss/buttons";
 @import "./bootstrap-5.3.0-alpha1/scss/transitions";
 @import "./bootstrap-5.3.0-alpha1/scss/dropdown";
diff --git a/pgml-dashboard/static/css/scss/components/_forms.scss b/pgml-dashboard/static/css/scss/components/_forms.scss
@@ -69,46 +69,7 @@
     color: #{$gray-100};
 }
 
-
-.form-range[type=range] {
-    cursor: pointer;
-}
-
-// Firefox
-.form-range[type="range"]::-moz-range-progress {
-    background-color: #{$neon-tint-100};
-    height: 4px;
-    border: 0;
-}
-
-// IE
-.form-range[type="range"]::-ms-fill-lower {
-    background-color: #{$neon-tint-100};
-}
-
-// Chrome (doesn't really work as designed)
-.form-range[type=range]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    height: 24px;
-    width: 24px;
-    position: relative;
-    bottom: 4px;
-    border-radius: 50%;
-    border: #{$form-range-thumb-border};
-    background: #{$form-range-thumb-bg};
-}
-
-.form-range[type=range]::-webkit-slider-runnable-track {
-  height: #{$form-range-track-height};
-  border: 0;
-}
-
-.form-range[type=range]:focus::-webkit-slider-runnable-track {
-    background: #{$neon-tint-100};
-}
-// End of Chrome
-
-.form-range-custome {
+.form-range {
     & {
         font-size: 1.5rem;
         width: 100%;
