root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
scss/mixins/_border-radius.scss
View File

@ -1,4 +1,5 @@
@use "../config" as *; @use "../config" as *;
// @use "../variables" as *;
// stylelint-disable property-disallowed-list // stylelint-disable property-disallowed-list
// Single side border-radius // Single side border-radius
@ -17,7 +18,7 @@
} }
// scss-docs-start border-radius-mixins // 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 { @if $enable-rounded {
border-radius: valid-radius($radius); 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 { @if $enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
border-top-right-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 { @if $enable-rounded {
border-top-right-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius);
border-bottom-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 { @if $enable-rounded {
border-bottom-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius);
border-bottom-left-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 { @if $enable-rounded {
border-top-left-radius: valid-radius($radius); border-top-left-radius: valid-radius($radius);
border-bottom-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 { @if $enable-rounded {
border-top-left-radius: valid-radius($radius); 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 { @if $enable-rounded {
border-top-right-radius: valid-radius($radius); 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 { @if $enable-rounded {
border-bottom-right-radius: valid-radius($radius); 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 { @if $enable-rounded {
border-bottom-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius);
} }