mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
59 lines
2.5 KiB
Sass
59 lines
2.5 KiB
Sass
$form-colors: $colors !default
|
|
|
|
$input-color: var(--text-strong, #{$text-strong}) !default
|
|
$input-background-color: var(--scheme-main, #{$scheme-main}) !default
|
|
$input-border-color: var(--border, #{$border}) !default
|
|
$input-height: var(--control-height, #{$control-height}) !default
|
|
$input-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.05) !default
|
|
$input-shadow: inset 0 0.0625em 0.125em $input-shadow-color !default
|
|
$input-placeholder-color: bulmaRgba($text-strong, 0.3) !default
|
|
|
|
$input-hover-color: var(--text-strong, #{$text-strong}) !default
|
|
$input-hover-border-color: var(--border-hover, #{$border-hover}) !default
|
|
|
|
$input-focus-color: var(--text-strong, #{$text-strong}) !default
|
|
$input-focus-border-color: var(--link, #{$link}) !default
|
|
$input-focus-box-shadow-size: 0 0 0 0.125em !default
|
|
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
|
|
|
|
$input-disabled-color: var(--text-light, #{$text-light}) !default
|
|
$input-disabled-background-color: var(--background, #{$background}) !default
|
|
$input-disabled-border-color: var(--background, #{$background}) !default
|
|
$input-disabled-placeholder-color: bulmaRgba($text-light, 0.3) !default
|
|
|
|
$input-arrow: var(--link, #{$link}) !default
|
|
|
|
$input-icon-color: var(--border, #{$border}) !default
|
|
$input-icon-active-color: var(--text, #{$text}) !default
|
|
|
|
$input-radius: var(--radius, #{$radius}) !default
|
|
|
|
=input
|
|
@extend %control
|
|
background-color: var(--input-background-color, #{$input-background-color})
|
|
border-color: var(--input-border-color, #{$input-border-color})
|
|
border-radius: var(--input-radius, #{$input-radius})
|
|
color: var(--input-color, #{$input-color})
|
|
+placeholder
|
|
color: var(--input-placeholder-color, #{$input-placeholder-color})
|
|
&:hover,
|
|
&.is-hovered
|
|
border-color: var(--input-hover-border-color, #{$input-hover-border-color})
|
|
&:focus,
|
|
&.is-focused,
|
|
&:active,
|
|
&.is-active
|
|
border-color: var(--input-focus-border-color, #{$input-focus-border-color})
|
|
box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) var(--input-focus-box-shadow-color, #{$input-focus-box-shadow-color})
|
|
&[disabled],
|
|
fieldset[disabled] &
|
|
background-color: var(--input-disabled-background-color, #{$input-disabled-background-color})
|
|
border-color: var(--input-disabled-border-color, #{$input-disabled-border-color})
|
|
box-shadow: none
|
|
color: var(--input-disabled-color, #{$input-disabled-color})
|
|
+placeholder
|
|
color: var(--input-disabled-placeholder-color, #{$input-disabled-placeholder-color})
|
|
|
|
%input
|
|
+input
|