Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
sass/form/_all.sass
View File

@@ -1,9 +0,0 @@
/* Bulma Form */
@charset "utf-8"
@import "shared"
@import "input-textarea"
@import "checkbox-radio"
@import "select"
@import "file"
@import "tools"

9
sass/form/_index.scss Normal file
View File

@@ -0,0 +1,9 @@
/* Bulma Form */
@charset "utf-8";
@forward "shared";
@forward "input-textarea";
@forward "checkbox-radio";
@forward "select";
@forward "file";
@forward "tools";

22
sass/form/checkbox-radio.sass
View File

@@ -1,22 +0,0 @@
%checkbox-radio
cursor: pointer
display: inline-block
line-height: 1.25
position: relative
input
cursor: pointer
&:hover
color: $input-hover-color
&[disabled],
fieldset[disabled] &,
input[disabled]
color: $input-disabled-color
cursor: not-allowed
.checkbox
@extend %checkbox-radio
.radio
@extend %checkbox-radio
& + .radio
+ltr-property("margin", 0.5em, false)

32
sass/form/checkbox-radio.scss Normal file
View File

@@ -0,0 +1,32 @@
@use "shared";
@use "../utilities/initial-variables" as iv;
%checkbox-radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
input {
cursor: pointer;
}
&[disabled],
fieldset[disabled] &,
input[disabled] {
color: shared.$input-disabled-color;
cursor: not-allowed;
}
}
.#{iv.$class-prefix}checkbox {
@extend %checkbox-radio;
}
.#{iv.$class-prefix}radio {
@extend %checkbox-radio;
& + .#{iv.$class-prefix}radio {
margin-inline-start: 0.5em;
}
}

184
sass/form/file.sass
View File

@@ -1,184 +0,0 @@
$file-border-color: $border !default
$file-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-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
$file-colors: $form-colors !default
.file
@extend %unselectable
align-items: stretch
display: flex
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $file-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
.file-cta
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
.file-cta
background-color: bulmaDarken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
.file-cta
border-color: transparent
box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
color: $color-invert
&:active,
&.is-active
.file-cta
background-color: bulmaDarken($color, 5%)
border-color: transparent
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
&.is-normal
font-size: $size-normal
&.is-medium
font-size: $size-medium
.file-icon
.fa
font-size: 21px
&.is-large
font-size: $size-large
.file-icon
.fa
font-size: 28px
// Modifiers
&.has-name
.file-cta
border-bottom-right-radius: 0
border-top-right-radius: 0
.file-name
border-bottom-left-radius: 0
border-top-left-radius: 0
&.is-empty
.file-cta
border-radius: $file-radius
.file-name
display: none
&.is-boxed
.file-label
flex-direction: column
.file-cta
flex-direction: column
height: auto
padding: 1em 3em
.file-name
border-width: 0 1px 1px
.file-icon
height: 1.5em
width: 1.5em
.fa
font-size: 21px
&.is-small
.file-icon .fa
font-size: 14px
&.is-medium
.file-icon .fa
font-size: 28px
&.is-large
.file-icon .fa
font-size: 35px
&.has-name
.file-cta
border-radius: $file-radius $file-radius 0 0
.file-name
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
&.is-centered
justify-content: center
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
&.is-right
justify-content: flex-end
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
.file-label
align-items: stretch
display: flex
cursor: pointer
justify-content: flex-start
overflow: hidden
position: relative
&:hover
.file-cta
background-color: bulmaDarken($file-cta-background-color, 2.5%)
color: $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
.file-name
border-color: bulmaDarken($file-name-border-color, 5%)
.file-input
height: 100%
left: 0
opacity: 0
outline: none
position: absolute
top: 0
width: 100%
.file-cta,
.file-name
@extend %control
border-color: $file-border-color
border-radius: $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
.file-name
border-color: $file-name-border-color
border-style: $file-name-border-style
border-width: $file-name-border-width
display: block
max-width: $file-name-max-width
overflow: hidden
text-align: inherit
text-overflow: ellipsis
.file-icon
align-items: center
display: flex
height: 1em
justify-content: center
+ltr-property("margin", 0.5em)
width: 1em
.fa
font-size: 14px

330
sass/form/file.scss Normal file
View File

