diff options
| author | sts-ryan-holton <[email protected]> | 2018-11-05 17:19:00 +0000 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-11-05 19:19:00 +0200 |
| commit | 89eef046ef9faae0ce782a37857e10e96228d6fd (patch) | |
| tree | b8d6d3c9c3116e7a0614916598834d4042f265cc | |
| parent | 5c03f23f8523132aee17dbebe50f6def24d3f4c8 (diff) | |
| download | bootstrap-89eef046ef9faae0ce782a37857e10e96228d6fd.tar.xz bootstrap-89eef046ef9faae0ce782a37857e10e96228d6fd.zip | |
Add new `.rounded-pill` utility (#27339)
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | scss/utilities/_borders.scss | 4 | ||||
| -rw-r--r-- | site/docs/4.1/utilities/borders.md | 2 |
3 files changed, 8 insertions, 0 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 1e6c32adc..e721c2a65 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; diff --git a/scss/utilities/_borders.scss b/scss/utilities/_borders.scss index b8832ef72..fb759c9ba 100644 --- a/scss/utilities/_borders.scss +++ b/scss/utilities/_borders.scss @@ -54,6 +54,10 @@ border-radius: 50% !important; } +.rounded-pill { + border-radius: $rounded-pill !important; +} + .rounded-0 { border-radius: 0 !important; } diff --git a/site/docs/4.1/utilities/borders.md b/site/docs/4.1/utilities/borders.md index e67cc41c9..c0f68eb58 100644 --- a/site/docs/4.1/utilities/borders.md +++ b/site/docs/4.1/utilities/borders.md @@ -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 %} |