rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

CSS: few proposals (#36406)

Browse Source 
* Something to try about `!important` in color-bg helper

* Better understanding border utility `.border-*-0`

* Having rounded numbers of px
This commit is contained in:
Louis-Maxime Piton 2022-05-20 19:28:31 +02:00 committed by GitHub
parent 8959bf3f0b
commit e2e107fc72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/helpers/_color-bg.scss
View File

@ -1,10 +1,10 @@
// stylelint-disable declaration-no-important, function-name-case
// stylelint-disable function-name-case
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
$color-rgb: to-rgb($value);
.text-bg-#{$color} {
color: color-contrast($value) !important;
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) !important;
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}

10
site/assets/scss/_component-examples.scss
View File

@ -257,12 +257,6 @@
}
}
.bd-example-border-utils-0 {
[class^="border"] {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
}
}
.bd-example-rounded-utils {
[class*="rounded"] {
margin: .25rem;
@ -325,8 +319,8 @@
pre {
padding: 0;
margin-top: .65rem;
margin-bottom: .65rem;
margin-top: .625rem;
margin-bottom: .625rem;
white-space: pre;
background-color: transparent;
border: 0;

12
site/content/docs/5.2/utilities/borders.md
View File

@ -26,12 +26,12 @@ Add borders to custom elements:
Or remove borders:
{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-0"></span>
{{< example class="bd-example-border-utils" >}}
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
{{< /example >}}
## Color