diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
17 files changed, 95 insertions, 80 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss b/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss index 494439d2b..3ceb5c563 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_background-variant.scss @@ -2,16 +2,17 @@ // Contextual backgrounds -@mixin bg-variant($parent, $color) { +@mixin bg-variant($parent, $color, $ignore-warning: false) { #{$parent} { background-color: $color !important; } a#{$parent}, button#{$parent} { - @include hover-focus { + @include hover-focus() { background-color: darken($color, 10%) !important; } } + @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning); } @mixin bg-gradient-variant($parent, $color) { diff --git a/vendor/twbs/bootstrap/scss/mixins/_badge.scss b/vendor/twbs/bootstrap/scss/mixins/_badge.scss index 64b29cb57..f1c499141 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_badge.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_badge.scss @@ -3,7 +3,7 @@ background-color: $bg; @at-root a#{&} { - @include hover-focus { + @include hover-focus() { color: color-yiq($bg); background-color: darken($bg, 10%); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index eee903f83..c82c4d6d0 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -9,7 +9,7 @@ border-color: $border; @include box-shadow($btn-box-shadow); - @include hover { + @include hover() { color: color-yiq($hover-background); @include gradient-bg($hover-background); border-color: $hover-border; @@ -17,6 +17,9 @@ &:focus, &.focus { + color: color-yiq($hover-background); + @include gradient-bg($hover-background); + border-color: $hover-border; // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); @@ -62,7 +65,7 @@ color: $color; border-color: $color; - @include hover { + @include hover() { color: $color-hover; background-color: $active-background; border-color: $active-border; diff --git a/vendor/twbs/bootstrap/scss/mixins/_caret.scss b/vendor/twbs/bootstrap/scss/mixins/_caret.scss index 8ecef65b4..27466495b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_caret.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_caret.scss @@ -1,25 +1,25 @@ -@mixin caret-down { +@mixin caret-down() { border-top: $caret-width solid; border-right: $caret-width solid transparent; border-bottom: 0; border-left: $caret-width solid transparent; } -@mixin caret-up { +@mixin caret-up() { border-top: 0; border-right: $caret-width solid transparent; border-bottom: $caret-width solid; border-left: $caret-width solid transparent; } -@mixin caret-right { +@mixin caret-right() { border-top: $caret-width solid transparent; border-right: 0; border-bottom: $caret-width solid transparent; border-left: $caret-width solid; } -@mixin caret-left { +@mixin caret-left() { border-top: $caret-width solid transparent; border-right: $caret-width solid; border-bottom: $caret-width solid transparent; @@ -33,11 +33,11 @@ vertical-align: $caret-vertical-align; content: ""; @if $direction == down { - @include caret-down; + @include caret-down(); } @else if $direction == up { - @include caret-up; + @include caret-up(); } @else if $direction == right { - @include caret-right; + @include caret-right(); } } @@ -51,7 +51,7 @@ margin-right: $caret-spacing; vertical-align: $caret-vertical-align; content: ""; - @include caret-left; + @include caret-left(); } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_float.scss b/vendor/twbs/bootstrap/scss/mixins/_float.scss index adff88e79..6b376a258 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_float.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_float.scss @@ -1,14 +1,14 @@ // stylelint-disable declaration-no-important -@mixin float-left { +@mixin float-left() { float: left !important; @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); } -@mixin float-right { +@mixin float-right() { float: right !important; @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); } -@mixin float-none { +@mixin float-none() { float: none !important; @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); } 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; diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss index 649c28bf7..8e291f7ae 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss @@ -33,10 +33,15 @@ flex-grow: 1; max-width: 100%; } + + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + .col#{$infix}-auto { - flex: 0 0 auto; - width: auto; - max-width: 100%; // Reset earlier grid tiers + @include make-col-auto(); } @for $i from 1 through $columns { diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index 924eb0cfc..b1240b01f 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -45,7 +45,25 @@ max-width: percentage($size / $columns); } +@mixin make-col-auto() { + flex: 0 0 auto; + width: auto; + max-width: 100%; // Reset earlier grid tiers +} + @mixin make-col-offset($size, $columns: $grid-columns) { $num: $size / $columns; margin-left: if($num == 0, 0, percentage($num)); } + +// Row columns +// +// Specify on a parent element(e.g., .row) to force immediate children into NN +// numberof columns. Supports wrapping to new lines, but does not do a Masonry +// style grid. +@mixin row-cols($count) { + & > * { + flex: 0 0 100% / $count; + max-width: 100% / $count; + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_hover.scss b/vendor/twbs/bootstrap/scss/mixins/_hover.scss index 192f847e1..409f8244e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_hover.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_hover.scss @@ -9,18 +9,18 @@ // // Issue: https://github.com/twbs/bootstrap/issues/25195 -@mixin hover { +@mixin hover() { &:hover { @content; } } -@mixin hover-focus { +@mixin hover-focus() { &:hover, &:focus { @content; } } -@mixin plain-hover-focus { +@mixin plain-hover-focus() { &, &:hover, &:focus { @@ -28,7 +28,7 @@ } } -@mixin hover-focus-active { +@mixin hover-focus-active() { &:hover, &:focus, &:active { diff --git a/vendor/twbs/bootstrap/scss/mixins/_image.scss b/vendor/twbs/bootstrap/scss/mixins/_image.scss index a76a6082b..c971e038b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_image.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_image.scss @@ -7,7 +7,7 @@ // // Keep images from scaling beyond the width of their parents. -@mixin img-fluid { +@mixin img-fluid() { // Part 1: Set a maximum relative to the parent max-width: 100%; // Part 2: Override the height to auto, otherwise images will be stretched diff --git a/vendor/twbs/bootstrap/scss/mixins/_list-group.scss b/vendor/twbs/bootstrap/scss/mixins/_list-group.scss index cd47a4e9f..0da353156 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_list-group.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_list-group.scss @@ -6,7 +6,7 @@ background-color: $background; &.list-group-item-action { - @include hover-focus { + @include hover-focus() { color: $color; background-color: darken($background, 5%); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_lists.scss b/vendor/twbs/bootstrap/scss/mixins/_lists.scss index 251856266..251cb0733 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_lists.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_lists.scss @@ -1,7 +1,7 @@ // Lists // Unstyled keeps list items block level, just removes default browser padding and list-style -@mixin list-unstyled { +@mixin list-unstyled() { padding-left: 0; list-style: none; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss b/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss index 4fb37b622..3e0cceafe 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss @@ -2,9 +2,10 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { +@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) { height: 0; margin: $margin-y 0; overflow: hidden; border-top: 1px solid $color; + @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss index bfa9f6e9a..15b4407a0 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss @@ -1,4 +1,4 @@ -@mixin reset-text { +@mixin reset-text() { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; diff --git a/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss b/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss index 812591bc5..21230390e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss @@ -3,11 +3,12 @@ // See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ -@mixin sr-only { +@mixin sr-only() { position: absolute; width: 1px; height: 1px; padding: 0; + margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686 overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; @@ -20,7 +21,7 @@ // // Credit: HTML5 Boilerplate -@mixin sr-only-focusable { +@mixin sr-only-focusable() { &:active, &:focus { position: static; diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss index f8d61869a..1ccde6b6c 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss @@ -26,7 +26,7 @@ $hover-background: darken($background, 5%); .table-#{$state} { - @include hover { + @include hover() { background-color: $hover-background; > td, diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss index 155d6ca8c..5eb8a5515 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss @@ -2,15 +2,16 @@ // Typography -@mixin text-emphasis-variant($parent, $color) { +@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) { #{$parent} { color: $color !important; } @if $emphasized-link-hover-darken-percentage != 0 { a#{$parent} { - @include hover-focus { + @include hover-focus() { color: darken($color, $emphasized-link-hover-darken-percentage) !important; } } } + @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning); } |