Style dark components

This commit is contained in:
Jeremy Thomas
2019-10-18 20:29:40 -04:00
parent 6b09dcfcf0
commit 9209d1fe42
25 changed files with 1079 additions and 473 deletions

View File

@@ -5,7 +5,7 @@
.bd-figure
+block
align-items: center
border: 2px solid var(--#{$prefix}-scheme-main-ter)
border: 2px solid var(--#{$prefix}scheme-main-ter)
border-radius: $radius
display: flex
flex-direction: column
@@ -14,8 +14,8 @@
margin: 1em
figcaption
align-self: stretch
background-color: var(--#{$prefix}-scheme-main-ter)
color: var(--#{$prefix}-text-light)
background-color: var(--#{$prefix}scheme-main-ter)
color: var(--#{$prefix}text-light)
font-size: $size-small
padding: 1em
@@ -33,7 +33,7 @@
.bd-prev-next
align-items: flex-start
color: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
display: none
flex-grow: 0
flex-shrink: 0
@@ -45,7 +45,7 @@
width: 1.5rem
a
&:hover
background-color: var(--#{$prefix}-background)
background-color: var(--#{$prefix}background)
.bd-prev-next-bis
border-top: 2px solid $background
@@ -64,7 +64,7 @@
.bd-header
margin-bottom: $main-spacing
.subtitle
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
strong
color: currentColor
#meta
@@ -87,12 +87,12 @@
overflow: visible
ul,
a
border-bottom-color: var(--#{$prefix}-scheme-main-ter)
border-bottom-color: var(--#{$prefix}scheme-main-ter)
border-bottom-width: 2px
a
margin-bottom: -2px
li:not(.is-active) a:hover
border-bottom-color: var(--#{$prefix}-border)
border-bottom-color: var(--#{$prefix}border)
ul
flex-wrap: wrap
max-width: 100%
@@ -109,7 +109,7 @@
.bd-side,
.bd-side-background
background-color: var(--#{$prefix}-scheme-main-bis)
background-color: var(--#{$prefix}scheme-main-bis)
.bd-side
position: relative
@@ -128,19 +128,19 @@
margin-bottom: 0.5em
&.is-past
a
color: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
&.is-current
a
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
a
color: var(--#{$prefix}-text-light)
color: var(--#{$prefix}text-light)
&:hover
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
.bd-category
a
&:hover
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
&:not(:last-child)
margin-bottom: 0.5rem
&.is-active
@@ -156,7 +156,7 @@
.bd-category-toggle
+overlay
align-items: center
color: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
display: flex
justify-content: flex-end
.icon
@@ -174,10 +174,10 @@
vertical-align: text-bottom
.bd-category-name
color: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
position: relative
&.is-active
color: var(--#{$prefix}-link)
color: var(--#{$prefix}link)
.bd-mini-tag
margin-left: 0.5em
@@ -201,7 +201,7 @@
top: 0
.bd-anchors-title
color: var(--#{$prefix}-border-hover)
color: var(--#{$prefix}border-hover)
font-size: 0.875rem
font-weight: $weight-semibold
margin-bottom: 0.5rem
@@ -212,7 +212,7 @@
&:last-child
margin-top: 1em
a
color: var(--#{$prefix}-text-strong)
color: var(--#{$prefix}text-strong)
+touch
.bd-lead,
@@ -229,7 +229,7 @@
.bd-duo
display: flex
.bd-lead
background-color: var(--#{$prefix}-scheme-main)
background-color: var(--#{$prefix}scheme-main)
overflow: hidden
flex-grow: 1
flex-shrink: 1