Use CSS vars for docs

This commit is contained in:
Jeremy Thomas
2019-10-18 13:03:02 -04:00
parent 32a0d2187e
commit 867a306fc3
6 changed files with 635 additions and 527 deletions

View File

@@ -1,41 +1,52 @@
@import ../sass/utilities/initial-variables.sass
@import "../sass/utilities/initial-variables.sass"
// General colors
@media (prefers-color-scheme: light)
.bd-scheme-dark
display: none
$scheme-main: $black
$scheme-main-bis: $black-bis
$scheme-main-ter: $black-ter
$scheme-invert: $white
$scheme-invert-bis: $white-bis
$scheme-invert-ter: $white-ter
@media (prefers-color-scheme: dark)
.bd-scheme-light
display: none
html
background-color: $scheme-invert-bis
color: $scheme-main-ter
.bd-navbar
background-color: $scheme-invert-ter
&.has-shadow
box-shadow: none
.title
color: $scheme-main
$background: $black-ter
// // General colors
$border: $grey-darker
$border-hover: $grey-dark
$border-light: $grey-darker
$border-light-hover: $grey-dark
// $scheme-main: $black
// $scheme-main-bis: $black-bis
// $scheme-main-ter: $black-ter
// $scheme-invert: $white
// $scheme-invert-bis: $white-bis
// $scheme-invert-ter: $white-ter
// Text colors
// $background: $black-ter
$text: $grey-light
$text-invert: $grey-darker
$text-light: $grey
$text-strong: $white
// $border: $grey-darker
// $border-hover: $grey-dark
// $border-light: $grey-darker
// $border-light-hover: $grey-dark
// Link colors
// // Text colors
$link-hover: $white
$link-hover-border: $grey-dark
// $text: $grey-light
// $text-invert: $grey-darker
// $text-light: $grey
// $text-strong: $white
$link-focus: $white
$link-focus-border: $blue
// // Link colors
$link-active: $white
$link-active-border: $grey-light
// $link-hover: $white
// $link-hover-border: $grey-dark
.bd-navbar
background-color: $scheme-main-bis
// $link-focus: $white
// $link-focus-border: $blue
&.has-shadow
box-shadow: none
// $link-active: $white
// $link-active-border: $grey-light