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