mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

Add validation icon

Browse Source
This commit is contained in:
louismaxime.piton
2023-08-24 11:13:37 +02:00
parent fee563d1fc
commit a8efd9f3e3
3 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_root.scss
View File

@@ -123,8 +123,10 @@
// scss-docs-start root-form-validation-variables // scss-docs-start root-form-validation-variables
--#{$prefix}form-valid-color: #{$form-valid-color}; --#{$prefix}form-valid-color: #{$form-valid-color};
--#{$prefix}form-valid-border-color: #{$form-valid-border-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-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-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 // scss-docs-end root-form-validation-variables
} }
@@ -177,8 +179,10 @@
--#{$prefix}form-valid-color: #{$form-valid-color-dark}; --#{$prefix}form-valid-color: #{$form-valid-color-dark};
--#{$prefix}form-valid-border-color: #{$form-valid-border-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-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-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 // scss-docs-end root-dark-mode-vars
} }
} }

5
scss/_variables-dark.scss
View File

@@ -72,6 +72,11 @@ $form-invalid-color-dark: $red-300 !default;
$form-invalid-border-color-dark: $red-300 !default; $form-invalid-border-color-dark: $red-300 !default;
// scss-docs-end form-validation-colors-dark // 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 // Accordion

12
scss/_variables.scss
View File

@@ -1088,10 +1088,10 @@ $form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default; $form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default; $form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !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-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-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-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-end form-feedback-variables
// scss-docs-start form-validation-colors // scss-docs-start form-validation-colors
@@ -1105,7 +1105,7 @@ $form-invalid-border-color: $form-feedback-invalid-color !default;
$form-validation-states: ( $form-validation-states: (
"valid": ( "valid": (
"color": var(--#{$prefix}form-valid-color), "color": var(--#{$prefix}form-valid-color),
"icon": $form-feedback-icon-valid, "icon": var(--#{$prefix}form-valid-icon),
"tooltip-color": #fff, "tooltip-color": #fff,
"tooltip-bg-color": var(--#{$prefix}success), "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), "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": ( "invalid": (
"color": var(--#{$prefix}form-invalid-color), "color": var(--#{$prefix}form-invalid-color),
"icon": $form-feedback-icon-invalid, "icon": var(--#{$prefix}form-invalid-icon),
"tooltip-color": #fff, "tooltip-color": #fff,
"tooltip-bg-color": var(--#{$prefix}danger), "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), "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),