mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add HSL CSS Variables generator
This commit is contained in:
Jeremy Thomas
parent
a6ce51cd3f
commit
d2f8b5c8eb
@ -97,3 +97,58 @@ $message-colors: $colors !default
|
||||
background-color: $message-body-pre-background-color
|
||||
pre code
|
||||
background-color: $message-body-pre-code-background-color
|
||||
|
||||
.vmessage-header
|
||||
@extend .message-header
|
||||
background-color: var(--header-background-color)
|
||||
border-top-left-radius: $message-radius
|
||||
border-top-right-radius: $message-radius
|
||||
color: var(--header-color)
|
||||
&:hover
|
||||
background-color: var(--header-background-color-hover)
|
||||
&:active
|
||||
background-color: var(--header-background-color-active)
|
||||
& + .vmessage-body
|
||||
border-width: $message-header-body-border-width
|
||||
border-top-left-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.vmessage-body
|
||||
@extend .message-body
|
||||
border-color: var(--body-border-color)
|
||||
color: var(--body-color)
|
||||
&:hover
|
||||
background-color: var(--background-color-hover)
|
||||
color: var(--body-color-hover)
|
||||
&:active
|
||||
background-color: var(--background-color-active)
|
||||
color: var(--body-color-active)
|
||||
|
||||
.vmessage
|
||||
--background-color: #{$message-background-color}
|
||||
--header-background-color: #{$message-header-background-color}
|
||||
--header-color: #{$message-header-color}
|
||||
--body-border-color: #{$message-body-border-color}
|
||||
--body-color: #{$message-body-color}
|
||||
background-color: var(--background-color)
|
||||
border-radius: $message-radius
|
||||
margin-bottom: 1.5rem
|
||||
strong
|
||||
color: currentColor
|
||||
a:not(.button):not(.tag):not(.dropdown-item)
|
||||
color: currentColor
|
||||
text-decoration: underline
|
||||
@each $name, $trio in $colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--background-color: var(--#{$base}-light)
|
||||
--background-color-hover: var(--#{$base}-light-hover)
|
||||
--background-color-active: var(--#{$base}-light-active)
|
||||
--header-background-color: var(--#{$base})
|
||||
--header-background-color-hover: var(--#{$base}-hover)
|
||||
--header-background-color-active: var(--#{$base}-active)
|
||||
--header-color: var(--#{$base}-invert)
|
||||
--body-border-color: var(--#{$base})
|
||||
--body-color: var(--#{$base}-dark)
|
||||
--body-color-hover: var(--#{$base}-dark-hover)
|
||||
--body-color-active: var(--#{$base}-dark-active)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
$button-color: $text-strong !default
|
||||
$button-color-invert: $white !default
|
||||
$button-background-color: $scheme-main !default
|
||||
$button-family: false !default
|
||||
|
||||
@ -23,6 +24,12 @@ $button-text-color: $text !default
|
||||
$button-text-decoration: underline !default
|
||||
$button-text-hover-background-color: $background !default
|
||||
$button-text-hover-color: $text-strong !default
|
||||
$button-text-focus-background-color: $border-light !default
|
||||
$button-text-focus-border-color: $border !default
|
||||
$button-text-focus-color: $text-strong !default
|
||||
$button-text-focus-box-shadow-color: $border-light !default
|
||||
$button-text-active-background-color: $border-light !default
|
||||
$button-text-active-color: $text-strong !default
|
||||
|
||||
$button-disabled-background-color: $scheme-main !default
|
||||
$button-disabled-border-color: $border !default
|
||||
@ -321,3 +328,206 @@ $button-static-border-color: $border !default
|
||||
.button:not(.is-fullwidth)
|
||||
margin-left: 0.25rem
|
||||
margin-right: 0.25rem
|
||||
|
||||
.vbuttons
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1rem
|
||||
.vbutton
|
||||
margin-right: 1em
|
||||
|
||||
.vbutton
|
||||
--background-color: #{$button-background-color}
|
||||
--border-color: #{$button-border-color}
|
||||
--color: #{$button-color}
|
||||
--hover-border-color: #{$button-hover-border-color}
|
||||
--hover-color: #{$button-hover-color}
|
||||
--focus-border-color: #{$button-focus-border-color}
|
||||
--focus-color: #{$button-focus-color}
|
||||
--focus-box-shadow-color: #{$button-focus-box-shadow-color}
|
||||
--active-border-color: #{$button-active-border-color}
|
||||
--active-color: #{$button-active-color}
|
||||
--outlined-color: #{$button-color}
|
||||
--outlined-hover-background-color: #{$button-color}
|
||||
--outlined-hover-color: #{$button-color-invert}
|
||||
--outlined-active-background-color: #{darken($button-color, 5%)}
|
||||
--outlined-active-color: #{$button-color-invert}
|
||||
--outlined-focus-box-shadow-color: #{$border}
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
background-color: var(--background-color)
|
||||
border-color: var(--border-color)
|
||||
border-width: $button-border-width
|
||||
color: var(--color)
|
||||
cursor: pointer
|
||||
@if $button-family
|
||||
font-family: $button-family
|
||||
justify-content: center
|
||||
padding-bottom: $button-padding-vertical
|
||||
padding-left: $button-padding-horizontal
|
||||
padding-right: $button-padding-horizontal
|
||||
padding-top: $button-padding-vertical
|
||||
text-align: center
|
||||
white-space: nowrap
|
||||
strong
|
||||
color: inherit
|
||||
.icon
|
||||
&,
|
||||
&.is-small,
|
||||
&.is-medium,
|
||||
&.is-large
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
&:first-child:not(:last-child)
|
||||
margin-left: calc(-0.375em - #{$button-border-width})
|
||||
margin-right: 0.1875em
|
||||
&:last-child:not(:first-child)
|
||||
margin-left: 0.1875em
|
||||
margin-right: calc(-0.375em - #{$button-border-width})
|
||||
&:first-child:last-child
|
||||
margin-left: calc(-0.375em - #{$button-border-width})
|
||||
margin-right: calc(-0.375em - #{$button-border-width})
|
||||
&:hover,
|
||||
&.is-hovered
|
||||
background-color: var(--hover-background-color)
|
||||
border-color: var(--hover-border-color)
|
||||
color: var(--hover-color)
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: var(--focus-border-color)
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size #{var(--focus-box-shadow-color)}
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: var(--active-background-color)
|
||||
border-color: var(--active-border-color)
|
||||
color: var(--active-color)
|
||||
&.is-outlined
|
||||
--background-color: transparent
|
||||
--border-color: #{$button-color}
|
||||
--color: #{$button-color}
|
||||
--hover-background-color: #{$button-color}
|
||||
--hover-color: #{$button-color-invert}
|
||||
--active-background-color: #{darken($button-color, 5%)}
|
||||
--active-color: #{$button-color-invert}
|
||||
--focus-border-color: #{$button-color}
|
||||
--focus-box-shadow-color: #{$border}
|
||||
&:not(:hover):not(.is-hovered):not(:active):not(.is-active)
|
||||
background-color: transparent
|
||||
&:not(.is-inverted):not([disabled])
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: transparent
|
||||
&.is-outlined.is-inverted
|
||||
background-color: transparent
|
||||
&.is-text
|
||||
--background-color: transparent
|
||||
--border-color: transparent
|
||||
--color: #{$text}
|
||||
--hover-background-color: #{$button-text-hover-background-color}
|
||||
--hover-border-color: transparent
|
||||
--hover-color: #{$button-text-hover-color}
|
||||
--focus-background-color: #{$button-text-focus-background-color}
|
||||
--focus-border-color: transparent
|
||||
--focus-border-color: #{$button-text-focus-border-color}
|
||||
--focus-color: #{$button-text-focus-color}
|
||||
--focus-box-shadow-color: #{$button-text-focus-box-shadow-color}
|
||||
--active-background-color: #{$button-text-active-background-color}
|
||||
--active-border-color: transparent
|
||||
--active-color: #{$button-text-active-color}
|
||||
text-decoration: underline
|
||||
@each $name, $trio in $colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--background-color: var(--#{$base})
|
||||
--border-color: transparent
|
||||
--color: var(--#{$base}-invert)
|
||||
--hover-background-color: var(--#{$base}-hover)
|
||||
--hover-border-color: transparent
|
||||
--hover-color: var(--#{$base}-invert)
|
||||
--focus-background-color: var(--#{$base})
|
||||
--focus-border-color: transparent
|
||||
--focus-color: var(--#{$base}-invert)
|
||||
--focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
|
||||
--active-background-color: var(--#{$base}-active)
|
||||
--active-border-color: transparent
|
||||
--active-color: var(--#{$base}-invert)
|
||||
--outlined-color: var(--#{$base})
|
||||
&.is-inverted
|
||||
--background-color: var(--#{$base}-invert)
|
||||
--color: var(--#{$base})
|
||||
--hover-background-color: var(--#{$base}-invert)
|
||||
--hover-color: var(--#{$base}-hover)
|
||||
--active-background-color: var(--#{$base}-invert)
|
||||
--active-color: var(--#{$base}-active)
|
||||
&.is-outlined
|
||||
--background-color: transparent
|
||||
--border-color: var(--#{$base})
|
||||
--color: var(--#{$base})
|
||||
--hover-background-color: var(--#{$base})
|
||||
--focus-border-color: var(--#{$base})
|
||||
&.is-outlined.is-inverted
|
||||
--background-color: transparent
|
||||
--border-color: var(--#{$base}-invert)
|
||||
--color: var(--#{$base}-invert)
|
||||
--hover-border-color: var(--#{$base}-hover)
|
||||
--hover-color: var(--#{$base}-invert)
|
||||
--active-border-color: var(--#{$base}-active)
|
||||
--active-color: var(--#{$base}-active)
|
||||
--focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 14%)
|
||||
&.is-light
|
||||
--background-color: var(--#{$base}-light)
|
||||
--border-color: transparent
|
||||
--color: var(--#{$base}-dark)
|
||||
--hover-background-color: var(--#{$base}-light-hover)
|
||||
--hover-border-color: transparent
|
||||
--hover-color: var(--#{$base}-dark)
|
||||
--focus-background-color: var(--#{$base}-light)
|
||||
--focus-border-color: transparent
|
||||
--focus-color: var(--#{$base}-dark)
|
||||
--focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
|
||||
--active-background-color: var(--#{$base}-light-active)
|
||||
--active-border-color: transparent
|
||||
--active-color: var(--#{$base}-dark)
|
||||
// Sizes
|
||||
&.is-small
|
||||
+button-small
|
||||
&.is-normal
|
||||
+button-normal
|
||||
&.is-medium
|
||||
+button-medium
|
||||
&.is-large
|
||||
+button-large
|
||||
// Modifiers
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
--hover-background-color: var(--background-color) !important
|
||||
--hover-border-color: var(--border-color) !important
|
||||
--hover-color: var(--color) !important
|
||||
opacity: $button-disabled-opacity
|
||||
&.is-fullwidth
|
||||
display: flex
|
||||
width: 100%
|
||||
&.is-loading
|
||||
color: transparent !important
|
||||
pointer-events: none
|
||||
&::after
|
||||
@extend %loader
|
||||
+center(1em)
|
||||
border-color: transparent transparent var(--color) var(--color) !important
|
||||
position: absolute !important
|
||||
&.is-static
|
||||
--background-color: #{$button-static-background-color}
|
||||
--border-color: #{$button-static-border-color}
|
||||
--color: #{$button-static-color}
|
||||
box-shadow: none
|
||||
pointer-events: none
|
||||
&.is-rounded
|
||||
border-radius: $radius-rounded
|
||||
padding-left: 1.25em
|
||||
padding-right: 1.25em
|
||||
|
||||
@ -41,3 +41,23 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
&.is-light
|
||||
background-color: $color-light
|
||||
color: $color-dark
|
||||
|
||||
.vnotification
|
||||
@extend %block
|
||||
background-color: var(--background-color)
|
||||
border-radius: $notification-radius
|
||||
color: var(--color)
|
||||
padding: $notification-padding
|
||||
position: relative
|
||||
& > .delete
|
||||
position: absolute
|
||||
right: 0.5rem
|
||||
top: 0.5rem
|
||||
@each $name, $trio in $colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--background-color: var(--#{$base})
|
||||
--color: var(--#{$base}-invert)
|
||||
&.is-light
|
||||
--background-color: var(--#{$base}-light)
|
||||
--color: var(--#{$base}-dark)
|
||||
|
||||
@ -46,6 +46,41 @@ $tag-delete-margin: 1px !default
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
|
||||
.vtags
|
||||
align-items: center
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
.vtag
|
||||
&:not(:last-child)
|
||||
margin-right: 0.5rem
|
||||
|
||||
.vtag
|
||||
--background-color: #{$tag-background-color}
|
||||
--color: #{$tag-color}
|
||||
align-items: center
|
||||
background-color: var(--background-color)
|
||||
border-radius: $tag-radius
|
||||
color: var(--color)
|
||||
display: inline-flex
|
||||
font-size: $size-small
|
||||
height: 2em
|
||||
justify-content: center
|
||||
line-height: 1.5
|
||||
padding-left: 0.75em
|
||||
padding-right: 0.75em
|
||||
white-space: nowrap
|
||||
@each $name, $trio in $colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--background-color: var(--#{$base})
|
||||
--color: var(--#{$base}-invert)
|
||||
&.is-light
|
||||
--background-color: var(--#{$base}-light)
|
||||
--color: var(--#{$base}-dark)
|
||||
|
||||
.tag:not(body)
|
||||
align-items: center
|
||||
background-color: $tag-background-color
|
||||
|
||||
@ -104,3 +104,55 @@ $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
|
||||
@function getLightness($color)
|
||||
$min: 96%
|
||||
@if type-of($color) == 'color'
|
||||
@return max($min, lightness($color))
|
||||
@return $min
|
||||
|
||||
@function getDarkness($color)
|
||||
$min: 29%
|
||||
@if type-of($color) == 'color'
|
||||
$luminance: colorLuminance($color)
|
||||
$luminance-delta: (0.53 - $luminance)
|
||||
$target: round($min + ($luminance-delta * 53))
|
||||
@return max($min, $target)
|
||||
@return $max
|
||||
|
||||
=css-variable($color, $name, $cssvar-invert)
|
||||
$hue: hue($color)
|
||||
$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%))
|
||||
|
||||
$l: getLightness($color)
|
||||
--#{$base}-light: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$l})
|
||||
--#{$base}-light-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$l - 2%})
|
||||
--#{$base}-light-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$l - 4%})
|
||||
|
||||
$d: getDarkness($color)
|
||||
--#{$base}-dark: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$d})
|
||||
--#{$base}-dark-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$d - 5%})
|
||||
--#{$base}-dark-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$d - 10%})
|
||||
|
||||
@if $cssvar-invert
|
||||
--#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
|
||||
@else
|
||||
--#{$base}-invert: #{findColorInvert($color)}
|
||||
|
||||
\:root
|
||||
@each $name, $components in $colors
|
||||
$color: nth($components, 1)
|
||||
$color-invert: nth($components, 2)
|
||||
$cssvar-invert: false
|
||||
@if length($components) >= 5
|
||||
$cssvar-invert: nth($components, 5)
|
||||
+css-variable($color, $name, $cssvar-invert)
|
||||
|
||||
@ -71,7 +71,9 @@ $radius: 4px !default
|
||||
$radius-large: 6px !default
|
||||
$radius-rounded: 290486px !default
|
||||
$speed: 86ms !default
|
||||
$prefix: "bulma-"
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default
|
||||
$css-variables: true !default
|
||||
|
||||
Loading…
Reference in New Issue
Block a user