Proposal for form validation

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index eec99c58cc56e83020c5f24041dd9209cf08fbab..45922fddd966f264eb650f4a7657d88ed4d4128b 100644 (file)
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -35,11 +35,11 @@
   &:focus {
     border-color: $form-check-input-focus-border;
     outline: 0;
-    box-shadow: $form-check-input-focus-box-shadow;
+    box-shadow: var(--#{$prefix}form-check-focus-box-shadow, $form-check-input-focus-box-shadow);
   }
 
   &:checked {
-    background-color: $form-check-input-checked-bg-color;
+    background-color: var(--#{$prefix}form-check-checked-bg-color, $form-check-input-checked-bg-color);
     @if $enable-gradients {
       background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient));
     } @else {

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 0ecef1057db4d3583bacb3646237d7eadb31183b..307e31aa600075c25af30b8a2019173b44244e91 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -21,7 +21,7 @@
   appearance: none; // Fix appearance for date inputs in Safari
   background-color: $input-bg;
   background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
+  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -41,7 +41,7 @@
   &:focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
+    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -165,7 +165,7 @@
 }
 
 .form-control-color {
-  width: $form-color-width;
+  width: var(--#{$prefix}form-color-width, $form-color-width);
   padding: var(--#{$prefix}form-control-padding-y);
 
   &:not(:disabled):not([readonly]) {

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 69ace529d76a6fa0d1170c1519283ff88236baf0..df6514ec741d1a72012a440f81653a8bbd236ed3 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -20,19 +20,19 @@
   background-repeat: no-repeat;
   background-position: $form-select-bg-position;
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid $form-select-border-color;
+  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
 
   &:focus {
-    border-color: $form-select-focus-border-color;
+    border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
     outline: 0;
     @if $enable-shadows {
-      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+      @include box-shadow($form-select-box-shadow, var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow));
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $form-select-focus-box-shadow;
+      box-shadow: var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow);
     }
   }
 

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index d47b1e41d63e60a05ffb2ed42a3c3f847ccea2d5..4c38f7180f713c69c2a2c4254c74887d0d3a5ac1 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -57,7 +57,9 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
+      --#{$prefix}input-border-color: #{$border-color};
+      --#{$prefix}input-focus-border-color: #{$border-color};
+      --#{$prefix}input-focus-box-shadow: #{$focus-box-shadow};
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
@@ -66,11 +68,6 @@
         background-position: right $input-height-inner-quarter center;
         background-size: $input-height-inner-half $input-height-inner-half;
       }
-
-      &:focus {
-        border-color: $border-color;
-        box-shadow: $focus-box-shadow;
-      }
     }
   }
 
@@ -86,7 +83,9 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
+      --#{$prefix}form-select-border-color: #{$border-color};
+      --#{$prefix}form-select-focus-border-color: #{$border-color};
+      --#{$prefix}form-select-focus-box-shadow: #{$focus-box-shadow};
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
@@ -97,33 +96,23 @@
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
-
-      &:focus {
-        border-color: $border-color;
-        box-shadow: $focus-box-shadow;
-      }
     }
   }
 
   .form-control-color {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        width: add($form-color-width, $input-height-inner);
+        --#{$prefix}form-color-width: #{add($form-color-width, $input-height-inner)};
       }
     }
   }
 
   .form-check-input {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
-
-      &:checked {
-        background-color: $color;
-      }
+      --#{$prefix}form-check-focus-box-shadow: #{$focus-box-shadow};
+      --#{$prefix}form-check-checked-bg-color: #{$color};
 
-      &:focus {
-        box-shadow: $focus-box-shadow;
-      }
+      border-color: $border-color;
 
       ~ .form-check-label {
         color: $color;