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

Add outlined button with css variables

Browse Source
This commit is contained in:
Jeremy Thomas
2019-09-20 20:02:53 +01:00
parent 4be21d8b75
commit b6f9893f74
5 changed files with 930 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
sass/utilities/derived-variables.sass
View File

@@ -86,14 +86,27 @@ $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@function getLightnessColor($color, $l)
@if type-of($color) == 'color'
@if lightness($color) > $lightness
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background
@function findLightColor($color)
@if type-of($color) == 'color'
@return change-color($color, $lightness: 96%)
$l: 96%
@if lightness($color) > 96%
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $background
@function findDarkColor($color)
@if type-of($color) == 'color'
@return change-color($color, $lightness: 29%)
$l: 29%
@if lightness($color) < 29%
$l: lightness($color)
@return change-color($color, $lightness: $l)
@return $text-strong
=css-variable($color, $name, $cssvar-invert)
@@ -101,12 +114,14 @@ $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
$saturation: saturation($color)
$lightness: lightness($color)
$base: "#{$prefix}#{$name}"
--#{$base}-h: #{$hue}
--#{$base}-s: #{$saturation}
--#{$base}-l: #{$lightness}
--#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
--#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
--#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
--#{$base}-shadow: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
$light: findLightColor($color)
--#{$base}-light: #{$light}