git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/mixins.less

   1 //
   2 // Mixins
   3 // --------------------------------------------------
   4
   5
   6 // Utilities
   7 // -------------------------
   8
   9 // Clearfix
  10 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
  11 //
  12 // For modern browsers
  13 // 1. The space content is one way to avoid an Opera bug when the
  14 //    contenteditable attribute is included anywhere else in the document.
  15 //    Otherwise it causes space to appear at the top and bottom of elements
  16 //    that are clearfixed.
  17 // 2. The use of `table` rather than `block` is only necessary if using
  18 //    `:before` to contain the top-margins of child elements.
  19 .clearfix() {
  20   &:before,
  21   &:after {
  22     content: " "; /* 1 */
  23     display: table; /* 2 */
  24   }
  25   &:after {
  26     clear: both;
  27   }
  28 }
  29
  30 // Webkit-style focus
  31 .tab-focus() {
  32   // Default
  33   outline: thin dotted #333;
  34   // Webkit
  35   outline: 5px auto -webkit-focus-ring-color;
  36   outline-offset: -2px;
  37 }
  38
  39 // Center-align a block level element
  40 .center-block() {
  41   display: block;
  42   margin-left: auto;
  43   margin-right: auto;
  44 }
  45
  46 // Sizing shortcuts
  47 .size(@width; @height) {
  48   width: @width;
  49   height: @height;
  50 }
  51 .square(@size) {
  52   .size(@size; @size);
  53 }
  54
  55 // Placeholder text
  56 .placeholder(@color: @input-color-placeholder) {
  57   &:-moz-placeholder            { color: @color; } // Firefox 4-18
  58   &::-moz-placeholder           { color: @color; } // Firefox 19+
  59   &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  60   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
  61 }
  62
  63 // Text overflow
  64 // Requires inline-block or block for proper styling
  65 .text-overflow() {
  66   overflow: hidden;
  67   text-overflow: ellipsis;
  68   white-space: nowrap;
  69 }
  70
  71 // CSS image replacement
  72 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
  73 .hide-text() {
  74   font: ~"0/0" a;
  75   color: transparent;
  76   text-shadow: none;
  77   background-color: transparent;
  78   border: 0;
  79 }
  80
  81
  82
  83 // CSS3 PROPERTIES
  84 // --------------------------------------------------
  85
  86 // Single side border-radius
  87 .border-top-radius(@radius) {
  88   border-top-right-radius: @radius;
  89    border-top-left-radius: @radius;
  90 }
  91 .border-right-radius(@radius) {
  92   border-bottom-right-radius: @radius;
  93      border-top-right-radius: @radius;
  94 }
  95 .border-bottom-radius(@radius) {
  96   border-bottom-right-radius: @radius;
  97    border-bottom-left-radius: @radius;
  98 }
  99 .border-left-radius(@radius) {
 100   border-bottom-left-radius: @radius;
 101      border-top-left-radius: @radius;
 102 }
 103
 104 // Drop shadows
 105 .box-shadow(@shadow) {
 106   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
 107           box-shadow: @shadow;
 108 }
 109
 110 // Transitions
 111 .transition(@transition) {
 112   -webkit-transition: @transition;
 113           transition: @transition;
 114 }
 115 .transition-delay(@transition-delay) {
 116   -webkit-transition-delay: @transition-delay;
 117           transition-delay: @transition-delay;
 118 }
 119 .transition-duration(@transition-duration) {
 120   -webkit-transition-duration: @transition-duration;
 121           transition-duration: @transition-duration;
 122 }
 123 .transition-transform(@transition) {
 124   -webkit-transition: -webkit-transform @transition;
 125      -moz-transition: -moz-transform @transition;
 126        -o-transition: -o-transform @transition;
 127           transition: transform @transition;
 128 }
 129
 130 // Transformations
 131 .rotate(@degrees) {
 132   -webkit-transform: rotate(@degrees);
 133       -ms-transform: rotate(@degrees); // IE9+
 134           transform: rotate(@degrees);
 135 }
 136 .scale(@ratio) {
 137   -webkit-transform: scale(@ratio);
 138       -ms-transform: scale(@ratio); // IE9+
 139           transform: scale(@ratio);
 140 }
 141 .translate(@x; @y) {
 142   -webkit-transform: translate(@x, @y);
 143       -ms-transform: translate(@x, @y); // IE9+
 144           transform: translate(@x, @y);
 145 }
 146 .skew(@x; @y) {
 147   -webkit-transform: skew(@x, @y);
 148       -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
 149           transform: skew(@x, @y);
 150 }
 151 .translate3d(@x; @y; @z) {
 152   -webkit-transform: translate3d(@x, @y, @z);
 153           transform: translate3d(@x, @y, @z);
 154 }
 155
 156 // Backface visibility
 157 // Prevent browsers from flickering when using CSS 3D transforms.
 158 // Default value is `visible`, but can be changed to `hidden`
 159 // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
 160 .backface-visibility(@visibility){
 161   -webkit-backface-visibility: @visibility;
 162      -moz-backface-visibility: @visibility;
 163           backface-visibility: @visibility;
 164 }
 165
 166 // Box sizing
 167 .box-sizing(@boxmodel) {
 168   -webkit-box-sizing: @boxmodel;
 169      -moz-box-sizing: @boxmodel;
 170           box-sizing: @boxmodel;
 171 }
 172
 173 // User select
 174 // For selecting text on the page
 175 .user-select(@select) {
 176   -webkit-user-select: @select;
 177      -moz-user-select: @select;
 178       -ms-user-select: @select; // IE10+
 179        -o-user-select: @select;
 180           user-select: @select;
 181 }
 182
 183 // Resize anything
 184 .resizable(@direction) {
 185   resize: @direction; // Options: horizontal, vertical, both
 186   overflow: auto; // Safari fix
 187 }
 188
 189 // CSS3 Content Columns
 190 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
 191   -webkit-column-count: @column-count;
 192      -moz-column-count: @column-count;
 193           column-count: @column-count;
 194   -webkit-column-gap: @column-gap;
 195      -moz-column-gap: @column-gap;
 196           column-gap: @column-gap;
 197 }
 198
 199 // Optional hyphenation
 200 .hyphens(@mode: auto) {
 201   word-wrap: break-word;
 202   -webkit-hyphens: @mode;
 203      -moz-hyphens: @mode;
 204       -ms-hyphens: @mode; // IE10+
 205        -o-hyphens: @mode;
 206           hyphens: @mode;
 207 }
 208
 209 // Opacity
 210 .opacity(@opacity) {
 211   opacity: @opacity;
 212   // IE8 filter
 213   @opacity-ie: (@opacity * 100);
 214   filter: ~"alpha(opacity=@{opacity-ie})";
 215 }
 216
 217
 218
 219 // GRADIENTS
 220 // --------------------------------------------------
 221
 222 #gradient {
 223
 224   // Horizontal gradient, from left to right
 225   //
 226   // Creates two color stops, start and end, by specifying a color and position for each color stop.
 227   // Color stops are not available in IE9 and below.
 228   .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
 229     background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
 230     background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
 231     background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
 232     background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
 233     background-repeat: repeat-x;
 234     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
 235   }
 236
 237   // Vertical gradient, from top to bottom
 238   //
 239   // Creates two color stops, start and end, by specifying a color and position for each color stop.
 240   // Color stops are not available in IE9 and below.
 241   .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
 242     background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
 243     background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
 244     background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
 245     background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
 246     background-repeat: repeat-x;
 247     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
 248   }
 249
 250   .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
 251     background-repeat: repeat-x;
 252     background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
 253     background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
 254     background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
 255   }
 256   .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
 257     background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
 258     background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
 259     background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
 260     background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
 261     background-repeat: no-repeat;
 262     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
 263   }
 264   .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
 265     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
 266     background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
 267     background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
 268     background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
 269     background-repeat: no-repeat;
 270     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
 271   }
 272   .radial(@inner-color: #555; @outer-color: #333) {
 273     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
 274     background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
 275     background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
 276     background-image: radial-gradient(circle, @inner-color, @outer-color);
 277     background-repeat: no-repeat;
 278   }
 279   .striped(@color: #555; @angle: 45deg) {
 280     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
 281     background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 282     background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 283     background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
 284   }
 285 }
 286
 287 // Reset filters for IE
 288 //
 289 // When you need to remove a gradient background, don't forget to use this to reset
 290 // the IE filter for IE9 and below.
 291 .reset-filter() {
 292   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 293 }
 294
 295
 296
 297 // Retina images
 298 //
 299 // Short retina mixin for setting background-image and -size
 300
 301 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
 302   background-image: url("@{file-1x}");
 303
 304   @media
 305   only screen and (-webkit-min-device-pixel-ratio: 2),
 306   only screen and (   min--moz-device-pixel-ratio: 2),
 307   only screen and (     -o-min-device-pixel-ratio: 2/1),
 308   only screen and (        min-device-pixel-ratio: 2),
 309   only screen and (                min-resolution: 192dpi),
 310   only screen and (                min-resolution: 2dppx) {
 311     background-image: url("@{file-2x}");
 312     background-size: @width-1x @height-1x;
 313   }
 314 }
 315
 316
 317 // Responsive image
 318 //
 319 // Keep images from scaling beyond the width of their parents.
 320
 321 .img-responsive(@display: block;) {
 322   display: @display;
 323   max-width: 100%; // Part 1: Set a maximum relative to the parent
 324   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 325 }
 326
 327
 328 // COMPONENT MIXINS
 329 // --------------------------------------------------
 330
 331 // Horizontal dividers
 332 // -------------------------
 333 // Dividers (basically an hr) within dropdowns and nav lists
 334 .nav-divider(@color: #e5e5e5) {
 335   height: 1px;
 336   margin: ((@line-height-computed / 2) - 1) 0;
 337   overflow: hidden;
 338   background-color: @color;
 339 }
 340
 341 // Panels
 342 // -------------------------
 343 .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
 344   border-color: @border;
 345   & > .panel-heading {
 346     color: @heading-text-color;
 347     background-color: @heading-bg-color;
 348     border-color: @heading-border;
 349     + .panel-collapse .panel-body {
 350       border-top-color: @border;
 351     }
 352   }
 353   & > .panel-footer {
 354     + .panel-collapse .panel-body {
 355       border-bottom-color: @border;
 356     }
 357   }
 358 }
 359
 360 // Alerts
 361 // -------------------------
 362 .alert-variant(@background; @border; @text-color) {
 363   background-color: @background;
 364   border-color: @border;
 365   color: @text-color;
 366   hr {
 367     border-top-color: darken(@border, 5%);
 368   }
 369   .alert-link {
 370     color: darken(@text-color, 10%);
 371   }
 372 }
 373
 374 // Tables
 375 // -------------------------
 376 .table-row-variant(@state; @background; @border) {
 377   // Exact selectors below required to override `.table-striped` and prevent
 378   // inheritance to nested tables.
 379   .table > thead > tr,
 380   .table > tbody > tr,
 381   .table > tfoot > tr {
 382     > td.@{state},
 383     > th.@{state},
 384     &.@{state} > td,
 385     &.@{state} > th {
 386       background-color: @background;
 387       border-color: @border;
 388     }
 389   }
 390
 391   // Hover states for `.table-hover`
 392   // Note: this is not available for cells or rows within `thead` or `tfoot`.
 393   .table-hover > tbody > tr {
 394     > td.@{state}:hover,
 395     > th.@{state}:hover,
 396     &.@{state}:hover > td {
 397       background-color: darken(@background, 5%);
 398       border-color: darken(@border, 5%);
 399     }
 400   }
 401 }
 402
 403 // Button variants
 404 // -------------------------
 405 // Easily pump out default styles, as well as :hover, :focus, :active,
 406 // and disabled options for all buttons
 407 .button-variant(@color; @background; @border) {
 408   color: @color;
 409   background-color: @background;
 410   border-color: @border;
 411
 412   &:hover,
 413   &:focus,
 414   &:active,
 415   &.active,
 416   .open .dropdown-toggle& {
 417     color: @color;
 418     background-color: darken(@background, 8%);
 419         border-color: darken(@border, 12%);
 420   }
 421   &:active,
 422   &.active,
 423   .open .dropdown-toggle& {
 424     background-image: none;
 425   }
 426   &.disabled,
 427   &[disabled],
 428   fieldset[disabled] & {
 429     &,
 430     &:hover,
 431     &:focus,
 432     &:active,
 433     &.active {
 434       background-color: @background;
 435           border-color: @border
 436     }
 437   }
 438 }
 439
 440 // Button sizes
 441 // -------------------------
 442 .button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
 443   padding: @padding-vertical @padding-horizontal;
 444   font-size: @font-size;
 445   line-height: @line-height;
 446   border-radius: @border-radius;
 447 }
 448
 449 // Pagination
 450 // -------------------------
 451 .pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
 452   > li {
 453     > a,
 454     > span {
 455       padding: @padding-vertical @padding-horizontal;
 456       font-size: @font-size;
 457     }
 458     &:first-child {
 459       > a,
 460       > span {
 461         .border-left-radius(@border-radius);
 462       }
 463     }
 464     &:last-child {
 465       > a,
 466       > span {
 467         .border-right-radius(@border-radius);
 468       }
 469     }
 470   }
 471 }
 472
 473 // Labels
 474 // -------------------------
 475 .label-variant(@color) {
 476   background-color: @color;
 477   &[href] {
 478     &:hover,
 479     &:focus {
 480       background-color: darken(@color, 10%);
 481     }
 482   }
 483 }
 484
 485 // Navbar vertical align
 486 // -------------------------
 487 // Vertically center elements in the navbar.
 488 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 489 .navbar-vertical-align(@element-height) {
 490   margin-top: ((@navbar-height - @element-height) / 2);
 491   margin-bottom: ((@navbar-height - @element-height) / 2);
 492 }
 493
 494 // Progress bars
 495 // -------------------------
 496 .progress-bar-variant(@color) {
 497   background-color: @color;
 498   .progress-striped & {
 499     #gradient > .striped(@color);
 500   }
 501 }
 502
 503 // Responsive utilities
 504 // -------------------------
 505 // More easily include all the states for responsive-utilities.less.
 506 .responsive-visibility() {
 507   display: block !important;
 508   tr& { display: table-row !important; }
 509   th&,
 510   td& { display: table-cell !important; }
 511 }
 512
 513 .responsive-invisibility() {
 514   display: none !important;
 515   tr& { display: none !important; }
 516   th&,
 517   td& { display: none !important; }
 518 }
 519
 520 // Grid System
 521 // -----------
 522
 523 // Centered container element
 524 .container-fixed() {
 525   margin-right: auto;
 526   margin-left: auto;
 527   .clearfix();
 528 }
 529
 530 // Creates a wrapper for a series of columns
 531 .make-row(@gutter: @grid-gutter-width) {
 532   // Then clear the floated columns
 533   .clearfix();
 534
 535   .container & {
 536     @media (min-width: @screen-small) {
 537       margin-left:  (@gutter / -2);
 538       margin-right: (@gutter / -2);
 539     }
 540   }
 541
 542   // Negative margin nested rows out to align the content of columns
 543   .row {
 544     margin-left:  (@gutter / -2);
 545     margin-right: (@gutter / -2);
 546   }
 547 }
 548
 549 // Generate the extra small columns
 550 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
 551   position: relative;
 552   float: left;
 553   width: percentage((@columns / @grid-columns));
 554   // Prevent columns from collapsing when empty
 555   min-height: 1px;
 556   // Inner gutter via padding
 557   padding-left:  (@gutter / 2);
 558   padding-right: (@gutter / 2);
 559 }
 560
 561 // Generate the small columns
 562 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
 563   position: relative;
 564   // Prevent columns from collapsing when empty
 565   min-height: 1px;
 566   // Inner gutter via padding
 567   padding-left:  (@gutter / 2);
 568   padding-right: (@gutter / 2);
 569
 570   // Calculate width based on number of columns available
 571   @media (min-width: @screen-small) {
 572     float: left;
 573     width: percentage((@columns / @grid-columns));
 574   }
 575 }
 576
 577 // Generate the small column offsets
 578 .make-sm-column-offset(@columns) {
 579   @media (min-width: @screen-small) {
 580     margin-left: percentage((@columns / @grid-columns));
 581   }
 582 }
 583 .make-sm-column-push(@columns) {
 584   @media (min-width: @screen-small) {
 585     left: percentage((@columns / @grid-columns));
 586   }
 587 }
 588 .make-sm-column-pull(@columns) {
 589   @media (min-width: @screen-small) {
 590     right: percentage((@columns / @grid-columns));
 591   }
 592 }
 593
 594 // Generate the medium columns
 595 .make-md-column(@columns; @gutter: @grid-gutter-width) {
 596   position: relative;
 597   // Prevent columns from collapsing when empty
 598   min-height: 1px;
 599   // Inner gutter via padding
 600   padding-left:  (@gutter / 2);
 601   padding-right: (@gutter / 2);
 602
 603   // Calculate width based on number of columns available
 604   @media (min-width: @screen-medium) {
 605     float: left;
 606     width: percentage((@columns / @grid-columns));
 607   }
 608 }
 609
 610 // Generate the large column offsets
 611 .make-md-column-offset(@columns) {
 612   @media (min-width: @screen-medium) {
 613     margin-left: percentage((@columns / @grid-columns));
 614   }
 615 }
 616 .make-md-column-push(@columns) {
 617   @media (min-width: @screen-medium) {
 618     left: percentage((@columns / @grid-columns));
 619   }
 620 }
 621 .make-md-column-pull(@columns) {
 622   @media (min-width: @screen-medium) {
 623     right: percentage((@columns / @grid-columns));
 624   }
 625 }
 626
 627 // Generate the large columns
 628 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
 629   position: relative;
 630   // Prevent columns from collapsing when empty
 631   min-height: 1px;
 632   // Inner gutter via padding
 633   padding-left:  (@gutter / 2);
 634   padding-right: (@gutter / 2);
 635
 636   // Calculate width based on number of columns available
 637   @media (min-width: @screen-large) {
 638     float: left;
 639     width: percentage((@columns / @grid-columns));
 640   }
 641 }
 642
 643 // Generate the large column offsets
 644 .make-lg-column-offset(@columns) {
 645   @media (min-width: @screen-large) {
 646     margin-left: percentage((@columns / @grid-columns));
 647   }
 648 }
 649 .make-lg-column-push(@columns) {
 650   @media (min-width: @screen-large) {
 651     left: percentage((@columns / @grid-columns));
 652   }
 653 }
 654 .make-lg-column-pull(@columns) {
 655   @media (min-width: @screen-large) {
 656     right: percentage((@columns / @grid-columns));
 657   }
 658 }
 659
 660
 661 // Form validation states
 662 //
 663 // Used in forms.less to generate the form validation CSS for warnings, errors,
 664 // and successes.
 665
 666 .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
 667   // Color the label and help text
 668   .help-block,
 669   .control-label {
 670     color: @text-color;
 671   }
 672   // Set the border and box shadow on specific inputs to match
 673   .form-control {
 674     border-color: @border-color;
 675     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 676     &:focus {
 677       border-color: darken(@border-color, 10%);
 678       @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
 679       .box-shadow(@shadow);
 680     }
 681   }
 682   // Set validation states also for addons
 683   .input-group-addon {
 684     color: @text-color;
 685     border-color: @border-color;
 686     background-color: @background-color;
 687   }
 688 }
 689
 690 // Form control focus state
 691 //
 692 // Generate a customized focus state and for any input with the specified color,
 693 // which defaults to the `@input-focus-border` variable.
 694 //
 695 // We highly encourage you to not customize the default value, but instead use
 696 // this to tweak colors on an as-needed basis. This aesthetic change is based on
 697 // WebKit's default styles, but applicable to a wider range of browsers. Its
 698 // usability and accessibility should be taken into account with any change.
 699 //
 700 // Example usage: change the default blue border and shadow to white for better
 701 // contrast against a dark gray background.
 702
 703 .form-control-focus(@color: @input-border-focus) {
 704   @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
 705   &:focus {
 706     border-color: @color;
 707     outline: 0;
 708     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
 709   }
 710 }
 711
 712 // Form control sizing
 713 //
 714 // Relative text size, padding, and border-radii changes for form controls. For
 715 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 716 // element gets special love because it's special, and that's a fact!
 717
 718 .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
 719   height: @input-height;
 720   padding: @padding-vertical @padding-horizontal;
 721   font-size: @font-size;
 722   line-height: @line-height;
 723   border-radius: @border-radius;
 724
 725   select& {
 726     height: @input-height;
 727     line-height: @input-height;
 728   }
 729
 730   textarea& {
 731     height: auto;
 732   }
 733 }