themes/default/less/forms.less

   1 // Forms.less
   2 // Base styles for various input types, form layouts, and states
   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 * 1.5;
  26   font-size: @baseFontSize * 1.5;
  27   line-height: @baseLineHeight * 2;
  28   color: @grayDark;
  29   border: 0;
  30   border-bottom: 1px solid #eee;
  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 > .sans-serif(); // 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   color: @grayDark;
  59 }
  60
  61 // Inputs, Textareas, Selects
  62 input,
  63 textarea,
  64 select,
  65 .uneditable-input {
  66   display: inline-block;
  67   width: 210px;
  68   height: @baseLineHeight;
  69   padding: 4px;
  70   margin-bottom: 9px;
  71   font-size: @baseFontSize;
  72   line-height: @baseLineHeight;
  73   color: @gray;
  74   border: 1px solid #ccc;
  75   .border-radius(3px);
  76 }
  77 .uneditable-textarea {
  78   width: auto;
  79   height: auto;
  80 }
  81
  82 // Inputs within a label
  83 label input,
  84 label textarea,
  85 label select {
  86   display: block;
  87 }
  88
  89 // Mini reset for unique input types
  90 input[type="image"],
  91 input[type="checkbox"],
  92 input[type="radio"] {
  93   width: auto;
  94   height: auto;
  95   padding: 0;
  96   margin: 3px 0;
  97   *margin-top: 0; /* IE7 */
  98   line-height: normal;
  99   cursor: pointer;
 100   .border-radius(0);
 101   border: 0 \9; /* IE9 and down */
 102 }
 103 input[type="image"] {
 104   border: 0;
 105 }
 106
 107 // Reset the file input to browser defaults
 108 input[type="file"] {
 109   width: auto;
 110   padding: initial;
 111   line-height: initial;
 112   border: initial;
 113   background-color: @white;
 114   background-color: initial;
 115   .box-shadow(none);
 116 }
 117
 118 // Help out input buttons
 119 input[type="button"],
 120 input[type="reset"],
 121 input[type="submit"] {
 122   width: auto;
 123   height: auto;
 124 }
 125
 126 // Set the height of select and file controls to match text inputs
 127 select,
 128 input[type="file"] {
 129   height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
 130   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
 131   line-height: 28px;
 132 }
 133
 134 // Reset line-height for IE
 135 input[type="file"] {
 136   line-height: 18px \9;
 137 }
 138
 139 // Chrome on Linux and Mobile Safari need background-color
 140 select {
 141   width: 220px; // default input width + 10px of padding that doesn't get applied
 142   background-color: @white;
 143 }
 144
 145 // Make multiple select elements height not fixed
 146 select[multiple],
 147 select[size] {
 148   height: auto;
 149 }
 150
 151 // Remove shadow from image inputs
 152 input[type="image"] {
 153   .box-shadow(none);
 154 }
 155
 156 // Make textarea height behave
 157 textarea {
 158   height: auto;
 159 }
 160
 161 // Hidden inputs
 162 input[type="hide"] {
 163   display: none;
 164 }
 165
 166
 167
 168 // CHECKBOXES & RADIOS
 169 // -------------------
 170
 171 // Indent the labels to position radios/checkboxes as hanging
 172 .radio,
 173 .checkbox {
 174   padding-left: 18px;
 175 }
 176 .radio input[type="radio"],
 177 .checkbox input[type="checkbox"] {
 178   float: left;
 179   margin-left: -18px;
 180 }
 181
 182 // Move the options list down to align with labels
 183 .controls > .radio:first-child,
 184 .controls > .checkbox:first-child {
 185   padding-top: 5px; // has to be padding because margin collaspes
 186 }
 187
 188 // Radios and checkboxes on same line
 189 // TODO v3: Convert .inline to .control-inline
 190 .radio.inline,
 191 .checkbox.inline {
 192   display: inline-block;
 193   padding-top: 5px;
 194   margin-bottom: 0;
 195   vertical-align: middle;
 196 }
 197 .radio.inline + .radio.inline,
 198 .checkbox.inline + .checkbox.inline {
 199   margin-left: 10px; // space out consecutive inline controls
 200 }
 201
 202
 203
 204 // FOCUS STATE
 205 // -----------
 206
 207 input,
 208 textarea {
 209   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
 210   @transition: border linear .2s, box-shadow linear .2s;
 211   .transition(@transition);
 212 }
 213 input:focus,
 214 textarea:focus {
 215   border-color: rgba(82,168,236,.8);
 216   @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
 217   .box-shadow(@shadow);
 218   outline: 0;
 219   outline: thin dotted \9; /* IE6-9 */
 220 }
 221 input[type="file"]:focus,
 222 input[type="radio"]:focus,
 223 input[type="checkbox"]:focus,
 224 select:focus {
 225   .box-shadow(none); // override for file inputs
 226   .tab-focus();
 227 }
 228
 229
 230
 231 // INPUT SIZES
 232 // -----------
 233
 234 // General classes for quick sizes
 235 .input-mini       { width: 60px; }
 236 .input-small      { width: 90px; }
 237 .input-medium     { width: 150px; }
 238 .input-large      { width: 210px; }
 239 .input-xlarge     { width: 270px; }
 240 .input-xxlarge    { width: 530px; }
 241
 242 // Grid style input sizes
 243 input[class*="span"],
 244 select[class*="span"],
 245 textarea[class*="span"],
 246 .uneditable-input {
 247   float: none;
 248   margin-left: 0;
 249 }
 250
 251
 252
 253 // GRID SIZING FOR INPUTS
 254 // ----------------------
 255
 256 #inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
 257
 258
 259
 260
 261 // DISABLED STATE
 262 // --------------
 263
 264 // Disabled and read-only inputs
 265 input[disabled],
 266 select[disabled],
 267 textarea[disabled],
 268 input[readonly],
 269 select[readonly],
 270 textarea[readonly] {
 271   background-color: #f5f5f5;
 272   border-color: #ddd;
 273   cursor: not-allowed;
 274 }
 275
 276
 277
 278
 279 // FORM FIELD FEEDBACK STATES
 280 // --------------------------
 281
 282 // Warning
 283 .control-group.warning {
 284   .formFieldState(darken(@orange, 10%), @orange, @warningBackground);
 285 }
 286 .control-group.warning .add-on {
 287   background: @errorBackground;
 288   color: darken(@orange, 10%);
 289   border-color: darken(@orange, 10%);
 290 }
 291
 292 .add-on.success {}
 293
 294 // Error
 295 .control-group.error {
 296   .formFieldState(darken(@red, 10%), @red, @errorBackground);
 297 }
 298 .control-group.error .add-on {
 299   background: @errorBackground;
 300   color: darken(@red, 10%);
 301   border-color: darken(@red, 10%);
 302 }
 303
 304 // Success
 305 .control-group.success {
 306   .formFieldState(darken(@green, 10%), @green, @successBackground);
 307 }
 308
 309 // HTML5 invalid states
 310 // Shares styles with the .control-group.error above
 311 input:focus:required:invalid,
 312 textarea:focus:required:invalid,
 313 select:focus:required:invalid {
 314   color: #b94a48;
 315   border-color: #ee5f5b;
 316   &:focus {
 317     border-color: darken(#ee5f5b, 10%);
 318     .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
 319   }
 320 }
 321
 322
 323
 324 // FORM ACTIONS
 325 // ------------
 326
 327 .form-actions {
 328   padding: (@baseLineHeight - 1) 20px @baseLineHeight;
 329   margin-top: @baseLineHeight;
 330   margin-bottom: @baseLineHeight;
 331   background-color: #f5f5f5;
 332   border-top: 1px solid #ddd;
 333 }
 334
 335 // For text that needs to appear as an input but should not be an input
 336 .uneditable-input {
 337   display: block;
 338   background-color: @white;
 339   border-color: #eee;
 340   .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
 341   cursor: not-allowed;
 342 }
 343
 344 // Placeholder text gets special styles; can't be bundled together though for some reason
 345 .placeholder( lighten(@gray, 30%));
 346
 347 // HELP TEXT
 348 // ---------
 349
 350 .help-block {
 351   display: block; // account for any element using help-block
 352   margin-top: 5px;
 353   margin-bottom: 0;
 354   color: @gray;
 355 }
 356
 357 .help-inline {
 358   display: inline-block;
 359   .ie7-inline-block();
 360   margin-bottom: 9px;
 361   vertical-align: middle;
 362   padding-left: 5px;
 363 }
 364
 365
 366
 367 // INPUT GROUPS
 368 // ------------
 369
 370 // Allow us to put symbols and text within the input field for a cleaner look
 371 .input-prepend,
 372 .input-append {
 373   margin-bottom: 5px;
 374   .clearfix(); // Clear the float to prevent wrapping
 375   input,
 376   .uneditable-input {
 377     .border-radius(0 3px 3px 0);
 378     &:focus {
 379       position: relative;
 380       z-index: 2;
 381     }
 382   }
 383   .uneditable-input {
 384     border-left-color: #ccc;
 385   }
 386   .add-on {
 387     position: absolute;
 388     width: auto;
 389     min-width: 16px;
 390     height: @baseLineHeight;
 391     margin-right: -1px;
 392     padding: 4px 5px;
 393     font-weight: normal;
 394     line-height: @baseLineHeight;
 395     color: @grayLight;
 396     text-align: center;
 397     text-shadow: 0 1px 0 @white;
 398     background-color: #f5f5f5;
 399     border: 1px solid #ccc;
 400     .border-radius(3px 0 0 3px);
 401   }
 402   .active {
 403     background-color: lighten(@green, 30);
 404     border-color: @green;
 405   }
 406 }
 407 .input-prepend {
 408   .add-on {
 409     *margin-top: 1px; /* IE6-7 */
 410   }
 411 }
 412 .input-append {
 413   input,
 414   .uneditable-input {
 415     .border-radius(3px 0 0 3px);
 416   }
 417   .uneditable-input {
 418     border-left-color: #eee;
 419     border-right-color: #ccc;
 420   }
 421   .add-on {
 422     margin-right: 0;
 423     margin-left: -1px;
 424     .border-radius(0 3px 3px 0);
 425   }
 426   input:first-child {
 427     // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
 428     // inherit the sum of its ancestors' margins.
 429     *margin-left: -160px;
 430
 431     &+.add-on {
 432       *margin-left: -21px;
 433     }
 434   }
 435 }
 436
 437
 438
 439 // SEARCH FORM
 440 // -----------
 441
 442 .search-query {
 443   padding-left: 14px;
 444   padding-right: 14px;
 445   margin-bottom: 0; // remove the default margin on all inputs
 446   .border-radius(14px);
 447 }
 448
 449
 450
 451 // HORIZONTAL & VERTICAL FORMS
 452 // ---------------------------
 453
 454 // Common properties
 455 // -----------------
 456
 457 .form-search,
 458 .form-inline,
 459 .form-horizontal {
 460   input,
 461   textarea,
 462   select,
 463   .help-inline,
 464   .uneditable-input {
 465     display: inline-block;
 466     margin-bottom: 0;
 467   }
 468   // Re-hide hide elements due to specifity
 469   .hide {
 470     display: none;
 471   }
 472 }
 473 .form-search label,
 474 .form-inline label,
 475 .form-search .input-append,
 476 .form-inline .input-append,
 477 .form-search .input-prepend,
 478 .form-inline .input-prepend {
 479   display: inline-block;
 480 }
 481 // Make the prepend and append add-on vertical-align: middle;
 482 .form-search .input-append .add-on,
 483 .form-inline .input-prepend .add-on,
 484 .form-search .input-append .add-on,
 485 .form-inline .input-prepend .add-on {
 486   vertical-align: middle;
 487 }
 488 // Inline checkbox/radio labels
 489 .form-search .radio,
 490 .form-inline .radio,
 491 .form-search .checkbox,
 492 .form-inline .checkbox {
 493   margin-bottom: 0;
 494   vertical-align: middle;
 495 }
 496
 497 // Margin to space out fieldsets
 498 .control-group {
 499   margin-bottom: @baseLineHeight / 2;
 500 }
 501
 502 // Legend collapses margin, so next element is responsible for spacing
 503 legend + .control-group {
 504   margin-top: @baseLineHeight;
 505   -webkit-margin-top-collapse: separate;
 506 }
 507
 508 // Horizontal-specific styles
 509 // --------------------------
 510
 511 .form-horizontal {
 512   // Increase spacing between groups
 513   .control-group {
 514     margin-bottom: @baseLineHeight;
 515     .clearfix();
 516   }
 517   // Float the labels left
 518   .control-label {
 519     float: left;
 520     width: 140px;
 521     padding-top: 5px;
 522     text-align: right;
 523   }
 524   // Move over all input controls and content
 525   .controls {
 526     margin-left: 160px;
 527   }
 528   // Move over buttons in .form-actions to align with .controls
 529   .form-actions {
 530     padding-left: 160px;
 531   }
 532 }