Skip to content

Commit

Permalink
Adjust border-radius values and add some new utilities
Browse files Browse the repository at this point in the history
- Updates global border-radius values for a more modern appearance
- New .fw-semibold
- New .rounded-4 and .rounded-5
  • Loading branch information
mdo committed Mar 9, 2022
1 parent 3ef6a43 commit 42d66a4
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 3 deletions.
1 change: 1 addition & 0 deletions .cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
"roboto",
"RTLCSS",
"ruleset",
"semibold",
"screenreaders",
"scrollbars",
"scrollspy",
Expand Down
3 changes: 3 additions & 0 deletions scss/_utilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ $utilities: map-merge(
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
semibold: $font-weight-semibold,
bolder: $font-weight-bolder
)
),
Expand Down Expand Up @@ -605,6 +606,8 @@ $utilities: map-merge(
1: $border-radius-sm,
2: $border-radius,
3: $border-radius-lg,
4: $border-radius-xl,
5: $border-radius-2xl,
circle: 50%,
pill: $border-radius-pill
)
Expand Down
9 changes: 6 additions & 3 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -488,9 +488,11 @@ $border-color: $gray-300 !default;
// scss-docs-end border-variables

// scss-docs-start border-radius-variables
$border-radius: .25rem !default;
$border-radius-sm: .2rem !default;
$border-radius-lg: .3rem !default;
$border-radius: .375rem !default;
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-2xl: 2rem !default;
$border-radius-pill: 50rem !default;
// scss-docs-end border-radius-variables

Expand Down Expand Up @@ -550,6 +552,7 @@ $font-size-lg: $font-size-base * 1.25 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;

Expand Down
2 changes: 2 additions & 0 deletions site/content/docs/5.1/utilities/borders.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,8 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
{{< 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" >}}
{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
{{< /example >}}

## Sass
Expand Down
1 change: 1 addition & 0 deletions site/content/docs/5.1/utilities/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
{{< example >}}
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
Expand Down

0 comments on commit 42d66a4

Please sign in to comment.