less/bootstrap/forms.less

   1 //
   2 // Forms
   3 // --------------------------------------------------
   4
   5
   6 // Normalize non-controls
   7 //
   8 // Restyle and baseline non-control form elements.
   9
  10 fieldset {
  11   padding: 0;
  12   margin: 0;
  13   border: 0;
  14 }
  15
  16 legend {
  17   display: block;
  18   width: 100%;
  19   padding: 0;
  20   margin-bottom: @line-height-computed;
  21   font-size: (@font-size-base * 1.5);
  22   line-height: inherit;
  23   color: @legend-color;
  24   border: 0;
  25   border-bottom: 1px solid @legend-border-color;
  26 }
  27
  28 label {
  29   display: inline-block;
  30   margin-bottom: 5px;
  31   font-weight: bold;
  32 }
  33
  34
  35 // Normalize form controls
  36
  37 // Override content-box in Normalize (* isn't specific enough)
  38 input[type="search"] {
  39   .box-sizing(border-box);
  40 }
  41
  42 // Position radios and checkboxes better
  43 input[type="radio"],
  44 input[type="checkbox"] {
  45   margin: 4px 0 0;
  46   margin-top: 1px \9; /* IE8-9 */
  47   line-height: normal;
  48 }
  49
  50 // Set the height of file controls to match text inputs
  51 input[type="file"] {
  52   display: block;
  53 }
  54
  55 // Make range inputs behave like textual form controls
  56 input[type="range"] {
  57   display: block;
  58   width: 100%;
  59 }
  60
  61 // Make multiple select elements height not fixed
  62 select[multiple],
  63 select[size] {
  64   height: auto;
  65 }
  66
  67 // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
  68 select optgroup {
  69   font-size: inherit;
  70   font-style: inherit;
  71   font-family: inherit;
  72 }
  73
  74 // Focus for file, radio, and checkbox
  75 input[type="file"]:focus,
  76 input[type="radio"]:focus,
  77 input[type="checkbox"]:focus {
  78   .tab-focus();
  79 }
  80
  81 // Fix for Chrome number input
  82 // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
  83 // See https://github.com/twbs/bootstrap/issues/8350 for more.
  84 input[type="number"] {
  85   &::-webkit-outer-spin-button,
  86   &::-webkit-inner-spin-button {
  87     height: auto;
  88   }
  89 }
  90
  91 // Adjust output element
  92 output {
  93   display: block;
  94   padding-top: (@padding-base-vertical + 1);
  95   font-size: @font-size-base;
  96   line-height: @line-height-base;
  97   color: @input-color;
  98 }
  99
 100
 101 // Common form controls
 102 //
 103 // Shared size and type resets for form controls. Apply `.form-control` to any
 104 // of the following form controls:
 105 //
 106 // select
 107 // textarea
 108 // input[type="text"]
 109 // input[type="password"]
 110 // input[type="datetime"]
 111 // input[type="datetime-local"]
 112 // input[type="date"]
 113 // input[type="month"]
 114 // input[type="time"]
 115 // input[type="week"]
 116 // input[type="number"]
 117 // input[type="email"]
 118 // input[type="url"]
 119 // input[type="search"]
 120 // input[type="tel"]
 121 // input[type="color"]
 122
 123 .form-control {
 124   display: block;
 125   width: 100%;
 126   height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
 127   padding: @padding-base-vertical @padding-base-horizontal;
 128   font-size: @font-size-base;
 129   line-height: @line-height-base;
 130   color: @input-color;
 131   background-color: @input-bg;
 132   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 133   border: 1px solid @input-border;
 134   border-radius: @input-border-radius;
 135   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
 136   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 137
 138   // Customize the `:focus` state to imitate native WebKit styles.
 139   .form-control-focus();
 140
 141   // Placeholder
 142   //
 143   // Placeholder text gets special styles because when browsers invalidate entire
 144   // lines if it doesn't understand a selector/
 145   .placeholder();
 146
 147   // Disabled and read-only inputs
 148   // Note: HTML5 says that controls under a fieldset > legend:first-child won't
 149   // be disabled if the fieldset is disabled. Due to implementation difficulty,
 150   // we don't honor that edge case; we style them as disabled anyway.
 151   &[disabled],
 152   &[readonly],
 153   fieldset[disabled] & {
 154     cursor: not-allowed;
 155     background-color: @input-bg-disabled;
 156   }
 157
 158   // Reset height for `textarea`s
 159   textarea& {
 160     height: auto;
 161   }
 162 }
 163
 164 // Special styles for iOS date input
 165 //
 166 // In Mobile Safari, date inputs require a pixel line-height that matches the
 167 // given height of the input.
 168 input[type="date"] {
 169   line-height: @input-height-base;
 170 }
 171
 172
 173 // Form groups
 174 //
 175 // Designed to help with the organization and spacing of vertical forms. For
 176 // horizontal forms, use the predefined grid classes.
 177
 178 .form-group {
 179   margin-bottom: 15px;
 180 }
 181
 182
 183 // Checkboxes and radios
 184 //
 185 // Indent the labels to position radios/checkboxes as hanging controls.
 186
 187 .radio,
 188 .checkbox {
 189   display: block;
 190   min-height: @line-height-computed; // clear the floating input if there is no label text
 191   margin-top: 10px;
 192   margin-bottom: 10px;
 193   padding-left: 20px;
 194   label {
 195     display: inline;
 196     font-weight: normal;
 197     cursor: pointer;
 198   }
 199 }
 200 .radio input[type="radio"],
 201 .radio-inline input[type="radio"],
 202 .checkbox input[type="checkbox"],
 203 .checkbox-inline input[type="checkbox"] {
 204   float: left;
 205   margin-left: -20px;
 206 }
 207 .radio + .radio,
 208 .checkbox + .checkbox {
 209   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
 210 }
 211
 212 // Radios and checkboxes on same line
 213 .radio-inline,
 214 .checkbox-inline {
 215   display: inline-block;
 216   padding-left: 20px;
 217   margin-bottom: 0;
 218   vertical-align: middle;
 219   font-weight: normal;
 220   cursor: pointer;
 221 }
 222 .radio-inline + .radio-inline,
 223 .checkbox-inline + .checkbox-inline {
 224   margin-top: 0;
 225   margin-left: 10px; // space out consecutive inline controls
 226 }
 227
 228 // Apply same disabled cursor tweak as for inputs
 229 //
 230 // Note: Neither radios nor checkboxes can be readonly.
 231 input[type="radio"],
 232 input[type="checkbox"],
 233 .radio,
 234 .radio-inline,
 235 .checkbox,
 236 .checkbox-inline {
 237   &[disabled],
 238   fieldset[disabled] & {
 239     cursor: not-allowed;
 240   }
 241 }
 242
 243
 244 // Form control sizing
 245 //
 246 // Build on `.form-control` with modifier classes to decrease or increase the
 247 // height and font-size of form controls.
 248
 249 .input-sm {
 250   .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 251 }
 252
 253 .input-lg {
 254   .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 255 }
 256
 257
 258 // Form control feedback states
 259 //
 260 // Apply contextual and semantic states to individual form controls.
 261
 262 .has-feedback {
 263   // Enable absolute positioning
 264   position: relative;
 265
 266   // Ensure icons don't overlap text
 267   .form-control {
 268     padding-right: (@input-height-base * 1.25);
 269   }
 270
 271   // Feedback icon (requires .glyphicon classes)
 272   .form-control-feedback {
 273     position: absolute;
 274     top: (@line-height-computed + 5); // Height of the `label` and its margin
 275     right: 0;
 276     display: block;
 277     width: @input-height-base;
 278     height: @input-height-base;
 279     line-height: @input-height-base;
 280     text-align: center;
 281   }
 282 }
 283
 284 // Feedback states
 285 .has-success {
 286   .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
 287 }
 288 .has-warning {
 289   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 290 }
 291 .has-error {
 292   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 293 }
 294
 295
 296 // Static form control text
 297 //
 298 // Apply class to a `p` element to make any string of text align with labels in
 299 // a horizontal form layout.
 300
 301 .form-control-static {
 302   margin-bottom: 0; // Remove default margin from `p`
 303 }
 304
 305
 306 // Help text
 307 //
 308 // Apply to any element you wish to create light text for placement immediately
 309 // below a form control. Use for general help, formatting, or instructional text.
 310
 311 .help-block {
 312   display: block; // account for any element using help-block
 313   margin-top: 5px;
 314   margin-bottom: 10px;
 315   color: lighten(@text-color, 25%); // lighten the text some for contrast
 316 }
 317
 318
 319
 320 // Inline forms
 321 //
 322 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 323 // forms begin stacked on extra small (mobile) devices and then go inline when
 324 // viewports reach <768px.
 325 //
 326 // Requires wrapping inputs and labels with `.form-group` for proper display of
 327 // default HTML form controls and our custom form controls (e.g., input groups).
 328 //
 329 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
 330
 331 .form-inline {
 332
 333   // Kick in the inline
 334   @media (min-width: @screen-sm-min) {
 335     // Inline-block all the things for "inline"
 336     .form-group {
 337       display: inline-block;
 338       margin-bottom: 0;
 339       vertical-align: middle;
 340     }
 341
 342     // In navbar-form, allow folks to *not* use `.form-group`
 343     .form-control {
 344       display: inline-block;
 345       width: auto; // Prevent labels from stacking above inputs in `.form-group`
 346       vertical-align: middle;
 347     }
 348
 349     .control-label {
 350       margin-bottom: 0;
 351       vertical-align: middle;
 352     }
 353
 354     // Remove default margin on radios/checkboxes that were used for stacking, and
 355     // then undo the floating of radios and checkboxes to match (which also avoids
 356     // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
 357     .radio,
 358     .checkbox {
 359       display: inline-block;
 360       margin-top: 0;
 361       margin-bottom: 0;
 362       padding-left: 0;
 363       vertical-align: middle;
 364     }
 365     .radio input[type="radio"],
 366     .checkbox input[type="checkbox"] {
 367       float: none;
 368       margin-left: 0;
 369     }
 370
 371     // Validation states
 372     //
 373     // Reposition the icon because it's now within a grid column and columns have
 374     // `position: relative;` on them. Also accounts for the grid gutter padding.
 375     .has-feedback .form-control-feedback {
 376       top: 0;
 377     }
 378   }
 379 }
 380
 381
 382 // Horizontal forms
 383 //
 384 // Horizontal forms are built on grid classes and allow you to create forms with
 385 // labels on the left and inputs on the right.
 386
 387 .form-horizontal {
 388
 389   // Consistent vertical alignment of labels, radios, and checkboxes
 390   .control-label,
 391   .radio,
 392   .checkbox,
 393   .radio-inline,
 394   .checkbox-inline {
 395     margin-top: 0;
 396     margin-bottom: 0;
 397     padding-top: (@padding-base-vertical + 1); // Default padding plus a border
 398   }
 399   // Account for padding we're adding to ensure the alignment and of help text
 400   // and other content below items
 401   .radio,
 402   .checkbox {
 403     min-height: (@line-height-computed + (@padding-base-vertical + 1));
 404   }
 405
 406   // Make form groups behave like rows
 407   .form-group {
 408     .make-row();
 409   }
 410
 411   .form-control-static {
 412     padding-top: (@padding-base-vertical + 1);
 413   }
 414
 415   // Only right align form labels here when the columns stop stacking
 416   @media (min-width: @screen-sm-min) {
 417     .control-label {
 418       text-align: right;
 419     }
 420   }
 421
 422   // Validation states
 423   //
 424   // Reposition the icon because it's now within a grid column and columns have
 425   // `position: relative;` on them. Also accounts for the grid gutter padding.
 426   .has-feedback .form-control-feedback {
 427     top: 0;
 428     right: (@grid-gutter-width / 2);
 429   }
 430 }