mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-14 09:34:36 +02:00
Code Issues Releases Wiki 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
3 changed files with 11 additions and 17 deletions
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 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
$color-rgb: to-rgb($value); $color-rgb: to-rgb($value);
.text-bg-#{$color} { .text-bg-#{$color} {
color: color-contrast($value) !important; color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) !important; 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 { .bd-example-rounded-utils {
[class*="rounded"] { [class*="rounded"] {
margin: .25rem; margin: .25rem;
@@ -325,8 +319,8 @@
pre { pre {
padding: 0; padding: 0;
margin-top: .65rem; margin-top: .625rem;
margin-bottom: .65rem; margin-bottom: .625rem;
white-space: pre; white-space: pre;
background-color: transparent; background-color: transparent;
border: 0; 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: Or remove borders:
{{< example class="bd-example-border-utils bd-example-border-utils-0" >}} {{< example class="bd-example-border-utils" >}}
<span class="border-0"></span> <span class="border border-0"></span>
<span class="border-top-0"></span> <span class="border border-top-0"></span>
<span class="border-end-0"></span> <span class="border border-end-0"></span>
<span class="border-bottom-0"></span> <span class="border border-bottom-0"></span>
<span class="border-start-0"></span> <span class="border border-start-0"></span>
{{< /example >}} {{< /example >}}
## Color ## Color