aboutsummaryrefslogtreecommitdiff
path: root/scss/mixins
diff options
context:
space:
mode:
Diffstat (limited to 'scss/mixins')
-rw-r--r--scss/mixins/_alert.scss15
-rw-r--r--scss/mixins/_banner.scss7
-rw-r--r--scss/mixins/_breakpoints.scss16
-rw-r--r--scss/mixins/_buttons.scss127
-rw-r--r--scss/mixins/_caret.scss55
-rw-r--r--scss/mixins/_color-mode.scss21
-rw-r--r--scss/mixins/_container.scss8
-rw-r--r--scss/mixins/_forms.scss57
-rw-r--r--scss/mixins/_gradients.scss2
-rw-r--r--scss/mixins/_grid.scss26
-rw-r--r--scss/mixins/_list-group.scss2
-rw-r--r--scss/mixins/_pagination.scss29
-rw-r--r--scss/mixins/_reset-text.scss2
-rw-r--r--scss/mixins/_table-variants.scss24
-rw-r--r--scss/mixins/_utilities.scss20
-rw-r--r--scss/mixins/_visually-hidden.scss8
16 files changed, 204 insertions, 215 deletions
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index f3eb59511..fb524af1c 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,11 +1,18 @@
+@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
+
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
- color: $color;
- @include gradient-bg($background);
- border-color: $border;
+ --#{$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
new file mode 100644
index 000000000..20c2fd126
--- /dev/null
+++ b/scss/mixins/_banner.scss
@@ -0,0 +1,7 @@
+@mixin bsBanner($file) {
+ /*!
+ * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+}
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index cdc8034eb..286be893d 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -2,7 +2,7 @@
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
-// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
@@ -10,9 +10,9 @@
//
// >> breakpoint-next(sm)
// md
-// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// md
-// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@@ -24,7 +24,7 @@
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
-// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@@ -38,7 +38,7 @@
// 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(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
@@ -48,9 +48,9 @@
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
-// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "" (Returns a blank string)
-// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -109,7 +109,7 @@
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
- $max: breakpoint-max($next);
+ $max: breakpoint-max($next, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index b67499668..cf087fda7 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -18,59 +18,20 @@
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
- color: $color;
- @include gradient-bg($background);
- border-color: $border;
- @include box-shadow($btn-box-shadow);
-
- &:hover {
- color: $hover-color;
- @include gradient-bg($hover-background);
- border-color: $hover-border;
- }
-
- .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, $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, $border, 15%), .5);
- }
- }
-
- .btn-check:checked + &,
- .btn-check:active + &,
- &:active,
- &.active,
- .show > &.dropdown-toggle {
- color: $active-color;
- background-color: $active-background;
- // Remove CSS gradients if they're enabled
- background-image: if($enable-gradients, none, null);
- border-color: $active-border;
-
- &:focus {
- @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, $border, 15%), .5);
- }
- }
- }
-
- &:disabled,
- &.disabled {
- color: $disabled-color;
- background-color: $disabled-background;
- // Remove CSS gradients if they're enabled
- background-image: if($enable-gradients, none, null);
- border-color: $disabled-border;
- }
+ --#{$prefix}btn-color: #{$color};
+ --#{$prefix}btn-bg: #{$background};
+ --#{$prefix}btn-border-color: #{$border};
+ --#{$prefix}btn-hover-color: #{$hover-color};
+ --#{$prefix}btn-hover-bg: #{$hover-background};
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+ --#{$prefix}btn-active-color: #{$active-color};
+ --#{$prefix}btn-active-bg: #{$active-background};
+ --#{$prefix}btn-active-border-color: #{$active-border};
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+ --#{$prefix}btn-disabled-color: #{$disabled-color};
+ --#{$prefix}btn-disabled-bg: #{$disabled-background};
+ --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
@@ -82,52 +43,28 @@
$active-border: $color,
$active-color: color-contrast($active-background)
) {
- color: $color;
- border-color: $color;
-
- &:hover {
- color: $color-hover;
- background-color: $active-background;
- border-color: $active-border;
- }
-
- .btn-check:focus + &,
- &:focus {
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
- }
-
- .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 {
- @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
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
- }
- }
- }
-
- &:disabled,
- &.disabled {
- color: $color;
- background-color: transparent;
- }
+ --#{$prefix}btn-color: #{$color};
+ --#{$prefix}btn-border-color: #{$color};
+ --#{$prefix}btn-hover-color: #{$color-hover};
+ --#{$prefix}btn-hover-bg: #{$active-background};
+ --#{$prefix}btn-hover-border-color: #{$active-border};
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+ --#{$prefix}btn-active-color: #{$active-color};
+ --#{$prefix}btn-active-bg: #{$active-background};
+ --#{$prefix}btn-active-border-color: #{$active-border};
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+ --#{$prefix}btn-disabled-color: #{$color};
+ --#{$prefix}btn-disabled-bg: transparent;
+ --#{$prefix}btn-disabled-border-color: #{$color};
+ --#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
- padding: $padding-y $padding-x;
- @include font-size($font-size);
- // Manually declare to provide an override to the browser default
- @include border-radius($border-radius, 0);
+ --#{$prefix}btn-padding-y: #{$padding-y};
+ --#{$prefix}btn-padding-x: #{$padding-x};
+ @include rfs($font-size, --#{$prefix}btn-font-size);
+ --#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index 4b0f0360b..be731165b 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 000000000..03338b025
--- /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/_container.scss b/scss/mixins/_container.scss
index 555304263..b9f33519e 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,11 +1,11 @@
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
- --#{$variable-prefix}gutter-x: #{$gutter};
- --#{$variable-prefix}gutter-y: 0;
+ --#{$prefix}gutter-x: #{$gutter};
+ --#{$prefix}gutter-y: 0;
width: 100%;
- padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
- padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-right: auto;
margin-left: auto;
}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index dc5bdb0b9..00b476413 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,8 +68,13 @@
}
&:focus {
- border-color: $color;
- box-shadow: $focus-box-shadow;
+ border-color: $border-color;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $focus-box-shadow;
+ }
}
}
}
@@ -85,28 +91,41 @@
.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;
- box-shadow: $focus-box-shadow;
+ border-color: $border-color;
+ @if $enable-shadows {
+ @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $focus-box-shadow;
+ }
+ }
+ }
+ }
+
+ .form-control-color {
+ @include form-validation-state-selector($state) {
+ @if $enable-validation-icons {
+ width: add($form-color-width, $input-height-inner);
}
}
}
.form-check-input {
@include form-validation-state-selector($state) {
- border-color: $color;
+ border-color: $border-color;
&:checked {
background-color: $color;
@@ -127,16 +146,16 @@
}
}
- .input-group .form-control,
- .input-group .form-select {
- @include form-validation-state-selector($state) {
- @if $state == "valid" {
- z-index: 1;
- } @else if $state == "invalid" {
- z-index: 2;
- }
- &:focus {
- z-index: 3;
+ .input-group {
+ > .form-control:not(:focus),
+ > .form-select:not(:focus),
+ > .form-floating:not(:focus-within) {
+ @include form-validation-state-selector($state) {
+ @if $state == "valid" {
+ z-index: 3;
+ } @else if $state == "invalid" {
+ z-index: 4;
+ }
}
}
}
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 44167d1b8..608e18df2 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -5,7 +5,7 @@
background-color: $color;
@if $enable-gradients {
- background-image: var(--#{$variable-prefix}gradient);
+ background-image: var(--#{$prefix}gradient);
}
}
// scss-docs-end gradient-bg-mixin
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index d6ac306b2..ea3073994 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -3,14 +3,14 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
- --#{$variable-prefix}gutter-x: #{$gutter};
- --#{$variable-prefix}gutter-y: 0;
+ --#{$prefix}gutter-x: #{$gutter};
+ --#{$prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
- margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
- margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
- margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+ margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+ margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready() {
@@ -22,9 +22,9 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
- padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
- padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
- margin-top: var(--#{$variable-prefix}gutter-y);
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ margin-top: var(--#{$prefix}gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@@ -51,12 +51,12 @@
// 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
+// number of columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
- width: divide(100%, $count);
+ width: percentage(divide(1, $count));
}
}
@@ -114,12 +114,12 @@
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
- --#{$variable-prefix}gutter-x: #{$value};
+ --#{$prefix}gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
- --#{$variable-prefix}gutter-y: #{$value};
+ --#{$prefix}gutter-y: #{$value};
}
}
}
@@ -138,7 +138,7 @@
}
}
- // Start with `1` because `0` is and invalid value.
+ // Start with `1` because `0` is an invalid value.
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
@for $i from 1 through ($columns - 1) {
.g-start#{$infix}-#{$i} {
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index e55415f2b..6274f3431 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/_pagination.scss b/scss/mixins/_pagination.scss
index 3101b380d..0d657964f 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -2,30 +2,9 @@
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
- .page-link {
- padding: $padding-y $padding-x;
- @include font-size($font-size);
- }
-
- .page-item {
- @if $pagination-margin-start == (-$pagination-border-width) {
- &:first-child {
- .page-link {
- @include border-start-radius($border-radius);
- }
- }
-
- &:last-child {
- .page-link {
- @include border-end-radius($border-radius);
- }
- }
- } @else {
- //Add border-radius to all pageLinks in case they have left margin
- .page-link {
- @include border-radius($border-radius);
- }
- }
- }
+ --#{$prefix}pagination-padding-x: #{$padding-x};
+ --#{$prefix}pagination-padding-y: #{$padding-y};
+ @include rfs($font-size, --#{$prefix}pagination-font-size);
+ --#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index 354f5648b..f5bd1afec 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -11,7 +11,7 @@
text-transform: none;
letter-spacing: normal;
word-break: normal;
- word-spacing: normal;
white-space: normal;
+ word-spacing: normal;
line-break: auto;
}
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index cad70a19b..5fe1b9b20 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -5,20 +5,20 @@
$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));
- $border-color: mix($color, $background, percentage($table-border-factor));
+ $table-border-color: mix($color, $background, percentage($table-border-factor));
- --#{$variable-prefix}table-color: #{$color};
- --#{$variable-prefix}table-bg: #{$background};
- --#{$variable-prefix}table-border-color: #{$border-color};
- --#{$variable-prefix}table-striped-bg: #{$striped-bg};
- --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
- --#{$variable-prefix}table-active-bg: #{$active-bg};
- --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
- --#{$variable-prefix}table-hover-bg: #{$hover-bg};
- --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
+ --#{$prefix}table-color: #{$color};
+ --#{$prefix}table-bg: #{$background};
+ --#{$prefix}table-border-color: #{$table-border-color};
+ --#{$prefix}table-striped-bg: #{$striped-bg};
+ --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+ --#{$prefix}table-active-bg: #{$active-bg};
+ --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+ --#{$prefix}table-hover-bg: #{$hover-bg};
+ --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
- color: var(--#{$variable-prefix}table-color);
- border-color: var(--#{$variable-prefix}table-border-color);
+ color: var(--#{$prefix}table-color);
+ border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index e871b4233..4795e8940 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
@@ -20,12 +20,15 @@
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
+ // Use custom CSS variable name if present, otherwise default to `class`
+ $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
$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)
+ // Don't prefix if value key is null (e.g. with shadow class)
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
@if map-get($utility, rfs) {
@@ -52,20 +55,20 @@
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
- --#{$variable-prefix}#{$property-class}: #{$value};
+ --#{$prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
- --#{$variable-prefix}#{$property-class}: #{$value};
+ --#{$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
@if $is-local-vars {
- @each $local-var, $value in $is-local-vars {
- --#{$variable-prefix}#{$local-var}: #{$value};
+ @each $local-var, $variable in $is-local-vars {
+ --#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);
@@ -75,6 +78,11 @@
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
@each $property in $properties {
+ @if $is-local-vars {
+ @each $local-var, $variable in $is-local-vars {
+ --#{$prefix}#{$local-var}: #{$variable};
+ }
+ }
#{$property}: $value if($enable-important-utilities, !important, null);
}
}
diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss
index 4fc7f49d6..388916ccf 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,12 +14,17 @@
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
// (i.e. when focus is within the element/container that the class was applied to)
//
-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
@mixin visually-hidden-focusable() {
&:not(:focus):not(:focus-within) {
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 03:42:40 +0000