Skip to content

Updated .rounded utilities #31687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
XhmikosR merged 8 commits into from
Oct 30, 2020
+18 −17
Merged

Updated .rounded utilities #31687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7af45bb
Updated rounded utilities to fix scale, but not rename anything else
mdo Sep 17, 2020
3b76255
Rename rounded-pill to border-radius-pill to match
mdo Oct 28, 2020
171f5b2
Updated rounded utilities to fix scale, but not rename anything else
mdo Sep 17, 2020
0db3126
Rename rounded-pill to border-radius-pill to match
mdo Oct 28, 2020
f9a67e3
Small copy addition
mdo Oct 29, 2020
42f70b4
Add example modifier class for spacing
mdo Oct 30, 2020
0720697
Merge branch 'new-rounded-utils' of https://github.com/twbs/bootstrap…
mdo Oct 30, 2020
26bb221
Merge branch 'main' into new-rounded-utils
XhmikosR Oct 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": (
Expand Down
12 changes: 6 additions & 6 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down
14 changes: 7 additions & 7 deletions site/content/docs/5.0/utilities/borders.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 >}}