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

Merge branch 'form-validation-icons' into v4-dev

Browse Source
This commit is contained in:
Mark Otto
2018-07-29 14:18:09 -07:00
parent 774724a7b6 5495a19b5a
commit 0b5a8d9c98
5 changed files with 77 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
scss/mixins/_forms.scss
View File

@@ -50,12 +50,24 @@
@include border-radius($tooltip-border-radius);
}
.form-control,
.custom-select {
.form-control {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-repeat: no-repeat;
background-position: center right calc(#{$input-height-inner} / 4);
background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
@if $state == "valid" {
background-image: $form-feedback-icon-valid;
} @else {
background-image: $form-feedback-icon-invalid;
}
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
@@ -68,6 +80,46 @@
}
}
// stylelint-disable selector-no-qualifying-type
textarea.form-control {
.was-validated &:#{$state},
&.is-#{$state} {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
}
}
}
// stylelint-enable selector-no-qualifying-type
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
@if $state == "valid" {
background: $custom-select-background, $form-feedback-icon-valid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
} @else {
background: $custom-select-background, $form-feedback-icon-invalid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
}
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.form-control-file {
.was-validated &:#{$state},
&.is-#{$state} {