219 lines
6.7 KiB
Sass
219 lines
6.7 KiB
Sass
|
$button-color-dark: $grey-lighter !default
|
||
|
|
$button-background-color-dark: $black !default
|
||
|
|
|
||
|
|
$button-border-color-dark: $grey-darker !default
|
||
|
|
|
||
|
|
$button-hover-color-dark: $link-hover-dark !default
|
||
|
|
$button-hover-border-color-dark: $link-hover-border-dark !default
|
||
|
|
|
||
|
|
$button-focus-color-dark: $link-focus-dark !default
|
||
|
|
$button-focus-border-color-dark: $link-focus-border-dark !default
|
||
|
|
$button-focus-box-shadow-size: 0 0 0 0.125em !default
|
||
|
|
$button-focus-box-shadow-color-dark: rgba($link-dark, 0.25) !default
|
||
|
|
|
||
|
|
$button-active-color-dark: $link-active-dark !default
|
||
|
|
$button-active-border-color-dark: $link-active-border-dark !default
|
||
|
|
|
||
|
|
$button-text-color-dark: $text-dark !default
|
||
|
|
$button-text-hover-background-color-dark: $background-dark !default
|
||
|
|
$button-text-hover-color-dark: $text-strong-dark !default
|
||
|
|
|
||
|
|
$button-disabled-background-color-dark: $black !default
|
||
|
|
$button-disabled-border-color-dark: $grey-darker !default
|
||
|
|
|
||
|
|
$button-static-color-dark: $grey !default
|
||
|
|
$button-static-background-color-dark: $white-ter !default
|
||
|
|
$button-static-border-color-dark: $grey-darker !default
|
||
|
|
|
||
|
|
.button
|
||
|
|
background-color: $button-background-color-dark
|
||
|
|
border-color: $button-border-color-dark
|
||
|
|
color: $button-color-dark
|
||
|
|
// States
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
border-color: $button-hover-border-color-dark
|
||
|
|
color: $button-hover-color-dark
|
||
|
|
&:focus,
|
||
|
|
&.is-focused
|
||
|
|
border-color: $button-focus-border-color-dark
|
||
|
|
color: $button-focus-color-dark
|
||
|
|
&:not(:active)
|
||
|
|
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color-dark
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
border-color: $button-active-border-color-dark
|
||
|
|
color: $button-active-color-dark
|
||
|
|
// Colors
|
||
|
|
&.is-text
|
||
|
|
color: $button-text-color-dark
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered,
|
||
|
|
&:focus,
|
||
|
|
&.is-focused
|
||
|
|
background-color: $button-text-hover-background-color-dark
|
||
|
|
color: $button-text-hover-color-dark
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
background-color: darken($button-text-hover-background-color-dark, 5%)
|
||
|
|
color: $button-text-hover-color-dark
|
||
|
|
// Colors
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: darken(nth($pair, 1), 10%)
|
||
|
|
$color-invert: nth($pair, 2)
|
||
|
|
&.is-#{$name}
|
||
|
|
background-color: $color
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
background-color: darken($color, 2.5%)
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&:focus,
|
||
|
|
&.is-focused
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&:not(:active)
|
||
|
|
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
background-color: darken($color, 5%)
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: $color
|
||
|
|
border-color: transparent
|
||
|
|
box-shadow: none
|
||
|
|
&.is-inverted
|
||
|
|
background-color: $color-invert
|
||
|
|
color: $color
|
||
|
|
&:hover
|
||
|
|
background-color: darken($color-invert, 5%)
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: $color-invert
|
||
|
|
border-color: transparent
|
||
|
|
box-shadow: none
|
||
|
|
color: $color
|
||
|
|
&.is-loading
|
||
|
|
&::after
|
||
|
|
border-color: transparent transparent $color-invert $color-invert !important
|
||
|
|
&.is-outlined
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color
|
||
|
|
color: $color
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
background-color: $color
|
||
|
|
border-color: $color
|
||
|
|
color: $color-invert
|
||
|
|
&.is-loading
|
||
|
|
&::after
|
||
|
|
border-color: transparent transparent $color $color !important
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color
|
||
|
|
box-shadow: none
|
||
|
|
color: $color
|
||
|
|
&.is-inverted.is-outlined
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color-invert
|
||
|
|
color: $color-invert
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
background-color: $color-invert
|
||
|
|
color: $color
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color-invert
|
||
|
|
box-shadow: none
|
||
|
|
color: $color-invert
|
||
|
|
// Colors Dark
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
$color-invert: nth($pair, 2)
|
||
|
|
&.is-#{$name}-dark
|
||
|
|
background-color: $color
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
background-color: darken($color, 2.5%)
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&:focus,
|
||
|
|
&.is-focused
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&:not(:active)
|
||
|
|
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
background-color: darken($color, 5%)
|
||
|
|
border-color: transparent
|
||
|
|
color: $color-invert
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: $color
|
||
|
|
border-color: transparent
|
||
|
|
box-shadow: none
|
||
|
|
&.is-inverted
|
||
|
|
background-color: $color-invert
|
||
|
|
color: $color
|
||
|
|
&:hover
|
||
|
|
background-color: darken($color-invert, 5%)
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: $color-invert
|
||
|
|
border-color: transparent
|
||
|
|
box-shadow: none
|
||
|
|
color: $color
|
||
|
|
&.is-loading
|
||
|
|
&::after
|
||
|
|
border-color: transparent transparent $color-invert $color-invert !important
|
||
|
|
&.is-outlined
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color
|
||
|
|
color: $color
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
background-color: $color
|
||
|
|
border-color: $color
|
||
|
|
color: $color-invert
|
||
|
|
&.is-loading
|
||
|
|
&::after
|
||
|
|
border-color: transparent transparent $color $color !important
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color
|
||
|
|
box-shadow: none
|
||
|
|
color: $color
|
||
|
|
&.is-inverted.is-outlined
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color-invert
|
||
|
|
color: $color-invert
|
||
|
|
&:hover,
|
||
|
|
&:focus
|
||
|
|
background-color: $color-invert
|
||
|
|
color: $color
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: transparent
|
||
|
|
border-color: $color-invert
|
||
|
|
box-shadow: none
|
||
|
|
color: $color-invert
|
||
|
|
// Modifiers
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: $button-disabled-background-color-dark
|
||
|
|
border-color: $button-disabled-border-color-dark
|
||
|
|
&.is-static
|
||
|
|
background-color: $button-static-background-color-dark
|
||
|
|
border-color: $button-static-border-color-dark
|
||
|
|
color: $button-static-color-dark
|