Add documentation of all CSS variables available

This commit is contained in:
Jeremy Thomas
2024-09-18 14:46:10 +01:00
parent 29aea4dfc4
commit 15ff0be367
35 changed files with 635 additions and 97 deletions

View File

@@ -13,6 +13,11 @@ $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-border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
) !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;
@@ -70,6 +75,7 @@ $input-radius: cv.getVar("radius") !default;
"input-border-width": #{$input-border-width},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-border-color": #{$input-border-color},
"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},
@@ -107,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
)}
)
);
border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-color: cv.getVar("input-border-color");
border-radius: cv.getVar("input-radius");
color: hsl(
#{cv.getVar("input-h")},

View File

@@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
$hero-body-padding-medium: 9rem 4.5rem !default;
$hero-body-padding-large: 18rem 6rem !default;
$hero-gradient-h-offset: 5deg;
$hero-gradient-s-offset: 10%;
$hero-gradient-l-offset: 5%;
$hero-gradient-h-offset: 5deg !default;
$hero-gradient-s-offset: 10% !default;
$hero-gradient-l-offset: 5% !default;
$hero-colors: dv.$colors !default;
@@ -25,6 +25,9 @@ $hero-colors: dv.$colors !default;
"hero-body-padding-small": #{$hero-body-padding-small},
"hero-body-padding-medium": #{$hero-body-padding-medium},
"hero-body-padding-large": #{$hero-body-padding-large},
"hero-gradient-h-offset": #{$hero-gradient-h-offset},
"hero-gradient-s-offset": #{$hero-gradient-s-offset},
"hero-gradient-l-offset": #{$hero-gradient-l-offset},
)
);
}