Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add new rounded sizes classes #28011

Merged
merged 12 commits into from
Jan 13, 2019
Merged

Add new rounded sizes classes #28011

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3df656f
update border-radius mixins
jt143 Jan 9, 2019
9db8dd9
Update rounded classes
jt143 Jan 9, 2019
b0ea667
update borders docs
jt143 Jan 9, 2019
55383f7
Revert touch of dist files
jt143 Jan 9, 2019
5d17a1f
Revert change of border-radius mixins
jt143 Jan 9, 2019
34ee61e
use !important in border-radius utilies classes
jt143 Jan 9, 2019
ef35cd2
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into add-n…
jt143 Jan 10, 2019
82f32c2
update border radius classes keep only rounded-lg and rounded-sm
jt143 Jan 10, 2019
c172d70
Merge branch 'v4-dev' into add-new-rounded-classes
jt143 Jan 10, 2019
fa7e959
Merge branch 'v4-dev' into add-new-rounded-classes
jt143 Jan 11, 2019
76ca7ad
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into add-n…
jt143 Jan 12, 2019
bdabe43
Merge branch 'add-new-rounded-classes' of https://github.com/jt143/bo…
jt143 Jan 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 12 additions & 0 deletions scss/utilities/_borders.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
14 changes: 14 additions & 0 deletions site/docs/4.2/utilities/borders.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}