mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 10:52:19 +01:00
Adjust border-radius values and add some new utilities
- Updates global border-radius values for a more modern appearance - New .fw-semibold - New .rounded-4 and .rounded-5
This commit is contained in:
parent
63145c8bc6
commit
c73480c636
@ -81,6 +81,7 @@
|
|||||||
"roboto",
|
"roboto",
|
||||||
"RTLCSS",
|
"RTLCSS",
|
||||||
"ruleset",
|
"ruleset",
|
||||||
|
"semibold",
|
||||||
"screenreaders",
|
"screenreaders",
|
||||||
"scrollbars",
|
"scrollbars",
|
||||||
"scrollspy",
|
"scrollspy",
|
||||||
|
@ -478,6 +478,7 @@ $utilities: map-merge(
|
|||||||
lighter: $font-weight-lighter,
|
lighter: $font-weight-lighter,
|
||||||
normal: $font-weight-normal,
|
normal: $font-weight-normal,
|
||||||
bold: $font-weight-bold,
|
bold: $font-weight-bold,
|
||||||
|
semibold: $font-weight-semibold,
|
||||||
bolder: $font-weight-bolder
|
bolder: $font-weight-bolder
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
@ -605,6 +606,8 @@ $utilities: map-merge(
|
|||||||
1: $border-radius-sm,
|
1: $border-radius-sm,
|
||||||
2: $border-radius,
|
2: $border-radius,
|
||||||
3: $border-radius-lg,
|
3: $border-radius-lg,
|
||||||
|
4: $border-radius-xl,
|
||||||
|
5: $border-radius-2xl,
|
||||||
circle: 50%,
|
circle: 50%,
|
||||||
pill: $border-radius-pill
|
pill: $border-radius-pill
|
||||||
)
|
)
|
||||||
|
@ -488,9 +488,11 @@ $border-color: $gray-300 !default;
|
|||||||
// scss-docs-end border-variables
|
// scss-docs-end border-variables
|
||||||
|
|
||||||
// scss-docs-start border-radius-variables
|
// scss-docs-start border-radius-variables
|
||||||
$border-radius: .25rem !default;
|
$border-radius: .375rem !default;
|
||||||
$border-radius-sm: .2rem !default;
|
$border-radius-sm: .25rem !default;
|
||||||
$border-radius-lg: .3rem !default;
|
$border-radius-lg: .5rem !default;
|
||||||
|
$border-radius-xl: 1rem !default;
|
||||||
|
$border-radius-2xl: 2rem !default;
|
||||||
$border-radius-pill: 50rem !default;
|
$border-radius-pill: 50rem !default;
|
||||||
// scss-docs-end border-radius-variables
|
// scss-docs-end border-radius-variables
|
||||||
|
|
||||||
@ -550,6 +552,7 @@ $font-size-lg: $font-size-base * 1.25 !default;
|
|||||||
$font-weight-lighter: lighter !default;
|
$font-weight-lighter: lighter !default;
|
||||||
$font-weight-light: 300 !default;
|
$font-weight-light: 300 !default;
|
||||||
$font-weight-normal: 400 !default;
|
$font-weight-normal: 400 !default;
|
||||||
|
$font-weight-semibold: 600 !default;
|
||||||
$font-weight-bold: 700 !default;
|
$font-weight-bold: 700 !default;
|
||||||
$font-weight-bolder: bolder !default;
|
$font-weight-bolder: bolder !default;
|
||||||
|
|
||||||
|
@ -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-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-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-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 >}}
|
{{< /example >}}
|
||||||
|
|
||||||
## Sass
|
## Sass
|
||||||
|
@ -89,6 +89,7 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
|
|||||||
{{< example >}}
|
{{< example >}}
|
||||||
<p class="fw-bold">Bold text.</p>
|
<p class="fw-bold">Bold text.</p>
|
||||||
<p class="fw-bolder">Bolder weight text (relative to the parent element).</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-normal">Normal weight text.</p>
|
||||||
<p class="fw-light">Light weight text.</p>
|
<p class="fw-light">Light weight text.</p>
|
||||||
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
|
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user