Use CSS variable for border-radius in utilities

This commit is contained in:
Mark Otto 2025-03-04 14:28:43 -08:00
parent 7d19c5d739
commit 6ec2a9c5f4
1 changed files with 10 additions and 9 deletions

View File

@ -1,4 +1,5 @@
@use "../config" as *;
// @use "../variables" as *;
// stylelint-disable property-disallowed-list
// Single side border-radius
@ -17,7 +18,7 @@
}
// scss-docs-start border-radius-mixins
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@mixin border-radius($radius: var(--#{$prefix}border-radius), $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: valid-radius($radius);
}
@ -26,53 +27,53 @@
}
}
@mixin border-top-radius($radius: $border-radius) {
@mixin border-top-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-end-radius($radius: $border-radius) {
@mixin border-end-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-radius($radius: $border-radius) {
@mixin border-bottom-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-start-radius($radius: $border-radius) {
@mixin border-start-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
border-bottom-left-radius: valid-radius($radius);
}
}
@mixin border-top-start-radius($radius: $border-radius) {
@mixin border-top-start-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-top-left-radius: valid-radius($radius);
}
}
@mixin border-top-end-radius($radius: $border-radius) {
@mixin border-top-end-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-top-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-end-radius($radius: $border-radius) {
@mixin border-bottom-end-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-bottom-right-radius: valid-radius($radius);
}
}
@mixin border-bottom-start-radius($radius: $border-radius) {
@mixin border-bottom-start-radius($radius: var(--#{$prefix}border-radius)) {
@if $enable-rounded {
border-bottom-left-radius: valid-radius($radius);
}