clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new border-radius utilities (#36540)

Browse Source 
* Add new border-radius utilities

* Fix bundlewatch

* Fix bundlewatch again

Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Julien Déramond 2022-10-03 20:52:41 +02:00 committed by GitHub
parent fffe0553c2
commit b1185b91ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.bundlewatch.config.json
View File

@ -18,19 +18,19 @@
},
{
"path": "./dist/css/bootstrap-utilities.css",
"maxSize": "8.0 kB"
"maxSize": "8.25 kB"
},
{
"path": "./dist/css/bootstrap-utilities.min.css",
"maxSize": "7.25 kB"
"maxSize": "7.5 kB"
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "29.0 kB"
"maxSize": "29.25 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "27.0 kB"
"maxSize": "27.25 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",

48
scss/_utilities.scss
View File

@ -615,22 +615,62 @@ $utilities: map-merge(
"rounded-top": (
property: border-top-left-radius border-top-right-radius,
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": (
property: border-top-right-radius border-bottom-right-radius,
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": (
property: border-bottom-right-radius border-bottom-left-radius,
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": (
property: border-bottom-left-radius border-top-left-radius,
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-start utils-visibility

9
site/content/docs/5.2/utilities/borders.md
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" >}}
{{< /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
### Variables