@@ -0,0 +1,330 @@
@use "shared";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/controls";
@use "../utilities/extends";
$file-radius: cv.getVar("radius") !default;
$file-h: cv.getVar("scheme-h");
$file-s: cv.getVar("scheme-s");
$file-background-l: cv.getVar("scheme-main-ter-l");
$file-background-l-delta: 0%;
$file-hover-background-l-delta: -5%;
$file-active-background-l-delta: -10%;
$file-border-l: cv.getVar("border-l");
$file-border-l-delta: 0%;
$file-hover-border-l-delta: -10%;
$file-active-border-l-delta: -20%;
$file-cta-color-l: cv.getVar("text-strong-l");
$file-name-color-l: cv.getVar("text-strong-l");
$file-color-l-delta: 0%;
$file-hover-color-l-delta: -5%;
$file-active-color-l-delta: -10%;
$file-cta-color: cv.getVar("text") !default;
$file-cta-hover-color: cv.getVar("text-strong") !default;
$file-cta-active-color: cv.getVar("text-strong") !default;
$file-name-border-color: cv.getVar("border") !default;
$file-name-border-style: solid !default;
$file-name-border-width: 1px 1px 1px 0 !default;
$file-name-max-width: 16em !default;
$file-colors: shared.$form-colors !default;
.#{iv.$class-prefix}file {
@extend %block;
@extend %unselectable;
@include cv.register-vars(
(
"file-radius": #{$file-radius},
"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},
"file-h": #{$file-h},
"file-s": #{$file-s},
"file-background-l": #{$file-background-l},
"file-background-l-delta": #{$file-background-l-delta},
"file-hover-background-l-delta": #{$file-hover-background-l-delta},
"file-active-background-l-delta": #{$file-active-background-l-delta},
"file-border-l": #{$file-border-l},
"file-border-l-delta": #{$file-border-l-delta},
"file-hover-border-l-delta": #{$file-hover-border-l-delta},
"file-active-border-l-delta": #{$file-active-border-l-delta},
"file-cta-color-l": #{$file-cta-color-l},
"file-name-color-l": #{$file-name-color-l},
"file-color-l-delta": #{$file-color-l-delta},
"file-hover-color-l-delta": #{$file-hover-color-l-delta},
"file-active-color-l-delta": #{$file-active-color-l-delta},
)
);
align-items: stretch;
display: flex;
justify-content: flex-start;
position: relative;
// Colors
@each $name, $pair in $file-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"file-h": #{cv.getVar($name, "", "-h")},
"file-s": #{cv.getVar($name, "", "-s")},
"file-background-l": #{cv.getVar($name, "", "-l")},
"file-border-l": #{cv.getVar($name, "", "-l")},
"file-cta-color-l": #{cv.getVar($name, "", "-invert-l")},
"file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
)
);
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-normal {
font-size: cv.getVar("size-normal");
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
.#{iv.$class-prefix}file-icon {
.#{iv.$class-prefix}fa {
font-size: 1.5rem;
}
}
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
.#{iv.$class-prefix}file-icon {
.#{iv.$class-prefix}fa {
font-size: 2rem;
}
}
}
// Modifiers
&.#{iv.$class-prefix}has-name {
.#{iv.$class-prefix}file-cta {
border-end-end-radius: 0;
border-start-end-radius: 0;
}
.#{iv.$class-prefix}file-name {
border-end-start-radius: 0;
border-start-start-radius: 0;
}
&.#{iv.$class-prefix}is-empty {
.#{iv.$class-prefix}file-cta {
border-radius: cv.getVar("file-radius");
}
.#{iv.$class-prefix}file-name {
display: none;
}
}
}
&.#{iv.$class-prefix}is-boxed {
.#{iv.$class-prefix}file-label {
flex-direction: column;
}
.#{iv.$class-prefix}file-cta {
flex-direction: column;
height: auto;
padding: 1em 3em;
}
.#{iv.$class-prefix}file-name {
border-width: 0 1px 1px;
}
.#{iv.$class-prefix}file-icon {
height: 1.5em;
width: 1.5em;
.#{iv.$class-prefix}fa {
font-size: 1.5rem;
}
}
&.#{iv.$class-prefix}is-small {
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
font-size: 1rem;
}
}
&.#{iv.$class-prefix}is-medium {
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
font-size: 2rem;
}
}
&.#{iv.$class-prefix}is-large {
.#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
font-size: 2.5rem;
}
}
&.#{iv.$class-prefix}has-name {
.#{iv.$class-prefix}file-cta {
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: cv.getVar("file-radius");
border-start-start-radius: cv.getVar("file-radius");
}
.#{iv.$class-prefix}file-name {
border-end-end-radius: cv.getVar("file-radius");
border-end-start-radius: cv.getVar("file-radius");
border-start-end-radius: 0;
border-start-start-radius: 0;
border-width: 0 1px 1px;
}
}
}
&.#{iv.$class-prefix}is-centered {
justify-content: center;
}
&.#{iv.$class-prefix}is-fullwidth {
.#{iv.$class-prefix}file-label {
width: 100%;
}
.#{iv.$class-prefix}file-name {
flex-grow: 1;
max-width: none;
}
}
&.#{iv.$class-prefix}is-right {
justify-content: flex-end;
.#{iv.$class-prefix}file-cta {
border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0;
}
.#{iv.$class-prefix}file-name {
border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius");
border-width: 1px 0 1px 1px;
order: -1;
}
}
}
.#{iv.$class-prefix}file-label {
align-items: stretch;
display: flex;
cursor: pointer;
justify-content: flex-start;
overflow: hidden;
position: relative;
&:hover {
@include cv.register-vars(
(
"file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")},
"file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")},
"file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")},
)
);
}
&:active {
@include cv.register-vars(
(
"file-background-l-delta": #{cv.getVar("file-active-background-l-delta")},
"file-border-l-delta": #{cv.getVar("file-active-border-l-delta")},
"file-color-l-delta": #{cv.getVar("file-active-color-l-delta")},
)
);
}
}
.#{iv.$class-prefix}file-input {
height: 100%;
left: 0;
opacity: 0;
outline: none;
position: absolute;
top: 0;
width: 100%;
}
.#{iv.$class-prefix}file-cta,
.#{iv.$class-prefix}file-name {
@extend %control;
border-color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")})
);
border-radius: cv.getVar("file-radius");
font-size: 1em;
padding-left: 1em;
padding-right: 1em;
white-space: nowrap;
}
.#{iv.$class-prefix}file-cta {
background-color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(
#{cv.getVar("file-background-l")} + #{cv.getVar(
"file-background-l-delta"
)}
)
);
color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")})
);
}
.#{iv.$class-prefix}file-name {
border-color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")})
);
border-style: cv.getVar("file-name-border-style");
border-width: cv.getVar("file-name-border-width");
color: hsl(
cv.getVar("file-h"),
cv.getVar("file-s"),
calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")})
);
display: block;
max-width: cv.getVar("file-name-max-width");
overflow: hidden;
text-align: inherit;
text-overflow: ellipsis;
}
.#{iv.$class-prefix}file-icon {
align-items: center;
display: flex;
height: 1em;
justify-content: center;
margin-inline-end: 0.5em;
width: 1em;
.#{iv.$class-prefix}fa {
font-size: 1rem;
}
}

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

