just-the-docs/_sass/labels.scss
Matt Wang c21def31fa
Fix .label-* coloring bug (#1286)
Closes #1285.

(missed this in code review, which is also my bad! this is because the `:not` selector changes specificity, which in turn changes the cascade)
2023-06-27 03:13:29 -07:00

38 lines
760 B
SCSS

// Labels (not the form kind)
// this :not() prevents a style clash with Mermaid.js's
// diagram labels, which also use .label
// for more, see https://github.com/just-the-docs/just-the-docs/issues/1272
// and the accompanying PR
.label:not(g),
.label-blue:not(g) {
display: inline-block;
padding: 0.16em 0.56em;
margin-right: $sp-2;
margin-left: $sp-2;
color: $white;
text-transform: uppercase;
vertical-align: middle;
background-color: $blue-100;
@include fs-2;
border-radius: 12px;
}
.label-green:not(g) {
background-color: $green-200;
}
.label-purple:not(g) {
background-color: $purple-100;
}
.label-red:not(g) {
background-color: $red-200;
}
.label-yellow:not(g) {
color: $grey-dk-200;
background-color: $yellow-200;
}