diff --git a/.changeset/consistent-breakpoint-infix.md b/.changeset/consistent-breakpoint-infix.md new file mode 100644 index 000000000..a985efb89 --- /dev/null +++ b/.changeset/consistent-breakpoint-infix.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated `.container-*` and `.table-mobile-*` to build their breakpoint infix with `breakpoint-infix()`. diff --git a/core/scss/bootstrap/_containers.scss b/core/scss/bootstrap/_containers.scss index c6f3bcee1..660cf2c28 100644 --- a/core/scss/bootstrap/_containers.scss +++ b/core/scss/bootstrap/_containers.scss @@ -14,7 +14,7 @@ // Responsive containers that are 100% wide until a breakpoint @each $breakpoint, $container-max-width in $container-max-widths { - .container-#{$breakpoint} { + .container#{breakpoint-infix($breakpoint, $grid-breakpoints)} { @extend .container-fluid; } diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss index 9e2e7e721..69aa57d5f 100644 --- a/core/scss/ui/_tables.scss +++ b/core/scss/ui/_tables.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; + @use '../config' as *; .table { @@ -69,9 +71,14 @@ max-width: 1px; } +// Generate a series of `.table-mobile-*` classes for configuring the screen +// size below which the table stacks into rows. Mirrors `.table-responsive-*`: +// the infix names the breakpoint the layout applies *below*. .table-mobile { - @each $breakpoint, $breakpoint-max-widthin in $grid-breakpoints { - &#{breakpoint-infix($breakpoint)} { + @each $breakpoint in map.keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + &#{$infix} { @include media-breakpoint-down($breakpoint) { display: block;