Skip to content

Commit

Permalink
CSS: few proposals (#36406)
Browse files Browse the repository at this point in the history
* Something to try about `!important` in color-bg helper

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

* Having rounded numbers of px
  • Loading branch information
louismaximepiton committed May 20, 2022
1 parent 8959bf3 commit e2e107f
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 17 deletions.
6 changes: 3 additions & 3 deletions scss/helpers/_color-bg.scss
@@ -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 changes: 2 additions & 8 deletions site/assets/scss/_component-examples.scss
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions site/content/docs/5.2/utilities/borders.md
Expand Up @@ -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
Expand Down

0 comments on commit e2e107f

Please sign in to comment.