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

@ -15,6 +15,7 @@
border-radius: 4px;
color: @warningText;
max-width: 800px;
min-height: @baseLineHeight;
}
// Adjust close link position

View file

@ -9,22 +9,10 @@
font-weight: bold;
line-height: @baseLineHeight;
color: inherit;
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,1);
opacity: 0.5;
&:hover {
text-decoration: none;
cursor: pointer;
opacity: 0.8;
&:not(:hover) {
opacity: 0.5;
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}

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;
}
}
}