Move bootstrap @LESS variables to CSS var()

This commit is contained in:
the-djmaze 2022-11-02 20:49:38 +01:00
parent 874bfa852b
commit 0ef8af21b1
19 changed files with 132 additions and 266 deletions

View file

@ -8,14 +8,14 @@
// Make all forms have space below them
form {
margin: 0 0 @baseLineHeight;
margin: 0 0 1.43em;
}
// Identify controls by their labels
label {
display: block;
font-weight: normal;
line-height: @baseLineHeight;
line-height: 1.43em;
margin-bottom: 5px;
}
@ -27,8 +27,8 @@ select,
.select,
textarea {
font-family: inherit;
font-size: @baseFontSize;
line-height: @baseLineHeight;
font-size: var(--main-font-size, 14px);
line-height: 1.43em;
margin: 0;
text-transform: none;
}
@ -44,25 +44,26 @@ input {
box-sizing: border-box;
display: inline-block;
padding: 4px 6px;
color: @gray;
border-radius: @inputBorderRadius;
color: var(--input-clr, #555);
border-radius: var(--input-border-radius, 3px);
}
textarea,
input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
background-color: var(--input-bg-clr, #fff);
border: 1px solid var(--input-border-clr, #ccc);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
transition: border linear .2s, box-shadow linear .2s;
width: 210px;
// Focus state
&:focus {
border-color: darken(@inputBorder, 20%);
border-color: var(--input-focus-border-clr, #999);
box-shadow: none;
}
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
@ -83,8 +84,8 @@ select, .select {
// Safari requires -webkit-
-webkit-appearance: none;
appearance: none;
background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid @inputBorder;
background: var(--input-bg-clr, #fff) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid var(--input-border-clr, #ccc);
cursor: pointer;
padding-right: 1.5em;
width: 223px; // default input width + 10px of padding that doesn't get applied
@ -139,7 +140,22 @@ textarea[readonly] {
// Error
.control-group.error {
.formFieldState(@errorText, @errorText, @errorBackground);
> label {
color: var(--error-clr, #b94a48);
}
// Style inputs accordingly
input,
select,
textarea {
color: var(--error-clr, #b94a48);
border-color: var(--error-border-clr, #eed3d7);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
&:focus {
border-color: var(--error-clr, #b94a48);
// Write out in full since the lighten() function isn't easily escaped
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px var(--error-border-clr, #eed3d7);
}
}
}
// HORIZONTAL FORMS
@ -161,7 +177,7 @@ textarea[readonly] {
// Margin to space out fieldsets
.control-group {
margin-bottom: (@baseLineHeight / 2);
margin-bottom: 0.715em;
}
// Horizontal-specific styles
@ -170,7 +186,7 @@ textarea[readonly] {
.form-horizontal {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
margin-bottom: 1.43em;
> label {
display: inline-block;