aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/mixins
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_background-variant.scss5
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_badge.scss2
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_buttons.scss7
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_caret.scss16
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_float.scss6
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_forms.scss79
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss11
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_grid.scss18
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_hover.scss8
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_image.scss2
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_list-group.scss2
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_lists.scss2
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_nav-divider.scss3
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_reset-text.scss2
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_screen-reader.scss5
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_table-row.scss2
-rw-r--r--vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss5
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);
}