@@ -1,66 +0,0 @@
$textarea-padding: $control-padding-horizontal !default
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default
$textarea-colors: $form-colors !default
%input-textarea
@extend %input
box-shadow: $input-shadow
max-width: 100%
width: 100%
&[readonly]
box-shadow: none
// Colors
@each $name, $pair in $textarea-colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.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)
&.is-static
background-color: transparent
border-color: transparent
box-shadow: none
padding-left: 0
padding-right: 0
.textarea
@extend %input-textarea
display: block
max-width: 100%
min-width: 100%
padding: $textarea-padding
resize: vertical
&:not([rows])
max-height: $textarea-max-height
min-height: $textarea-min-height
&[rows]
height: initial
// Modifiers
&.has-fixed-size
resize: none

123
sass/form/input-textarea.scss Normal file
View File

@@ -0,0 +1,123 @@
@use "shared";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/controls";
$textarea-padding: cv.getVar("control-padding-horizontal") !default;
$textarea-max-height: 40em !default;
$textarea-min-height: 8em !default;
$textarea-colors: shared.$form-colors !default;
%input-textarea {
@extend %input;
@include cv.register-vars(
(
"input-h": #{cv.getVar("scheme-h")},
"input-s": #{cv.getVar("scheme-s")},
"input-border-style": solid,
"input-border-width": 1px,
"input-border-l": #{cv.getVar("border-l")},
)
);
box-shadow: shared.$input-shadow;
max-width: 100%;
width: 100%;
&[readonly] {
box-shadow: none;
}
// Colors
@each $name, $pair in $textarea-colors {
$color: nth($pair, 1);
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"input-h": #{cv.getVar($name, "", "-h")},
"input-s": #{cv.getVar($name, "", "-s")},
"input-l": #{cv.getVar($name, "", "-l")},
"input-focus-h": #{cv.getVar($name, "", "-h")},
"input-focus-s": #{cv.getVar($name, "", "-s")},
"input-focus-l": #{cv.getVar($name, "", "-l")},
"input-border-l": #{cv.getVar($name, "", "-l")},
)
);
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
@include controls.control-small;
}
&.#{iv.$class-prefix}is-medium {
@include controls.control-medium;
}
&.#{iv.$class-prefix}is-large {
@include controls.control-large;
}
// Modifiers
&.#{iv.$class-prefix}is-fullwidth {
display: block;
width: 100%;
}
&.#{iv.$class-prefix}is-inline {
display: inline;
width: auto;
}
}
.#{iv.$class-prefix}input {
@extend %input-textarea;
&.#{iv.$class-prefix}is-rounded {
border-radius: cv.getVar("radius-rounded");
padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em);
padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em);
}
&.#{iv.$class-prefix}is-static {
background-color: transparent;
border-color: transparent;
box-shadow: none;
padding-left: 0;
padding-right: 0;
}
}
.#{iv.$class-prefix}textarea {
@extend %input-textarea;
@include cv.register-vars(
(
"textarea-padding": #{$textarea-padding},
"textarea-max-height": #{$textarea-max-height},
"textarea-min-height": #{$textarea-min-height},
)
);
display: block;
max-width: 100%;
min-width: 100%;
padding: cv.getVar("textarea-padding");
resize: vertical;
&:not([rows]) {
max-height: cv.getVar("textarea-max-height");
min-height: cv.getVar("textarea-min-height");
}
&[rows] {
height: initial;
}
// Modifiers
&.#{iv.$class-prefix}has-fixed-size {
resize: none;
}
}

