rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Add new rounded sizes classes (#28011)

Browse Source 
* 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
This commit is contained in:
Justin 2019-01-14 06:49:25 +11:00 committed by Mark Otto
parent fd4d426e51
commit 8f5abf0ab0
2 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/utilities/_borders.scss
View File

@ -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;
}

14
site/docs/4.2/utilities/borders.md
View File

@ -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 %}