kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code 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 // Border-radius
// //
.rounded-sm {
border-radius: $border-radius-sm !important;
}
.rounded { .rounded {
border-radius: $border-radius !important; border-radius: $border-radius !important;
} }
.rounded-top { .rounded-top {
border-top-left-radius: $border-radius !important; border-top-left-radius: $border-radius !important;
border-top-right-radius: $border-radius !important; border-top-right-radius: $border-radius !important;
} }
.rounded-right { .rounded-right {
border-top-right-radius: $border-radius !important; border-top-right-radius: $border-radius !important;
border-bottom-right-radius: $border-radius !important; border-bottom-right-radius: $border-radius !important;
} }
.rounded-bottom { .rounded-bottom {
border-bottom-right-radius: $border-radius !important; border-bottom-right-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important;
} }
.rounded-left { .rounded-left {
border-top-left-radius: $border-radius !important; border-top-left-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important;
} }
.rounded-lg {
border-radius: $border-radius-lg !important;
}
.rounded-circle { .rounded-circle {
border-radius: 50% !important; 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-pill">
<img src="..." alt="..." class="rounded-0"> <img src="..." alt="..." class="rounded-0">
{% endhighlight %} {% 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 %}