0ct0pu5/bulma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
sass/components/pagination.sass
View file

@ -68,9 +68,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
.pagination-next
padding-left: 1em
padding-right: 1em
border-radius: var(--radius-rounded)
border-radius: var(--radius-rounded, #{$radius-rounded})
.pagination-link
border-radius: var(--radius-rounded)
border-radius: var(--radius-rounded, #{$radius-rounded})
.pagination,
.pagination-list

7
sass/form/checkbox-radio.sass
View file

@ -1,4 +1,7 @@
%checkbox-radio
--checkbox-radio-hover-color: #{$input-hover-color}
--checkbox-radio-disabled-color: #{$input-disabled-color}
cursor: pointer
display: inline-block
line-height: 1.25
@ -6,10 +9,10 @@
input
cursor: pointer
&:hover
color: $input-hover-color
color: var(--checkbox-radio-hover-color)
&[disabled],
fieldset[disabled] &
color: $input-disabled-color
color: var(--checkbox-radio-disabled-color)
cursor: not-allowed
.checkbox

62
sass/form/file.sass
View file

@ -1,20 +1,32 @@
$file-border-color: $border !default
$file-radius: $radius !default
$file-border-color: var(--border, #{$border}) !default
$file-radius: var(--radius, #{$radius}) !default
$file-cta-background-color: $scheme-main-ter !default
$file-cta-color: $text !default
$file-cta-hover-color: $text-strong !default
$file-cta-active-color: $text-strong !default
$file-cta-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
$file-cta-color: var(--text, #{$text}) !default
$file-cta-hover-color: var(--text-strong, #{$text-strong}) !default
$file-cta-active-color: var(--text-strong, #{$text-strong}) !default
$file-name-border-color: $border !default
$file-name-border-color: var(--border, #{$border}) !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
.file
--file-radius: #{$file-radius}
--file-cta-hover-color: #{$file-cta-hover-color}
--file-cta-active-color: #{$file-cta-active-color}
--file-border-color: #{$file-border-color}
--file-cta-background-color: #{$file-cta-background-color}
--file-cta-color: #{$file-cta-color}
--file-name-border-color: #{$file-name-border-color}
--file-name-border-style: #{$file-name-border-style}
--file-name-border-width: #{$file-name-border-width}
--file-name-max-width: #{$file-name-max-width}
@extend %unselectable
align-items: stretch
display: flex
font-size: var(--file-font-size)
justify-content: flex-start
position: relative
// Colors
@ -46,14 +58,14 @@ $file-name-max-width: 16em !default
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
--file-font-size: var(--size-small, #{$size-small})
&.is-medium
font-size: $size-medium
--file-font-size: var(--size-medium, #{$size-medium})
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
--file-font-size: var(--size-large, #{$size-large})
.file-icon
.fa
font-size: 28px
@ -67,7 +79,7 @@ $file-name-max-width: 16em !default
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
border-radius: var(--file-radius)
.file-name
display: none
&.is-boxed
@ -95,9 +107,9 @@ $file-name-max-width: 16em !default
font-size: 35px
&.has-name
.file-cta
border-radius: $file-radius $file-radius 0 0
border-radius: var(--file-radius) var(--file-radius) 0 0
.file-name
border-radius: 0 0 $file-radius $file-radius
border-radius: 0 0 var(--file-radius) var(--file-radius)
border-width: 0 1px 1px
&.is-centered
justify-content: center
@ -110,9 +122,9 @@ $file-name-max-width: 16em !default
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
border-radius: 0 var(--file-radius) var(--file-radius) 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-radius: var(--file-radius) 0 0 var(--file-radius)
border-width: 1px 0 1px 1px
order: -1
@ -126,13 +138,13 @@ $file-name-max-width: 16em !default
&:hover
.file-cta
background-color: bulmaDarken($file-cta-background-color, 2.5%)
color: $file-cta-hover-color
color: var(--file-cta-hover-color)
.file-name
border-color: bulmaDarken($file-name-border-color, 2.5%)
&:active
.file-cta
background-color: bulmaDarken($file-cta-background-color, 5%)
color: $file-cta-active-color
color: var(--file-cta-active-color)
.file-name
border-color: bulmaDarken($file-name-border-color, 5%)
@ -148,23 +160,23 @@ $file-name-max-width: 16em !default
.file-cta,
.file-name
@extend %control
border-color: $file-border-color
border-radius: $file-radius
border-color: var(--file-border-color)
border-radius: var(--file-radius)
font-size: 1em
padding-left: 1em
padding-right: 1em
white-space: nowrap
.file-cta
background-color: $file-cta-background-color
color: $file-cta-color
background-color: var(--file-cta-background-color)
color: var(--file-cta-color)
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
border-color: var(--file-name-border-color)
border-style: var(--file-name-border-style)
border-width: var(--file-name-border-width)
display: block
max-width: $file-name-max-width
max-width: var(--file-name-max-width)
overflow: hidden
text-align: inherit
text-overflow: ellipsis

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

28
sass/form/select.sass
View file

@ -1,4 +1,10 @@
.select
--select-arrow: #{$input-arrow}
--select-disabled-border-color: #{$input-disabled-border-color}
--select-hover-color: #{$input-hover-color}
--select-disabled-color: #{$input-disabled-color}
--select-focus-box-shadow-size: #{$input-focus-box-shadow-size}
display: inline-block
max-width: 100%
position: relative
@ -8,12 +14,12 @@
&:not(.is-multiple):not(.is-loading)
&::after
@extend %arrow
border-color: $input-arrow
border-color: var(--select-arrow)
+ltr-position(1.125em)
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
border-radius: var(--radius-rounded, #{$radius-rounded})
+ltr-property("padding", 1em, false)
select
@extend %input
@ -26,7 +32,7 @@
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
border-color: var(--select-disabled-border-color)
&:not([multiple])
+ltr-property("padding", 2.5em)
&[multiple]
@ -37,15 +43,15 @@
// States
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
border-color: var(--select-hover-color)
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
border-color: var(--#{$name}, #{$color})
select
border-color: $color
border-color: var(--#{$name}, #{$color})
&:hover,
&.is-hovered
border-color: bulmaDarken($color, 5%)
@ -53,7 +59,7 @@
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
box-shadow: var(--select-focus-box-shadow-size) bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small
@ -64,7 +70,7 @@
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color
border-color: var(--select-disabled-color)
&.is-fullwidth
width: 100%
select
@ -78,8 +84,8 @@
top: 0.625em
transform: none
&.is-small:after
font-size: $size-small
font-size: var(--size-small, #{$size-small})
&.is-medium:after
font-size: $size-medium
font-size: var(--size-medium, #{$size-medium})
&.is-large:after
font-size: $size-large
font-size: var(--size-large, #{$size-large})

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

45
sass/form/tools.sass
View file

@ -1,13 +1,20 @@
$label-color: $text-strong !default
$label-weight: $weight-bold !default
$label-font-size: var(--size-normal, #{$size-normal}) !default
$label-color: var(--text-strong, #{$text-strong}) !default
$label-weight: var(--weight-bold, #{$weight-bold}) !default
$help-size: $size-small !default
$help-size: var(--size-small, #{$size-small}) !default
$control-font-size: var(--size-normal, #{$size-normal}) !default
.label
color: $label-color
--label-color: #{$label-color}
--label-font-size: #{$label-font-size}
--label-font-weight: #{$label-weight}
color: var(--label-color)
display: block
font-size: $size-normal
font-weight: $label-weight
font-size: var(--label-font-size)
font-weight: var(--label-font-weight)
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
@ -19,8 +26,10 @@ $help-size: $size-small !default
font-size: $size-large
.help
--help-font-size: #{$help-size}
display: block
font-size: $help-size
font-size: var(--help-font-size)
margin-top: 0.25rem
@each $name, $pair in $colors
$color: nth($pair, 1)
@ -130,15 +139,15 @@ $help-size: $size-small !default
+ltr-property("margin", 1.5rem)
text-align: right
&.is-small
font-size: $size-small
font-size: var(--size-small, #{$size-small})
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
font-size: var(--size-medium, #{$size-medium})
padding-top: 0.375em
&.is-large
font-size: $size-large
font-size: var(--size-large, #{$size-large})
padding-top: 0.375em
.field-body
@ -159,9 +168,11 @@ $help-size: $size-small !default
+ltr-property("margin", 0.75rem)
.control
--control-font-size: #{$control-font-size}
box-sizing: border-box
clear: both
font-size: $size-normal
font-size: var(--control-font-size)
position: relative
text-align: inherit
// Modifiers
@ -173,11 +184,11 @@ $help-size: $size-small !default
& ~ .icon
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
font-size: var(--size-small, #{$size-small})
&.is-medium ~ .icon
font-size: $size-medium
font-size: var(--size-medium, #{$size-medium})
&.is-large ~ .icon
font-size: $size-large
font-size: var(--size-large, #{$size-large})
.icon
color: $input-icon-color
height: $input-height
@ -206,8 +217,8 @@ $help-size: $size-small !default
top: 0.625em
z-index: 4
&.is-small:after
font-size: $size-small
font-size: var(--size-small, #{$size-small})
&.is-medium:after
font-size: $size-medium
font-size: var(--size-medium, #{$size-medium})
&.is-large:after
font-size: $size-large
font-size: var(--size-large, #{$size-large})

8
sass/themes/default.sass
View file

@ -119,3 +119,11 @@
--size-normal: #{$size-normal}
--size-medium: #{$size-medium}
--size-large: #{$size-large}
// Controls
--control-radius: #{$control-radius}
--control-radius-small: #{$control-radius-small}
--control-border-width: #{$control-border-width}
--control-height: #{$control-height}
--control-line-height: #{$control-line-height}
--control-padding-vertical: #{$control-padding-vertical}
--control-padding-horizontal: #{$control-padding-horizontal}

28
sass/utilities/controls.sass
View file

@ -1,5 +1,5 @@
$control-radius: $radius !default
$control-radius-small: $radius-small !default
$control-radius: var(--radius, #{$radius}) !default
$control-radius-small: var(--radius-small, #{$radius-small}) !default
$control-border-width: 1px !default
@ -14,17 +14,17 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
-webkit-appearance: none
align-items: center
border: $control-border-width solid transparent
border-radius: $control-radius
border-radius: var(--control-radius, #{$control-radius})
box-shadow: none
display: inline-flex
font-size: $size-normal
height: $control-height
font-size: var(--size-normal, #{$size-normal})
height: var(--control-height, #{$control-height})
justify-content: flex-start
line-height: $control-line-height
padding-bottom: $control-padding-vertical
padding-left: $control-padding-horizontal
padding-right: $control-padding-horizontal
padding-top: $control-padding-vertical
line-height: var(--control-line-height, #{$control-line-height})
padding-bottom: var(--control-padding-vertical, #{$control-padding-vertical})
padding-left: var(--control-padding-horizontal, #{$control-padding-horizontal})
padding-right: var(--control-padding-horizontal, #{$control-padding-horizontal})
padding-top: var(--control-padding-vertical, #{$control-padding-vertical})
position: relative
vertical-align: top
// States
@ -42,9 +42,9 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small
font-size: $size-small
border-radius: var(--control-radius-small, #{$control-radius-small})
font-size: var(--size-small, #{$size-small})
=control-medium
font-size: $size-medium
font-size: var(--size-medium, #{$size-medium})
=control-large
font-size: $size-large
font-size: var(--size-large, #{$size-large})

17
test/plugins/check-css-variables-exist.js
View file

@ -125,6 +125,13 @@ const DEFAULT_ASSIGNMENTS = [
'--size-normal',
'--size-medium',
'--size-large',
'--control-radius',
'--control-radius-small',
'--control-border-width',
'--control-height',
'--control-line-height',
'--control-padding-vertical',
'--control-padding-horizontal',
];
function logThis(message) {
@ -145,8 +152,11 @@ function plugin() {
const contents = file.contents.toString();
const assignments = contents.match(regexAssign);
let errorCount = 0;
if (!assignments) {
logThis(`${filePath} has no CSS var assignments`);
errorCount++;
return;
}
@ -157,6 +167,7 @@ function plugin() {
if (!usages) {
logThis(`${filePath} has no CSS var usages`);
errorCount++;
return;
}
@ -167,7 +178,10 @@ function plugin() {
return usage;
});
let errorCount = 0;
if (filePath.endsWith('shared.sass')) {
console.log('ZLOG usages', usages);
console.log('ZLOG assignments', fileAssignments);
}
usages.forEach(usage => {
if (!allAssignments.includes(usage)) {
@ -185,6 +199,7 @@ function plugin() {
if (errorCount) {
console.log(`There are some errors in ${filePath}`);
hasErrors = true;
} else {
logThis(`${filePath} is all good!`);
}