Blacklist border-radius property (use mixin instead) (#27900)

diff --git a/.stylelintrc b/.stylelintrc
index dac9edbf43861872e3982ce866e9971802c4788b..fce97867fc279bef140fb4ef11144733f550b53c 100644 (file)
--- 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 377bec0f1a4357d2479d71c5b090d492e2c35ce7..bbdb15bce5e0ed6c90baf5c7074fa5bb6f2379b8 100644 (file)
--- 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 e6bf7ad6f53fcbed36f6c2f010dd051389c8c609..985dddba42db713dbd9c1ccaf85a7a448b4832f0 100644 (file)
--- 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 2db6d834cd241d1dd17350ca160bda3fa4889d0e..92175b09027e458ccdc536d4f97861b19b717276 100644 (file)
--- 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 d4167cc8ecf500b5153030f4ec5a6b7f3f05feb1..10e2273c4175a78fdfb7e5c1fd72cf279514ab80 100644 (file)
--- 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 ed7e2bc6500536b68514501b4bba8c0e2598d4ab..364a5c1a65f71e0828a23752934a95e42e511236 100644 (file)
--- 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 2024febcfa82ffa56efb6a3c26255613da03d211..f32feca90c99ebacc71a1f22dea28af2ad8c7476 100644 (file)
--- 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 3e1e2c09d059a9b9c8c5f5d5daca38cf4a22878a..64cc482f69503f691d748a5408067447603d537f 100644 (file)
--- 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 fb759c9ba017827714c279b37e49559011a4d7a5..78c9cb5b2d875c0df4534da6fdb4cb22acd3801f 100644 (file)
--- 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 375a9e01fa3838bbd21febe58563889dd055071e..c207f1682fbd970b852c3798e4cf84cff699e23b 100644 (file)
--- 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 c8c5c2d5662620074e214b2d486ac4fa335b1fc6..d7d9f1f09ba5c40178e57d6b0d0f6986f9f4be13 100644 (file)
--- 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 b11e370c6418930db4b0f98c0a0077697d749ebd..a10fc05b8d77e88924e058abd85feff1afc252cd 100644 (file)
--- 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 001a6b01e29e7e30a1b33ee39fa2ad2a185ca0c7..0cf39964464a6a313f4f3dfbde2d3bba6c9d0157 100644 (file)
--- 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 1235695b2cdebf1bf7207bbfe8d7ecb9801a8922..c508764203de72050cf66bdf635b267862001bc3 100644 (file)
--- 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 {