git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/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 select and file controls to match text inputs
  51 input[type="file"] {
  52   display: block;
  53 }
  54
  55 // Make multiple select elements height not fixed
  56 select[multiple],
  57 select[size] {
  58   height: auto;
  59 }
  60
  61 // Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
  62 select optgroup {
  63   font-size: inherit;
  64   font-style: inherit;
  65   font-family: inherit;
  66 }
  67
  68 // Focus for select, file, radio, and checkbox
  69 input[type="file"]:focus,
  70 input[type="radio"]:focus,
  71 input[type="checkbox"]:focus {
  72   .tab-focus();
  73 }
  74
  75 // Fix for Chrome number input
  76 // Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
  77 // See https://github.com/twbs/bootstrap/issues/8350 for more.
  78 input[type="number"] {
  79   &::-webkit-outer-spin-button,
  80   &::-webkit-inner-spin-button {
  81     height: auto;
  82   }
  83 }
  84
  85
  86 // Placeholder
  87 //
  88 // Placeholder text gets special styles because when browsers invalidate entire
  89 // lines if it doesn't understand a selector/
  90 .form-control {
  91   .placeholder();
  92 }
  93
  94
  95 // Common form controls
  96 //
  97 // Shared size and type resets for form controls. Apply `.form-control` to any
  98 // of the following form controls:
  99 //
 100 // select
 101 // textarea
 102 // input[type="text"]
 103 // input[type="password"]
 104 // input[type="datetime"]
 105 // input[type="datetime-local"]
 106 // input[type="date"]
 107 // input[type="month"]
 108 // input[type="time"]
 109 // input[type="week"]
 110 // input[type="number"]
 111 // input[type="email"]
 112 // input[type="url"]
 113 // input[type="search"]
 114 // input[type="tel"]
 115 // input[type="color"]
 116
 117 .form-control {
 118   display: block;
 119   width: 100%;
 120   height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
 121   padding: @padding-base-vertical @padding-base-horizontal;
 122   font-size: @font-size-base;
 123   line-height: @line-height-base;
 124   color: @input-color;
 125   vertical-align: middle;
 126   background-color: @input-bg;
 127   border: 1px solid @input-border;
 128   border-radius: @input-border-radius;
 129   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
 130   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 131
 132   // Customize the `:focus` state to imitate native WebKit styles.
 133   .form-control-focus();
 134
 135   // Disabled and read-only inputs
 136   // Note: HTML5 says that controls under a fieldset > legend:first-child won't
 137   // be disabled if the fieldset is disabled. Due to implementation difficulty,
 138   // we don't honor that edge case; we style them as disabled anyway.
 139   &[disabled],
 140   &[readonly],
 141   fieldset[disabled] & {
 142     cursor: not-allowed;
 143     background-color: @input-bg-disabled;
 144   }
 145
 146   // Reset height for `textarea`s
 147   textarea& {
 148     height: auto;
 149   }
 150 }
 151
 152
 153 // Form groups
 154 //
 155 // Designed to help with the organization and spacing of vertical forms. For
 156 // horizontal forms, use the predefined grid classes.
 157
 158 .form-group {
 159   margin-bottom: 15px;
 160 }
 161
 162
 163 // Checkboxes and radios
 164 //
 165 // Indent the labels to position radios/checkboxes as hanging controls.
 166
 167 .radio,
 168 .checkbox {
 169   display: block;
 170   min-height: @line-height-computed; // clear the floating input if there is no label text
 171   margin-top: 10px;
 172   margin-bottom: 10px;
 173   padding-left: 20px;
 174   vertical-align: middle;
 175   label {
 176     display: inline;
 177     margin-bottom: 0;
 178     font-weight: normal;
 179     cursor: pointer;
 180   }
 181 }
 182 .radio input[type="radio"],
 183 .radio-inline input[type="radio"],
 184 .checkbox input[type="checkbox"],
 185 .checkbox-inline input[type="checkbox"] {
 186   float: left;
 187   margin-left: -20px;
 188 }
 189 .radio + .radio,
 190 .checkbox + .checkbox {
 191   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
 192 }
 193
 194 // Radios and checkboxes on same line
 195 .radio-inline,
 196 .checkbox-inline {
 197   display: inline-block;
 198   padding-left: 20px;
 199   margin-bottom: 0;
 200   vertical-align: middle;
 201   font-weight: normal;
 202   cursor: pointer;
 203 }
 204 .radio-inline + .radio-inline,
 205 .checkbox-inline + .checkbox-inline {
 206   margin-top: 0;
 207   margin-left: 10px; // space out consecutive inline controls
 208 }
 209
 210 // Apply same disabled cursor tweak as for inputs
 211 //
 212 // Note: Neither radios nor checkboxes can be readonly.
 213 input[type="radio"],
 214 input[type="checkbox"],
 215 .radio,
 216 .radio-inline,
 217 .checkbox,
 218 .checkbox-inline {
 219   &[disabled],
 220   fieldset[disabled] & {
 221     cursor: not-allowed;
 222   }
 223 }
 224
 225 // Form control sizing
 226 .input-sm {
 227   .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 228 }
 229
 230 .input-lg {
 231   .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 232 }
 233
 234
 235 // Form control feedback states
 236 //
 237 // Apply contextual and semantic states to individual form controls.
 238
 239 // Warning
 240 .has-warning {
 241   .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 242 }
 243 // Error
 244 .has-error {
 245   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 246 }
 247 // Success
 248 .has-success {
 249   .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
 250 }
 251
 252
 253 // Static form control text
 254 //
 255 // Apply class to a `p` element to make any string of text align with labels in
 256 // a horizontal form layout.
 257
 258 .form-control-static {
 259   margin-bottom: 0; // Remove default margin from `p`
 260   padding-top: @padding-base-vertical;
 261 }
 262
 263
 264 // Help text
 265 //
 266 // Apply to any element you wish to create light text for placement immediately
 267 // below a form control. Use for general help, formatting, or instructional text.
 268
 269 .help-block {
 270   display: block; // account for any element using help-block
 271   margin-top: 5px;
 272   margin-bottom: 10px;
 273   color: lighten(@text-color, 25%); // lighten the text some for contrast
 274 }
 275
 276
 277
 278 // Inline forms
 279 //
 280 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 281 // forms begin stacked on extra small (mobile) devices and then go inline when
 282 // viewports reach <768px.
 283 //
 284 // Requires wrapping inputs and labels with `.form-group` for proper display of
 285 // default HTML form controls and our custom form controls (e.g., input groups).
 286 //
 287 // Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
 288
 289 .form-inline {
 290
 291   // Kick in the inline
 292   @media (min-width: @screen-tablet) {
 293     // Inline-block all the things for "inline"
 294     .form-group  {
 295       display: inline-block;
 296       margin-bottom: 0;
 297       vertical-align: middle;
 298     }
 299
 300     // In navbar-form, allow folks to *not* use `.form-group`
 301     .form-control {
 302       display: inline-block;
 303     }
 304
 305     // Remove default margin on radios/checkboxes that were used for stacking, and
 306     // then undo the floating of radios and checkboxes to match (which also avoids
 307     // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
 308     .radio,
 309     .checkbox {
 310       display: inline-block;
 311       margin-top: 0;
 312       margin-bottom: 0;
 313       padding-left: 0;
 314     }
 315     .radio input[type="radio"],
 316     .checkbox input[type="checkbox"] {
 317       float: none;
 318       margin-left: 0;
 319     }
 320   }
 321 }
 322
 323
 324 // Horizontal forms
 325 //
 326 // Horizontal forms are built on grid classes and allow you to create forms with
 327 // labels on the left and inputs on the right.
 328
 329 .form-horizontal .control-label,
 330 .form-horizontal .radio-inline,
 331 .form-horizontal .checkbox-inline {
 332   padding-top: @padding-base-vertical;
 333 }
 334
 335 .form-horizontal {
 336   .form-group {
 337     .make-row();
 338   }
 339 }
 340
 341 // Only right align form labels here when the columns stop stacking
 342 @media (min-width: @screen-tablet) {
 343   .form-horizontal .control-label {
 344     text-align: right;
 345   }
 346 }