mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-03 22:47:03 +03:00
Move bootstrap @LESS variables to CSS var()
This commit is contained in:
parent
874bfa852b
commit
0ef8af21b1
19 changed files with 132 additions and 266 deletions
44
vendors/bootstrap/less/forms.less
vendored
44
vendors/bootstrap/less/forms.less
vendored
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue