mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-21 10:37:12 +00:00
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 <xhmikosr@gmail.com>
This commit is contained in:
parent
a108e2bbf8
commit
241f910dc5
@ -497,11 +497,12 @@ $utilities: map-merge(
|
|||||||
class: rounded,
|
class: rounded,
|
||||||
values: (
|
values: (
|
||||||
null: $border-radius,
|
null: $border-radius,
|
||||||
sm: $border-radius-sm,
|
|
||||||
lg: $border-radius-lg,
|
|
||||||
circle: 50%,
|
|
||||||
pill: $rounded-pill,
|
|
||||||
0: 0,
|
0: 0,
|
||||||
|
1: $border-radius-sm,
|
||||||
|
2: $border-radius,
|
||||||
|
3: $border-radius-lg,
|
||||||
|
circle: 50%,
|
||||||
|
pill: $border-radius-pill
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
"rounded-top": (
|
"rounded-top": (
|
||||||
|
@ -345,11 +345,6 @@ $container-padding-x: $grid-gutter-width !default;
|
|||||||
// Define common padding and border radius sizes and more.
|
// Define common padding and border radius sizes and more.
|
||||||
|
|
||||||
$border-width: 1px !default;
|
$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: (
|
$border-widths: (
|
||||||
0: 0,
|
0: 0,
|
||||||
1: 1px,
|
1: 1px,
|
||||||
@ -359,7 +354,12 @@ $border-widths: (
|
|||||||
5: 5px
|
5: 5px
|
||||||
) !default;
|
) !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: 0 .5rem 1rem rgba($black, .15) !default;
|
||||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
|
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
|
||||||
|
@ -43,7 +43,7 @@ Change the border color using utilities built on our theme colors.
|
|||||||
<span class="border border-white"></span>
|
<span class="border border-white"></span>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
### Border-width
|
## Border-width
|
||||||
|
|
||||||
{{< example class="bd-example-border-utils" >}}
|
{{< example class="bd-example-border-utils" >}}
|
||||||
<span class="border border-1"></span>
|
<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-left" title="Example left rounded image" >}}
|
||||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round 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="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 >}}
|
{{< /example >}}
|
||||||
|
|
||||||
|
### Sizes
|
||||||
|
|
||||||
## Sizes
|
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.
|
||||||
|
|
||||||
Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
|
|
||||||
|
|
||||||
{{< example class="bd-example-rounded-utils" >}}
|
{{< 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-0" title="Example non-rounded image" >}}
|
||||||
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large 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 >}}
|
{{< /example >}}
|
||||||
|
Loading…
Reference in New Issue
Block a user