mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

docs(theming): display contrast ratios in color swatches

Browse Source
This commit is contained in:
Gaël Poupard 2020-04-07 15:59:51 +02:00 committed by Gaël Poupard
parent a7e1b914ef
commit a0dd474bc6
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
site/assets/scss/_colors.scss
View File

@ -6,6 +6,37 @@
.swatch-#{$color} { .swatch-#{$color} {
color: color-contrast($value); color: color-contrast($value);
background-color: #{$value}; background-color: #{$value};
&::after {
$contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
$against-white: "#{contrast-ratio($value, $white)}";
$against-black: "#{contrast-ratio($value, $black)}";
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content:
str-slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4);
background-color: $value;
background-image:
linear-gradient(
to bottom,
transparent .25rem,
color-contrast($value) .25rem .75rem,
transparent .75rem 1.25rem,
$white 1.25rem 1.75rem,
transparent 1.75rem 2.25rem,
$black 2.25rem 2.75rem,
transparent 2.75rem
);
background-repeat: no-repeat;
background-size: .5rem 100%;
}
} }
} }