aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/mixins/_forms.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins/_forms.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_forms.scss69
1 files changed, 57 insertions, 12 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_forms.scss b/vendor/twbs/bootstrap/scss/mixins/_forms.scss
index 3a6187869..ea8a91a02 100644
--- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss
+++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss
@@ -26,12 +26,12 @@
}
-@mixin form-validation-state($state, $color) {
+@mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback {
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
- font-size: $form-feedback-font-size;
+ @include font-size($form-feedback-font-size);
color: $color;
}
@@ -41,21 +41,61 @@
z-index: 5;
display: none;
max-width: 100%; // Contain to parent when possible
- padding: $tooltip-padding-y $tooltip-padding-x;
+ padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
- font-size: $tooltip-font-size;
- line-height: $line-height-base;
+ @include font-size($form-feedback-tooltip-font-size);
+ line-height: $form-feedback-tooltip-line-height;
color: color-yiq($color);
- background-color: rgba($color, $tooltip-opacity);
- @include border-radius($tooltip-border-radius);
+ background-color: rgba($color, $form-feedback-tooltip-opacity);
+ @include border-radius($form-feedback-tooltip-border-radius);
+ }
+
+ .form-control {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ border-color: $color;
+
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-image: $icon;
+ background-repeat: no-repeat;
+ background-position: center right $input-height-inner-quarter;
+ background-size: $input-height-inner-half $input-height-inner-half;
+ }
+
+ &:focus {
+ border-color: $color;
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ // stylelint-disable-next-line selector-no-qualifying-type
+ textarea.form-control {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ @if $enable-validation-icons {
+ padding-right: $input-height-inner;
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+ }
+ }
}
- .form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
+ @if $enable-validation-icons {
+ padding-right: $custom-select-feedback-icon-padding-right;
+ background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+ }
+
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
@@ -68,6 +108,7 @@
}
}
+
.form-control-file {
.was-validated &:#{$state},
&.is-#{$state} {
@@ -99,7 +140,7 @@
color: $color;
&::before {
- background-color: lighten($color, 25%);
+ border-color: $color;
}
}
@@ -110,13 +151,18 @@
&:checked {
~ .custom-control-label::before {
+ border-color: lighten($color, 10%);
@include gradient-bg(lighten($color, 10%));
}
}
&:focus {
~ .custom-control-label::before {
- box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+
+ &:not(:checked) ~ .custom-control-label::before {
+ border-color: $color;
}
}
}
@@ -128,8 +174,6 @@
&.is-#{$state} {
~ .custom-file-label {
border-color: $color;
-
- &::after { border-color: inherit; }
}
~ .#{$state}-feedback,
@@ -139,6 +183,7 @@
&:focus {
~ .custom-file-label {
+ border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}