88
sass/form/select.sass
View File

@@ -1,88 +0,0 @@
$select-colors: $form-colors !default
.select
display: inline-block
max-width: 100%
position: relative
vertical-align: top
&:not(.is-multiple)
height: $input-height
&:not(.is-multiple):not(.is-loading)
&::after
@extend %arrow
border-color: $input-arrow
+ltr-position(1.125em)
z-index: 4
&.is-rounded
select
border-radius: $radius-rounded
+ltr-property("padding", 1em, false)
select
@extend %input
cursor: pointer
display: block
font-size: 1em
max-width: 100%
outline: none
&::-ms-expand
display: none
&[disabled]:hover,
fieldset[disabled] &:hover
border-color: $input-disabled-border-color
&:not([multiple])
+ltr-property("padding", 2.5em)
&[multiple]
height: auto
padding: 0
option
padding: 0.5em 1em
// States
&:not(.is-multiple):not(.is-loading):hover
&::after
border-color: $input-hover-color
// Colors
@each $name, $pair in $select-colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after
border-color: $color
select
border-color: $color
&:hover,
&.is-hovered
border-color: bulmaDarken($color, 5%)
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-disabled
&::after
border-color: $input-disabled-color !important
opacity: 0.5
&.is-fullwidth
width: 100%
select
width: 100%
&.is-loading
&::after
@extend %loader
margin-top: 0
position: absolute
+ltr-position(0.625em)
top: 0.625em
transform: none
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large

143
sass/form/select.scss Normal file
View File

