diff options
author | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
---|---|---|
committer | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
commit | 4a904fa3a8af1c101ede76657249fb7eb47faf60 (patch) | |
tree | 544509813fb68579ef2b556ce879a971d183269a /vendor/twbs/bootstrap/scss/mixins/_forms.scss | |
parent | f5f6ec3d71acb3e0488386819d5060e59331ec23 (diff) | |
parent | c13d7e29ef9676b0f0e4ae23aa52e203f4ad8895 (diff) | |
download | volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.gz volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.bz2 volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.zip |
Merge branch 'patch-29' into 'dev'
Patch 29
See merge request Kostikov/core!3
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins/_forms.scss')
-rw-r--r-- | vendor/twbs/bootstrap/scss/mixins/_forms.scss | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_forms.scss b/vendor/twbs/bootstrap/scss/mixins/_forms.scss new file mode 100644 index 000000000..3a6187869 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -0,0 +1,147 @@ +// Form control focus state +// +// Generate a customized focus state and for any input with the specified color, +// which defaults to the `$input-focus-border-color` variable. +// +// We highly encourage you to not customize the default value, but instead use +// this to tweak colors on an as-needed basis. This aesthetic change is based on +// WebKit's default styles, but applicable to a wider range of browsers. Its +// usability and accessibility should be taken into account with any change. +// +// Example usage: change the default blue border and shadow to white for better +// contrast against a dark gray background. +@mixin form-control-focus() { + &:focus { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } + } +} + + +@mixin form-validation-state($state, $color) { + .#{$state}-feedback { + display: none; + width: 100%; + margin-top: $form-feedback-margin-top; + font-size: $form-feedback-font-size; + color: $color; + } + + .#{$state}-tooltip { + position: absolute; + top: 100%; + z-index: 5; + display: none; + max-width: 100%; // Contain to parent when possible + padding: $tooltip-padding-y $tooltip-padding-x; + margin-top: .1rem; + font-size: $tooltip-font-size; + line-height: $line-height-base; + color: color-yiq($color); + background-color: rgba($color, $tooltip-opacity); + @include border-radius($tooltip-border-radius); + } + + .form-control, + .custom-select { + .was-validated &:#{$state}, + &.is-#{$state} { + border-color: $color; + + &: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} { + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + } + + .form-check-input { + .was-validated &:#{$state}, + &.is-#{$state} { + ~ .form-check-label { + color: $color; + } + + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + } + + .custom-control-input { + .was-validated &:#{$state}, + &.is-#{$state} { + ~ .custom-control-label { + color: $color; + + &::before { + background-color: lighten($color, 25%); + } + } + + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + + &:checked { + ~ .custom-control-label::before { + @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); + } + } + } + } + + // custom file + .custom-file-input { + .was-validated &:#{$state}, + &.is-#{$state} { + ~ .custom-file-label { + border-color: $color; + + &::after { border-color: inherit; } + } + + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + + &:focus { + ~ .custom-file-label { + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + } + } + } +} |