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