@@ -0,0 +1,143 @@
@use "shared";
@use "../utilities/controls";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
$select-colors: shared.$form-colors !default;
.#{iv.$class-prefix}select {
@include cv.register-vars(
(
"input-h": #{cv.getVar("scheme-h")},
"input-s": #{cv.getVar("scheme-s")},
"input-border-style": solid,
"input-border-width": 1px,
"input-border-l": #{cv.getVar("border-l")},
)
);
display: inline-block;
max-width: 100%;
position: relative;
vertical-align: top;
&:not(.#{iv.$class-prefix}is-multiple) {
height: shared.$input-height;
}
&:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) {
&::after {
@extend %arrow;
inset-inline-end: 1.125em;
z-index: 4;
}
}
&.#{iv.$class-prefix}is-rounded {
select {
border-radius: cv.getVar("radius-rounded");
padding-inline-start: 1em;
}
}
select {
@extend %input;
cursor: pointer;
display: block;
font-size: 1em;
max-width: 100%;
outline: none;
&::-ms-expand {
display: none;
}
&[disabled]:hover,
fieldset[disabled] &:hover {
border-color: shared.$input-disabled-border-color;
}
&:not([multiple]) {
padding-inline-end: 2.5em;
}
&[multiple] {
height: auto;
padding: 0;
option {
padding: 0.5em 1em;
}
}
}
// Colors
@each $name, $pair in $select-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"input-h": #{cv.getVar($name, "", "-h")},
"input-s": #{cv.getVar($name, "", "-s")},
"input-l": #{cv.getVar($name, "", "-l")},
"input-focus-h": #{cv.getVar($name, "", "-h")},
"input-focus-s": #{cv.getVar($name, "", "-s")},
"input-focus-l": #{cv.getVar($name, "", "-l")},
"input-border-l": #{cv.getVar($name, "", "-l")},
)
);
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
@include controls.control-small;
}
&.#{iv.$class-prefix}is-medium {
@include controls.control-medium;
}
&.#{iv.$class-prefix}is-large {
@include controls.control-large;
}
// Modifiers
&.#{iv.$class-prefix}is-disabled {
&::after {
border-color: shared.$input-disabled-color !important;
opacity: 0.5;
}
}
&.#{iv.$class-prefix}is-fullwidth {
width: 100%;
select {
width: 100%;
}
}
&.#{iv.$class-prefix}is-loading {
&::after {
@extend %loader;
inset-inline-end: 0.625em;
margin-top: 0;
position: absolute;
top: 0.625em;
transform: none;
}
&.#{iv.$class-prefix}is-small:after {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium:after {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large:after {
font-size: cv.getVar("size-large");
}
}
}

60
sass/form/shared.sass
View File

@@ -1,60 +0,0 @@
@import "../utilities/controls"
@import "../utilities/mixins"
$form-colors: $colors !default
$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-placeholder-color: bulmaRgba($input-color, 0.3) !default
$input-hover-color: $text-strong !default
$input-hover-border-color: $border-hover !default
$input-focus-color: $text-strong !default
$input-focus-border-color: $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-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
$input-arrow: $link !default
$input-icon-color: $border !default
$input-icon-active-color: $text !default
$input-radius: $radius !default
=input
@extend %control
background-color: $input-background-color
border-color: $input-border-color
border-radius: $input-radius
color: $input-color
+placeholder
color: $input-placeholder-color
&:hover,
&.is-hovered
border-color: $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
&[disabled],
fieldset[disabled] &
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled-color
+placeholder
color: $input-disabled-placeholder-color
%input
+input

172
sass/form/shared.scss Normal file
View File

