Make .form-horizontal simple with less CSS classes

This commit is contained in:
djmaze 2021-11-16 16:22:05 +01:00
parent dff89ea4e0
commit 071dab01a7
48 changed files with 351 additions and 463 deletions

View file

@ -49,24 +49,13 @@ input {
border-radius: @inputBorderRadius;
}
// Reset appearance properties for textual inputs and textarea
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
input,
textarea {
width: 210px;
}
// Reset height since textareas have rows
textarea {
height: auto;
resize: none;
}
// Everything else
textarea,
input {
background-color: @inputBackground;
border: 1px solid @inputBorder;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
transition: border linear .2s, box-shadow linear .2s;
width: 210px;
// Focus state
&:focus {
@ -188,18 +177,19 @@ input[type="checkbox"][readonly] {
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
}
// Float the labels left
.control-label {
display: inline-block;
width: 140px;
padding-top: 5px;
text-align: right;
}
// Move over all input controls and content
.controls {
display: inline-block;
margin-left: 20px;
vertical-align: top;
> label {
display: inline-block;
padding-top: 5px;
text-align: right;
width: 140px;
}
// Move over all input controls and content
> *:not(label) {
display: inline-block;
margin-left: 20px;
vertical-align: top;
}
}
}