Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Replace bulmaDarken and bulmaLighten instances

Browse Source
This commit is contained in:
Jeremy Thomas
2020-09-06 14:25:06 +01:00
parent 3ee48f2236
commit ed23e59334
11 changed files with 95 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
sass/helpers/color.sass
View File

@@ -5,7 +5,6 @@
--has-text-hover-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--has-text-hover-delta)})
--has-text-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-hover-#{$name}-l), var(--#{$name}-a))
color: var(--#{$name}, #{$color}) !important
.has-text-#{$name}
&:hover,
&:focus
color: var(--has-text-hover-color, #{bulmaDarken($color, 10%)}) !important
@@ -16,20 +15,26 @@
$color-dark: nth($pair, 4)
// Light
.has-text-#{$name}-light
--has-text-light-hover-delta: -10%
--has-text-light-hover-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--has-text-light-hover-delta)})
--has-text-light-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-light-hover-#{$name}-l), var(--#{$name}-a))
color: var(--#{$name}-light, #{$color-light}) !important
a.has-text-#{$name}-light
&:hover,
&:focus
color: bulmaDarken($color-light, 10%) !important
color: var(--has-text-light-hover-color, #{bulmaDarken($color-light, 10%)}) !important
.has-background-#{$name}-light
background-color: var(--#{$name}-light, #{$color-light}) !important
// Dark
.has-text-#{$name}-dark
--has-text-dark-hover-delta: 10%
--has-text-dark-hover-#{$name}-l: calc(#{var(--#{$name}-dark-l)} + #{var(--has-text-dark-hover-delta)})
--has-text-dark-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-dark-hover-#{$name}-l), var(--#{$name}-a))
color: var(--#{$name}-dark, #{$color-dark}) !important
a.has-text-#{$name}-dark
&:hover,
&:focus
color: bulmaLighten($color-dark, 10%) !important
color: var(--has-text-dark-hover-color, #{bulmaLighten($color-dark, 10%)}) !important
.has-background-#{$name}-dark
background-color: var(--#{$name}-dark, #{$color-dark}) !important