@@ -0,0 +1,172 @@
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$form-colors: dv.$colors !default;
$input-h: #{cv.getVar("scheme-h")} !default;
$input-s: #{cv.getVar("scheme-s")} !default;
$input-l: #{cv.getVar("scheme-main-l")} !default;
$input-border-l: cv.getVar("border-l") !default;
$input-border-l-delta: 0% !default;
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
$input-color-l: cv.getVar("text-strong-l") !default;
$input-background-l: cv.getVar("scheme-main-l") !default;
$input-background-l-delta: 0% !default;
$input-height: cv.getVar("control-height") !default;
$input-shadow: inset 0 0.0625em 0.125em
hsla(
#{cv.getVar("scheme-h")},
#{cv.getVar("scheme-s")},
#{cv.getVar("scheme-invert-l")},
0.05
) !default;
$input-placeholder-color: hsla(
#{cv.getVar("text-h")},
#{cv.getVar("text-s")},
#{cv.getVar("text-strong-l")},
0.3
) !default;
$input-focus-h: cv.getVar("focus-h") !default;
$input-focus-s: cv.getVar("focus-s") !default;
$input-focus-l: cv.getVar("focus-l") !default;
$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
$input-disabled-color: cv.getVar("text-weak") !default;
$input-disabled-background-color: cv.getVar("background") !default;
$input-disabled-border-color: cv.getVar("background") !default;
$input-disabled-placeholder-color: hsla(
#{cv.getVar("text-h")},
#{cv.getVar("text-s")},
#{cv.getVar("text-weak-l")},
0.3
) !default;
$input-arrow: cv.getVar("link") !default;
$input-icon-color: cv.getVar("text-light") !default;
$input-icon-hover-color: cv.getVar("text-weak") !default;
$input-icon-focus-color: cv.getVar("link") !default;
$input-radius: cv.getVar("radius") !default;
.#{iv.$class-prefix}control,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}textarea,
.#{iv.$class-prefix}select select {
@include cv.register-vars(
(
"input-h": #{$input-h},
"input-s": #{$input-s},
"input-l": #{$input-l},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-hover-border-l-delta": #{$input-hover-border-l-delta},
"input-active-border-l-delta": #{$input-active-border-l-delta},
"input-focus-h": #{$input-focus-h},
"input-focus-s": #{$input-focus-s},
"input-focus-l": #{$input-focus-l},
"input-focus-shadow-size": #{$input-focus-shadow-size},
"input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
"input-color-l": #{$input-color-l},
"input-background-l": #{$input-background-l},
"input-background-l-delta": #{$input-background-l-delta},
"input-height": #{$input-height},
"input-shadow": #{$input-shadow},
"input-placeholder-color": #{$input-placeholder-color},
"input-disabled-color": #{$input-disabled-color},
"input-disabled-background-color": #{$input-disabled-background-color},
"input-disabled-border-color": #{$input-disabled-border-color},
"input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
"input-arrow": #{$input-arrow},
"input-icon-color": #{$input-icon-color},
"input-icon-hover-color": #{$input-icon-hover-color},
"input-icon-focus-color": #{$input-icon-focus-color},
"input-radius": #{$input-radius},
)
);
}
@mixin input {
@extend %control;
background-color: hsl(
#{cv.getVar("input-h")},
#{cv.getVar("input-s")},
calc(
#{cv.getVar("input-background-l")} + #{cv.getVar(
"input-background-l-delta"
)}
)
);
border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-radius: cv.getVar("input-radius");
color: hsl(
#{cv.getVar("input-h")},
#{cv.getVar("input-s")},
#{cv.getVar("input-color-l")}
);
@include mx.placeholder {
color: cv.getVar("input-placeholder-color");
}
&:hover,
&.#{iv.$class-prefix}is-hovered {
@include cv.register-vars(
(
"input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
)
);
}
&:active,
&.#{iv.$class-prefix}is-active {
@include cv.register-vars(
(
"input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
)
);
}
&:focus,
&:focus-within,
&.#{iv.$class-prefix}is-focused {
border-color: hsl(
cv.getVar("input-focus-h"),
cv.getVar("input-focus-s"),
cv.getVar("input-focus-l")
);
box-shadow: cv.getVar("input-focus-shadow-size")
hsla(
cv.getVar("input-focus-h"),
cv.getVar("input-focus-s"),
cv.getVar("input-focus-l"),
cv.getVar("input-focus-shadow-alpha")
);
}
&[disabled],
fieldset[disabled] & {
background-color: cv.getVar("input-disabled-background-color");
border-color: cv.getVar("input-disabled-border-color");
box-shadow: none;
color: cv.getVar("input-disabled-color");
@include mx.placeholder {
color: cv.getVar("input-disabled-placeholder-color");
}
}
}
%input {
@include input;
}

215
sass/form/tools.sass
View File

