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

Style more button parts

Browse Source
This commit is contained in:
Jeremy Thomas
2020-09-01 20:02:57 +02:00
parent ff889b39fd
commit f85f5dea4e
34 changed files with 158 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
sass/elements/button.sass
View File

@@ -57,6 +57,8 @@ $button-colors: $colors !default
--button-hover-border-color: #{$button-hover-border-color}
--button-hover-color: #{$button-hover-color}
--button-focus-border-color: #{$button-focus-border-color}
--button-focus-box-shadow-size: #{$button-focus-box-shadow-size}
--button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
--button-focus-color: #{$button-focus-color}
--button-active-border-color: #{$button-active-border-color}
--button-active-color: #{$button-active-color}
@@ -71,7 +73,6 @@ $button-colors: $colors !default
--button-static-background-color: #{$button-static-background-color}
--button-static-border-color: #{$button-static-border-color}
--button-static-color: #{$button-static-color}
@extend %control
@extend %unselectable
background-color: var(--button-background-color)
@@ -147,14 +148,20 @@ $button-colors: $colors !default
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
--button-hover-background-l-delta: -2.5%
--button-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-hover-background-l-delta)})
--button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-hover-background-#{$name}-l), var(--#{$name}-a))
--button-active-background-l-delta: -5%
--button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
--button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
--button-invert-hover-background-l-delta: -5%
--button-invert-hover-background-#{$name}-l: calc(#{var(--#{$name}-invert-l)} + #{var(--button-invert-hover-background-l-delta)})
--button-invert-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-invert-hover-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--#{$name}, #{$color})
border-color: transparent
color: var(--#{$name}-invert, #{$color-invert})
&:hover,
&.is-hovered
--button-hover-background-l-delta: -2.5%
--button-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-hover-background-l-delta)})
--button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-hover-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--button-hover-background-color, #{bulmaDarken($color, 2.5%)})
border-color: transparent
color: var(--#{$name}-invert, #{$color-invert})
@@ -166,9 +173,6 @@ $button-colors: $colors !default
box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) bulmaRgba($color, 0.25)
&:active,
&.is-active
--button-active-background-l-delta: -5%
--button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
--button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--button-active-background-color, #{bulmaDarken($color, 5%)})
border-color: transparent
color: var(--#{$name}-invert, #{$color-invert})
@@ -246,16 +250,22 @@ $button-colors: $colors !default
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
--button-light-hover-background-l-delta: -2.5%
--button-light-hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-hover-background-l-delta)})
--button-light-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-hover-background-#{$name}-l), var(--#{$name}-a))
--button-light-active-background-l-delta: -5%
--button-light-active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-active-background-l-delta)})
--button-light-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-active-background-#{$name}-l), var(--#{$name}-a))
background-color: var(--#{$name}-light, #{$color-light})
color: var(--#{$name}-dark, #{$color-dark})
&:hover,
&.is-hovered
background-color: bulmaDarken($color-light, 2.5%)
background-color: var(--button-light-hover-background-color, #{bulmaDarken($color-light, 2.5%)})
border-color: transparent
color: var(--#{$name}-dark, #{$color-dark})
&:active,
&.is-active
background-color: bulmaDarken($color-light, 5%)
background-color: var(--button-light-active-background-color, #{bulmaDarken($color-light, 5%)})
border-color: transparent
color: var(--#{$name}-dark, #{$color-dark})
// Sizes