diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/mixins')
20 files changed, 179 insertions, 67 deletions
diff --git a/vendor/twbs/bootstrap/scss/mixins/_badge.scss b/vendor/twbs/bootstrap/scss/mixins/_badge.scss index eeca0b40d..64b29cb57 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_badge.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_badge.scss @@ -2,11 +2,16 @@ color: color-yiq($bg); background-color: $bg; - &[href] { + @at-root a#{&} { @include hover-focus { color: color-yiq($bg); - text-decoration: none; background-color: darken($bg, 10%); } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss index 2024febcf..88aeb37d8 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss @@ -1,9 +1,13 @@ +// stylelint-disable property-blacklist // Single side border-radius -@mixin border-radius($radius: $border-radius) { +@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: $radius; } + @else if $fallback-border-radius != false { + border-radius: $fallback-border-radius; + } } @mixin border-top-radius($radius) { @@ -33,3 +37,27 @@ border-bottom-left-radius: $radius; } } + +@mixin border-top-left-radius($radius) { + @if $enable-rounded { + border-top-left-radius: $radius; + } +} + +@mixin border-top-right-radius($radius) { + @if $enable-rounded { + border-top-right-radius: $radius; + } +} + +@mixin border-bottom-right-radius($radius) { + @if $enable-rounded { + border-bottom-right-radius: $radius; + } +} + +@mixin border-bottom-left-radius($radius) { + @if $enable-rounded { + border-bottom-left-radius: $radius; + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss b/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss index b2410e53a..0726d4359 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss @@ -1,5 +1,20 @@ @mixin box-shadow($shadow...) { @if $enable-shadows { - box-shadow: $shadow; + $result: (); + + @if (length($shadow) == 1) { + // We can pass `@include box-shadow(none);` + $result: $shadow; + } @else { + // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` + @for $i from 1 through length($shadow) { + @if nth($shadow, $i) != "none" { + $result: append($result, nth($shadow, $i), "comma"); + } + } + } + @if (length($result) > 0) { + box-shadow: $result; + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss index 59f25a27e..23a5de96b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss @@ -16,7 +16,7 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -39,7 +39,7 @@ // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); + @return if($next, breakpoint-min($next, $breakpoints) - .02, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index 06ad6772f..eee903f83 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -19,9 +19,9 @@ &.focus { // 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($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } @@ -31,6 +31,10 @@ color: color-yiq($background); background-color: $background; border-color: $border; + // Remove CSS gradients if they're enabled + @if $enable-gradients { + background-image: none; + } } &:not(:disabled):not(.disabled):active, @@ -45,10 +49,10 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + @if $enable-shadows and $btn-active-box-shadow != none { + box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } } @@ -56,11 +60,9 @@ @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; - background-color: transparent; - background-image: none; border-color: $color; - &:hover { + @include hover { color: $color-hover; background-color: $active-background; border-color: $active-border; @@ -98,12 +100,8 @@ // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; - font-size: $font-size; + @include font-size($font-size); line-height: $line-height; // Manually declare to provide an override to the browser default - @if $enable-rounded { - border-radius: $border-radius; - } @else { - border-radius: 0; - } + @include border-radius($border-radius, 0); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_caret.scss b/vendor/twbs/bootstrap/scss/mixins/_caret.scss index 82aea4210..8ecef65b4 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_caret.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_caret.scss @@ -29,10 +29,8 @@ @if $enable-caret { &::after { display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-left: $caret-spacing; + vertical-align: $caret-vertical-align; content: ""; @if $direction == down { @include caret-down; @@ -50,10 +48,8 @@ &::before { display: inline-block; - width: 0; - height: 0; - margin-right: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-right: $caret-spacing; + vertical-align: $caret-vertical-align; content: ""; @include caret-left; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_deprecate.scss b/vendor/twbs/bootstrap/scss/mixins/_deprecate.scss new file mode 100644 index 000000000..df070bc59 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_deprecate.scss @@ -0,0 +1,10 @@ +// Deprecate mixin +// +// This mixin can be used to deprecate mixins or functions. +// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to +// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) +@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { + @if ($enable-deprecation-messages != false and $ignore-warning != true) { + @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_float.scss b/vendor/twbs/bootstrap/scss/mixins/_float.scss index 48fa8b6d5..adff88e79 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_float.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_float.scss @@ -2,10 +2,13 @@ @mixin float-left { float: left !important; + @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); } @mixin float-right { float: right !important; + @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); } @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 3a6187869..ea8a91a02 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -26,12 +26,12 @@ } -@mixin form-validation-state($state, $color) { +@mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; - font-size: $form-feedback-font-size; + @include font-size($form-feedback-font-size); color: $color; } @@ -41,21 +41,61 @@ 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; + @include 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-image: $icon; + background-repeat: no-repeat; + background-position: center right $input-height-inner-quarter; + background-size: $input-height-inner-half $input-height-inner-half; + } + + &: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 $input-height-inner-quarter right $input-height-inner-quarter; + } + } } - .form-control, .custom-select { .was-validated &:#{$state}, &.is-#{$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; + } + &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); @@ -68,6 +108,7 @@ } } + .form-control-file { .was-validated &:#{$state}, &.is-#{$state} { @@ -99,7 +140,7 @@ color: $color; &::before { - background-color: lighten($color, 25%); + border-color: $color; } } @@ -110,13 +151,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 +174,6 @@ &.is-#{$state} { ~ .custom-file-label { border-color: $color; - - &::after { border-color: inherit; } } ~ .#{$state}-feedback, @@ -139,6 +183,7 @@ &:focus { ~ .custom-file-label { + border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss index 7b37f868f..649c28bf7 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss @@ -8,9 +8,8 @@ %grid-column { position: relative; width: 100%; - min-height: 1px; // Prevent columns from collapsing when empty - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @each $breakpoint in map-keys($breakpoints) { @@ -37,7 +36,7 @@ .col#{$infix}-auto { flex: 0 0 auto; width: auto; - max-width: none; // Reset earlier grid tiers + max-width: 100%; // Reset earlier grid tiers } @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 b75ebcbca..924eb0cfc 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -2,10 +2,10 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container() { +@mixin make-container($gutter: $grid-gutter-width) { width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; margin-right: auto; margin-left: auto; } @@ -20,22 +20,21 @@ } } -@mixin make-row() { +@mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; - margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-right: -$gutter / 2; + margin-left: -$gutter / 2; } -@mixin make-col-ready() { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; - min-height: 1px; // Prevent collapsing - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @mixin make-col($size, $columns: $grid-columns) { diff --git a/vendor/twbs/bootstrap/scss/mixins/_image.scss b/vendor/twbs/bootstrap/scss/mixins/_image.scss index 0544f0d2a..a76a6082b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_image.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_image.scss @@ -20,7 +20,6 @@ // // Short retina mixin for setting background-image and -size. -// stylelint-disable indentation, media-query-list-comma-newline-after @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); @@ -29,8 +28,9 @@ // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/#feat=css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx - only screen and (min-resolution: 2dppx) { // Standardized + only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } + @include deprecate("`img-retina()`", "v4.3.0", "v5"); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss index ff36eb6b4..af8e16d6a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss @@ -3,7 +3,7 @@ @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { .page-link { padding: $padding-y $padding-x; - font-size: $font-size; + @include font-size($font-size); line-height: $line-height; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss index 71edb0061..bfa9f6e9a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss @@ -5,7 +5,7 @@ font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported - text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties + text-align: start; text-decoration: none; text-shadow: none; text-transform: none; diff --git a/vendor/twbs/bootstrap/scss/mixins/_size.scss b/vendor/twbs/bootstrap/scss/mixins/_size.scss index b9dd48e8d..69e056d2c 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_size.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_size.scss @@ -3,4 +3,5 @@ @mixin size($width, $height: $width) { width: $width; height: $height; + @include deprecate("`size()`", "v4.3.0", "v5"); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss index 84f1d305a..f8d61869a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss @@ -1,6 +1,6 @@ // Tables -@mixin table-row-variant($state, $background) { +@mixin table-row-variant($state, $background, $border: null) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { @@ -9,6 +9,15 @@ > td { background-color: $background; } + + @if $border != null { + th, + td, + thead th, + tbody + tbody { + border-color: $border; + } + } } // Hover states for `.table-hover` diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss index 58db3e0fc..155d6ca8c 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss @@ -6,9 +6,11 @@ #{$parent} { color: $color !important; } - a#{$parent} { - @include hover-focus { - color: darken($color, 10%) !important; + @if $emphasized-link-hover-darken-percentage != 0 { + a#{$parent} { + @include hover-focus { + color: darken($color, $emphasized-link-hover-darken-percentage) !important; + } } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss b/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss index 9ffab169f..3a923011e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss @@ -7,7 +7,5 @@ background-color: transparent; border: 0; - @if ($ignore-warning != true) { - @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5."; - } + @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_transition.scss b/vendor/twbs/bootstrap/scss/mixins/_transition.scss index f85382134..8ce35a6b8 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_transition.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_transition.scss @@ -1,3 +1,4 @@ +// stylelint-disable property-blacklist @mixin transition($transition...) { @if $enable-transitions { @if length($transition) == 0 { @@ -7,7 +8,9 @@ } } - @media screen and (prefers-reduced-motion: reduce) { - transition: none; + @if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + transition: none; + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_visibility.scss b/vendor/twbs/bootstrap/scss/mixins/_visibility.scss index fe523d0ee..f17467311 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_visibility.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_visibility.scss @@ -4,4 +4,5 @@ @mixin invisible($visibility) { visibility: $visibility !important; + @include deprecate("`invisible()`", "v4.3.0", "v5"); } |