diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/mixins')
29 files changed, 311 insertions, 493 deletions
diff --git a/assets/stylesheets/bootstrap/mixins/_alert.scss b/assets/stylesheets/bootstrap/mixins/_alert.scss index db5a7eb..20da83a 100644 --- a/assets/stylesheets/bootstrap/mixins/_alert.scss +++ b/assets/stylesheets/bootstrap/mixins/_alert.scss @@ -3,10 +3,6 @@ @include gradient-bg($background); border-color: $border; - hr { - border-top-color: darken($border, 5%); - } - .alert-link { color: darken($color, 10%); } diff --git a/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss deleted file mode 100644 index 8058018..0000000 --- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss +++ /dev/null @@ -1,23 +0,0 @@ -// stylelint-disable declaration-no-important - -// Contextual backgrounds - -@mixin bg-variant($parent, $color, $ignore-warning: false) { - #{$parent} { - background-color: $color !important; - } - a#{$parent}, - button#{$parent} { - @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, $ignore-warning: false) { - #{$parent} { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; - } - @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning); -} diff --git a/assets/stylesheets/bootstrap/mixins/_badge.scss b/assets/stylesheets/bootstrap/mixins/_badge.scss deleted file mode 100644 index f1c4991..0000000 --- a/assets/stylesheets/bootstrap/mixins/_badge.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin badge-variant($bg) { - color: color-yiq($bg); - background-color: $bg; - - @at-root a#{&} { - @include hover-focus() { - color: color-yiq($bg); - background-color: darken($bg, 10%); - } - - &:focus, - &.focus { - outline: 0; - box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); - } - } -} diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index 23a5de9..66a0050 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -16,7 +16,10 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @if not $n { + @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; + } + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -28,18 +31,18 @@ @return if($min != 0, $min, null); } -// Maximum breakpoint width. Null for the largest (last) breakpoint. -// The maximum value is calculated as the minimum of the next one less 0.02px -// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. +// Maximum breakpoint width. +// The maximum value is reduced by 0.02px to work around the limitations of +// `min-` and `max-` prefixes and viewports with fractional widths. // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // See https://bugs.webkit.org/show_bug.cgi?id=178261 // -// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { - $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02, null); + $max: map-get($breakpoints, $name); + @return if($max and $max > 0, $max - .02, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. @@ -105,7 +108,7 @@ // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); - $max: breakpoint-max($name, $breakpoints); + $max: breakpoint-max(breakpoint-next($name, $breakpoints)); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index d6235aa..09ef0cb 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -3,94 +3,104 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { - color: color-yiq($background); +@mixin button-variant( + $background, + $border, + $color: color-contrast($background), + $hover-background: darken($background, 7.5%), + $hover-border: darken($border, 10%), + $hover-color: color-contrast($hover-background), + $active-background: darken($background, 10%), + $active-border: darken($border, 12.5%), + $active-color: color-contrast($active-background) +) { + color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); - @include hover() { - color: color-yiq($hover-background); + &:hover { + color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; } - &:focus, - &.focus { - color: color-yiq($hover-background); + .btn-check:focus + &, + &:focus { + color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows { - @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); + @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); - } - } - - // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - color: color-yiq($background); - background-color: $background; - border-color: $border; - // Remove CSS gradients if they're enabled - @if $enable-gradients { - background-image: none; + box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, + .btn-check:checked + &, + .btn-check:active + &, + &:active, + &.active, .show > &.dropdown-toggle { - color: color-yiq($active-background); + color: $active-color; background-color: $active-background; - @if $enable-gradients { - background-image: none; // Remove the gradient for the pressed/active state - } + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus { - @if $enable-shadows and $btn-active-box-shadow != none { - @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); + @if $enable-shadows { + @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly - box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } } + + &:disabled, + &.disabled { + color: $color; + background-color: $background; + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); + border-color: $border; + } } -@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { +@mixin button-outline-variant( + $color, + $color-hover: color-contrast($color), + $active-background: $color, + $active-border: $color, + $active-color: color-contrast($active-background) +) { color: $color; border-color: $color; - @include hover() { + &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } - &:focus, - &.focus { + .btn-check:focus + &, + &:focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } - &.disabled, - &:disabled { - color: $color; - background-color: transparent; - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show > &.dropdown-toggle { - color: color-yiq($active-background); + .btn-check:checked + &, + .btn-check:active + &, + &:active, + &.active, + &.dropdown-toggle.show { + color: $active-color; background-color: $active-background; border-color: $active-border; &:focus { - @if $enable-shadows and $btn-active-box-shadow != none { + @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly @@ -98,13 +108,18 @@ } } } + + &:disabled, + &.disabled { + color: $color; + background-color: transparent; + } } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); - line-height: $line-height; // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } diff --git a/assets/stylesheets/bootstrap/mixins/_caret.scss b/assets/stylesheets/bootstrap/mixins/_caret.scss index 2746649..07d7228 100644 --- a/assets/stylesheets/bootstrap/mixins/_caret.scss +++ b/assets/stylesheets/bootstrap/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; diff --git a/assets/stylesheets/bootstrap/mixins/_clearfix.scss b/assets/stylesheets/bootstrap/mixins/_clearfix.scss index 11a977b..ffc62bb 100644 --- a/assets/stylesheets/bootstrap/mixins/_clearfix.scss +++ b/assets/stylesheets/bootstrap/mixins/_clearfix.scss @@ -1,3 +1,4 @@ +// scss-docs-start clearfix @mixin clearfix() { &::after { display: block; @@ -5,3 +6,4 @@ content: ""; } } +// scss-docs-end clearfix diff --git a/assets/stylesheets/bootstrap/mixins/_container.scss b/assets/stylesheets/bootstrap/mixins/_container.scss new file mode 100644 index 0000000..435d003 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_container.scss @@ -0,0 +1,9 @@ +// Container mixins + +@mixin make-container($padding-x: $container-padding-x) { + width: 100%; + padding-right: $padding-x; + padding-left: $padding-x; + margin-right: auto; + margin-left: auto; +} diff --git a/assets/stylesheets/bootstrap/mixins/_float.scss b/assets/stylesheets/bootstrap/mixins/_float.scss deleted file mode 100644 index 6b376a2..0000000 --- a/assets/stylesheets/bootstrap/mixins/_float.scss +++ /dev/null @@ -1,14 +0,0 @@ -// stylelint-disable declaration-no-important - -@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/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 39b52f3..99ca559 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/mixins/_forms.scss @@ -1,31 +1,3 @@ -// 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($ignore-warning: false) { - &:focus { - color: $input-focus-color; - background-color: $input-focus-bg; - border-color: $input-focus-border-color; - outline: 0; - @if $enable-shadows { - @include box-shadow($input-box-shadow, $input-focus-box-shadow); - } @else { - // Avoid using mixin so we can pass custom focus shadow properly - 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) { @@ -47,13 +19,13 @@ width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); + font-style: $form-feedback-font-style; color: $color; } .#{$state}-tooltip { position: absolute; top: 100%; - left: 0; z-index: 5; display: none; max-width: 100%; // Contain to parent when possible @@ -61,7 +33,7 @@ margin-top: .1rem; @include font-size($form-feedback-tooltip-font-size); line-height: $form-feedback-tooltip-line-height; - color: color-yiq($color); + color: color-contrast($color); background-color: rgba($color, $form-feedback-tooltip-opacity); @include border-radius($form-feedback-tooltip-border-radius); } @@ -87,7 +59,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity); } } } @@ -102,13 +74,15 @@ } } - .custom-select { + .form-select { @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, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; + padding-right: $form-select-feedback-icon-padding-right; + background-image: escape-svg($form-select-indicator), escape-svg($icon); + background-position: $form-select-bg-position, $form-select-feedback-icon-position; + background-size: $form-select-bg-size, $form-select-feedback-icon-size; } &:focus { @@ -120,55 +94,36 @@ .form-check-input { @include form-validation-state-selector($state) { - ~ .form-check-label { - color: $color; - } - - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - } - } - - .custom-control-input { - @include form-validation-state-selector($state) { - ~ .custom-control-label { - color: $color; - - &::before { - border-color: $color; - } - } + border-color: $color; &:checked { - ~ .custom-control-label::before { - border-color: lighten($color, 10%); - @include gradient-bg(lighten($color, 10%)); - } + background-color: $color; } &:focus { - ~ .custom-control-label::before { - box-shadow: 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; - } + ~ .form-check-label { + color: $color; } } } + .form-check-inline .form-check-input { + ~ .#{$state}-feedback { + margin-left: .5em; + } + } // custom file - .custom-file-input { + .form-file-input { @include form-validation-state-selector($state) { - ~ .custom-file-label { + ~ .form-file-label { border-color: $color; } &:focus { - ~ .custom-file-label { + ~ .form-file-label { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } diff --git a/assets/stylesheets/bootstrap/mixins/_gradients.scss b/assets/stylesheets/bootstrap/mixins/_gradients.scss index 88c4d64..8b87c0f 100644 --- a/assets/stylesheets/bootstrap/mixins/_gradients.scss +++ b/assets/stylesheets/bootstrap/mixins/_gradients.scss @@ -1,10 +1,10 @@ // Gradients -@mixin gradient-bg($color) { +@mixin gradient-bg($color: null) { + background-color: $color; + @if $enable-gradients { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; - } @else { - background-color: $color; + background-image: var(--bs-gradient); } } @@ -13,33 +13,31 @@ // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); - background-repeat: repeat-x; } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); - background-repeat: repeat-x; } @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); - background-repeat: repeat-x; } + @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); - background-repeat: no-repeat; } + @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); - background-repeat: no-repeat; } + @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); - background-repeat: no-repeat; } + @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss deleted file mode 100644 index 6fc8e85..0000000 --- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +++ /dev/null @@ -1,80 +0,0 @@ -// Framework grid generation -// -// Used only by Bootstrap to generate the correct number of grid classes given -// any value of `$grid-columns`. - -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { - // Common properties for all breakpoints - %grid-column { - position: relative; - width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; - } - - @each $breakpoint in map-keys($breakpoints) { - $infix: breakpoint-infix($breakpoint, $breakpoints); - - @if $columns > 0 { - // Allow columns to stretch full width below their breakpoints - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @extend %grid-column; - } - } - } - - .col#{$infix}, - .col#{$infix}-auto { - @extend %grid-column; - } - - @include media-breakpoint-up($breakpoint, $breakpoints) { - // Provide basic `.col-{bp}` classes for equal-width flexbox columns - .col#{$infix} { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; - } - - @if $grid-row-columns > 0 { - @for $i from 1 through $grid-row-columns { - .row-cols#{$infix}-#{$i} { - @include row-cols($i); - } - } - } - - .col#{$infix}-auto { - @include make-col-auto(); - } - - @if $columns > 0 { - @for $i from 1 through $columns { - .col#{$infix}-#{$i} { - @include make-col($i, $columns); - } - } - } - - .order#{$infix}-first { order: -1; } - - .order#{$infix}-last { order: $columns + 1; } - - @for $i from 0 through $columns { - .order#{$infix}-#{$i} { order: $i; } - } - - @if $columns > 0 { - // `$columns - 1` because offsetting by the width of an entire row isn't possible - @for $i from 0 through ($columns - 1) { - @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 - .offset#{$infix}-#{$i} { - @include make-col-offset($i, $columns); - } - } - } - } - } - } -} diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index b72d150..0ef9d1f 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -2,53 +2,39 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container($gutter: $grid-gutter-width) { - width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; - margin-right: auto; - margin-left: auto; -} - @mixin make-row($gutter: $grid-gutter-width) { + --bs-gutter-x: #{$gutter}; + --bs-gutter-y: 0; display: flex; + flex: 1 0 100%; flex-wrap: wrap; - margin-right: -$gutter / 2; - margin-left: -$gutter / 2; -} - -// For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { - @each $breakpoint, $container-max-width in $max-widths { - @include media-breakpoint-up($breakpoint, $breakpoints) { - max-width: $container-max-width; - } - } - @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5"); + margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist + margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist + margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist } @mixin make-col-ready($gutter: $grid-gutter-width) { - position: relative; + // Add box sizing if only the grid is loaded + box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); // Prevent columns from becoming too narrow when at smaller grid tiers by - // always setting `width: 100%;`. This works because we use `flex` values + // always setting `width: 100%;`. This works because we set the width // later on to override this initial width. + flex-shrink: 0; width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; + max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid + padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist + padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist + margin-top: var(--bs-gutter-y); } @mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); - // Add a `max-width` to ensure content within each column does not blow out - // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari - // do not appear to require this. - max-width: percentage($size / $columns); + flex: 0 0 auto; + 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) { @@ -63,7 +49,73 @@ // style grid. @mixin row-cols($count) { & > * { - flex: 0 0 100% / $count; - max-width: 100% / $count; + flex: 0 0 auto; + width: 100% / $count; + } +} + +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + @each $breakpoint in map-keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); + + @include media-breakpoint-up($breakpoint, $breakpoints) { + // Provide basic `.col-{bp}` classes for equal-width flexbox columns + .col#{$infix} { + flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 + } + + .row-cols#{$infix}-auto > * { + @include make-col-auto(); + } + + @if $grid-row-columns > 0 { + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + } + + .col#{$infix}-auto { + @include make-col-auto(); + } + + @if $columns > 0 { + @for $i from 1 through $columns { + .col#{$infix}-#{$i} { + @include make-col($i, $columns); + } + } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + .offset#{$infix}-#{$i} { + @include make-col-offset($i, $columns); + } + } + } + } + + // Gutters + // + // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns. + @each $key, $value in $gutters { + .g#{$infix}-#{$key}, + .gx#{$infix}-#{$key} { + --bs-gutter-x: #{$value}; + } + + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + --bs-gutter-y: #{$value}; + } + } + } } } diff --git a/assets/stylesheets/bootstrap/mixins/_hover.scss b/assets/stylesheets/bootstrap/mixins/_hover.scss deleted file mode 100644 index 409f824..0000000 --- a/assets/stylesheets/bootstrap/mixins/_hover.scss +++ /dev/null @@ -1,37 +0,0 @@ -// Hover mixin and `$enable-hover-media-query` are deprecated. -// -// Originally added during our alphas and maintained during betas, this mixin was -// designed to prevent `:hover` stickiness on iOS-an issue where hover styles -// would persist after initial touch. -// -// For backward compatibility, we've kept these mixins and updated them to -// always return their regular pseudo-classes instead of a shimmed media query. -// -// Issue: https://github.com/twbs/bootstrap/issues/25195 - -@mixin hover() { - &:hover { @content; } -} - -@mixin hover-focus() { - &:hover, - &:focus { - @content; - } -} - -@mixin plain-hover-focus() { - &, - &:hover, - &:focus { - @content; - } -} - -@mixin hover-focus-active() { - &:hover, - &:focus, - &:active { - @content; - } -} diff --git a/assets/stylesheets/bootstrap/mixins/_image.scss b/assets/stylesheets/bootstrap/mixins/_image.scss index c971e03..e1df779 100644 --- a/assets/stylesheets/bootstrap/mixins/_image.scss +++ b/assets/stylesheets/bootstrap/mixins/_image.scss @@ -7,30 +7,10 @@ // // 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 // when setting a width and height attribute on the img element. height: auto; } - - -// Retina image -// -// Short retina mixin for setting background-image and -size. - -@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { - background-image: url($file-1x); - - // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, - // but doesn't convert dppx=>dpi. - // 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 - background-image: url($file-2x); - background-size: $width-1x $height-1x; - } - @include deprecate("`img-retina()`", "v4.3.0", "v5"); -} diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss index 0da3531..965fc4b 100644 --- a/assets/stylesheets/bootstrap/mixins/_list-group.scss +++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss @@ -6,7 +6,8 @@ background-color: $background; &.list-group-item-action { - @include hover-focus() { + &:hover, + &:focus { color: $color; background-color: darken($background, 5%); } diff --git a/assets/stylesheets/bootstrap/mixins/_lists.scss b/assets/stylesheets/bootstrap/mixins/_lists.scss index 251cb07..2518562 100644 --- a/assets/stylesheets/bootstrap/mixins/_lists.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_nav-divider.scss b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss deleted file mode 100644 index 3e0ccea..0000000 --- a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Horizontal dividers -// -// Dividers (basically an hr) within dropdowns and nav lists - -@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/assets/stylesheets/bootstrap/mixins/_pagination.scss b/assets/stylesheets/bootstrap/mixins/_pagination.scss index af8e16d..52ad1e1 100644 --- a/assets/stylesheets/bootstrap/mixins/_pagination.scss +++ b/assets/stylesheets/bootstrap/mixins/_pagination.scss @@ -1,21 +1,28 @@ // Pagination -@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { .page-link { padding: $padding-y $padding-x; @include font-size($font-size); - line-height: $line-height; } .page-item { - &:first-child { - .page-link { - @include border-left-radius($border-radius); + @if $pagination-margin-left == (-$pagination-border-width) { + &:first-child { + .page-link { + @include border-left-radius($border-radius); + } } - } - &:last-child { + + &:last-child { + .page-link { + @include border-right-radius($border-radius); + } + } + } @else { + //Add border-radius to all pageLinks in case they have left margin .page-link { - @include border-right-radius($border-radius); + @include border-radius($border-radius); } } } diff --git a/assets/stylesheets/bootstrap/mixins/_reset-text.scss b/assets/stylesheets/bootstrap/mixins/_reset-text.scss index 15b4407..354f564 100644 --- a/assets/stylesheets/bootstrap/mixins/_reset-text.scss +++ b/assets/stylesheets/bootstrap/mixins/_reset-text.scss @@ -1,6 +1,6 @@ -@mixin reset-text() { +@mixin reset-text { font-family: $font-family-base; - // We deliberately do NOT reset font-size or word-wrap. + // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. font-style: normal; font-weight: $font-weight-normal; line-height: $line-height-base; diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss index 2123039..b25fe73 100644 --- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +++ b/assets/stylesheets/bootstrap/mixins/_screen-reader.scss @@ -1,34 +1,28 @@ +// stylelint-disable declaration-no-important + // Only display content to screen readers // // See: https://a11yproject.com/posts/how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ -@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; - border: 0; +@mixin sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; } -// Use in conjunction with .sr-only to only display content when it's focused. +// Use to only display content when it's focused. // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 -// -// Credit: HTML5 Boilerplate -@mixin sr-only-focusable() { - &:active, - &:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; +@mixin sr-only-focusable { + &:not(:focus) { + @include sr-only(); } } diff --git a/assets/stylesheets/bootstrap/mixins/_size.scss b/assets/stylesheets/bootstrap/mixins/_size.scss deleted file mode 100644 index 69e056d..0000000 --- a/assets/stylesheets/bootstrap/mixins/_size.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Sizing shortcuts - -@mixin size($width, $height: $width) { - width: $width; - height: $height; - @include deprecate("`size()`", "v4.3.0", "v5"); -} diff --git a/assets/stylesheets/bootstrap/mixins/_table-row.scss b/assets/stylesheets/bootstrap/mixins/_table-row.scss deleted file mode 100644 index 1ccde6b..0000000 --- a/assets/stylesheets/bootstrap/mixins/_table-row.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Tables - -@mixin table-row-variant($state, $background, $border: null) { - // Exact selectors below required to override `.table-striped` and prevent - // inheritance to nested tables. - .table-#{$state} { - &, - > th, - > td { - background-color: $background; - } - - @if $border != null { - th, - td, - thead th, - tbody + tbody { - border-color: $border; - } - } - } - - // Hover states for `.table-hover` - // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover { - $hover-background: darken($background, 5%); - - .table-#{$state} { - @include hover() { - background-color: $hover-background; - - > td, - > th { - background-color: $hover-background; - } - } - } - } -} diff --git a/assets/stylesheets/bootstrap/mixins/_table-variants.scss b/assets/stylesheets/bootstrap/mixins/_table-variants.scss new file mode 100644 index 0000000..89f482c --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_table-variants.scss @@ -0,0 +1,21 @@ +// scss-docs-start table-variant +@mixin table-variant($state, $background) { + .table-#{$state} { + $color: color-contrast(opaque($body-bg, $background)); + $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); + $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); + $active-bg: mix($color, $background, percentage($table-active-bg-factor)); + + --bs-table-bg: #{$background}; + --bs-table-striped-bg: #{$striped-bg}; + --bs-table-striped-color: #{color-contrast($striped-bg)}; + --bs-table-active-bg: #{$active-bg}; + --bs-table-active-color: #{color-contrast($active-bg)}; + --bs-table-hover-bg: #{$hover-bg}; + --bs-table-hover-color: #{color-contrast($hover-bg)}; + + color: $color; + border-color: mix($color, $background, percentage($table-border-factor)); + } +} +// scss-docs-end table-variant diff --git a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss deleted file mode 100644 index 5eb8a55..0000000 --- a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +++ /dev/null @@ -1,17 +0,0 @@ -// stylelint-disable declaration-no-important - -// Typography - -@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() { - color: darken($color, $emphasized-link-hover-darken-percentage) !important; - } - } - } - @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning); -} diff --git a/assets/stylesheets/bootstrap/mixins/_text-hide.scss b/assets/stylesheets/bootstrap/mixins/_text-hide.scss deleted file mode 100644 index 3a92301..0000000 --- a/assets/stylesheets/bootstrap/mixins/_text-hide.scss +++ /dev/null @@ -1,11 +0,0 @@ -// CSS image replacement -@mixin text-hide($ignore-warning: false) { - // stylelint-disable-next-line font-family-no-missing-generic-family-keyword - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; - - @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); -} diff --git a/assets/stylesheets/bootstrap/mixins/_transition.scss b/assets/stylesheets/bootstrap/mixins/_transition.scss index 54553de..bf4c00a 100644 --- a/assets/stylesheets/bootstrap/mixins/_transition.scss +++ b/assets/stylesheets/bootstrap/mixins/_transition.scss @@ -17,7 +17,7 @@ transition: $transition; } - @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { + @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { @media (prefers-reduced-motion: reduce) { transition: none; } diff --git a/assets/stylesheets/bootstrap/mixins/_utilities.scss b/assets/stylesheets/bootstrap/mixins/_utilities.scss new file mode 100644 index 0000000..cd9f930 --- /dev/null +++ b/assets/stylesheets/bootstrap/mixins/_utilities.scss @@ -0,0 +1,49 @@ +// Utility generator +// Used to generate utilities & print utilities +@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) { + $values: map-get($utility, values); + + // If the values are a list or string, convert it into a map + @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { + $values: zip($values, $values); + } + + @each $key, $value in $values { + $properties: map-get($utility, property); + + // Multiple properties are possible, for example with vertical or horizontal margins or paddings + @if type-of($properties) == "string" { + $properties: append((), $properties); + } + + // Use custom class if present + $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); + $property-class: if($property-class == null, "", $property-class); + + $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); + + // Don't prefix if value key is null (eg. with shadow class) + $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); + + @if map-get($utility, rfs) { + // Inside the media query + @if $is-rfs-media-query { + $val: rfs-value($value); + + // Do not render anything if fluid and non fluid values are the same + $value: if($val == rfs-fluid-value($value), null, $val); + } + @else { + $value: rfs-fluid-value($value); + } + } + + @if $value != null { + .#{$property-class + $infix + $property-class-modifier} { + @each $property in $properties { + #{$property}: $value if($enable-important-utilities, !important, null); + } + } + } + } +} diff --git a/assets/stylesheets/bootstrap/mixins/_visibility.scss b/assets/stylesheets/bootstrap/mixins/_visibility.scss deleted file mode 100644 index f174673..0000000 --- a/assets/stylesheets/bootstrap/mixins/_visibility.scss +++ /dev/null @@ -1,8 +0,0 @@ -// stylelint-disable declaration-no-important - -// Visibility - -@mixin invisible($visibility) { - visibility: $visibility !important; - @include deprecate("`invisible()`", "v4.3.0", "v5"); -} |