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