mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add outlined button with css variables
This commit is contained in:
Jeremy Thomas
parent
4be21d8b75
commit
b6f9893f74
File diff suppressed because it is too large
Load Diff
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,4 +1,5 @@
|
||||
$button-color: $grey-darker !default
|
||||
$button-color-invert: $white !default
|
||||
$button-background-color: $white !default
|
||||
$button-family: false !default
|
||||
|
||||
@ -22,6 +23,12 @@ $button-active-border-color: $link-active-border !default
|
||||
$button-text-color: $text !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: $white !default
|
||||
$button-disabled-border-color: $grey-lighter !default
|
||||
@ -316,26 +323,100 @@ $button-static-border-color: $grey-lighter !default
|
||||
--cssvar-color: #{$button-color}
|
||||
--cssvar-hover-border-color: #{$button-hover-border-color}
|
||||
--cssvar-hover-color: #{$button-hover-color}
|
||||
--cssvar-focus-border-color: #{$button-focus-border-color}
|
||||
--cssvar-focus-color: #{$button-focus-color}
|
||||
--cssvar-focus-box-shadow-color: #{$button-focus-box-shadow-color}
|
||||
--cssvar-active-border-color: #{$button-active-border-color}
|
||||
--cssvar-active-color: #{$button-active-color}
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
--cssvar-outlined-color: #{$button-color}
|
||||
--cssvar-outlined-hover-background-color: #{$button-color}
|
||||
--cssvar-outlined-hover-color: #{$button-color-invert}
|
||||
--cssvar-outlined-active-background-color: #{darken($button-color, 5%)}
|
||||
--cssvar-outlined-active-color: #{$button-color-invert}
|
||||
--cssvar-outlined-focus-box-shadow-color: #{$border}
|
||||
@extend %control
|
||||
@extend %unselectable
|
||||
background-color: var(--cssvar-background-color)
|
||||
border-color: var(--cssvar-border-color)
|
||||
border-style: solid
|
||||
border-width: 1px
|
||||
border-width: $button-border-width
|
||||
color: var(--cssvar-color)
|
||||
cursor: pointer
|
||||
font-size: 1rem
|
||||
padding: 1em 2em
|
||||
outline: none
|
||||
&:hover
|
||||
padding: 1em 2em
|
||||
@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(--cssvar-hover-background-color)
|
||||
border-color: var(--cssvar-hover-border-color)
|
||||
color: var(--cssvar-hover-color)
|
||||
&:active
|
||||
&:focus,
|
||||
&.is-focused
|
||||
border-color: var(--cssvar-focus-border-color)
|
||||
// color: var(--cssvar-focus-color)
|
||||
&:not(:active)
|
||||
box-shadow: $button-focus-box-shadow-size #{var(--cssvar-focus-box-shadow-color)}
|
||||
&:active,
|
||||
&.is-active
|
||||
background-color: var(--cssvar-active-background-color)
|
||||
border-color: var(--cssvar-hover-border-color)
|
||||
color: var(--cssvar-hover-color)
|
||||
border-color: var(--cssvar-active-border-color)
|
||||
color: var(--cssvar-active-color)
|
||||
// &.is-outlined
|
||||
// background-color: transparent
|
||||
// border-color: var(--cssvar-outlined-color)
|
||||
// color: var(--cssvar-outlined-color)
|
||||
// &:hover,
|
||||
// &.is-hovered
|
||||
// background-color: var(--cssvar-outlined-hover-background-color)
|
||||
// border-color: transparent
|
||||
// color: var(--cssvar-outlined-hover-color)
|
||||
// &:active,
|
||||
// &.is-active
|
||||
// background-color: var(--cssvar-outlined-active-background-color)
|
||||
// border-color: transparent
|
||||
// color: var(--cssvar-outlined-active-color)
|
||||
&.is-outlined
|
||||
--cssvar-border-color: #{$button-color}
|
||||
--cssvar-color: #{$button-color}
|
||||
--cssvar-hover-background-color: #{$button-color}
|
||||
--cssvar-hover-color: #{$button-color-invert}
|
||||
--cssvar-active-background-color: #{darken($button-color, 5%)}
|
||||
--cssvar-active-color: #{$button-color-invert}
|
||||
--cssvar-focus-border-color: #{$button-color}
|
||||
--cssvar-focus-box-shadow-color: #{$border}
|
||||
&:not(:hover):not(.is-hovered):not(:active):not(.is-active)
|
||||
background-color: transparent
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: transparent
|
||||
&.is-light
|
||||
--cssvar-background-color: var(--cssvar-light-background-color)
|
||||
--cssvar-border-color: var(--cssvar-light-border-color)
|
||||
@ -357,39 +438,64 @@ $button-static-border-color: $grey-lighter !default
|
||||
--cssvar-active-border-color: var(--cssvar-dark-active-border-color)
|
||||
--cssvar-active-color: var(--cssvar-dark-active-color)
|
||||
&.is-text
|
||||
--cssvar-background-color: transparent
|
||||
--cssvar-border-color: transparent
|
||||
--cssvar-color: #{$text}
|
||||
--cssvar-hover-background-color: #{$button-text-hover-background-color}
|
||||
--cssvar-hover-border-color: transparent
|
||||
--cssvar-hover-color: #{$button-text-hover-color}
|
||||
--cssvar-focus-background-color: #{$button-text-focus-background-color}
|
||||
--cssvar-focus-border-color: transparent
|
||||
--cssvar-focus-border-color: #{$button-text-focus-border-color}
|
||||
--cssvar-focus-color: #{$button-text-focus-color}
|
||||
--cssvar-focus-box-shadow-color: #{$button-text-focus-box-shadow-color}
|
||||
--cssvar-active-background-color: #{$button-text-active-background-color}
|
||||
--cssvar-active-border-color: transparent
|
||||
--cssvar-active-color: #{$button-text-active-color}
|
||||
text-decoration: underline
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
color: $text
|
||||
text-decoration: underline
|
||||
box-shadow: none
|
||||
@each $name, $trio in $colors
|
||||
$base: "#{$prefix}#{$name}"
|
||||
&.is-#{$name}
|
||||
--cssvar-background-color: var(--#{$base})
|
||||
--cssvar-border-color: var(--#{$base})
|
||||
--cssvar-border-color: transparent
|
||||
--cssvar-color: var(--#{$base}-invert)
|
||||
--cssvar-hover-background-color: var(--#{$base}-hover)
|
||||
--cssvar-hover-border-color: var(--#{$base}-hover)
|
||||
--cssvar-hover-border-color: transparent
|
||||
--cssvar-hover-color: var(--#{$base}-invert)
|
||||
--cssvar-focus-background-color: var(--#{$base})
|
||||
--cssvar-focus-border-color: transparent
|
||||
--cssvar-focus-color: var(--#{$base}-invert)
|
||||
--cssvar-focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
|
||||
--cssvar-active-background-color: var(--#{$base}-active)
|
||||
--cssvar-active-border-color: var(--#{$base}-active)
|
||||
--cssvar-active-border-color: transparent
|
||||
--cssvar-active-color: var(--#{$base}-invert)
|
||||
&.is-light
|
||||
--cssvar-outlined-color: var(--#{$base})
|
||||
&.is-outlined
|
||||
--cssvar-border-color: var(--#{$base})
|
||||
--cssvar-color: var(--#{$base})
|
||||
--cssvar-hover-background-color: var(--#{$base})
|
||||
// --cssvar-hover-color: var(--#{$base}-invert)
|
||||
// --cssvar-active-background-color: var(--#{$base}-active)
|
||||
// --cssvar-active-color: var(--#{$base}-invert)
|
||||
// --cssvar-focus-border-color: var(--#{$base})
|
||||
// --cssvar-focus-box-shadow-color: var(--#{$base})
|
||||
&.is-#{$name}-light
|
||||
--cssvar-background-color: var(--#{$base}-light)
|
||||
--cssvar-border-color: var(--#{$base}-light)
|
||||
--cssvar-border-color: transparent
|
||||
--cssvar-color: var(--#{$base}-dark)
|
||||
--cssvar-hover-background-color: var(--#{$base}-light-hover)
|
||||
--cssvar-hover-border-color: var(--#{$base}-light-hover)
|
||||
--cssvar-hover-border-color: transparent
|
||||
--cssvar-hover-color: var(--#{$base}-dark)
|
||||
--cssvar-focus-background-color: var(--#{$base}-light)
|
||||
--cssvar-focus-border-color: transparent
|
||||
--cssvar-focus-color: var(--#{$base}-dark)
|
||||
--cssvar-focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
|
||||
--cssvar-active-background-color: var(--#{$base}-light-active)
|
||||
--cssvar-active-border-color: var(--#{$base}-light-active)
|
||||
--cssvar-active-border-color: transparent
|
||||
--cssvar-active-color: var(--#{$base}-dark)
|
||||
&.is-dark
|
||||
--cssvar-background-color: var(--#{$base}-dark)
|
||||
--cssvar-border-color: var(--#{$base}-dark)
|
||||
--cssvar-color: var(--#{$base}-light)
|
||||
--cssvar-hover-background-color: var(--#{$base}-dark-hover)
|
||||
--cssvar-hover-border-color: var(--#{$base}-dark-hover)
|
||||
--cssvar-hover-color: var(--#{$base}-light)
|
||||
--cssvar-active-background-color: var(--#{$base}-dark-active)
|
||||
--cssvar-active-border-color: var(--#{$base}-dark-active)
|
||||
--cssvar-active-color: var(--#{$base}-light)
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
display: inline-block
|
||||
max-width: 100%
|
||||
position: relative
|
||||
text-rendering: auto
|
||||
vertical-align: top
|
||||
&:not(.is-multiple)
|
||||
height: $input-height
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user