[Summary view] [Print] [Text view]

   1  //
   2  // Forms
   3  // --------------------------------------------------
   4  
   5  
   6  // GENERAL STYLES
   7  // --------------
   8  
   9  // Make all forms have space below them
  10  form {
  11    margin: 0 0 @baseLineHeight;
  12  }
  13  
  14  fieldset {
  15    padding: 0;
  16    margin: 0;
  17    border: 0;
  18  }
  19  
  20  // Groups of fields with labels on top (legends)
  21  legend {
  22    display: block;
  23    width: 100%;
  24    padding: 0;
  25    margin-bottom: @baseLineHeight;
  26    font-size: @baseFontSize * 1.5;
  27    line-height: @baseLineHeight * 2;
  28    color: @grayDark;
  29    border: 0;
  30    border-bottom: 1px solid #e5e5e5;
  31  
  32    // Small
  33    small {
  34      font-size: @baseLineHeight * .75;
  35      color: @grayLight;
  36    }
  37  }
  38  
  39  // Set font for forms
  40  label,
  41  input,
  42  button,
  43  select,
  44  textarea {
  45    #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
  46  }
  47  input,
  48  button,
  49  select,
  50  textarea {
  51    font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
  52  }
  53  
  54  // Identify controls by their labels
  55  label {
  56    display: block;
  57    margin-bottom: 5px;
  58  }
  59  
  60  // Form controls
  61  // -------------------------
  62  
  63  // Shared size and type resets
  64  select,
  65  textarea,
  66  input[type="text"],
  67  input[type="password"],
  68  input[type="datetime"],
  69  input[type="datetime-local"],
  70  input[type="date"],
  71  input[type="month"],
  72  input[type="time"],
  73  input[type="week"],
  74  input[type="number"],
  75  input[type="email"],
  76  input[type="url"],
  77  input[type="search"],
  78  input[type="tel"],
  79  input[type="color"],
  80  .uneditable-input {
  81    display: inline-block;
  82    height: @baseLineHeight;
  83    padding: 4px 6px;
  84    margin-bottom: @baseLineHeight / 2;
  85    font-size: @baseFontSize;
  86    line-height: @baseLineHeight;
  87    color: @gray;
  88    .border-radius(@inputBorderRadius);
  89    vertical-align: middle;
  90  }
  91  
  92  // Reset appearance properties for textual inputs and textarea
  93  // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
  94  input,
  95  textarea,
  96  .uneditable-input {
  97    width: 206px; // plus 12px padding and 2px border
  98  }
  99  // Reset height since textareas have rows
 100  textarea {
 101    height: auto;
 102  }
 103  // Everything else
 104  textarea,
 105  input[type="text"],
 106  input[type="password"],
 107  input[type="datetime"],
 108  input[type="datetime-local"],
 109  input[type="date"],
 110  input[type="month"],
 111  input[type="time"],
 112  input[type="week"],
 113  input[type="number"],
 114  input[type="email"],
 115  input[type="url"],
 116  input[type="search"],
 117  input[type="tel"],
 118  input[type="color"],
 119  .uneditable-input {
 120    background-color: @inputBackground;
 121    border: 1px solid @inputBorder;
 122    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
 123    .transition(~"border linear .2s, box-shadow linear .2s");
 124  
 125    // Focus state
 126    &:focus {
 127      border-color: rgba(82,168,236,.8);
 128      outline: 0;
 129      outline: thin dotted \9; /* IE6-9 */
 130      .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
 131    }
 132  }
 133  
 134  // Position radios and checkboxes better
 135  input[type="radio"],
 136  input[type="checkbox"] {
 137    margin: 4px 0 0;
 138    *margin-top: 0; /* IE7 */
 139    margin-top: 1px \9; /* IE8-9 */
 140    line-height: normal;
 141  }
 142  
 143  // Reset width of input images, buttons, radios, checkboxes
 144  input[type="file"],
 145  input[type="image"],
 146  input[type="submit"],
 147  input[type="reset"],
 148  input[type="button"],
 149  input[type="radio"],
 150  input[type="checkbox"] {
 151    width: auto; // Override of generic input selector
 152  }
 153  
 154  // Set the height of select and file controls to match text inputs
 155  select,
 156  input[type="file"] {
 157    height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
 158    *margin-top: 4px; /* For IE7, add top margin to align select with labels */
 159    line-height: @inputHeight;
 160  }
 161  
 162  // Make select elements obey height by applying a border
 163  select {
 164    width: 220px; // default input width + 10px of padding that doesn't get applied
 165    border: 1px solid @inputBorder;
 166    background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
 167  }
 168  
 169  // Make multiple select elements height not fixed
 170  select[multiple],
 171  select[size] {
 172    height: auto;
 173  }
 174  
 175  // Focus for select, file, radio, and checkbox
 176  select:focus,
 177  input[type="file"]:focus,
 178  input[type="radio"]:focus,
 179  input[type="checkbox"]:focus {
 180    .tab-focus();
 181  }
 182  
 183  
 184  // Uneditable inputs
 185  // -------------------------
 186  
 187  // Make uneditable inputs look inactive
 188  .uneditable-input,
 189  .uneditable-textarea {
 190    color: @grayLight;
 191    background-color: darken(@inputBackground, 1%);
 192    border-color: @inputBorder;
 193    .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
 194    cursor: not-allowed;
 195  }
 196  
 197  // For text that needs to appear as an input but should not be an input
 198  .uneditable-input {
 199    overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
 200    white-space: nowrap;
 201  }
 202  
 203  // Make uneditable textareas behave like a textarea
 204  .uneditable-textarea {
 205    width: auto;
 206    height: auto;
 207  }
 208  
 209  
 210  // Placeholder
 211  // -------------------------
 212  
 213  // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
 214  input,
 215  textarea {
 216    .placeholder();
 217  }
 218  
 219  
 220  // CHECKBOXES & RADIOS
 221  // -------------------
 222  
 223  // Indent the labels to position radios/checkboxes as hanging
 224  .radio,
 225  .checkbox {
 226    min-height: @baseLineHeight; // clear the floating input if there is no label text
 227    padding-left: 20px;
 228  }
 229  .radio input[type="radio"],
 230  .checkbox input[type="checkbox"] {
 231    float: left;
 232    margin-left: -20px;
 233  }
 234  
 235  // Move the options list down to align with labels
 236  .controls > .radio:first-child,
 237  .controls > .checkbox:first-child {
 238    padding-top: 5px; // has to be padding because margin collaspes
 239  }
 240  
 241  // Radios and checkboxes on same line
 242  // TODO v3: Convert .inline to .control-inline
 243  .radio.inline,
 244  .checkbox.inline {
 245    display: inline-block;
 246    padding-top: 5px;
 247    margin-bottom: 0;
 248    vertical-align: middle;
 249  }
 250  .radio.inline + .radio.inline,
 251  .checkbox.inline + .checkbox.inline {
 252    margin-left: 10px; // space out consecutive inline controls
 253  }
 254  
 255  
 256  
 257  // INPUT SIZES
 258  // -----------
 259  
 260  // General classes for quick sizes
 261  .input-mini       { width: 60px; }
 262  .input-small      { width: 90px; }
 263  .input-medium     { width: 150px; }
 264  .input-large      { width: 210px; }
 265  .input-xlarge     { width: 270px; }
 266  .input-xxlarge    { width: 530px; }
 267  
 268  // Grid style input sizes
 269  input[class*="span"],
 270  select[class*="span"],
 271  textarea[class*="span"],
 272  .uneditable-input[class*="span"],
 273  // Redeclare since the fluid row class is more specific
 274  .row-fluid input[class*="span"],
 275  .row-fluid select[class*="span"],
 276  .row-fluid textarea[class*="span"],
 277  .row-fluid .uneditable-input[class*="span"] {
 278    float: none;
 279    margin-left: 0;
 280  }
 281  // Ensure input-prepend/append never wraps
 282  .input-append input[class*="span"],
 283  .input-append .uneditable-input[class*="span"],
 284  .input-prepend input[class*="span"],
 285  .input-prepend .uneditable-input[class*="span"],
 286  .row-fluid input[class*="span"],
 287  .row-fluid select[class*="span"],
 288  .row-fluid textarea[class*="span"],
 289  .row-fluid .uneditable-input[class*="span"],
 290  .row-fluid .input-prepend [class*="span"],
 291  .row-fluid .input-append [class*="span"] {
 292    display: inline-block;
 293  }
 294  
 295  
 296  
 297  // GRID SIZING FOR INPUTS
 298  // ----------------------
 299  
 300  // Grid sizes
 301  #grid > .input(@gridColumnWidth, @gridGutterWidth);
 302  
 303  // Control row for multiple inputs per line
 304  .controls-row {
 305    .clearfix(); // Clear the float from controls
 306  }
 307  
 308  // Float to collapse white-space for proper grid alignment
 309  .controls-row [class*="span"],
 310  // Redeclare the fluid grid collapse since we undo the float for inputs
 311  .row-fluid .controls-row [class*="span"] {
 312    float: left;
 313  }
 314  // Explicity set top padding on all checkboxes/radios, not just first-child
 315  .controls-row .checkbox[class*="span"],
 316  .controls-row .radio[class*="span"] {
 317    padding-top: 5px;
 318  }
 319  
 320  
 321  
 322  
 323  // DISABLED STATE
 324  // --------------
 325  
 326  // Disabled and read-only inputs
 327  input[disabled],
 328  select[disabled],
 329  textarea[disabled],
 330  input[readonly],
 331  select[readonly],
 332  textarea[readonly] {
 333    cursor: not-allowed;
 334    background-color: @inputDisabledBackground;
 335  }
 336  // Explicitly reset the colors here
 337  input[type="radio"][disabled],
 338  input[type="checkbox"][disabled],
 339  input[type="radio"][readonly],
 340  input[type="checkbox"][readonly] {
 341    background-color: transparent;
 342  }
 343  
 344  
 345  
 346  
 347  // FORM FIELD FEEDBACK STATES
 348  // --------------------------
 349  
 350  // Warning
 351  .control-group.warning {
 352    .formFieldState(@warningText, @warningText, @warningBackground);
 353  }
 354  // Error
 355  .control-group.error {
 356    .formFieldState(@errorText, @errorText, @errorBackground);
 357  }
 358  // Success
 359  .control-group.success {
 360    .formFieldState(@successText, @successText, @successBackground);
 361  }
 362  // Success
 363  .control-group.info {
 364    .formFieldState(@infoText, @infoText, @infoBackground);
 365  }
 366  
 367  // HTML5 invalid states
 368  // Shares styles with the .control-group.error above
 369  input:focus:invalid,
 370  textarea:focus:invalid,
 371  select:focus:invalid {
 372    color: #b94a48;
 373    border-color: #ee5f5b;
 374    &:focus {
 375      border-color: darken(#ee5f5b, 10%);
 376      @shadow: 0 0 6px lighten(#ee5f5b, 20%);
 377      .box-shadow(@shadow);
 378    }
 379  }
 380  
 381  
 382  
 383  // FORM ACTIONS
 384  // ------------
 385  
 386  .form-actions {
 387    padding: (@baseLineHeight - 1) 20px @baseLineHeight;
 388    margin-top: @baseLineHeight;
 389    margin-bottom: @baseLineHeight;
 390    background-color: @formActionsBackground;
 391    border-top: 1px solid #e5e5e5;
 392    .clearfix(); // Adding clearfix to allow for .pull-right button containers
 393  }
 394  
 395  
 396  
 397  // HELP TEXT
 398  // ---------
 399  
 400  .help-block,
 401  .help-inline {
 402    color: lighten(@textColor, 15%); // lighten the text some for contrast
 403  }
 404  
 405  .help-block {
 406    display: block; // account for any element using help-block
 407    margin-bottom: @baseLineHeight / 2;
 408  }
 409  
 410  .help-inline {
 411    display: inline-block;
 412    .ie7-inline-block();
 413    vertical-align: middle;
 414    padding-left: 5px;
 415  }
 416  
 417  
 418  
 419  // INPUT GROUPS
 420  // ------------
 421  
 422  // Allow us to put symbols and text within the input field for a cleaner look
 423  .input-append,
 424  .input-prepend {
 425    display: inline-block;
 426    margin-bottom: @baseLineHeight / 2;
 427    vertical-align: middle;
 428    font-size: 0; // white space collapse hack
 429    white-space: nowrap; // Prevent span and input from separating
 430  
 431    // Reset the white space collapse hack
 432    input,
 433    select,
 434    .uneditable-input,
 435    .dropdown-menu,
 436    .popover {
 437      font-size: @baseFontSize;
 438    }
 439  
 440    input,
 441    select,
 442    .uneditable-input {
 443      position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
 444      margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
 445      *margin-left: 0;
 446      vertical-align: top;
 447      .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
 448      // Make input on top when focused so blue border and shadow always show
 449      &:focus {
 450        z-index: 2;
 451      }
 452    }
 453    .add-on {
 454      display: inline-block;
 455      width: auto;
 456      height: @baseLineHeight;
 457      min-width: 16px;
 458      padding: 4px 5px;
 459      font-size: @baseFontSize;
 460      font-weight: normal;
 461      line-height: @baseLineHeight;
 462      text-align: center;
 463      text-shadow: 0 1px 0 @white;
 464      background-color: @grayLighter;
 465      border: 1px solid #ccc;
 466    }
 467    .add-on,
 468    .btn,
 469    .btn-group > .dropdown-toggle {
 470      vertical-align: top;
 471      .border-radius(0);
 472    }
 473    .active {
 474      background-color: lighten(@green, 30);
 475      border-color: @green;
 476    }
 477  }
 478  
 479  .input-prepend {
 480    .add-on,
 481    .btn {
 482      margin-right: -1px;
 483    }
 484    .add-on:first-child,
 485    .btn:first-child {
 486      // FYI, `.btn:first-child` accounts for a button group that's prepended
 487      .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
 488    }
 489  }
 490  
 491  .input-append {
 492    input,
 493    select,
 494    .uneditable-input {
 495      .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
 496      + .btn-group .btn:last-child {
 497        .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
 498      }
 499    }
 500    .add-on,
 501    .btn,
 502    .btn-group {
 503      margin-left: -1px;
 504    }
 505    .add-on:last-child,
 506    .btn:last-child,
 507    .btn-group:last-child > .dropdown-toggle {
 508      .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
 509    }
 510  }
 511  
 512  // Remove all border-radius for inputs with both prepend and append
 513  .input-prepend.input-append {
 514    input,
 515    select,
 516    .uneditable-input {
 517      .border-radius(0);
 518      + .btn-group .btn {
 519        .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
 520      }
 521    }
 522    .add-on:first-child,
 523    .btn:first-child {
 524      margin-right: -1px;
 525      .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
 526    }
 527    .add-on:last-child,
 528    .btn:last-child {
 529      margin-left: -1px;
 530      .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
 531    }
 532    .btn-group:first-child {
 533      margin-left: 0;
 534    }
 535  }
 536  
 537  
 538  
 539  
 540  // SEARCH FORM
 541  // -----------
 542  
 543  input.search-query {
 544    padding-right: 14px;
 545    padding-right: 4px \9;
 546    padding-left: 14px;
 547    padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
 548    margin-bottom: 0; // Remove the default margin on all inputs
 549    .border-radius(15px);
 550  }
 551  
 552  /* Allow for input prepend/append in search forms */
 553  .form-search .input-append .search-query,
 554  .form-search .input-prepend .search-query {
 555    .border-radius(0); // Override due to specificity
 556  }
 557  .form-search .input-append .search-query {
 558    .border-radius(14px 0 0 14px);
 559  }
 560  .form-search .input-append .btn {
 561    .border-radius(0 14px 14px 0);
 562  }
 563  .form-search .input-prepend .search-query {
 564    .border-radius(0 14px 14px 0);
 565  }
 566  .form-search .input-prepend .btn {
 567    .border-radius(14px 0 0 14px);
 568  }
 569  
 570  
 571  
 572  
 573  // HORIZONTAL & VERTICAL FORMS
 574  // ---------------------------
 575  
 576  // Common properties
 577  // -----------------
 578  
 579  .form-search,
 580  .form-inline,
 581  .form-horizontal {
 582    input,
 583    textarea,
 584    select,
 585    .help-inline,
 586    .uneditable-input,
 587    .input-prepend,
 588    .input-append {
 589      display: inline-block;
 590      .ie7-inline-block();
 591      margin-bottom: 0;
 592      vertical-align: middle;
 593    }
 594    // Re-hide hidden elements due to specifity
 595    .hide {
 596      display: none;
 597    }
 598  }
 599  .form-search label,
 600  .form-inline label,
 601  .form-search .btn-group,
 602  .form-inline .btn-group {
 603    display: inline-block;
 604  }
 605  // Remove margin for input-prepend/-append
 606  .form-search .input-append,
 607  .form-inline .input-append,
 608  .form-search .input-prepend,
 609  .form-inline .input-prepend {
 610    margin-bottom: 0;
 611  }
 612  // Inline checkbox/radio labels (remove padding on left)
 613  .form-search .radio,
 614  .form-search .checkbox,
 615  .form-inline .radio,
 616  .form-inline .checkbox {
 617    padding-left: 0;
 618    margin-bottom: 0;
 619    vertical-align: middle;
 620  }
 621  // Remove float and margin, set to inline-block
 622  .form-search .radio input[type="radio"],
 623  .form-search .checkbox input[type="checkbox"],
 624  .form-inline .radio input[type="radio"],
 625  .form-inline .checkbox input[type="checkbox"] {
 626    float: left;
 627    margin-right: 3px;
 628    margin-left: 0;
 629  }
 630  
 631  
 632  // Margin to space out fieldsets
 633  .control-group {
 634    margin-bottom: @baseLineHeight / 2;
 635  }
 636  
 637  // Legend collapses margin, so next element is responsible for spacing
 638  legend + .control-group {
 639    margin-top: @baseLineHeight;
 640    -webkit-margin-top-collapse: separate;
 641  }
 642  
 643  // Horizontal-specific styles
 644  // --------------------------
 645  
 646  .form-horizontal {
 647    // Increase spacing between groups
 648    .control-group {
 649      margin-bottom: @baseLineHeight;
 650      .clearfix();
 651    }
 652    // Float the labels left
 653    .control-label {
 654      float: left;
 655      width: @horizontalComponentOffset - 20;
 656      padding-top: 5px;
 657      text-align: right;
 658    }
 659    // Move over all input controls and content
 660    .controls {
 661      // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
 662      // don't inherit the margin of the parent, in this case .controls
 663      *display: inline-block;
 664      *padding-left: 20px;
 665      margin-left: @horizontalComponentOffset;
 666      *margin-left: 0;
 667      &:first-child {
 668        *padding-left: @horizontalComponentOffset;
 669      }
 670    }
 671    // Remove bottom margin on block level help text since that's accounted for on .control-group
 672    .help-block {
 673      margin-bottom: 0;
 674    }
 675    // And apply it only to .help-block instances that follow a form control
 676    input,
 677    select,
 678    textarea,
 679    .uneditable-input,
 680    .input-prepend,
 681    .input-append {
 682      + .help-block {
 683        margin-top: @baseLineHeight / 2;
 684      }
 685    }
 686    // Move over buttons in .form-actions to align with .controls
 687    .form-actions {
 688      padding-left: @horizontalComponentOffset;
 689    }
 690  }