Use var() notation

This commit is contained in:
Jeremy Thomas
2019-10-18 14:05:37 -04:00
parent 867a306fc3
commit 6b09dcfcf0
23 changed files with 390 additions and 228 deletions

View File

@@ -8,7 +8,7 @@
.default-ad
background-color: rgba(black, 0.3)
border-radius: 2px
color: $scheme-main
color: var(--#{$prefix}-scheme-main)
display: inline-block
font-size: 10px
font-weight: bold
@@ -16,10 +16,10 @@
text-transform: uppercase
vertical-align: top
& > a
background-color: $scheme-main
background-color: var(--#{$prefix}-scheme-main)
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)
color: $text
box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px rgba(var(--#{$prefix}-scheme-invert), 0.1)
color: var(--#{$prefix}-text)
display: block
line-height: 1.375
margin-top: 15px
@@ -29,9 +29,9 @@
position: relative
&:hover,
&:focus
box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px $link
box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}-link)
&:active
box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}-scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}-link)
span
display: block
.default-image
@@ -46,7 +46,7 @@
height: 40px
width: 40px
.default-title
color: $text-strong
color: var(--#{$prefix}-text-strong)
display: inline
font-weight: $weight-bold
&::after