diff options
| author | Mark Otto <[email protected]> | 2020-10-30 13:42:11 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-10-30 22:42:11 +0200 |
| commit | 241f910dc51d164b0049bd1e50a7e85835bc55c5 (patch) | |
| tree | 5f1f8835c83b1a245f484d7e536a061294adecd2 | |
| parent | a108e2bbf821219a85d747fa2677cc9dde6432f1 (diff) | |
| download | bootstrap-241f910dc51d164b0049bd1e50a7e85835bc55c5.tar.xz bootstrap-241f910dc51d164b0049bd1e50a7e85835bc55c5.zip | |
Updated .rounded utilities (#31687)
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Small copy addition
* Add example modifier class for spacing
Co-authored-by: XhmikosR <[email protected]>
| -rw-r--r-- | scss/_utilities.scss | 9 | ||||
| -rw-r--r-- | scss/_variables.scss | 12 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/borders.md | 14 |
3 files changed, 18 insertions, 17 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 21ff56066..481eaa82f 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -497,11 +497,12 @@ $utilities: map-merge( class: rounded, values: ( null: $border-radius, - sm: $border-radius-sm, - lg: $border-radius-lg, - circle: 50%, - pill: $rounded-pill, 0: 0, + 1: $border-radius-sm, + 2: $border-radius, + 3: $border-radius-lg, + circle: 50%, + pill: $border-radius-pill ) ), "rounded-top": ( diff --git a/scss/_variables.scss b/scss/_variables.scss index c98c500a2..4c6c4dd21 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -345,11 +345,6 @@ $container-padding-x: $grid-gutter-width !default; // Define common padding and border radius sizes and more. $border-width: 1px !default; -$border-color: $gray-300 !default; - -$border-radius: .25rem !default; -$border-radius-sm: .2rem !default; -$border-radius-lg: .3rem !default; $border-widths: ( 0: 0, 1: 1px, @@ -359,7 +354,12 @@ $border-widths: ( 5: 5px ) !default; -$rounded-pill: 50rem !default; +$border-color: $gray-300 !default; + +$border-radius: .25rem !default; +$border-radius-sm: .2rem !default; +$border-radius-lg: .3rem !default; +$border-radius-pill: 50rem !default; $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md index ec2a7cbc0..ceb140ecb 100644 --- a/site/content/docs/5.0/utilities/borders.md +++ b/site/content/docs/5.0/utilities/borders.md @@ -43,7 +43,7 @@ Change the border color using utilities built on our theme colors. <span class="border border-white"></span> {{< /example >}} -### Border-width +## Border-width {{< example class="bd-example-border-utils" >}} <span class="border border-1"></span> @@ -65,15 +65,15 @@ Add classes to an element to easily round its corners. {{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}} {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}} {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}} -{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}} {{< /example >}} +### Sizes -## Sizes - -Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius. +Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `3`, and can be configured by modifying the utilities API. {{< example class="bd-example-rounded-utils" >}} -{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}} {{< /example >}} |