rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Updated .rounded utilities (#31687)

Browse Source 
* 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 <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto 2020-10-30 13:42:11 -07:00 committed by GitHub
parent a108e2bbf8
commit 241f910dc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
scss/_utilities.scss
View File

@ -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": (

12
scss/_variables.scss
View File

@ -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;

14
site/content/docs/5.0/utilities/borders.md
View File

@ -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 >}}