Permalink
Browse files

Add new `.rounded-pill` utility (#27339)

  • Loading branch information...
sts-ryan-holton authored and XhmikosR committed Nov 5, 2018
1 parent 5c03f23 commit 89eef046ef9faae0ce782a37857e10e96228d6fd
Showing with 8 additions and 0 deletions.
  1. +2 −0 scss/_variables.scss
  2. +4 −0 scss/utilities/_borders.scss
  3. +2 −0 site/docs/4.1/utilities/borders.md
@@ -244,6 +244,8 @@ $border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$rounded-pill: 50rem !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
@@ -54,6 +54,10 @@
border-radius: 50% !important;
}
.rounded-pill {
border-radius: $rounded-pill !important;
}
.rounded-0 {
border-radius: 0 !important;
}
@@ -61,6 +61,7 @@ Add classes to an element to easily round its corners.
<img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image">
<img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image">
<img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image">
<img data-src="holder.js/150x75" class="rounded-pill" alt="Rounded pill image">
<img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)">
</div>
@@ -71,5 +72,6 @@ Add classes to an element to easily round its corners.
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">
{% endhighlight %}

0 comments on commit 89eef04

Please sign in to comment.