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

Add fallback values for input and control CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-24 11:46:59 +02:00
parent d79c6dbc3c
commit 42815a783d
4 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
sass/form/shared.sass
View File

@@ -28,29 +28,29 @@ $input-radius: var(--radius, #{$radius}) !default
=input
@extend %control
background-color: var(--input-background-color)
border-color: var(--input-border-color)
border-radius: var(--input-radius)
color: var(--input-color)
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)
color: var(--input-placeholder-color, #{$input-placeholder-color})
&:hover,
&.is-hovered
border-color: var(--input-hover-border-color)
border-color: var(--input-hover-border-color, #{$input-hover-border-color})
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: var(--input-focus-border-color)
box-shadow: var(--input-focus-box-shadow-size) var(--input-focus-box-shadow-color)
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)
border-color: var(--input-disabled-border-color)
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)
color: var(--input-disabled-color, #{$input-disabled-color})
+placeholder
color: var(--input-disabled-placeholder-color)
color: var(--input-disabled-placeholder-color, #{$input-disabled-placeholder-color})
%input
+input