libs/bootstrap/less/mixins.less

   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/twitter/bootstrap/issues/4885
 304        -o-transform: skew(@x, @y);
 305           transform: skew(@x, @y);
 306   -webkit-backface-visibility: hidden; // See https://github.com/twitter/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
 593     .span (@columns) {
 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 }