[Summary view] [Print] [Text view]

   1  //
   2  // Mixins
   3  // --------------------------------------------------
   4  
   5  
   6  // UTILITY MIXINS
   7  // --------------------------------------------------
   8  
   9  // Clearfix
  10  // --------
  11  // For clearing floats like a boss h5bp.com/q
  12  .clearfix {
  13    *zoom: 1;
  14    &:before,
  15    &:after {
  16      display: table;
  17      content: "";
  18      // Fixes Opera/contenteditable bug:
  19      // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
  20      line-height: 0;
  21    }
  22    &:after {
  23      clear: both;
  24    }
  25  }
  26  
  27  // Webkit-style focus
  28  // ------------------
  29  .tab-focus() {
  30    // Default
  31    outline: thin dotted #333;
  32    // Webkit
  33    outline: 5px auto -webkit-focus-ring-color;
  34    outline-offset: -2px;
  35  }
  36  
  37  // Center-align a block level element
  38  // ----------------------------------
  39  .center-block() {
  40    display: block;
  41    margin-left: auto;
  42    margin-right: auto;
  43  }
  44  
  45  // IE7 inline-block
  46  // ----------------
  47  .ie7-inline-block() {
  48    *display: inline; /* IE7 inline-block hack */
  49    *zoom: 1;
  50  }
  51  
  52  // IE7 likes to collapse whitespace on either side of the inline-block elements.
  53  // Ems because we're attempting to match the width of a space character. Left
  54  // version is for form buttons, which typically come after other elements, and
  55  // right version is for icons, which come before. Applying both is ok, but it will
  56  // mean that space between those elements will be .6em (~2 space characters) in IE7,
  57  // instead of the 1 space in other browsers.
  58  .ie7-restore-left-whitespace() {
  59    *margin-left: .3em;
  60  
  61    &:first-child {
  62      *margin-left: 0;
  63    }
  64  }
  65  
  66  .ie7-restore-right-whitespace() {
  67    *margin-right: .3em;
  68  }
  69  
  70  // Sizing shortcuts
  71  // -------------------------
  72  .size(@height, @width) {
  73    width: @width;
  74    height: @height;
  75  }
  76  .square(@size) {
  77    .size(@size, @size);
  78  }
  79  
  80  // Placeholder text
  81  // -------------------------
  82  .placeholder(@color: @placeholderText) {
  83    &:-moz-placeholder {
  84      color: @color;
  85    }
  86    &:-ms-input-placeholder {
  87      color: @color;
  88    }
  89    &::-webkit-input-placeholder {
  90      color: @color;
  91    }
  92  }
  93  
  94  // Text overflow
  95  // -------------------------
  96  // Requires inline-block or block for proper styling
  97  .text-overflow() {
  98    overflow: hidden;
  99    text-overflow: ellipsis;
 100    white-space: nowrap;
 101  }
 102  
 103  // CSS image replacement
 104  // -------------------------
 105  // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 106  .hide-text {
 107    font: 0/0 a;
 108    color: transparent;
 109    text-shadow: none;
 110    background-color: transparent;
 111    border: 0;
 112  }
 113  
 114  
 115  // FONTS
 116  // --------------------------------------------------
 117  
 118  #font {
 119    #family {
 120      .serif() {
 121        font-family: @serifFontFamily;
 122      }
 123      .sans-serif() {
 124        font-family: @sansFontFamily;
 125      }
 126      .monospace() {
 127        font-family: @monoFontFamily;
 128      }
 129    }
 130    .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 131      font-size: @size;
 132      font-weight: @weight;
 133      line-height: @lineHeight;
 134    }
 135    .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 136      #font > #family > .serif;
 137      #font > .shorthand(@size, @weight, @lineHeight);
 138    }
 139    .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 140      #font > #family > .sans-serif;
 141      #font > .shorthand(@size, @weight, @lineHeight);
 142    }
 143    .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
 144      #font > #family > .monospace;
 145      #font > .shorthand(@size, @weight, @lineHeight);
 146    }
 147  }
 148  
 149  
 150  // FORMS
 151  // --------------------------------------------------
 152  
 153  // Block level inputs
 154  .input-block-level {
 155    display: block;
 156    width: 100%;
 157    min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
 158    .box-sizing(border-box); // Makes inputs behave like true block-level elements
 159  }
 160  
 161  
 162  
 163  // Mixin for form field states
 164  .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
 165    // Set the text color
 166    .control-label,
 167    .help-block,
 168    .help-inline {
 169      color: @textColor;
 170    }
 171    // Style inputs accordingly
 172    .checkbox,
 173    .radio,
 174    input,
 175    select,
 176    textarea {
 177      color: @textColor;
 178    }
 179    input,
 180    select,
 181    textarea {
 182      border-color: @borderColor;
 183      .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 184      &:focus {
 185        border-color: darken(@borderColor, 10%);
 186        @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
 187        .box-shadow(@shadow);
 188      }
 189    }
 190    // Give a small background color for input-prepend/-append
 191    .input-prepend .add-on,
 192    .input-append .add-on {
 193      color: @textColor;
 194      background-color: @backgroundColor;
 195      border-color: @textColor;
 196    }
 197  }
 198  
 199  
 200  
 201  // CSS3 PROPERTIES
 202  // --------------------------------------------------
 203  
 204  // Border Radius
 205  .border-radius(@radius) {
 206    -webkit-border-radius: @radius;
 207       -moz-border-radius: @radius;
 208            border-radius: @radius;
 209  }
 210  
 211  // Single Corner Border Radius
 212  .border-top-left-radius(@radius) {
 213    -webkit-border-top-left-radius: @radius;
 214        -moz-border-radius-topleft: @radius;
 215            border-top-left-radius: @radius;
 216  }
 217  .border-top-right-radius(@radius) {
 218    -webkit-border-top-right-radius: @radius;
 219        -moz-border-radius-topright: @radius;
 220            border-top-right-radius: @radius;
 221  }
 222  .border-bottom-right-radius(@radius) {
 223    -webkit-border-bottom-right-radius: @radius;
 224        -moz-border-radius-bottomright: @radius;
 225            border-bottom-right-radius: @radius;
 226  }
 227  .border-bottom-left-radius(@radius) {
 228    -webkit-border-bottom-left-radius: @radius;
 229        -moz-border-radius-bottomleft: @radius;
 230            border-bottom-left-radius: @radius;
 231  }
 232  
 233  // Single Side Border Radius
 234  .border-top-radius(@radius) {
 235    .border-top-right-radius(@radius);
 236    .border-top-left-radius(@radius);
 237  }
 238  .border-right-radius(@radius) {
 239    .border-top-right-radius(@radius);
 240    .border-bottom-right-radius(@radius);
 241  }
 242  .border-bottom-radius(@radius) {
 243    .border-bottom-right-radius(@radius);
 244    .border-bottom-left-radius(@radius);
 245  }
 246  .border-left-radius(@radius) {
 247    .border-top-left-radius(@radius);
 248    .border-bottom-left-radius(@radius);
 249  }
 250  
 251  // Drop shadows
 252  .box-shadow(@shadow) {
 253    -webkit-box-shadow: @shadow;
 254       -moz-box-shadow: @shadow;
 255            box-shadow: @shadow;
 256  }
 257  
 258  // Transitions
 259  .transition(@transition) {
 260    -webkit-transition: @transition;
 261       -moz-transition: @transition;
 262         -o-transition: @transition;
 263            transition: @transition;
 264  }
 265  .transition-delay(@transition-delay) {
 266    -webkit-transition-delay: @transition-delay;
 267       -moz-transition-delay: @transition-delay;
 268         -o-transition-delay: @transition-delay;
 269            transition-delay: @transition-delay;
 270  }
 271  .transition-duration(@transition-duration) {
 272    -webkit-transition-duration: @transition-duration;
 273       -moz-transition-duration: @transition-duration;
 274         -o-transition-duration: @transition-duration;
 275            transition-duration: @transition-duration;
 276  }
 277  
 278  // Transformations
 279  .rotate(@degrees) {
 280    -webkit-transform: rotate(@degrees);
 281       -moz-transform: rotate(@degrees);
 282        -ms-transform: rotate(@degrees);
 283         -o-transform: rotate(@degrees);
 284            transform: rotate(@degrees);
 285  }
 286  .scale(@ratio) {
 287    -webkit-transform: scale(@ratio);
 288       -moz-transform: scale(@ratio);
 289        -ms-transform: scale(@ratio);
 290         -o-transform: scale(@ratio);
 291            transform: scale(@ratio);
 292  }
 293  .translate(@x, @y) {
 294    -webkit-transform: translate(@x, @y);
 295       -moz-transform: translate(@x, @y);
 296        -ms-transform: translate(@x, @y);
 297         -o-transform: translate(@x, @y);
 298            transform: translate(@x, @y);
 299  }
 300  .skew(@x, @y) {
 301    -webkit-transform: skew(@x, @y);
 302       -moz-transform: skew(@x, @y);
 303        -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
 304         -o-transform: skew(@x, @y);
 305            transform: skew(@x, @y);
 306    -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
 307  }
 308  .translate3d(@x, @y, @z) {
 309    -webkit-transform: translate3d(@x, @y, @z);
 310       -moz-transform: translate3d(@x, @y, @z);
 311         -o-transform: translate3d(@x, @y, @z);
 312            transform: translate3d(@x, @y, @z);
 313  }
 314  
 315  // Backface visibility
 316  // Prevent browsers from flickering when using CSS 3D transforms.
 317  // Default value is `visible`, but can be changed to `hidden
 318  // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
 319  .backface-visibility(@visibility){
 320      -webkit-backface-visibility: @visibility;
 321         -moz-backface-visibility: @visibility;
 322              backface-visibility: @visibility;
 323  }
 324  
 325  // Background clipping
 326  // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
 327  .background-clip(@clip) {
 328    -webkit-background-clip: @clip;
 329       -moz-background-clip: @clip;
 330            background-clip: @clip;
 331  }
 332  
 333  // Background sizing
 334  .background-size(@size) {
 335    -webkit-background-size: @size;
 336       -moz-background-size: @size;
 337         -o-background-size: @size;
 338            background-size: @size;
 339  }
 340  
 341  
 342  // Box sizing
 343  .box-sizing(@boxmodel) {
 344    -webkit-box-sizing: @boxmodel;
 345       -moz-box-sizing: @boxmodel;
 346            box-sizing: @boxmodel;
 347  }
 348  
 349  // User select
 350  // For selecting text on the page
 351  .user-select(@select) {
 352    -webkit-user-select: @select;
 353       -moz-user-select: @select;
 354        -ms-user-select: @select;
 355         -o-user-select: @select;
 356            user-select: @select;
 357  }
 358  
 359  // Resize anything
 360  .resizable(@direction) {
 361    resize: @direction; // Options: horizontal, vertical, both
 362    overflow: auto; // Safari fix
 363  }
 364  
 365  // CSS3 Content Columns
 366  .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
 367    -webkit-column-count: @columnCount;
 368       -moz-column-count: @columnCount;
 369            column-count: @columnCount;
 370    -webkit-column-gap: @columnGap;
 371       -moz-column-gap: @columnGap;
 372            column-gap: @columnGap;
 373  }
 374  
 375  // Optional hyphenation
 376  .hyphens(@mode: auto) {
 377    word-wrap: break-word;
 378    -webkit-hyphens: @mode;
 379       -moz-hyphens: @mode;
 380        -ms-hyphens: @mode;
 381         -o-hyphens: @mode;
 382            hyphens: @mode;
 383  }
 384  
 385  // Opacity
 386  .opacity(@opacity) {
 387    opacity: @opacity / 100;
 388    filter: ~"alpha(opacity=@{opacity})";
 389  }
 390  
 391  
 392  
 393  // BACKGROUNDS
 394  // --------------------------------------------------
 395  
 396  // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 397  #translucent {
 398    .background(@color: @white, @alpha: 1) {
 399      background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
 400    }
 401    .border(@color: @white, @alpha: 1) {
 402      border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
 403      .background-clip(padding-box);
 404    }
 405  }
 406  
 407  // Gradient Bar Colors for buttons and alerts
 408  .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
 409    color: @textColor;
 410    text-shadow: @textShadow;
 411    #gradient > .vertical(@primaryColor, @secondaryColor);
 412    border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
 413    border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 414  }
 415  
 416  // Gradients
 417  #gradient {
 418    .horizontal(@startColor: #555, @endColor: #333) {
 419      background-color: @endColor;
 420      background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
 421      background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
 422      background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
 423      background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
 424      background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
 425      background-repeat: repeat-x;
 426      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
 427    }
 428    .vertical(@startColor: #555, @endColor: #333) {
 429      background-color: mix(@startColor, @endColor, 60%);
 430      background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
 431      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
 432      background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
 433      background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
 434      background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
 435      background-repeat: repeat-x;
 436      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
 437    }
 438    .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
 439      background-color: @endColor;
 440      background-repeat: repeat-x;
 441      background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
 442      background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
 443      background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
 444      background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
 445    }
 446    .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
 447      background-color: mix(@midColor, @endColor, 80%);
 448      background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
 449      background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
 450      background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
 451      background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
 452      background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
 453      background-repeat: no-repeat;
 454      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
 455    }
 456  
 457    .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
 458      background-color: mix(@midColor, @endColor, 80%);
 459      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
 460      background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
 461      background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
 462      background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
 463      background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
 464      background-repeat: no-repeat;
 465      filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
 466    }
 467    .radial(@innerColor: #555, @outerColor: #333) {
 468      background-color: @outerColor;
 469      background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
 470      background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
 471      background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
 472      background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
 473      background-repeat: no-repeat;
 474    }
 475    .striped(@color: #555, @angle: 45deg) {
 476      background-color: @color;
 477      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));
 478      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);
 479      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);
 480      background-image: -o-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);
 481      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);
 482    }
 483  }
 484  // Reset filters for IE
 485  .reset-filter() {
 486    filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 487  }
 488  
 489  
 490  
 491  // COMPONENT MIXINS
 492  // --------------------------------------------------
 493  
 494  // Horizontal dividers
 495  // -------------------------
 496  // Dividers (basically an hr) within dropdowns and nav lists
 497  .nav-divider(@top: #e5e5e5, @bottom: @white) {
 498    // IE7 needs a set width since we gave a height. Restricting just
 499    // to IE7 to keep the 1px left/right space in other browsers.
 500    // It is unclear where IE is getting the extra space that we need
 501    // to negative-margin away, but so it goes.
 502    *width: 100%;
 503    height: 1px;
 504    margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
 505    *margin: -5px 0 5px;
 506    overflow: hidden;
 507    background-color: @top;
 508    border-bottom: 1px solid @bottom;
 509  }
 510  
 511  // Button backgrounds
 512  // ------------------
 513  .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
 514    // gradientBar will set the background to a pleasing blend of these, to support IE<=9
 515    .gradientBar(@startColor, @endColor, @textColor, @textShadow);
 516    *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
 517    .reset-filter();
 518  
 519    // in these cases the gradient won't cover the background, so we override
 520    &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
 521      color: @textColor;
 522      background-color: @endColor;
 523      *background-color: darken(@endColor, 5%);
 524    }
 525  
 526    // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
 527    &:active,
 528    &.active {
 529      background-color: darken(@endColor, 10%) e("\9");
 530    }
 531  }
 532  
 533  // Navbar vertical align
 534  // -------------------------
 535  // Vertically center elements in the navbar.
 536  // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
 537  .navbarVerticalAlign(@elementHeight) {
 538    margin-top: (@navbarHeight - @elementHeight) / 2;
 539  }
 540  
 541  
 542  
 543  // Grid System
 544  // -----------
 545  
 546  // Centered container element
 547  .container-fixed() {
 548    margin-right: auto;
 549    margin-left: auto;
 550    .clearfix();
 551  }
 552  
 553  // Table columns
 554  .tableColumns(@columnSpan: 1) {
 555    float: none; // undo default grid column styles
 556    width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
 557    margin-left: 0; // undo default grid column styles
 558  }
 559  
 560  // Make a Grid
 561  // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
 562  .makeRow() {
 563    margin-left: @gridGutterWidth * -1;
 564    .clearfix();
 565  }
 566  .makeColumn(@columns: 1, @offset: 0) {
 567    float: left;
 568    margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
 569    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 570  }
 571  
 572  // The Grid
 573  #grid {
 574  
 575    .core (@gridColumnWidth, @gridGutterWidth) {
 576  
 577      .spanX (@index) when (@index > 0) {
 578        .span@{index} { .span(@index); }
 579        .spanX(@index - 1);
 580      }
 581      .spanX (0) {}
 582  
 583      .offsetX (@index) when (@index > 0) {
 584        .offset@{index} { .offset(@index); }
 585        .offsetX(@index - 1);
 586      }
 587      .offsetX (0) {}
 588  
 589      .offset (@columns) {
 590        margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
 591      }
 592      .span (@columns) {
 593      // The logic from here was copied to less/bootstrap/navbar.less#L200.
 594        width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 595      }
 596  
 597      .row {
 598        margin-left: @gridGutterWidth * -1;
 599        .clearfix();
 600      }
 601  
 602      [class*="span"] {
 603        float: left;
 604        min-height: 1px; // prevent collapsing columns
 605        margin-left: @gridGutterWidth;
 606      }
 607  
 608      // Set the container width, and override it for fixed navbars in media queries
 609      .container,
 610      .navbar-static-top .container,
 611      .navbar-fixed-top .container,
 612      .navbar-fixed-bottom .container { .span(@gridColumns); }
 613  
 614      // generate .spanX and .offsetX
 615      .spanX (@gridColumns);
 616      .offsetX (@gridColumns);
 617  
 618    }
 619  
 620    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
 621  
 622      .spanX (@index) when (@index > 0) {
 623        .span@{index} { .span(@index); }
 624        .spanX(@index - 1);
 625      }
 626      .spanX (0) {}
 627  
 628      .offsetX (@index) when (@index > 0) {
 629        .offset@{index} { .offset(@index); }
 630        .offset@{index}:first-child { .offsetFirstChild(@index); }
 631        .offsetX(@index - 1);
 632      }
 633      .offsetX (0) {}
 634  
 635      .offset (@columns) {
 636        margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
 637        *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
 638      }
 639  
 640      .offsetFirstChild (@columns) {
 641        margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
 642        *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 643      }
 644  
 645      .span (@columns) {
 646        width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
 647        *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
 648      }
 649  
 650      .row-fluid {
 651        width: 100%;
 652        .clearfix();
 653        [class*="span"] {
 654          .input-block-level();
 655          float: left;
 656          margin-left: @fluidGridGutterWidth;
 657          *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 658        }
 659        [class*="span"]:first-child {
 660          margin-left: 0;
 661        }
 662  
 663        // Space grid-sized controls properly if multiple per line
 664        .controls-row [class*="span"] + [class*="span"] {
 665          margin-left: @fluidGridGutterWidth;
 666        }
 667  
 668        // generate .spanX and .offsetX
 669        .spanX (@gridColumns);
 670        .offsetX (@gridColumns);
 671      }
 672  
 673    }
 674  
 675    .input(@gridColumnWidth, @gridGutterWidth) {
 676  
 677      .spanX (@index) when (@index > 0) {
 678        input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
 679        .spanX(@index - 1);
 680      }
 681      .spanX (0) {}
 682  
 683      .span(@columns) {
 684        width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
 685      }
 686  
 687      input,
 688      textarea,
 689      .uneditable-input {
 690        margin-left: 0; // override margin-left from core grid system
 691      }
 692  
 693      // Space grid-sized controls properly if multiple per line
 694      .controls-row [class*="span"] + [class*="span"] {
 695        margin-left: @gridGutterWidth;
 696      }
 697  
 698      // generate .spanX
 699      .spanX (@gridColumns);
 700  
 701    }
 702  }