diff --git a/scss/_config.scss b/scss/_config.scss index dbe04862e9..1dc4e32fe9 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -34,16 +34,16 @@ $min-contrast-ratio: 4.5 !default; // Define the minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries. -// scss-docs-start grid-breakpoints -$grid-breakpoints: ( +// scss-docs-start breakpoints +$breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, - xxl: 1400px + 2xl: 1400px ) !default; -// scss-docs-end grid-breakpoints +// scss-docs-end breakpoints // Grid columns // @@ -63,7 +63,7 @@ $container-max-widths: ( md: 720px, lg: 960px, xl: 1140px, - xxl: 1320px + 2xl: 1320px ) !default; // scss-docs-end container-max-widths diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 07bd13d527..3ef55891e9 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -97,9 +97,9 @@ // We deliberately hardcode the `bs-` prefix because we check // this custom property in JS to determine Popper's positioning - @each $breakpoint in map.keys($grid-breakpoints) { + @each $breakpoint in map.keys($breakpoints) { @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $breakpoints); .dropdown-menu#{$infix}-start { --bs-position: start; diff --git a/scss/_functions.scss b/scss/_functions.scss index abf2c2022f..fab566906d 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -24,7 +24,7 @@ // Starts at zero // Used to ensure the min-width of the lowest breakpoint starts at 0. -@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { +@mixin _assert-starts-at-zero($map, $map-name: "$breakpoints") { @if length($map) > 0 { $values: map-values($map); $first-value: nth($values, 1); diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 0b0048f124..a4e8b59bf2 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -129,9 +129,9 @@ // // Change the layout of list group items from vertical (default) to horizontal. - @each $breakpoint in map.keys($grid-breakpoints) { + @each $breakpoint in map.keys($breakpoints) { @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $breakpoints); .list-group-horizontal#{$infix} { flex-direction: row; diff --git a/scss/_modal.scss b/scss/_modal.scss index fa629dc641..a9024336fe 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -220,8 +220,8 @@ } // scss-docs-start modal-fullscreen-loop - @each $breakpoint in map.keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); $postfix: if($infix != "", $infix + "-down", ""); @include media-breakpoint-down($breakpoint) { diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6061e18c41..ece3fc8ca5 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -203,9 +203,9 @@ // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { - @each $breakpoint in map.keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($next, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $next: breakpoint-next($breakpoint, $breakpoints); + $infix: breakpoint-infix($next, $breakpoints); // stylelint-disable-next-line scss/selector-no-union-class-name &#{$infix} { diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index 5101ea1437..628959c889 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -26,18 +26,18 @@ // scss-docs-end offcanvas-css-vars } - @each $breakpoint in map.keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($next, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $next: breakpoint-next($breakpoint, $breakpoints); + $infix: breakpoint-infix($next, $breakpoints); .offcanvas#{$infix} { @extend %offcanvas-css-vars; } } - @each $breakpoint in map.keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($next, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $next: breakpoint-next($breakpoint, $breakpoints); + $infix: breakpoint-infix($next, $breakpoints); .offcanvas#{$infix} { @include media-breakpoint-down($next) { diff --git a/scss/_root.scss b/scss/_root.scss index fd1533d562..8313d31c64 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -135,8 +135,7 @@ --#{$prefix}border-radius-sm: #{$border-radius-sm}; --#{$prefix}border-radius-lg: #{$border-radius-lg}; --#{$prefix}border-radius-xl: #{$border-radius-xl}; - --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; - --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency + --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4303e8b8d2..ddf553cac3 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -730,7 +730,7 @@ $utilities: map.merge( 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), + 5: var(--#{$prefix}border-radius-2xl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) @@ -745,7 +745,7 @@ $utilities: map.merge( 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), + 5: var(--#{$prefix}border-radius-2xl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) @@ -760,7 +760,7 @@ $utilities: map.merge( 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), + 5: var(--#{$prefix}border-radius-2xl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) @@ -775,7 +775,7 @@ $utilities: map.merge( 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), + 5: var(--#{$prefix}border-radius-2xl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) @@ -790,7 +790,7 @@ $utilities: map.merge( 2: var(--#{$prefix}border-radius), 3: var(--#{$prefix}border-radius-lg), 4: var(--#{$prefix}border-radius-xl), - 5: var(--#{$prefix}border-radius-xxl), + 5: var(--#{$prefix}border-radius-2xl), circle: 50%, pill: var(--#{$prefix}border-radius-pill) ) diff --git a/scss/_variables.scss b/scss/_variables.scss index 893c65e052..4b9f203f88 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -191,18 +191,18 @@ $paragraph-margin-bottom: 1rem !default; // // adapting to different screen sizes, for use in media queries. // // scss-docs-start grid-breakpoints -// $grid-breakpoints: ( +// $breakpoints: ( // xs: 0, // sm: 576px, // md: 768px, // lg: 992px, // xl: 1200px, -// xxl: 1400px +// 2xl: 1400px // ) !default; // // scss-docs-end grid-breakpoints -// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); +// @include _assert-ascending($breakpoints, "$breakpoints"); +// @include _assert-starts-at-zero($breakpoints, "$breakpoints"); // // Grid containers @@ -215,7 +215,7 @@ $paragraph-margin-bottom: 1rem !default; // md: 720px, // lg: 960px, // xl: 1140px, -// xxl: 1320px +// 2xl: 1320px // ) !default; // // scss-docs-end container-max-widths @@ -258,11 +258,11 @@ $border-radius: .375rem !default; $border-radius-sm: .25rem !default; $border-radius-lg: .5rem !default; $border-radius-xl: 1rem !default; -$border-radius-xxl: 2rem !default; +$border-radius-2xl: 2rem !default; $border-radius-pill: 50rem !default; // scss-docs-end border-radius-variables // fusv-disable -$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0 +$border-radius-2xl: $border-radius-2xl !default; // Deprecated in v5.3.0 // fusv-enable // scss-docs-start box-shadow-variables diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss index deabf106bb..2b049435de 100644 --- a/scss/content/_tables.scss +++ b/scss/content/_tables.scss @@ -192,8 +192,8 @@ // Generate series of `.table-responsive-*` classes for configuring the screen // size of where your table will overflow. - @each $breakpoint in map.keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); @include media-breakpoint-down($breakpoint) { .table-responsive#{$infix} { diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss index 4e67fdad55..bd03b9ea44 100644 --- a/scss/helpers/_position.scss +++ b/scss/helpers/_position.scss @@ -23,9 +23,9 @@ } // Responsive sticky top and bottom - @each $breakpoint in map.keys($grid-breakpoints) { + @each $breakpoint in map.keys($breakpoints) { @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $breakpoints); .sticky#{$infix}-top { position: sticky; diff --git a/scss/layout/_breakpoints.scss b/scss/layout/_breakpoints.scss index d98a280471..04de580b32 100644 --- a/scss/layout/_breakpoints.scss +++ b/scss/layout/_breakpoints.scss @@ -1,24 +1,23 @@ @use "sass:map"; @use "../config" as *; - // Breakpoint viewport sizes and media queries. // // 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, xxl: 1400px) +// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px) // -// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. +// The map defined in the `$breakpoints` global variable is used as the `$breakpoints` argument by default. // Name of the next breakpoint, or null for the last breakpoint. // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)) // md -// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl)) +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl)) // md -@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) { +@function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) { $n: index($breakpoint-names, $name); @if not $n { @error "breakpoint `#{$name}` not found in `#{$breakpoints}`"; @@ -28,44 +27,39 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)) // 576px -@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { +@function breakpoint-min($name, $breakpoints: $breakpoints) { $min: map.get($breakpoints, $name); @return if($min != 0, $min, null); } // 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(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)) // 767.98px -@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { +@function breakpoint-max($name, $breakpoints: $breakpoints) { $max: map.get($breakpoints, $name); - @return if($max and $max > 0, $max - .02, null); + @return if($max and $max > 0, $max, null); } // 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, xxl: 1400px)) +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)) // "" (Returns a blank string) -// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, 2xl: 1400px)) // "-sm" -@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { +@function breakpoint-infix($name, $breakpoints: $breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. -@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) { $min: breakpoint-min($name, $breakpoints); @if $min { - @media (min-width: $min) { + @media (width >= $min) { @content; } } @else { @@ -75,10 +69,10 @@ // Media of at most the maximum breakpoint width. No query for the largest breakpoint. // Makes the @content apply to the given breakpoint and narrower. -@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) { $max: breakpoint-max($name, $breakpoints); @if $max { - @media (max-width: $max) { + @media (width < $max) { @content; } } @else { @@ -88,12 +82,12 @@ // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints -@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakpoints) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { + @media ($min <= width < $max) { @content; } } @else if $max == null { @@ -110,13 +104,13 @@ // Media between the breakpoint's minimum and maximum widths. // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. -@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-only($name, $breakpoints: $breakpoints) { $min: breakpoint-min($name, $breakpoints); $next: breakpoint-next($name, $breakpoints); $max: breakpoint-max($next, $breakpoints); @if $min != null and $max != null { - @media (min-width: $min) and (max-width: $max) { + @media ($min <= width < $max) { @content; } } @else if $max == null { diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss index ac42be2bdb..fb4494bc95 100644 --- a/scss/layout/_containers.scss +++ b/scss/layout/_containers.scss @@ -31,7 +31,7 @@ @extend .container-fluid; } - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + @include media-breakpoint-up($breakpoint, $breakpoints) { %responsive-container-#{$breakpoint} { max-width: $container-max-width; } @@ -39,9 +39,9 @@ // Extend each breakpoint which is smaller or equal to the current breakpoint $extend-breakpoint: true; - @each $name, $width in $grid-breakpoints { + @each $name, $width in $breakpoints { @if ($extend-breakpoint) { - .container#{breakpoint-infix($name, $grid-breakpoints)} { + .container#{breakpoint-infix($name, $breakpoints)} { @extend %responsive-container-#{$breakpoint}; } diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss index 57f4ce8a88..62e4203e22 100644 --- a/scss/layout/_grid.scss +++ b/scss/layout/_grid.scss @@ -11,7 +11,7 @@ @layer layout { :root { - @each $name, $value in $grid-breakpoints { + @each $name, $value in $breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } } @@ -27,10 +27,10 @@ gap: var(--#{$prefix}gap); } - @each $breakpoint in map.keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + @include media-breakpoint-up($breakpoint, $breakpoints) { @if $grid-columns > 0 { @for $i from 1 through $grid-columns { .col#{$infix}-#{$i} { diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss index 304d8d1c94..8380f79dca 100644 --- a/scss/tests/utilities/_api.test.scss +++ b/scss/tests/utilities/_api.test.scss @@ -25,7 +25,7 @@ $utilities: (); ) ) !global; - $grid-breakpoints: ( + $breakpoints: ( xs: 0, sm: 333px, md: 666px diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index 23513dde2e..1d094a9c0f 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -8,11 +8,11 @@ @layer utilities { // Loop over each breakpoint - @each $breakpoint in map.keys($grid-breakpoints) { + @each $breakpoint in map.keys($breakpoints) { // Generate media query if needed @include media-breakpoint-up($breakpoint) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $breakpoints); // Loop over each utility property @each $key, $utility in $utilities { @@ -27,10 +27,10 @@ // RFS rescaling @media (min-width: $rfs-mq-value) { - @each $breakpoint in map.keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + @each $breakpoint in map.keys($breakpoints) { + $infix: breakpoint-infix($breakpoint, $breakpoints); - @if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { + @if (map.get($breakpoints, $breakpoint) < $rfs-breakpoint) { // Loop over each utility property @each $key, $utility in $utilities { // The utility can be disabled with `false`, thus check if the utility is a map first diff --git a/site/src/assets/examples/buttons/index.astro b/site/src/assets/examples/buttons/index.astro index 7990e7845a..f99b7b53bd 100644 --- a/site/src/assets/examples/buttons/index.astro +++ b/site/src/assets/examples/buttons/index.astro @@ -26,7 +26,7 @@ export const title = 'Buttons'
-
+
diff --git a/site/src/assets/examples/grid/index.astro b/site/src/assets/examples/grid/index.astro index 2c01d8de9d..956c561ff5 100644 --- a/site/src/assets/examples/grid/index.astro +++ b/site/src/assets/examples/grid/index.astro @@ -45,9 +45,9 @@ export const body_class = 'py-4'
-
.col-xxl-4
-
.col-xxl-4
-
.col-xxl-4
+
.col-2xl-4
+
.col-2xl-4
+
.col-2xl-4

Three equal columns

@@ -180,6 +180,6 @@ export const body_class = 'py-4'
.container-md
.container-lg
.container-xl
-
.container-xxl
+
.container-2xl
.container-fluid
diff --git a/site/src/assets/examples/heroes/index.astro b/site/src/assets/examples/heroes/index.astro index 853776e7bc..8ac2a70ac3 100644 --- a/site/src/assets/examples/heroes/index.astro +++ b/site/src/assets/examples/heroes/index.astro @@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
-
+
Bootstrap Themes @@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
-
+

Vertically centered hero sign-up form

diff --git a/site/src/assets/examples/navbars/index.astro b/site/src/assets/examples/navbars/index.astro index c48993f8d2..e4a1bcab20 100644 --- a/site/src/assets/examples/navbars/index.astro +++ b/site/src/assets/examples/navbars/index.astro @@ -199,7 +199,7 @@ export const extra_css = ['navbars.css']
-
```html @@ -704,11 +705,11 @@ Another override is the option to pop up a modal that covers the user viewport,
-