237 lines
6.1 KiB
Sass
237 lines
6.1 KiB
Sass
|
$input-color-dark: $grey-lighter !default
|
||
|
|
$input-background-color-dark: $black !default
|
||
|
|
$input-border-color-dark: $grey-darker !default
|
||
|
|
$input-shadow-dark: inset 0 1px 2px rgba($white, 0.1) !default
|
||
|
|
$input-placeholder-color-dark: rgba($input-color-dark, 0.3) !default
|
||
|
|
|
||
|
|
$input-hover-color-dark: $grey-lighter !default
|
||
|
|
$input-hover-border-color-dark: $grey-dark !default
|
||
|
|
|
||
|
|
$input-focus-color-dark: $grey-lighter !default
|
||
|
|
$input-focus-border-color-dark: $link-dark !default
|
||
|
|
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
||
|
|
$input-focus-box-shadow-color-dark: rgba($link-dark, 0.25) !default
|
||
|
|
|
||
|
|
$input-disabled-color-dark: $text-dark !default
|
||
|
|
$input-disabled-background-color-dark: $background-dark !default
|
||
|
|
$input-disabled-border-color-dark: $background-dark !default
|
||
|
|
$input-disabled-placeholder-color-dark: rgba($input-disabled-color-dark, 0.3) !default
|
||
|
|
|
||
|
|
$input-arrow-dark: $link-dark !default
|
||
|
|
|
||
|
|
$input-icon-color-dark: $grey-darker !default
|
||
|
|
|
||
|
|
$file-border-color-dark: $border-dark !default
|
||
|
|
|
||
|
|
$file-cta-background-color-dark: $black-ter !default
|
||
|
|
$file-cta-color-dark: $grey-light !default
|
||
|
|
$file-cta-hover-color-dark: $grey-lighter !default
|
||
|
|
$file-cta-active-color-dark: $grey-lighter !default
|
||
|
|
|
||
|
|
$file-name-border-color-dark: $border-dark !default
|
||
|
|
|
||
|
|
$label-color-dark: $grey-lighter !default
|
||
|
|
|
||
|
|
=input
|
||
|
|
background-color: $input-background-color-dark
|
||
|
|
border-color: $input-border-color-dark
|
||
|
|
color: $input-color-dark
|
||
|
|
+placeholder
|
||
|
|
color: $input-placeholder-color-dark
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
border-color: $input-hover-border-color-dark
|
||
|
|
&:focus,
|
||
|
|
&.is-focused,
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
border-color: $input-focus-border-color-dark
|
||
|
|
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color-dark
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
background-color: $input-disabled-background-color-dark
|
||
|
|
border-color: $input-disabled-border-color-dark
|
||
|
|
color: $input-disabled-color-dark
|
||
|
|
+placeholder
|
||
|
|
color: $input-disabled-placeholder-color-dark
|
||
|
|
|
||
|
|
.input,
|
||
|
|
.textarea
|
||
|
|
+input
|
||
|
|
box-shadow: $input-shadow-dark
|
||
|
|
// Colors
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: darken(nth($pair, 1), 10%)
|
||
|
|
&.is-#{$name}
|
||
|
|
border-color: $color
|
||
|
|
&:focus,
|
||
|
|
&.is-focused,
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||
|
|
// Colors Dark
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
&.is-#{$name}-dark
|
||
|
|
border-color: $color
|
||
|
|
&:focus,
|
||
|
|
&.is-focused,
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||
|
|
|
||
|
|
.checkbox,
|
||
|
|
.radio
|
||
|
|
&:hover
|
||
|
|
color: $input-hover-color-dark
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] &
|
||
|
|
color: $input-disabled-color-dark
|
||
|
|
|
||
|
|
.select
|
||
|
|
&:not(.is-multiple):not(.is-loading)
|
||
|
|
&::after
|
||
|
|
border-color: $input-arrow-dark
|
||
|
|
select
|
||
|
|
+input
|
||
|
|
&[disabled]:hover,
|
||
|
|
fieldset[disabled] &:hover
|
||
|
|
border-color: $input-disabled-border-color-dark
|
||
|
|
option
|
||
|
|
color: $input-color-dark
|
||
|
|
// States
|
||
|
|
&:not(.is-multiple):not(.is-loading):hover
|
||
|
|
&::after
|
||
|
|
border-color: $input-hover-color-dark
|
||
|
|
// Colors
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: darken(nth($pair, 1), 10%)
|
||
|
|
&.is-#{$name}
|
||
|
|
&:not(:hover)::after
|
||
|
|
border-color: $color
|
||
|
|
select
|
||
|
|
border-color: $color
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
border-color: darken($color, 5%)
|
||
|
|
&:focus,
|
||
|
|
&.is-focused,
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||
|
|
// Colors Dark
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
&.is-#{$name}-dark
|
||
|
|
&:not(:hover)::after
|
||
|
|
border-color: $color
|
||
|
|
select
|
||
|
|
border-color: $color
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
border-color: darken($color, 5%)
|
||
|
|
&:focus,
|
||
|
|
&.is-focused,
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
|
||
|
|
// Modifiers
|
||
|
|
&.is-disabled
|
||
|
|
&::after
|
||
|
|
border-color: $input-disabled-color-dark
|
||
|
|
|
||
|
|
.file
|
||
|
|
// Colors
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: darken(nth($pair, 1), 10%)
|
||
|
|
$color-invert: nth($pair, 2)
|
||
|
|
&.is-#{$name}
|
||
|
|
.file-cta
|
||
|
|
background-color: $color
|
||
|
|
color: $color-invert
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
.file-cta
|
||
|
|
background-color: darken($color, 2.5%)
|
||
|
|
color: $color-invert
|
||
|
|
&:focus,
|
||
|
|
&.is-focused
|
||
|
|
.file-cta
|
||
|
|
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||
|
|
color: $color-invert
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
.file-cta
|
||
|
|
background-color: darken($color, 5%)
|
||
|
|
color: $color-invert
|
||
|
|
// Colors Dark
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
$color-invert: nth($pair, 2)
|
||
|
|
&.is-#{$name}-dark
|
||
|
|
.file-cta
|
||
|
|
background-color: $color
|
||
|
|
color: $color-invert
|
||
|
|
&:hover,
|
||
|
|
&.is-hovered
|
||
|
|
.file-cta
|
||
|
|
background-color: darken($color, 2.5%)
|
||
|
|
color: $color-invert
|
||
|
|
&:focus,
|
||
|
|
&.is-focused
|
||
|
|
.file-cta
|
||
|
|
box-shadow: 0 0 0.5em rgba($color, 0.25)
|
||
|
|
color: $color-invert
|
||
|
|
&:active,
|
||
|
|
&.is-active
|
||
|
|
.file-cta
|
||
|
|
background-color: darken($color, 5%)
|
||
|
|
color: $color-invert
|
||
|
|
|
||
|
|
.file-label
|
||
|
|
&:hover
|
||
|
|
.file-cta
|
||
|
|
background-color: darken($file-cta-background-color-dark, 2.5%)
|
||
|
|
color: $file-cta-hover-color-dark
|
||
|
|
.file-name
|
||
|
|
border-color: darken($file-name-border-color-dark, 2.5%)
|
||
|
|
&:active
|
||
|
|
.file-cta
|
||
|
|
background-color: darken($file-cta-background-color-dark, 5%)
|
||
|
|
color: $file-cta-active-color-dark
|
||
|
|
.file-name
|
||
|
|
border-color: darken($file-name-border-color-dark, 5%)
|
||
|
|
|
||
|
|
.file-cta,
|
||
|
|
.file-name
|
||
|
|
border-color: $file-border-color-dark
|
||
|
|
|
||
|
|
.file-cta
|
||
|
|
background-color: $file-cta-background-color-dark
|
||
|
|
color: $file-cta-color-dark
|
||
|
|
|
||
|
|
.file-name
|
||
|
|
border-color: $file-name-border-color-dark
|
||
|
|
|
||
|
|
.label
|
||
|
|
color: $label-color-dark
|
||
|
|
|
||
|
|
.help
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: darken(nth($pair, 1), 10%)
|
||
|
|
&.is-#{$name}
|
||
|
|
color: $color
|
||
|
|
@each $name, $pair in $colors
|
||
|
|
$color: nth($pair, 1)
|
||
|
|
&.is-#{$name}-dark
|
||
|
|
color: $color
|
||
|
|
|
||
|
|
// Containers
|
||
|
|
|
||
|
|
.control
|
||
|
|
// Modifiers
|
||
|
|
&.has-icons-left,
|
||
|
|
&.has-icons-right
|
||
|
|
.icon
|
||
|
|
color: $input-icon-color-dark
|