Add more Sass and CSS variables

This commit is contained in:
Jeremy Thomas
2024-07-07 21:01:04 +01:00
parent ab4a7b7d18
commit 05f898d4d8
22 changed files with 163 additions and 81 deletions

View File

@@ -12,16 +12,6 @@ $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%;

View File

@@ -9,6 +9,8 @@ $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-style: solid !default;
$input-border-width: cv.getVar("control-border-width") !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;
@@ -64,6 +66,8 @@ $input-radius: cv.getVar("radius") !default;
"input-h": #{$input-h},
"input-s": #{$input-s},
"input-l": #{$input-l},
"input-border-style": #{$input-border-style},
"input-border-width": #{$input-border-width},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-hover-border-l-delta": #{$input-hover-border-l-delta},

View File

@@ -6,20 +6,35 @@
@use "../utilities/mixins" as mx;
$label-color: cv.getVar("text-strong") !default;
$label-spacing: 0.5em !default;
$label-weight: cv.getVar("weight-semibold") !default;
$help-size: cv.getVar("size-small") !default;
$label-colors: shared.$form-colors !default;
$field-block-spacing: 0.75rem !default;
:root {
@include cv.register-vars(
(
"label-color": #{$label-color},
"label-spacing": #{$label-spacing},
"label-weight": #{$label-weight},
"help-size": #{$help-size},
"field-block-spacing": #{$field-block-spacing},
)
);
}
.#{iv.$class-prefix}label {
color: $label-color;
color: cv.getVar("label-color");
display: block;
font-size: cv.getVar("size-normal");
font-weight: $label-weight;
&:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: cv.getVar("label-spacing");
}
// Sizes
@@ -38,7 +53,7 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}help {
display: block;
font-size: $help-size;
font-size: cv.getVar("help-size");
margin-top: 0.25rem;
@each $name, $pair in $label-colors {
@@ -57,7 +72,7 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}field {
@include cv.register-vars(
(
"block-spacing": 0.75rem,
"block-spacing": #{cv.getVar("field-block-spacing")},
)
);