diff options
| -rw-r--r-- | .stylelintrc | 9 | ||||
| -rw-r--r-- | scss/_card.scss | 14 | ||||
| -rw-r--r-- | scss/_custom-forms.scss | 9 | ||||
| -rw-r--r-- | scss/_forms.scss | 8 | ||||
| -rw-r--r-- | scss/_reboot.scss | 1 | ||||
| -rw-r--r-- | scss/_spinners.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_border-radius.scss | 6 | ||||
| -rw-r--r-- | scss/mixins/_buttons.scss | 6 | ||||
| -rw-r--r-- | scss/utilities/_borders.scss | 2 | ||||
| -rw-r--r-- | site/docs/4.2/assets/scss/_ads.scss | 2 | ||||
| -rw-r--r-- | site/docs/4.2/assets/scss/_brand.scss | 4 | ||||
| -rw-r--r-- | site/docs/4.2/assets/scss/_callouts.scss | 4 | ||||
| -rw-r--r-- | site/docs/4.2/assets/scss/_clipboard-js.scss | 2 | ||||
| -rw-r--r-- | site/docs/4.2/assets/scss/_component-examples.scss | 6 |
14 files changed, 40 insertions, 35 deletions
diff --git a/.stylelintrc b/.stylelintrc index dac9edbf43..fce97867fc 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -261,7 +261,14 @@ "fill", "stroke" ], - "property-blacklist": ["transition"], + "property-blacklist": [ + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "transition" + ], "property-no-vendor-prefix": true, "rule-empty-line-before": null, "scss/at-function-named-arguments": "never", diff --git a/scss/_card.scss b/scss/_card.scss index 377bec0f1a..bbdb15bce5 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -200,10 +200,12 @@ .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-right-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-right-radius: 0; } } @@ -213,10 +215,12 @@ .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-left-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-left-radius: 0; } } @@ -283,24 +287,22 @@ &:not(:first-of-type) { .card-header:first-child { - border-radius: 0; + @include border-radius(0); } &:not(:last-of-type) { border-bottom: 0; - border-radius: 0; + @include border-radius(0); } } &:first-of-type { border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + @include border-bottom-radius(0); } &:last-of-type { - border-top-left-radius: 0; - border-top-right-radius: 0; + @include border-top-radius(0); } .card-header { diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index e6bf7ad6f5..985dddba42 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -144,6 +144,7 @@ .custom-radio { .custom-control-label::before { + // stylelint-disable-next-line property-blacklist border-radius: $custom-radio-indicator-border-radius; } @@ -173,6 +174,7 @@ left: -($custom-switch-width + $custom-control-gutter); width: $custom-switch-width; pointer-events: all; + // stylelint-disable-next-line property-blacklist border-radius: $custom-switch-indicator-border-radius; } @@ -182,6 +184,7 @@ width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; + // stylelint-disable-next-line property-blacklist border-radius: $custom-switch-indicator-border-radius; @include transition(transform .15s ease-in-out, $custom-forms-transition); } @@ -220,11 +223,7 @@ background: $custom-select-background; background-color: $custom-select-bg; border: $custom-select-border-width solid $custom-select-border-color; - @if $enable-rounded { - border-radius: $custom-select-border-radius; - } @else { - border-radius: 0; - } + @include border-radius($custom-select-border-radius, 0); @include box-shadow($custom-select-box-shadow); appearance: none; diff --git a/scss/_forms.scss b/scss/_forms.scss index 2db6d834cd..92175b0902 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -18,13 +18,7 @@ border: $input-border-width solid $input-border-color; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. - @if $enable-rounded { - // Manually use the if/else instead of the mixin to account for iOS override - border-radius: $input-border-radius; - } @else { - // Otherwise undo the iOS default - border-radius: 0; - } + @include border-radius($input-border-radius, 0); @include box-shadow($input-box-shadow); @include transition($input-transition); diff --git a/scss/_reboot.scss b/scss/_reboot.scss index d4167cc8ec..10e2273c41 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -297,6 +297,7 @@ label { // // Details at https://github.com/twbs/bootstrap/issues/24093 button { + // stylelint-disable-next-line property-blacklist border-radius: 0; } diff --git a/scss/_spinners.scss b/scss/_spinners.scss index ed7e2bc650..364a5c1a65 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -13,6 +13,7 @@ vertical-align: text-bottom; border: $spinner-border-width solid currentColor; border-right-color: transparent; + // stylelint-disable-next-line property-blacklist border-radius: 50%; animation: spinner-border .75s linear infinite; } @@ -42,6 +43,7 @@ height: $spinner-height; vertical-align: text-bottom; background-color: currentColor; + // stylelint-disable-next-line property-blacklist border-radius: 50%; opacity: 0; animation: spinner-grow .75s linear infinite; diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 2024febcfa..f32feca90c 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -1,9 +1,13 @@ +// stylelint-disable property-blacklist // Single side border-radius -@mixin border-radius($radius: $border-radius) { +@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: $radius; } + @else if $fallback-border-radius != false { + border-radius: $fallback-border-radius; + } } @mixin border-top-radius($radius) { diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 3e1e2c09d0..64cc482f69 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -103,9 +103,5 @@ font-size: $font-size; line-height: $line-height; // Manually declare to provide an override to the browser default - @if $enable-rounded { - border-radius: $border-radius; - } @else { - border-radius: 0; - } + @include border-radius($border-radius, 0); } diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index fb759c9ba0..78c9cb5b2d 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -1,4 +1,4 @@ -// stylelint-disable declaration-no-important +// stylelint-disable property-blacklist, declaration-no-important // // Border diff --git a/site/docs/4.2/assets/scss/_ads.scss b/site/docs/4.2/assets/scss/_ads.scss index 375a9e01fa..c207f1682f 100644 --- a/site/docs/4.2/assets/scss/_ads.scss +++ b/site/docs/4.2/assets/scss/_ads.scss @@ -23,7 +23,7 @@ @include media-breakpoint-up(sm) { max-width: 330px; - border-radius: 4px; + @include border-radius(4px); } } diff --git a/site/docs/4.2/assets/scss/_brand.scss b/site/docs/4.2/assets/scss/_brand.scss index c8c5c2d566..d7d9f1f09b 100644 --- a/site/docs/4.2/assets/scss/_brand.scss +++ b/site/docs/4.2/assets/scss/_brand.scss @@ -10,7 +10,7 @@ overflow: hidden; color: $bd-purple; background-color: #f9f9f9; - border-radius: .25rem; + @include border-radius; .inverse { color: $white; @@ -79,7 +79,7 @@ height: 4rem; margin-right: .25rem; margin-left: .25rem; - border-radius: .25rem; + @include border-radius; @include media-breakpoint-up(md) { width: 6rem; diff --git a/site/docs/4.2/assets/scss/_callouts.scss b/site/docs/4.2/assets/scss/_callouts.scss index b11e370c64..a10fc05b8d 100644 --- a/site/docs/4.2/assets/scss/_callouts.scss +++ b/site/docs/4.2/assets/scss/_callouts.scss @@ -8,7 +8,7 @@ margin-bottom: 1.25rem; border: 1px solid #eee; border-left-width: .25rem; - border-radius: .25rem; + @include border-radius; h4 { margin-top: 0; @@ -20,7 +20,7 @@ } code { - border-radius: .25rem; + @include border-radius; } + .bd-callout { diff --git a/site/docs/4.2/assets/scss/_clipboard-js.scss b/site/docs/4.2/assets/scss/_clipboard-js.scss index 001a6b01e2..0cf3996446 100644 --- a/site/docs/4.2/assets/scss/_clipboard-js.scss +++ b/site/docs/4.2/assets/scss/_clipboard-js.scss @@ -28,7 +28,7 @@ cursor: pointer; background-color: transparent; border: 0; - border-radius: .25rem; + @include border-radius; &:hover { color: $white; diff --git a/site/docs/4.2/assets/scss/_component-examples.scss b/site/docs/4.2/assets/scss/_component-examples.scss index 1235695b2c..c508764203 100644 --- a/site/docs/4.2/assets/scss/_component-examples.scss +++ b/site/docs/4.2/assets/scss/_component-examples.scss @@ -87,7 +87,7 @@ height: 3rem; margin-bottom: .5rem; background-color: lighten($blue, 50%); - border-radius: .25rem; + @include border-radius; } .bd-example-container-sidebar { @@ -95,14 +95,14 @@ width: 4rem; height: 8rem; background-color: lighten($blue, 25%); - border-radius: .25rem; + @include border-radius; } .bd-example-container-body { height: 8rem; margin-right: 4.5rem; background-color: lighten($bd-purple, 25%); - border-radius: .25rem; + @include border-radius; } .bd-example-container-fluid { |