aboutsummaryrefslogtreecommitdiff
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_card.scss3
-rw-r--r--scss/_functions.scss63
-rw-r--r--scss/_grid.scss11
-rw-r--r--scss/_helpers.scss2
-rw-r--r--scss/_mixins.scss1
-rw-r--r--scss/_modal.scss12
-rw-r--r--scss/_navbar.scss31
-rw-r--r--scss/_offcanvas.scss4
-rw-r--r--scss/_toasts.scss4
-rw-r--r--scss/_transitions.scss6
-rw-r--r--scss/_utilities.scss13
-rw-r--r--scss/_variables.scss142
-rw-r--r--scss/bootstrap-grid.scss2
-rw-r--r--scss/bootstrap-reboot.scss2
-rw-r--r--scss/bootstrap-utilities.scss2
-rw-r--r--scss/bootstrap.scss2
-rw-r--r--scss/forms/_form-control.scss2
-rw-r--r--scss/helpers/_stacks.scss15
-rw-r--r--scss/helpers/_vr.scss8
-rw-r--r--scss/mixins/_backdrop.scss14
-rw-r--r--scss/mixins/_grid.scss40
-rw-r--r--scss/vendor/_rfs.scss68
22 files changed, 371 insertions, 76 deletions
diff --git a/scss/_card.scss b/scss/_card.scss
index b077858c4..22890f5c9 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -13,6 +13,7 @@
background-clip: border-box;
border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
+ @include box-shadow($card-box-shadow);
> hr {
margin-right: 0;
@@ -65,7 +66,7 @@
.card-link {
&:hover {
- text-decoration: none;
+ text-decoration: if($link-hover-decoration == underline, none, null);
}
+ .card-link {
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 2d3478bfa..1f3263175 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -55,6 +55,16 @@
@return $result;
}
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+ $merged-maps: ();
+
+ @each $map in $maps {
+ $merged-maps: map-merge($merged-maps, $map);
+ }
+ @return $merged-maps;
+}
+
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
@@ -181,14 +191,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $value1 + $value2;
}
- @if type-of($value1) != number {
- $value1: unquote("(") + $value1 + unquote(")");
- }
-
- @if type-of($value2) != number {
- $value2: unquote("(") + $value2 + unquote(")");
- }
-
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@@ -209,10 +211,6 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return $value1 - $value2;
}
- @if type-of($value1) != number {
- $value1: unquote("(") + $value1 + unquote(")");
- }
-
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@@ -221,26 +219,43 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
}
@function divide($dividend, $divisor, $precision: 10) {
- $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
- $quotient: 0;
- $remainder: $dividend;
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
- @if $divisor == 1 {
- @return $dividend;
- }
- @while $remainder >= $divisor {
- $quotient: $quotient + 1;
- $remainder: $remainder - $divisor;
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
}
- @if $remainder > 0 and $precision > 0 {
- $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1;
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
}
- @return ($quotient + $remainder) * $sign;
+ @return $result;
}
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 5686f31fe..27fd55847 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,6 +12,17 @@
}
}
+@if $enable-cssgrid {
+ .grid {
+ display: grid;
+ grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
+ grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+ gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+
+ @include make-cssgrid();
+ }
+}
+
// Columns
//
diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 8f566d12f..4a989f5a5 100644
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -2,6 +2,8 @@
@import "helpers/colored-links";
@import "helpers/ratio";
@import "helpers/position";
+@import "helpers/stacks";
@import "helpers/visually-hidden";
@import "helpers/stretched-link";
@import "helpers/text-truncation";
+@import "helpers/vr";
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index eec085789..af1f74f72 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -22,6 +22,7 @@
// Components
@import "mixins/alert";
+@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 77473085c..21e1258f5 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -85,17 +85,7 @@
// Modal background
.modal-backdrop {
- position: fixed;
- top: 0;
- left: 0;
- z-index: $zindex-modal-backdrop;
- width: 100vw;
- height: 100vh;
- background-color: $modal-backdrop-bg;
-
- // Fade for backdrop
- &.fade { opacity: 0; }
- &.show { opacity: $modal-backdrop-opacity; }
+ @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
}
// Modal header
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2ccef11b7..a395ede65 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -193,13 +193,42 @@
.navbar-toggler {
display: none;
}
+
+ .offcanvas-header {
+ display: none;
+ }
+
+ .offcanvas {
+ position: inherit;
+ bottom: 0;
+ z-index: 1000;
+ flex-grow: 1;
+ visibility: visible !important; /* stylelint-disable-line declaration-no-important */
+ background-color: transparent;
+ border-right: 0;
+ border-left: 0;
+ @include transition(none);
+ transform: none;
+ }
+ .offcanvas-top,
+ .offcanvas-bottom {
+ height: auto;
+ border-top: 0;
+ border-bottom: 0;
+ }
+
+ .offcanvas-body {
+ display: flex;
+ flex-grow: 0;
+ padding: 0;
+ overflow-y: visible;
+ }
}
}
}
}
// scss-docs-end navbar-expand-loop
-
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 91db68643..a089c2a08 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -14,6 +14,10 @@
@include transition(transform $offcanvas-transition-duration ease-in-out);
}
+.offcanvas-backdrop {
+ @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}
+
.offcanvas-header {
display: flex;
align-items: center;
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 717aae576..0a2d6ec87 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -10,11 +10,11 @@
box-shadow: $toast-box-shadow;
@include border-radius($toast-border-radius);
- &:not(.showing):not(.show) {
+ &.showing {
opacity: 0;
}
- &.hide {
+ &:not(.show) {
display: none;
}
}
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 2905df45c..bfb26aa8a 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -17,5 +17,11 @@
height: 0;
overflow: hidden;
@include transition($transition-collapse);
+
+ &.collapse-horizontal {
+ width: 0;
+ height: auto;
+ @include transition($transition-collapse-width);
+ }
}
// scss-docs-end collapse-classes
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 3c927cf59..74f8a3a01 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -24,6 +24,19 @@ $utilities: map-merge(
)
),
// scss-docs-end utils-float
+ // Opacity utilities
+ // scss-docs-start utils-opacity
+ "opacity": (
+ property: opacity,
+ values: (
+ 0: 0,
+ 25: .25,
+ 50: .5,
+ 75: .75,
+ 100: 1,
+ )
+ ),
+ // scss-docs-end utils-opacity
// scss-docs-start utils-overflow
"overflow": (
property: overflow,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 75d126d7b..1caaed6a0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -198,6 +198,126 @@ $cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+ "blue-100": $blue-100,
+ "blue-200": $blue-200,
+ "blue-300": $blue-300,
+ "blue-400": $blue-400,
+ "blue-500": $blue-500,
+ "blue-600": $blue-600,
+ "blue-700": $blue-700,
+ "blue-800": $blue-800,
+ "blue-900": $blue-900
+) !default;
+
+$indigos: (
+ "indigo-100": $indigo-100,
+ "indigo-200": $indigo-200,
+ "indigo-300": $indigo-300,
+ "indigo-400": $indigo-400,
+ "indigo-500": $indigo-500,
+ "indigo-600": $indigo-600,
+ "indigo-700": $indigo-700,
+ "indigo-800": $indigo-800,
+ "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+ "purple-100": $purple-200,
+ "purple-200": $purple-100,
+ "purple-300": $purple-300,
+ "purple-400": $purple-400,
+ "purple-500": $purple-500,
+ "purple-600": $purple-600,
+ "purple-700": $purple-700,
+ "purple-800": $purple-800,
+ "purple-900": $purple-900
+) !default;
+
+$pinks: (
+ "pink-100": $pink-100,
+ "pink-200": $pink-200,
+ "pink-300": $pink-300,
+ "pink-400": $pink-400,
+ "pink-500": $pink-500,
+ "pink-600": $pink-600,
+ "pink-700": $pink-700,
+ "pink-800": $pink-800,
+ "pink-900": $pink-900
+) !default;
+
+$reds: (
+ "red-100": $red-100,
+ "red-200": $red-200,
+ "red-300": $red-300,
+ "red-400": $red-400,
+ "red-500": $red-500,
+ "red-600": $red-600,
+ "red-700": $red-700,
+ "red-800": $red-800,
+ "red-900": $red-900
+) !default;
+
+$oranges: (
+ "orange-100": $orange-100,
+ "orange-200": $orange-200,
+ "orange-300": $orange-300,
+ "orange-400": $orange-400,
+ "orange-500": $orange-500,
+ "orange-600": $orange-600,
+ "orange-700": $orange-700,
+ "orange-800": $orange-800,
+ "orange-900": $orange-900
+) !default;
+
+$yellows: (
+ "yellow-100": $yellow-100,
+ "yellow-200": $yellow-200,
+ "yellow-300": $yellow-300,
+ "yellow-400": $yellow-400,
+ "yellow-500": $yellow-500,
+ "yellow-600": $yellow-600,
+ "yellow-700": $yellow-700,
+ "yellow-800": $yellow-800,
+ "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+ "green-100": $green-100,
+ "green-200": $green-200,
+ "green-300": $green-300,
+ "green-400": $green-400,
+ "green-500": $green-500,
+ "green-600": $green-600,
+ "green-700": $green-700,
+ "green-800": $green-800,
+ "green-900": $green-900
+) !default;
+
+$teals: (
+ "teal-100": $teal-100,
+ "teal-200": $teal-200,
+ "teal-300": $teal-300,
+ "teal-400": $teal-400,
+ "teal-500": $teal-500,
+ "teal-600": $teal-600,
+ "teal-700": $teal-700,
+ "teal-800": $teal-800,
+ "teal-900": $teal-900
+) !default;
+
+$cyans: (
+ "cyan-100": $cyan-100,
+ "cyan-200": $cyan-200,
+ "cyan-300": $cyan-300,
+ "cyan-400": $cyan-400,
+ "cyan-500": $cyan-500,
+ "cyan-600": $cyan-600,
+ "cyan-700": $cyan-700,
+ "cyan-800": $cyan-800,
+ "cyan-900": $cyan-900
+) !default;
// fusv-enable
// Characters which are escaped by the escape-svg function
@@ -221,6 +341,7 @@ $enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
+$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
@@ -397,6 +518,7 @@ $transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse: height .35s ease !default;
+$transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
@@ -422,8 +544,8 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
-// $font-size-base effects the font size of the body text
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875 !default;
@@ -725,6 +847,8 @@ $input-height-sm: add($input-line-height * 1em, add($input
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
// scss-docs-end form-input-variables
// scss-docs-start form-check-variables
@@ -906,9 +1030,10 @@ $form-validation-states: (
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-offcanvas: 1050 !default;
-$zindex-modal: 1060 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
// scss-docs-end zindex-stack
@@ -1085,8 +1210,9 @@ $card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
@@ -1126,7 +1252,7 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $accordion-color !default;
+$accordion-icon-color: $accordion-button-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
@@ -1452,6 +1578,8 @@ $offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables
// Code
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index 5f3a14d16..bcd8c19cf 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Grid v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss
index 3fb5fa0ec..72444f6c1 100644
--- a/scss/bootstrap-reboot.scss
+++ b/scss/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Reboot v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss
index f921a5d15..ab2d0e701 100644
--- a/scss/bootstrap-utilities.scss
+++ b/scss/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Utilities v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 86c079db3..eb047a3f2 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap v5.0.2 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 9728b91f3..96423c530 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -199,7 +199,7 @@ textarea {
// stylelint-enable selector-no-qualifying-type
.form-control-color {
- max-width: 3rem;
+ width: $form-color-width;
height: auto; // Override fixed browser height
padding: $input-padding-y;
diff --git a/scss/helpers/_stacks.scss b/scss/helpers/_stacks.scss
new file mode 100644
index 000000000..6cd237ae6
--- /dev/null
+++ b/scss/helpers/_stacks.scss
@@ -0,0 +1,15 @@
+// scss-docs-start stacks
+.hstack {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ align-self: stretch;
+}
+
+.vstack {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-self: stretch;
+}
+// scss-docs-end stacks
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
new file mode 100644
index 000000000..37f864777
--- /dev/null
+++ b/scss/helpers/_vr.scss
@@ -0,0 +1,8 @@
+.vr {
+ display: inline-block;
+ align-self: stretch;
+ width: 1px;
+ min-height: 1em;
+ background-color: currentColor;
+ opacity: $hr-opacity;
+}
diff --git a/scss/mixins/_backdrop.scss b/scss/mixins/_backdrop.scss
new file mode 100644
index 000000000..9705ae9ee
--- /dev/null
+++ b/scss/mixins/_backdrop.scss
@@ -0,0 +1,14 @@
+// Shared between modals and offcanvases
+@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: $zindex;
+ width: 100vw;
+ height: 100vh;
+ background-color: $backdrop-bg;
+
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+ &.show { opacity: $backdrop-opacity; }
+}
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index f108b447b..59cc56376 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -1,6 +1,4 @@
-@use "sass:math";
-
-/// Grid system
+// Grid system
//
// Generate semantic grid columns with these mixins.
@@ -45,7 +43,7 @@
}
@mixin make-col-offset($size, $columns: $grid-columns) {
- $num: $size / $columns;
+ $num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
@@ -57,7 +55,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
- width: 100% / $count;
+ width: divide(100%, $count);
}
}
@@ -68,8 +66,8 @@
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
@each $breakpoint in map-keys($breakpoints) {
- // .row-cols defaults must all appear before .col overrides so they can be overridden.
$infix: breakpoint-infix($breakpoint, $breakpoints);
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
.col#{$infix} {
@@ -87,13 +85,7 @@
}
}
}
- }
- }
-
- @each $breakpoint in map-keys($breakpoints) {
- $infix: breakpoint-infix($breakpoint, $breakpoints);
- @include media-breakpoint-up($breakpoint, $breakpoints) {
.col#{$infix}-auto {
@include make-col-auto();
}
@@ -132,3 +124,27 @@
}
}
}
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ @if $columns > 0 {
+ @for $i from 1 through $columns {
+ .g-col#{$infix}-#{$i} {
+ grid-column: auto / span $i;
+ }
+ }
+
+ // Start with `1` because `0` is and 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} {
+ grid-column-start: $i;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss
index 798753ecb..7e9a6c7a8 100644
--- a/scss/vendor/_rfs.scss
+++ b/scss/vendor/_rfs.scss
@@ -4,7 +4,7 @@
//
// Automated responsive values for font sizes, paddings, margins and much more
//
-// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
+// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
// Configuration
@@ -52,12 +52,54 @@ $enable-rfs: true !default;
// Cache $rfs-base-value unit
$rfs-base-value-unit: unit($rfs-base-value);
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
// Remove px-unit from $rfs-base-value for calculations
@if $rfs-base-value-unit == px {
- $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
+ $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
}
@else if $rfs-base-value-unit == rem {
- $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
+ $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
@@ -65,14 +107,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == px {
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+ $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
// Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
+$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
@@ -164,11 +206,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@if $unit == px {
// Convert to rem if needed
- $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
}
@else if $unit == rem {
// Convert to px if needed
- $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
+ $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
}
@else {
// If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@@ -205,21 +247,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
@else {
// Remove unit from $value for calculations
- $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
+ $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
// Only add the media query if the value is greater than the minimum value
@if abs($value) <= $rfs-base-value or not $enable-rfs {
- $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
}
@else {
// Calculate the minimum value
- $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
+ $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
// Calculate difference between $value and the minimum value
$value-diff: abs($value) - $value-min;
// Base value formatting
- $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
+ $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
// Use negative value if needed
$min-width: if($value < 0, -$min-width, $min-width);
@@ -228,7 +270,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
- $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+ $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Return the calculated value
$val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 05:45:34 +0000