bulma/sass/form/input-textarea.scss
Jeremy Thomas 69877a652c Init v1
2024-03-21 16:11:54 +00:00

124 lines
2.7 KiB
SCSS

@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;
}
}