Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 13:04:29 -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

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

@@ -1,10 +1,13 @@
$textarea-padding: $control-padding-horizontal !default
$textarea-padding: var(--control-padding-horizontal, #{$control-padding-horizontal}) !default
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default
%input-textarea
--input-shadow: #{$input-shadow}
--input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
@extend %input
box-shadow: $input-shadow
box-shadow: var(--input-shadow)
max-width: 100%
width: 100%
&[readonly]
@@ -18,7 +21,7 @@ $textarea-min-height: 8em !default
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
box-shadow: var(--input-focus-box-shadow-size) bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small
@@ -37,9 +40,9 @@ $textarea-min-height: 8em !default
.input
@extend %input-textarea
&.is-rounded
border-radius: $radius-rounded
padding-left: calc(#{$control-padding-horizontal} + 0.375em)
padding-right: calc(#{$control-padding-horizontal} + 0.375em)
border-radius: var(--radius-rounded, #{$radius-rounded})
padding-left: calc(#{var(--control-padding-horizontal, #{$control-padding-horizontal})} + 0.375em)
padding-right: calc(#{var(--control-padding-horizontal, #{$control-padding-horizontal})} + 0.375em)
&.is-static
background-color: transparent
border-color: transparent
@@ -48,15 +51,19 @@ $textarea-min-height: 8em !default
padding-right: 0
.textarea
--textarea-padding: #{$textarea-padding}
--textarea-max-height: #{$textarea-max-height}
--textarea-min-height: #{$textarea-min-height}
@extend %input-textarea
display: block
max-width: 100%
min-width: 100%
padding: $textarea-padding
padding: var(--textarea-padding)
resize: vertical
&:not([rows])
max-height: $textarea-max-height
min-height: $textarea-min-height
max-height: var(--textarea-max-height)
min-height: var(--textarea-min-height)
&[rows]
height: initial
// Modifiers