mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Extended form validation states customization capabilities (#31757)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Dmytro Yaremenko
2020-12-17 07:07:48 +02:00
committed by GitHub
parent b424650ab5
commit 8984255158
4 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/forms/_validation.scss
View File

@@ -7,6 +7,6 @@
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
@include form-validation-state($state, $data...);
}
// scss-docs-end form-validation-states-loop

19
scss/mixins/_forms.scss
View File

@@ -13,7 +13,14 @@
}
}
@mixin form-validation-state($state, $color, $icon) {
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback {
display: none;
width: 100%;
@@ -33,8 +40,8 @@
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: color-contrast($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@@ -59,7 +66,7 @@
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
box-shadow: $focus-box-shadow;
}
}
}
@@ -87,7 +94,7 @@
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
box-shadow: $focus-box-shadow;
}
}
}
@@ -101,7 +108,7 @@
}
&:focus {
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
box-shadow: $focus-box-shadow;
}
~ .form-check-label {