diff options
Diffstat (limited to 'scss/mixins')
-rw-r--r-- | scss/mixins/_alert.scss | 5 | ||||
-rw-r--r-- | scss/mixins/_banner.scss | 6 | ||||
-rw-r--r-- | scss/mixins/_caret.scss | 55 | ||||
-rw-r--r-- | scss/mixins/_color-mode.scss | 21 | ||||
-rw-r--r-- | scss/mixins/_forms.scss | 15 | ||||
-rw-r--r-- | scss/mixins/_list-group.scss | 2 | ||||
-rw-r--r-- | scss/mixins/_utilities.scss | 2 | ||||
-rw-r--r-- | scss/mixins/_visually-hidden.scss | 6 |
8 files changed, 73 insertions, 39 deletions
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 231f068..fb524af 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,15 +1,18 @@ +@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0"); + // scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { --#{$prefix}alert-color: #{$color}; --#{$prefix}alert-bg: #{$background}; --#{$prefix}alert-border-color: #{$border}; + --#{$prefix}alert-link-color: #{shade-color($color, 20%)}; @if $enable-gradients { background-image: var(--#{$prefix}gradient); } .alert-link { - color: shade-color($color, 20%); + color: var(--#{$prefix}alert-link-color); } } // scss-docs-end alert-variant-mixin diff --git a/scss/mixins/_banner.scss b/scss/mixins/_banner.scss index 97ec9d1..4323989 100644 --- a/scss/mixins/_banner.scss +++ b/scss/mixins/_banner.scss @@ -1,9 +1,7 @@ @mixin bsBanner($file) { /*! - * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Bootstrap #{$file} v5.3.0 (https://getbootstrap.com/) + * Copyright 2011-2023 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ } - diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index 4b0f036..be73116 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -1,44 +1,49 @@ // scss-docs-start caret-mixins -@mixin caret-down { - border-top: $caret-width solid; - border-right: $caret-width solid transparent; +@mixin caret-down($width: $caret-width) { + border-top: $width solid; + border-right: $width solid transparent; border-bottom: 0; - border-left: $caret-width solid transparent; + border-left: $width solid transparent; } -@mixin caret-up { +@mixin caret-up($width: $caret-width) { border-top: 0; - border-right: $caret-width solid transparent; - border-bottom: $caret-width solid; - border-left: $caret-width solid transparent; + border-right: $width solid transparent; + border-bottom: $width solid; + border-left: $width solid transparent; } -@mixin caret-end { - border-top: $caret-width solid transparent; +@mixin caret-end($width: $caret-width) { + border-top: $width solid transparent; border-right: 0; - border-bottom: $caret-width solid transparent; - border-left: $caret-width solid; + border-bottom: $width solid transparent; + border-left: $width solid; } -@mixin caret-start { - border-top: $caret-width solid transparent; - border-right: $caret-width solid; - border-bottom: $caret-width solid transparent; +@mixin caret-start($width: $caret-width) { + border-top: $width solid transparent; + border-right: $width solid; + border-bottom: $width solid transparent; } -@mixin caret($direction: down) { +@mixin caret( + $direction: down, + $width: $caret-width, + $spacing: $caret-spacing, + $vertical-align: $caret-vertical-align +) { @if $enable-caret { &::after { display: inline-block; - margin-left: $caret-spacing; - vertical-align: $caret-vertical-align; + margin-left: $spacing; + vertical-align: $vertical-align; content: ""; @if $direction == down { - @include caret-down(); + @include caret-down($width); } @else if $direction == up { - @include caret-up(); + @include caret-up($width); } @else if $direction == end { - @include caret-end(); + @include caret-end($width); } } @@ -49,10 +54,10 @@ &::before { display: inline-block; - margin-right: $caret-spacing; - vertical-align: $caret-vertical-align; + margin-right: $spacing; + vertical-align: $vertical-align; content: ""; - @include caret-start(); + @include caret-start($width); } } diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss new file mode 100644 index 0000000..03338b0 --- /dev/null +++ b/scss/mixins/_color-mode.scss @@ -0,0 +1,21 @@ +// scss-docs-start color-mode-mixin +@mixin color-mode($mode: light, $root: false) { + @if $color-mode-type == "media-query" { + @if $root == true { + @media (prefers-color-scheme: $mode) { + :root { + @content; + } + } + } @else { + @media (prefers-color-scheme: $mode) { + @content; + } + } + } @else { + [data-bs-theme="#{$mode}"] { + @content; + } + } +} +// scss-docs-end color-mode-mixin diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 2a853a7..d47b1e4 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -21,7 +21,8 @@ $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), - $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) + $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity), + $border-color: $color ) { .#{$state}-feedback { display: none; @@ -56,7 +57,7 @@ .form-control { @include form-validation-state-selector($state) { - border-color: $color; + border-color: $border-color; @if $enable-validation-icons { padding-right: $input-height-inner; @@ -67,7 +68,7 @@ } &:focus { - border-color: $color; + border-color: $border-color; box-shadow: $focus-box-shadow; } } @@ -85,20 +86,20 @@ .form-select { @include form-validation-state-selector($state) { - border-color: $color; + border-color: $border-color; @if $enable-validation-icons { &:not([multiple]):not([size]), &:not([multiple])[size="1"] { + --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; padding-right: $form-select-feedback-icon-padding-end; - 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 { - border-color: $color; + border-color: $border-color; box-shadow: $focus-box-shadow; } } @@ -114,7 +115,7 @@ .form-check-input { @include form-validation-state-selector($state) { - border-color: $color; + border-color: $border-color; &:checked { background-color: $color; diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index e55415f..6274f34 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -1,3 +1,5 @@ +@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0"); + // List Groups // scss-docs-start list-group-mixin diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss index 59a2374..4795e89 100644 --- a/scss/mixins/_utilities.scss +++ b/scss/mixins/_utilities.scss @@ -1,6 +1,6 @@ // Utility generator // Used to generate utilities & print utilities -@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) { +@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 diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss index 4fc7f49..082aeec 100644 --- a/scss/mixins/_visually-hidden.scss +++ b/scss/mixins/_visually-hidden.scss @@ -6,7 +6,6 @@ // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ @mixin visually-hidden() { - position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; @@ -15,6 +14,11 @@ clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; + + // Fix for positioned table caption that could become anonymous cells + &:not(caption) { + position: absolute !important; + } } // Use to only display content when it's focused, or one of its child elements is focused |