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

Add CSS variables to form controls

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-23 18:46:09 +02:00
parent 4cb72c225a
commit 5b91a89ee2
10 changed files with 173 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
sass/form/shared.sass
View File

@@ -1,55 +1,57 @@
$input-color: $text-strong !default
$input-background-color: $scheme-main !default
$input-border-color: $border !default
$input-height: $control-height !default
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !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($input-color, 0.3) !default
$input-hover-color: $text-strong !default
$input-hover-border-color: $border-hover !default
$input-hover-color: var(--text-strong, #{$text-strong}) !default
$input-hover-border-color: var(--border-hover, #{$border-hover}) !default
$input-focus-color: $text-strong !default
$input-focus-border-color: $link !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: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !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($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-arrow: var(--link, #{$link}) !default
$input-icon-color: $border !default
$input-icon-active-color: $text !default
$input-icon-color: var(--border, #{$border}) !default
$input-icon-active-color: var(--text, #{$text}) !default
$input-radius: $radius !default
$input-radius: var(--radius, #{$radius}) !default
=input
@extend %control
background-color: $input-background-color
border-color: $input-border-color
border-radius: $input-radius
color: $input-color
background-color: var(--input-background-color)
border-color: var(--input-border-color)
border-radius: var(--input-radius)
color: var(--input-color)
+placeholder
color: $input-placeholder-color
color: var(--input-placeholder-color)
&:hover,
&.is-hovered
border-color: $input-hover-border-color
border-color: var(--input-hover-border-color)
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
border-color: var(--input-focus-border-color)
box-shadow: var(--input-focus-box-shadow-size) var(--input-focus-box-shadow-color)
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
background-color: var(--input-disabled-background-color)
border-color: var(--input-disabled-border-color)
box-shadow: none
color: $input-disabled-color
color: var(--input-disabled-color)
+placeholder
color: $input-disabled-placeholder-color
color: var(--input-disabled-placeholder-color)
%input
+input