From 544ef3bc588d4180d7ecad15bdacd43813a7c5c5 Mon Sep 17 00:00:00 2001 From: Mario Date: Thu, 12 Dec 2019 14:51:10 +0000 Subject: update composer libs and minor notifications display fixes --- vendor/twbs/bootstrap/scss/mixins/_forms.scss | 79 +++++++++++---------------- 1 file changed, 32 insertions(+), 47 deletions(-) (limited to 'vendor/twbs/bootstrap/scss/mixins/_forms.scss') diff --git a/vendor/twbs/bootstrap/scss/mixins/_forms.scss b/vendor/twbs/bootstrap/scss/mixins/_forms.scss index ea8a91a02..418470d0b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -10,7 +10,7 @@ // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. -@mixin form-control-focus() { +@mixin form-control-focus($ignore-warning: false) { &:focus { color: $input-focus-color; background-color: $input-focus-bg; @@ -23,8 +23,23 @@ box-shadow: $input-focus-box-shadow; } } + @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning); } +// This mixin uses an `if()` technique to be compatible with Dart Sass +// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details +@mixin form-validation-state-selector($state) { + @if ($state == "valid" or $state == "invalid") { + .was-validated #{if(&, "&", "")}:#{$state}, + #{if(&, "&", "")}.is-#{$state} { + @content; + } + } @else { + #{if(&, "&", "")}.is-#{$state} { + @content; + } + } +} @mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { @@ -50,16 +65,22 @@ @include border-radius($form-feedback-tooltip-border-radius); } + @include form-validation-state-selector($state) { + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + .form-control { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { border-color: $color; @if $enable-validation-icons { padding-right: $input-height-inner; - background-image: $icon; + background-image: escape-svg($icon); background-repeat: no-repeat; - background-position: center right $input-height-inner-quarter; + background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } @@ -67,18 +88,12 @@ 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} { + @include form-validation-state-selector($state) { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; @@ -87,41 +102,23 @@ } .custom-select { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($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; + background: $custom-select-background, escape-svg($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); } - - ~ .#{$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} { + @include form-validation-state-selector($state) { ~ .form-check-label { color: $color; } @@ -134,8 +131,7 @@ } .custom-control-input { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { ~ .custom-control-label { color: $color; @@ -144,11 +140,6 @@ } } - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - &:checked { ~ .custom-control-label::before { border-color: lighten($color, 10%); @@ -170,17 +161,11 @@ // custom file .custom-file-input { - .was-validated &:#{$state}, - &.is-#{$state} { + @include form-validation-state-selector($state) { ~ .custom-file-label { border-color: $color; } - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - &:focus { ~ .custom-file-label { border-color: $color; -- cgit v1.2.3