library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sass/form/input-textarea.sass
View File

@ -7,7 +7,7 @@ $textarea-min-height: 8em !default
--input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
@extend %input
box-shadow: var(--input-shadow)
box-shadow: var(--input-shadow, #{$input-shadow})
max-width: 100%
width: 100%
&[readonly]
@ -16,12 +16,12 @@ $textarea-min-height: 8em !default
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
border-color: var(--#{$name}, #{$color})
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: var(--input-focus-box-shadow-size) bulmaRgba($color, 0.25)
box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small

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

18
sass/form/tools.sass
View File

@ -34,7 +34,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
color: var(--#{$name}, #{$color})
// Containers
@ -168,11 +168,9 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
+ltr-property("margin", 0.75rem)
.control
--control-font-size: #{$control-font-size}
box-sizing: border-box
clear: both
font-size: var(--control-font-size)
font-size: var(--control-font-size, #{$control-font-size})
position: relative
text-align: inherit
// Modifiers
@ -182,7 +180,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
.select
&:focus
& ~ .icon
color: var(--input-icon-active-color)
color: var(--input-icon-active-color, #{$input-icon-active-color})
&.is-small ~ .icon
font-size: var(--size-small, #{$size-small})
&.is-medium ~ .icon
@ -190,23 +188,23 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
&.is-large ~ .icon
font-size: var(--size-large, #{$size-large})
.icon
color: var(--input-icon-color)
height: var(--input-height)
color: var(--input-icon-color, #{$input-icon-color})
height: var(--input-height, #{$input-height})
pointer-events: none
position: absolute
top: 0
width: var(--input-height)
width: var(--input-height, #{$input-height})
z-index: 4
&.has-icons-left
.input,
.select select
padding-left: var(--input-height)
padding-left: var(--input-height, #{$input-height})
.icon.is-left
left: 0
&.has-icons-right
.input,
.select select
padding-right: var(--input-height)
padding-right: var(--input-height, #{$input-height})
.icon.is-right
right: 0
&.is-loading

1
sass/themes/default.sass
View File

@ -120,6 +120,7 @@
--size-medium: #{$size-medium}
--size-large: #{$size-large}
// Controls
--control-font-size: #{$control-font-size}
--control-radius: #{$control-radius}
--control-radius-small: #{$control-radius-small}
--control-border-width: #{$control-border-width}