fix: dark mode handling

This commit is contained in:
Nicolas Giard
2018-12-01 23:03:14 -05:00
parent a7fc560573
commit 74aa09f39c
17 changed files with 156 additions and 78 deletions

View File

@@ -4,6 +4,10 @@
color: mc('grey', '800');
padding-bottom: 50px;
@at-root .theme--dark & {
color: mc('grey', '300');
}
// ---------------------------------
// HEADERS
// ---------------------------------
@@ -34,6 +38,10 @@
margin-top: 2rem;
position: relative;
@at-root .theme--dark & {
color: mc('blue', '500');
}
&::after {
content: '';
position: absolute;
@@ -54,6 +62,10 @@
color: mc('grey', '800');
position: relative;
@at-root .theme--dark & {
color: mc('grey', '500');
}
&::after {
content: '';
position: absolute;
@@ -62,6 +74,10 @@
width: 100%;
height: 1px;
background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
@at-root .theme--dark & {
background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
}
}
& + h3 {
@@ -74,6 +90,10 @@
color: mc('grey', '700');
position: relative;
@at-root .theme--dark & {
color: mc('grey', '600');
}
&::after {
content: '';
position: absolute;
@@ -100,6 +120,10 @@
height: 1px;
border: none;
background-color: mc('grey', '400');
@at-root .theme--dark & {
background-color: mc('grey', '700');
}
}
blockquote {
@@ -118,6 +142,13 @@
background-color: mc('blue', '50');
color: mc('blue', '800');
}
@at-root .theme--dark & {
background-color: mc('blue', '900');
background-image: radial-gradient(ellipse at top, mc('blue', '900'), darken(mc('blue', '900'), 5%));
border-color: mc('blue', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
&.is-warning {
background-color: mc('orange', '50');
@@ -129,6 +160,13 @@
background-color: mc('orange', '50');
color: mc('orange', '800');
}
@at-root .theme--dark & {
background-color: mc('orange', '900');
background-image: radial-gradient(ellipse at top, mc('orange', '900'), darken(mc('orange', '900'), 5%));
border-color: mc('orange', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
&.is-danger {
background-color: mc('red', '50');
@@ -140,6 +178,13 @@
background-color: mc('red', '50');
color: mc('red', '800');
}
@at-root .theme--dark & {
background-color: mc('red', '900');
background-image: radial-gradient(ellipse at top, mc('red', '900'), darken(mc('red', '900'), 5%));
border-color: mc('red', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
&.is-success {
background-color: mc('green', '50');
@@ -151,6 +196,13 @@
background-color: mc('green', '50');
color: mc('green', '800');
}
@at-root .theme--dark & {
background-color: mc('green', '900');
background-image: radial-gradient(ellipse at top, mc('green', '900'), darken(mc('green', '900'), 5%));
border-color: mc('green', '500');
box-shadow: 0 0 2px 0 mc('grey', '900');
}
}
}
@@ -235,6 +287,11 @@
font-size: .8rem;
line-height: 1rem;
text-align: center;
@at-root .theme--dark & {
background-color: mc('grey', '900');
border-color: mc('grey', '700');
}
}
&[checked] + label::before {