Add validation icon

diff --git a/scss/_root.scss b/scss/_root.scss
index ab720a38e40390e461c46798b08fa86fa5ec5d0f..566c8b45a964d31610ea7b85373d5b702ff183b6 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -123,8 +123,10 @@
   // scss-docs-start root-form-validation-variables
   --#{$prefix}form-valid-color: #{$form-valid-color};
   --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
   --#{$prefix}form-invalid-color: #{$form-invalid-color};
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
   // scss-docs-end root-form-validation-variables
 }
 
@@ -177,8 +179,10 @@
 
     --#{$prefix}form-valid-color: #{$form-valid-color-dark};
     --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
     --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
     --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 79f29a305853db0deb74109e3538be59dcc86c49..3651acfc5f4d9412f9e81fa6153fed8d2990e73e 100644 (file)
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -72,6 +72,11 @@ $form-invalid-color-dark:           $red-300 !default;
 $form-invalid-border-color-dark:    $red-300 !default;
 // scss-docs-end form-validation-colors-dark
 
+$form-feedback-icon-valid-color-dark:   $form-valid-color-dark !default;
+$form-feedback-icon-valid-dark:         escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color-dark}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>")) !default;
+$form-feedback-icon-invalid-color-dark: $form-invalid-color-dark !default;
+$form-feedback-icon-invalid-dark:       escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color-dark}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color-dark}' stroke='none'/></svg>")) !default;
+
 
 //
 // Accordion

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 7706c0f6a5e0fd6e31f6c6a121888ad9010dfeb6..e170c3c63254cfedef6045ebd4bef112237b96bf 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1088,10 +1088,10 @@ $form-feedback-font-style:          $form-text-font-style !default;
 $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;
 
-$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+$form-feedback-icon-valid-color:        $form-feedback-valid-color !default;
+$form-feedback-icon-valid:              escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>")) !default;
+$form-feedback-icon-invalid-color:      $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:            escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>")) !default;
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
@@ -1105,7 +1105,7 @@ $form-invalid-border-color:         $form-feedback-invalid-color !default;
 $form-validation-states: (
   "valid": (
     "color": var(--#{$prefix}form-valid-color),
-    "icon": $form-feedback-icon-valid,
+    "icon": var(--#{$prefix}form-valid-icon),
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}success),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
@@ -1113,7 +1113,7 @@ $form-validation-states: (
   ),
   "invalid": (
     "color": var(--#{$prefix}form-invalid-color),
-    "icon": $form-feedback-icon-invalid,
+    "icon": var(--#{$prefix}form-invalid-icon),
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}danger),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),