@@ -1,215 +0,0 @@
$label-color: $text-strong !default
$label-weight: $weight-bold !default
$help-size: $size-small !default
$label-colors: $form-colors !default
.label
color: $label-color
display: block
font-size: $size-normal
font-weight: $label-weight
&:not(:last-child)
margin-bottom: 0.5em
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large
.help
display: block
font-size: $help-size
margin-top: 0.25rem
@each $name, $pair in $label-colors
$color: nth($pair, 1)
&.is-#{$name}
color: $color
// Containers
.field
&:not(:last-child)
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
justify-content: flex-start
.control
&:not(:last-child)
+ltr-property("margin", -1px)
&:not(:first-child):not(:last-child)
.button,
.input,
.select select
border-radius: 0
&:first-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-right-radius: 0
border-top-right-radius: 0
+rtl
border-bottom-left-radius: 0
border-top-left-radius: 0
&:last-child:not(:only-child)
.button,
.input,
.select select
+ltr
border-bottom-left-radius: 0
border-top-left-radius: 0
+rtl
border-bottom-right-radius: 0
border-top-right-radius: 0
.button,
.input,
.select select
&:not([disabled])
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active
z-index: 3
&:hover
z-index: 4
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.has-addons-centered
justify-content: center
&.has-addons-right
justify-content: flex-end
&.has-addons-fullwidth
.control
flex-grow: 1
flex-shrink: 0
&.is-grouped
display: flex
justify-content: flex-start
& > .control
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
+ltr-property("margin", 0.75rem)
&.is-expanded
flex-grow: 1
flex-shrink: 1
&.is-grouped-centered
justify-content: center
&.is-grouped-right
justify-content: flex-end
&.is-grouped-multiline
flex-wrap: wrap
& > .control
&:last-child,
&:not(:last-child)
margin-bottom: 0.75rem
&:last-child
margin-bottom: -0.75rem
&:not(:last-child)
margin-bottom: 0
&.is-horizontal
+tablet
display: flex
.field-label
.label
font-size: inherit
+mobile
margin-bottom: 0.5rem
+tablet
flex-basis: 0
flex-grow: 1
flex-shrink: 0
+ltr-property("margin", 1.5rem)
text-align: right
&.is-small
font-size: $size-small
padding-top: 0.375em
&.is-normal
padding-top: 0.375em
&.is-medium
font-size: $size-medium
padding-top: 0.375em
&.is-large
font-size: $size-large
padding-top: 0.375em
.field-body
.field .field
margin-bottom: 0
+tablet
display: flex
flex-basis: 0
flex-grow: 5
flex-shrink: 1
.field
margin-bottom: 0
& > .field
flex-shrink: 1
&:not(.is-narrow)
flex-grow: 1
&:not(:last-child)
+ltr-property("margin", 0.75rem)
.control
box-sizing: border-box
clear: both
font-size: $size-normal
position: relative
text-align: inherit
// Modifiers
&.has-icons-left,
&.has-icons-right
.input,
.select
&:focus
& ~ .icon
color: $input-icon-active-color
&.is-small ~ .icon
font-size: $size-small
&.is-medium ~ .icon
font-size: $size-medium
&.is-large ~ .icon
font-size: $size-large
.icon
color: $input-icon-color
height: $input-height
pointer-events: none
position: absolute
top: 0
width: $input-height
z-index: 4
&.has-icons-left
.input,
.select select
padding-left: $input-height
.icon.is-left
left: 0
&.has-icons-right
.input,
.select select
padding-right: $input-height
.icon.is-right
right: 0
&.is-loading
&::after
@extend %loader
position: absolute !important
+ltr-position(0.625em)
top: 0.625em
z-index: 4
&.is-small:after
font-size: $size-small
&.is-medium:after
font-size: $size-medium
&.is-large:after
font-size: $size-large

341
sass/form/tools.scss Normal file
View File

