Add new rounded sizes classes (#28011)

* update border-radius mixins

Add $enable-rounded as a keyword argument to border-raidus mixins

* Update rounded classes

- use border-radius mixins to repleace !important
- use true for $enable-rounded for rounded classes
- Add `.rounded-sm` and `.rounded-sm`  #27934

* update borders docs

* Revert touch of dist files

* Revert change of border-radius mixins

* use !important in border-radius utilies classes

* update border radius classes keep only rounded-lg and rounded-sm

diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss
index 78c9cb5b2d875c0df4534da6fdb4cb22acd3801f..302f6bf8490b04f36c9588303d7a7238482e6012 100644 (file)
--- a/scss/utilities/_borders.scss
+++ b/scss/utilities/_borders.scss
@@ -30,26 +30,38 @@
 // Border-radius
 //
 
+.rounded-sm {
+  border-radius: $border-radius-sm !important;
+}
+
 .rounded {
   border-radius: $border-radius !important;
 }
+
 .rounded-top {
   border-top-left-radius: $border-radius !important;
   border-top-right-radius: $border-radius !important;
 }
+
 .rounded-right {
   border-top-right-radius: $border-radius !important;
   border-bottom-right-radius: $border-radius !important;
 }
+
 .rounded-bottom {
   border-bottom-right-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
+
 .rounded-left {
   border-top-left-radius: $border-radius !important;
   border-bottom-left-radius: $border-radius !important;
 }
 
+.rounded-lg {
+  border-radius: $border-radius-lg !important;
+}
+
 .rounded-circle {
   border-radius: 50% !important;
 }

diff --git a/site/docs/4.2/utilities/borders.md b/site/docs/4.2/utilities/borders.md
index 0cf2f9c3c1f589f8a868910e17347151d77919a4..ebb59fb65161020d937cb6c96187c5d9c8a1eb5b 100644 (file)
--- a/site/docs/4.2/utilities/borders.md
+++ b/site/docs/4.2/utilities/borders.md
@@ -75,3 +75,17 @@ Add classes to an element to easily round its corners.
 <img src="..." alt="..." class="rounded-pill">
 <img src="..." alt="..." class="rounded-0">
 {% endhighlight %}
+
+## Sizes
+
+Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
+
+<div class="bd-example bd-example-images">
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-sm" title="Example small rounded image" -%}
+  {%- include icons/placeholder.svg width="75" height="75" class="rounded-lg" title="Example large rounded image" -%}
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="rounded-sm">
+<img src="..." alt="..." class="rounded-lg">
+{% endhighlight %}