diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/mixins/_forms.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_forms.scss | 71 |
1 files changed, 61 insertions, 10 deletions
diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 3a61878..b8eb59d 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -41,21 +41,67 @@ 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; + 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-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); + } + + ~ .#{$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 calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4); + } + } } - .form-control, .custom-select { .was-validated &:#{$state}, &.is-#{$state} { border-color: $color; + @if $enable-validation-icons { + $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid); + padding-right: $custom-select-feedback-icon-padding-right; + background: $custom-select-background, $form-feedback-icon 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 +114,7 @@ } } + .form-control-file { .was-validated &:#{$state}, &.is-#{$state} { @@ -99,7 +146,7 @@ color: $color; &::before { - background-color: lighten($color, 25%); + border-color: $color; } } @@ -110,13 +157,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 +180,6 @@ &.is-#{$state} { ~ .custom-file-label { border-color: $color; - - &::after { border-color: inherit; } } ~ .#{$state}-feedback, @@ -139,6 +189,7 @@ &:focus { ~ .custom-file-label { + border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } |