103 lines
2.3 KiB
Plaintext
103 lines
2.3 KiB
Plaintext
//
|
|
// RTL Forms
|
|
// --------------------------------------------------
|
|
|
|
|
|
.radio,
|
|
.checkbox {
|
|
|
|
label {
|
|
padding-right: 20px;
|
|
padding-left: initial;
|
|
}
|
|
}
|
|
.radio input[type="radio"],
|
|
.radio-inline input[type="radio"],
|
|
.checkbox input[type="checkbox"],
|
|
.checkbox-inline input[type="checkbox"] {
|
|
margin-right: -20px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
// Radios and checkboxes on same line
|
|
.radio-inline,
|
|
.checkbox-inline {
|
|
padding-right: 20px;
|
|
padding-left: 0;
|
|
}
|
|
.radio-inline + .radio-inline,
|
|
.checkbox-inline + .checkbox-inline {
|
|
margin-right: 10px; // space out consecutive inline controls
|
|
margin-left: 0;
|
|
}
|
|
|
|
.has-feedback {
|
|
|
|
// Ensure icons don't overlap text
|
|
.form-control {
|
|
padding-left: (@input-height-base * 1.25);
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
// Feedback icon (requires .glyphicon classes)
|
|
.form-control-feedback {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
// Inline forms
|
|
//
|
|
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
|
// forms begin stacked on extra small (mobile) devices and then go inline when
|
|
// viewports reach <768px.
|
|
//
|
|
// Requires wrapping inputs and labels with `.form-group` for proper display of
|
|
// default HTML form controls and our custom form controls (e.g., input groups).
|
|
//
|
|
// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
|
|
|
|
.form-inline {
|
|
|
|
// Kick in the inline
|
|
@media (min-width: @screen-sm-min) {
|
|
|
|
label {
|
|
padding-right: 0;
|
|
padding-left: initial;
|
|
}
|
|
|
|
.radio input[type="radio"],
|
|
.checkbox input[type="checkbox"] {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// Horizontal forms
|
|
//
|
|
// Horizontal forms are built on grid classes and allow you to create forms with
|
|
// labels on the left and inputs on the right.
|
|
|
|
.form-horizontal {
|
|
|
|
// Reset spacing and right align labels, but scope to media queries so that
|
|
// labels on narrow viewports stack the same as a default form example.
|
|
@media (min-width: @screen-sm-min) {
|
|
.control-label {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
// Validation states
|
|
//
|
|
// Reposition the icon because it's now within a grid column and columns have
|
|
// `position: relative;` on them. Also accounts for the grid gutter padding.
|
|
.has-feedback .form-control-feedback {
|
|
left: (@grid-gutter-width / 2);
|
|
right: auto;
|
|
}
|
|
}
|