@@ -0,0 +1,341 @@
@use "shared";
@use "../utilities/controls";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$label-color: cv.getVar("text-strong") !default;
$label-weight: cv.getVar("weight-semibold") !default;
$help-size: cv.getVar("size-small") !default;
$label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}label {
color: $label-color;
display: block;
font-size: cv.getVar("size-normal");
font-weight: $label-weight;
&:not(:last-child) {
margin-bottom: 0.5em;
}
// Sizes
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
}
}
.#{iv.$class-prefix}help {
display: block;
font-size: $help-size;
margin-top: 0.25rem;
@each $name, $pair in $label-colors {
&.#{iv.$class-prefix}is-#{$name} {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-on-scheme-l")}
);
}
}
}
// Containers
.#{iv.$class-prefix}field {
@include cv.register-vars(
(
"block-spacing": 0.75rem,
)
);
@extend %block;
// Modifiers
&.#{iv.$class-prefix}has-addons {
display: flex;
justify-content: flex-start;
.#{iv.$class-prefix}control {
&:not(:last-child) {
margin-inline-end: -1px;
}
&:not(:first-child):not(:last-child) {
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
border-radius: 0;
}
}
&:first-child:not(:only-child) {
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
// @include ltr {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
// }
}
}
&:last-child:not(:only-child) {
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
// @include ltr {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
// }
}
}
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
&:not([disabled]) {
&:hover,
&.#{iv.$class-prefix}is-hovered {
z-index: 2;
}
&:focus,
&.#{iv.$class-prefix}is-focused,
&:active,
&.#{iv.$class-prefix}is-active {
z-index: 3;
&:hover {
z-index: 4;
}
}
}
}
&.#{iv.$class-prefix}is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
}
&.#{iv.$class-prefix}has-addons-centered {
justify-content: center;
}
&.#{iv.$class-prefix}has-addons-right {
justify-content: flex-end;
}
&.#{iv.$class-prefix}has-addons-fullwidth {
.#{iv.$class-prefix}control {
flex-grow: 1;
flex-shrink: 0;
}
}
}
&.#{iv.$class-prefix}is-grouped {
display: flex;
gap: 0.75rem;
justify-content: flex-start;
& > .#{iv.$class-prefix}control {
flex-shrink: 0;
&.#{iv.$class-prefix}is-expanded {
flex-grow: 1;
flex-shrink: 1;
}
}
&.#{iv.$class-prefix}is-grouped-centered {
justify-content: center;
}
&.#{iv.$class-prefix}is-grouped-right {
justify-content: flex-end;
}
&.#{iv.$class-prefix}is-grouped-multiline {
flex-wrap: wrap;
}
}
&.#{iv.$class-prefix}is-horizontal {
@include mx.tablet {
display: flex;
}
}
}
.#{iv.$class-prefix}field-label {
.#{iv.$class-prefix}label {
font-size: inherit;
}
@include mx.mobile {
margin-bottom: 0.5rem;
}
@include mx.tablet {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
margin-inline-end: 1.5rem;
text-align: right;
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
padding-top: 0.375em;
}
&.#{iv.$class-prefix}is-normal {
padding-top: 0.375em;
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
padding-top: 0.375em;
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
padding-top: 0.375em;
}
}
}
.#{iv.$class-prefix}field-body {
.#{iv.$class-prefix}field .#{iv.$class-prefix}field {
margin-bottom: 0;
}
@include mx.tablet {
display: flex;
flex-basis: 0;
flex-grow: 5;
flex-shrink: 1;
.#{iv.$class-prefix}field {
margin-bottom: 0;
}
& > .#{iv.$class-prefix}field {
flex-shrink: 1;
&:not(.#{iv.$class-prefix}is-narrow) {
flex-grow: 1;
}
&:not(:last-child) {
margin-inline-end: 0.75rem;
}
}
}
}
.#{iv.$class-prefix}control {
box-sizing: border-box;
clear: both;
font-size: cv.getVar("size-normal");
position: relative;
text-align: inherit;
// Modifiers
&.#{iv.$class-prefix}has-icons-left,
&.#{iv.$class-prefix}has-icons-right {
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select {
&:hover {
& ~ .#{iv.$class-prefix}icon {
color: cv.getVar("input-icon-hover-color");
}
}
&:focus {
& ~ .#{iv.$class-prefix}icon {
color: cv.getVar("input-icon-focus-color");
}
}
&.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon {
font-size: cv.getVar("size-large");
}
}
.#{iv.$class-prefix}icon {
color: cv.getVar("input-icon-color");
height: cv.getVar("input-height");
pointer-events: none;
position: absolute;
top: 0;
width: cv.getVar("input-height");
z-index: 4;
}
}
&.#{iv.$class-prefix}has-icons-left {
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
padding-left: cv.getVar("input-height");
}
.#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
left: 0;
}
}
&.#{iv.$class-prefix}has-icons-right {
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
padding-right: cv.getVar("input-height");
}
.#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
right: 0;
}
}
&.#{iv.$class-prefix}is-loading {
&::after {
@extend %loader;
inset-inline-end: 0.75em;
position: absolute !important;
top: 0.75em;
z-index: 4;
}
&.#{iv.$class-prefix}is-small:after {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium:after {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large:after {
font-size: cv.getVar("size-large");
}
}
}