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: @gray-dark;
  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: @gray;
 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   &:focus {
 133     border-color: rgba(82,168,236,.8);
 134     outline: 0;
 135     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
 136   }
 137
 138   // Disabled and read-only inputs
 139   // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
 140   //   disabled if the fieldset is disabled. Due to implementation difficulty,
 141   //   we don't honor that edge case; we style them as disabled anyway.
 142   &[disabled],
 143   &[readonly],
 144   fieldset[disabled] & {
 145     cursor: not-allowed;
 146     background-color: @input-bg-disabled;
 147   }
 148
 149   // Reset height for `textarea`s
 150   textarea& {
 151     height: auto;
 152   }
 153 }
 154
 155
 156 // Form groups
 157 //
 158 // Designed to help with the organization and spacing of vertical forms. For
 159 // horizontal forms, use the predefined grid classes.
 160
 161 .form-group {
 162   margin-bottom: 15px;
 163 }
 164
 165
 166 // Checkboxes and radios
 167 //
 168 // Indent the labels to position radios/checkboxes as hanging controls.
 169
 170 .radio,
 171 .checkbox {
 172   display: block;
 173   min-height: @line-height-computed; // clear the floating input if there is no label text
 174   margin-top: 10px;
 175   margin-bottom: 10px;
 176   padding-left: 20px;
 177   vertical-align: middle;
 178   label {
 179     display: inline;
 180     margin-bottom: 0;
 181     font-weight: normal;
 182     cursor: pointer;
 183   }
 184 }
 185 .radio input[type="radio"],
 186 .radio-inline input[type="radio"],
 187 .checkbox input[type="checkbox"],
 188 .checkbox-inline input[type="checkbox"] {
 189   float: left;
 190   margin-left: -20px;
 191 }
 192 .radio + .radio,
 193 .checkbox + .checkbox {
 194   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
 195 }
 196
 197 // Radios and checkboxes on same line
 198 .radio-inline,
 199 .checkbox-inline {
 200   display: inline-block;
 201   padding-left: 20px;
 202   margin-bottom: 0;
 203   vertical-align: middle;
 204   font-weight: normal;
 205   cursor: pointer;
 206 }
 207 .radio-inline + .radio-inline,
 208 .checkbox-inline + .checkbox-inline {
 209   margin-top: 0;
 210   margin-left: 10px; // space out consecutive inline controls
 211 }
 212
 213
 214
 215 // Form control sizing
 216 //
 217 // Relative text size, padding, and border-radii changes for form controls. For
 218 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 219 // element gets special love because it's special, and that's a fact!
 220
 221 .form-control {
 222   &.input-large {
 223     height: @input-height-large;
 224     padding: @padding-large-vertical @padding-large-horizontal;
 225     font-size: @font-size-large;
 226     border-radius: @border-radius-large;
 227   }
 228   &.input-small {
 229     height: @input-height-small;
 230     padding: @padding-small-vertical @padding-small-horizontal;
 231     font-size: @font-size-small;
 232     border-radius: @border-radius-small;
 233   }
 234 }
 235 select {
 236   &.input-large {
 237     height: @input-height-large;
 238     line-height: @input-height-large;
 239   }
 240   &.input-small {
 241     height: @input-height-small;
 242     line-height: @input-height-small;
 243   }
 244 }
 245
 246
 247 // Form control feedback states
 248 //
 249 // Apply contextual and semantic states to individual form controls.
 250
 251 // Warning
 252 .has-warning {
 253   .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
 254 }
 255 // Error
 256 .has-error {
 257   .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
 258 }
 259 // Success
 260 .has-success {
 261   .form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
 262 }
 263
 264
 265 // Help text
 266 //
 267 // Apply to any element you wish to create light text for placement immediately
 268 // below a form control. Use for general help, formatting, or instructional text.
 269
 270 .help-block {
 271   display: block; // account for any element using help-block
 272   margin-top: 5px;
 273   margin-bottom: 10px;
 274   color: lighten(@text-color, 25%); // lighten the text some for contrast
 275 }
 276
 277
 278
 279 // Input groups
 280 // --------------------------------------------------
 281
 282 // Base styles
 283 // -------------------------
 284 .input-group {
 285   display: table;
 286   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
 287
 288   // Undo padding and float of grid classes
 289   &.col {
 290     float: none;
 291     padding-left: 0;
 292     padding-right: 0;
 293   }
 294
 295   .form-control {
 296     width: 100%;
 297     margin-bottom: 0;
 298   }
 299 }
 300
 301 // Display as table-cell
 302 // -------------------------
 303 .input-group-addon,
 304 .input-group-btn,
 305 .input-group .form-control {
 306   display: table-cell;
 307
 308   &:not(:first-child):not(:last-child) {
 309     border-radius: 0;
 310   }
 311 }
 312 // Addon and addon wrapper for buttons
 313 .input-group-addon,
 314 .input-group-btn {
 315   width: 1%;
 316   white-space: nowrap;
 317   vertical-align: middle; // Match the inputs
 318 }
 319
 320 // Text input groups
 321 // -------------------------
 322 .input-group-addon {
 323   .box-sizing(border-box);
 324   padding: @padding-base-vertical @padding-base-horizontal;
 325   font-size: @font-size-base;
 326   font-weight: normal;
 327   line-height: @line-height-base;
 328   text-align: center;
 329   background-color: @gray-lighter;
 330   border: 1px solid @input-group-addon-border-color;
 331   border-radius: @border-radius-base;
 332
 333   &.input-small {
 334     padding: @padding-small-vertical @padding-small-horizontal;
 335     font-size: @font-size-small;
 336     border-radius: @border-radius-small;
 337   }
 338   &.input-large {
 339     padding: @padding-large-vertical @padding-large-horizontal;
 340     font-size: @font-size-large;
 341     border-radius: @border-radius-large;
 342   }
 343 }
 344
 345 // Reset rounded corners
 346 .input-group .form-control:first-child,
 347 .input-group-addon:first-child,
 348 .input-group-btn:first-child > .btn,
 349 .input-group-btn:first-child > .dropdown-toggle,
 350 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
 351   .border-right-radius(0);
 352 }
 353 .input-group-addon:first-child {
 354   border-right: 0;
 355 }
 356 .input-group .form-control:last-child,
 357 .input-group-addon:last-child,
 358 .input-group-btn:last-child > .btn,
 359 .input-group-btn:last-child > .dropdown-toggle,
 360 .input-group-btn:first-child > .btn:not(:first-child) {
 361   .border-left-radius(0);
 362 }
 363 .input-group-addon:last-child {
 364   border-left: 0;
 365 }
 366
 367 // Button input groups
 368 // -------------------------
 369 .input-group-btn {
 370   position: relative;
 371   white-space: nowrap;
 372 }
 373 .input-group-btn > .btn {
 374   position: relative;
 375   // Jankily prevent input button groups from wrapping
 376   + .btn {
 377     margin-left: -4px;
 378   }
 379   // Bring the "active" button to the front
 380   &:hover,
 381   &:active {
 382     z-index: 2;
 383   }
 384 }
 385
 386
 387 // Inline forms
 388 // --------------------------------------------------
 389
 390 .form-inline {
 391   .form-control,
 392   .radio,
 393   .checkbox {
 394     display: inline-block;
 395   }
 396   .radio,
 397   .checkbox {
 398     margin-top: 0;
 399     margin-bottom: 0;
 400   }
 401 }
 402
 403
 404 // Horizontal forms
 405 // --------------------------------------------------
 406 // Horizontal forms are built on grid classes.
 407
 408 .form-horizontal .control-label {
 409   padding-top: 6px;
 410 }
 411
 412 .form-horizontal {
 413   .form-group {
 414     .make-row();
 415   }
 416 }
 417
 418 // Only right align form labels here when the columns stop stacking
 419 @media (min-width: @screen-tablet) {
 420   .form-horizontal .control-label {
 421     text-align: right;
 422   }
 423 }