mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Add new border-radius utilities

Browse Source
This commit is contained in:
Julien Déramond
2022-06-10 07:02:42 +02:00
parent 0a3864641b
commit 18b9f375c4
2 changed files with 53 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_utilities.scss
+44 -4
View File
@@ -614,22 +614,62 @@ $utilities: map-merge(
"rounded-top": ( "rounded-top": (
property: border-top-left-radius border-top-right-radius, property: border-top-left-radius border-top-right-radius,
class: rounded-top, class: rounded-top,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
"rounded-end": ( "rounded-end": (
property: border-top-right-radius border-bottom-right-radius, property: border-top-right-radius border-bottom-right-radius,
class: rounded-end, class: rounded-end,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
"rounded-bottom": ( "rounded-bottom": (
property: border-bottom-right-radius border-bottom-left-radius, property: border-bottom-right-radius border-bottom-left-radius,
class: rounded-bottom, class: rounded-bottom,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
"rounded-start": ( "rounded-start": (
property: border-bottom-left-radius border-top-left-radius, property: border-bottom-left-radius border-top-left-radius,
class: rounded-start, class: rounded-start,
values: (null: var(--#{$prefix}border-radius)) values: (
null: var(--#{$prefix}border-radius),
0: 0,
1: var(--#{$prefix}border-radius-sm),
2: var(--#{$prefix}border-radius),
3: var(--#{$prefix}border-radius-lg),
4: var(--#{$prefix}border-radius-xl),
5: var(--#{$prefix}border-radius-2xl),
circle: 50%,
pill: var(--#{$prefix}border-radius-pill)
)
), ),
// scss-docs-end utils-border-radius // scss-docs-end utils-border-radius
// scss-docs-start utils-visibility // scss-docs-start utils-visibility
site/content/docs/5.2/utilities/borders.md
+9
View File
@@ -139,6 +139,15 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}} {{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
{{< /example >}} {{< /example >}}
{{< example class="bd-example-rounded-utils" >}}
{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}}
{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}}
{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}}
{{< /example >}}
## CSS ## CSS
### Variables ### Variables