diff --git a/core/scss/mixins/_functions.scss b/core/scss/mixins/_functions.scss index b276a113a..9176033f1 100644 --- a/core/scss/mixins/_functions.scss +++ b/core/scss/mixins/_functions.scss @@ -19,7 +19,7 @@ // "Bootstrap functions" section below. @mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) { - $prev: breakpoint-prev($name); + $prev: breakpoint-prev($name, $breakpoints); @if $prev == null { @content; diff --git a/core/scss/mixins/bootstrap/_caret.scss b/core/scss/mixins/bootstrap/_caret.scss index 7fd6c4df2..3b601e1d5 100644 --- a/core/scss/mixins/bootstrap/_caret.scss +++ b/core/scss/mixins/bootstrap/_caret.scss @@ -33,7 +33,7 @@ @mixin caret($direction: down, $width: $caret-width, $spacing: $caret-spacing, $vertical-align: $caret-vertical-align) { $selector: 'after'; - @if $direction == 'left' { + @if $direction == 'start' { $selector: 'before'; } @@ -47,7 +47,7 @@ border-inline-start: 1px var(--border-style); margin-inline-end: 0.1em; - @if $direction != 'left' { + @if $direction != 'start' { margin-inline-start: $caret-spacing; } @else { margin-inline-end: $caret-spacing; @@ -64,7 +64,7 @@ } } - @if $direction == 'left' { + @if $direction == 'start' { &::after { content: none; } diff --git a/core/scss/tests/_caret.test.scss b/core/scss/tests/_caret.test.scss index 2fcca4d7f..d5e022b3c 100644 --- a/core/scss/tests/_caret.test.scss +++ b/core/scss/tests/_caret.test.scss @@ -1,7 +1,7 @@ // Output tests for the caret mixins in scss/mixins/bootstrap/_caret.scss. // The `caret-{down,up,end,start}` helpers draw a triangle out of borders; the // main `caret()` builds a pseudo-element and branches on `$direction` for the -// rotation and (for `left`) the ::before/::after structure. +// rotation and (for `start`) the ::before/::after structure. @use '../mixins/bootstrap/caret' as *; @@ -86,11 +86,11 @@ } } - @include it('uses ::before and clears ::after for the left direction') { + @include it('uses ::before and clears ::after for the start direction') { @include assert() { @include output() { .t { - @include caret(left); + @include caret(start); } } @include expect() { diff --git a/core/scss/tests/_media-breakpoint.test.scss b/core/scss/tests/_media-breakpoint.test.scss index 1412d6315..85ddee4e2 100644 --- a/core/scss/tests/_media-breakpoint.test.scss +++ b/core/scss/tests/_media-breakpoint.test.scss @@ -174,4 +174,29 @@ $g: ( } } } + + // Names that don't exist in the global $grid-breakpoints at all: this only + // resolves if $breakpoints actually reaches the breakpoint-prev() lookup, + // not just the breakpoint-max() one. + $custom: ( + tablet: 0, + desktop: 900px, + ); + + @include it('resolves the previous breakpoint from a custom $breakpoints map') { + @include assert() { + @include output() { + @include media-breakpoint-down-than(desktop, $custom) { + .t { + color: red; + } + } + } + @include expect() { + .t { + color: red; + } + } + } + } } diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 4ba9d86e8..2ef211c2d 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -9,10 +9,10 @@ a { text-decoration-skip-ink: auto; - color: color-mix(in sRGB, transparent, var(--link-color) var(--link-opacity, 100%)); + color: color-mix(in sRGB, transparent, var(--link-color) calc(var(--link-opacity, 1) * 100%)); &:hover { - color: color-mix(in sRGB, transparent, var(--link-hover-color) var(--link-opacity, 100%)); + color: color-mix(in sRGB, transparent, var(--link-hover-color) calc(var(--link-opacity, 1) * 100%)); } }