mixins.less

// Mixins.less
// Snippets of reusable CSS to develop faster and keep code readable
// -----------------------------------------------------------------


// UTILITY MIXINS
// --------------------------------------------------

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

// Webkit-style focus
// ------------------
.tab-focus() {
  // Default
  outline: thin dotted #333;
  // Webkit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

// Center-align a block level element
// ----------------------------------
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// IE7 inline-block
// ----------------
.ie7-inline-block() {
  *display: inline; /* IE7 inline-block hack */
  *zoom: 1;
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we're attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
.ie7-restore-left-whitespace() {
  *margin-left: .3em;

  &:first-child {
    *margin-left: 0;
  }
}

.ie7-restore-right-whitespace() {
  *margin-right: .3em;

  &:last-child {
    *margin-left: 0;
  }
}

// Sizing shortcuts
// -------------------------
.size(@height: 5px, @width: 5px) {
  width: @width;
  height: @height;
}
.square(@size: 5px) {
  .size(@size, @size);
}

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  :-moz-placeholder {
    color: @color;
  }
  ::-webkit-input-placeholder {
    color: @color;
  }
}

// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



// FONTS
// --------------------------------------------------

#font {
  #family {
    .serif() {
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    .sans-serif() {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .monospace() {
      font-family: Menlo, Monaco, "Courier New", monospace;
    }
  }
  .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .sans-serif;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
  .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
    #font > #family > .monospace;
    #font > .shorthand(@size, @weight, @lineHeight);
  }
}


// Form field states (used in forms.less)
// --------------------------------------------------

// Mixin for form field states
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
  // Set the text color
  > label,
  .help-block,
  .help-inline {
    color: @textColor;
  }
  // Style inputs accordingly
  input,
  select,
  textarea {
    color: @textColor;
    border-color: @borderColor;
    &:focus {
      border-color: darken(@borderColor, 10%);
      .box-shadow(0 0 6px lighten(@borderColor, 20%));
    }
  }
  // Give a small background color for input-prepend/-append
  .input-prepend .add-on,
  .input-append .add-on {
    color: @textColor;
    background-color: @backgroundColor;
    border-color: @textColor;
  }
}



// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

// Transformations
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x: 0, @y: 0) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.skew(@x: 0, @y: 0) {
  -webkit-transform: skew(@x, @y);
     -moz-transform: skew(@x, @y);
      -ms-transform: skew(@x, @y);
       -o-transform: skew(@x, @y);
          transform: skew(@x, @y);
}
.translate3d(@x: 0, @y: 0, @z: 0) {
  -webkit-transform: translate(@x, @y, @z);
     -moz-transform: translate(@x, @y, @z);
      -ms-transform: translate(@x, @y, @z);
       -o-transform: translate(@x, @y, @z);
          transform: translate(@x, @y, @z);
}

// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
.background-clip(@clip) {
  -webkit-background-clip: @clip;
     -moz-background-clip: @clip;
          background-clip: @clip;
}

// Background sizing
.background-size(@size){
  -webkit-background-size: @size;
     -moz-background-size: @size;
       -o-background-size: @size;
          background-size: @size;
}


// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// User select
// For selecting text on the page
.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
       -o-user-select: @select;
          user-select: @select;
}

// Resize anything
.resizable(@direction: both) {
  resize: @direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
}

// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridColumnGutter) {
  -webkit-column-count: @columnCount;
     -moz-column-count: @columnCount;
          column-count: @columnCount;
  -webkit-column-gap: @columnGap;
     -moz-column-gap: @columnGap;
          column-gap: @columnGap;
}

// Opacity
.opacity(@opacity: 100) {
  opacity: @opacity / 100;
   filter: e(%("alpha(opacity=%d)", @opacity));
}



// BACKGROUNDS
// --------------------------------------------------

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
  .background(@color: @white, @alpha: 1) {
    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
  }
  .border(@color: @white, @alpha: 1) {
    border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
    .background-clip(padding-box);
  }
}

// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) {
  #gradient > .vertical(@primaryColor, @secondaryColor);
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}

// Gradients
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .radial(@innerColor: #555, @outerColor: #333)  {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
  }
  .striped(@color, @angle: -45deg) {
    background-color: @color;
    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));
    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);
    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);
    background-image: -ms-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);
    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);
    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);
  }
}
// Reset filters for IE
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}



// COMPONENT MIXINS
// --------------------------------------------------

// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider() {
  height: 1px;
  margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid @white;

  // IE7 needs a set width since we gave a height. Restricting just
  // to IE7 to keep the 1px left/right space in other browsers.
  // It is unclear where IE is getting the extra space that we need
  // to negative-margin away, but so it goes.
  *width: 100%;
  *margin: -5px 0 5px;
}

// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  .gradientBar(@startColor, @endColor);
  .reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:active, &.active, &.disabled, &[disabled] {
    background-color: @endColor;
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active,
  &.active {
    background-color: darken(@endColor, 10%) e("\9");
  }
}

// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
.navbarVerticalAlign(@elementHeight) {
  margin-top: (@navbarHeight - @elementHeight) / 2;
}

// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
  .top(@arrowWidth: 5px) {
    bottom: 0;
    left: 50%;
    margin-left: -@arrowWidth;
    border-left: @arrowWidth solid transparent;
    border-right: @arrowWidth solid transparent;
    border-top: @arrowWidth solid @black;
  }
  .left(@arrowWidth: 5px) {
    top: 50%;
    right: 0;
    margin-top: -@arrowWidth;
    border-top: @arrowWidth solid transparent;
    border-bottom: @arrowWidth solid transparent;
    border-left: @arrowWidth solid @black;
  }
  .bottom(@arrowWidth: 5px) {
    top: 0;
    left: 50%;
    margin-left: -@arrowWidth;
    border-left: @arrowWidth solid transparent;
    border-right: @arrowWidth solid transparent;
    border-bottom: @arrowWidth solid @black;
  }
  .right(@arrowWidth: 5px) {
    top: 50%;
    left: 0;
    margin-top: -@arrowWidth;
    border-top: @arrowWidth solid transparent;
    border-bottom: @arrowWidth solid transparent;
    border-right: @arrowWidth solid @black;
  }
}

// Grid System
// -----------

.container-fixed() {
  margin-left: auto;
  margin-right: auto;
  .clearfix();
}

.tableColumns(@columnSpan: 1) {
  float: none; // undo default grid column styles
  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
  margin-left: 0; // undo default grid column styles
}

#grid {

  // we have to define these bogus mixins otherwise
  // less throws an exception when we call for them
  // below and a guard hasn't overridden them
  // (@fat will work with @cloudhead on coming up with something better hopefully)
  .span1 (@gridColumns, @child: 0)  {}
  .span2 (@gridColumns, @child: 0)  {}
  .span3 (@gridColumns, @child: 0)  {}
  .span4 (@gridColumns, @child: 0)  {}
  .span5 (@gridColumns, @child: 0)  {}
  .span6 (@gridColumns, @child: 0)  {}
  .span7 (@gridColumns, @child: 0)  {}
  .span8 (@gridColumns, @child: 0)  {}
  .span9 (@gridColumns, @child: 0)  {}
  .span10 (@gridColumns, @child: 0) {}
  .span11 (@gridColumns, @child: 0) {}
  .span12 (@gridColumns, @child: 0) {}
  .span13 (@gridColumns, @child: 0) {}
  .span14 (@gridColumns, @child: 0) {}
  .span15 (@gridColumns, @child: 0) {}
  .span16 (@gridColumns, @child: 0) {}
  .span17 (@gridColumns, @child: 0) {}
  .span18 (@gridColumns, @child: 0) {}
  .span19 (@gridColumns, @child: 0) {}
  .span20 (@gridColumns, @child: 0) {}
  .span21 (@gridColumns, @child: 0) {}
  .span22 (@gridColumns, @child: 0) {}
  .span23 (@gridColumns, @child: 0) {}
  .span24 (@gridColumns, @child: 0) {}


  // override mixins with guards
  .span1  (@gridColumns) when (@gridColumns > 0)  { .span1 { .span(1); } }
  .span2  (@gridColumns) when (@gridColumns > 1)  { .span2 { .span(2); } }
  .span3  (@gridColumns) when (@gridColumns > 2)  { .span3 { .span(3); } }
  .span4  (@gridColumns) when (@gridColumns > 3)  { .span4 { .span(4); } }
  .span5  (@gridColumns) when (@gridColumns > 4)  { .span5 { .span(5); } }
  .span6  (@gridColumns) when (@gridColumns > 5)  { .span6 { .span(6); } }
  .span7  (@gridColumns) when (@gridColumns > 6)  { .span7 { .span(7); } }
  .span8  (@gridColumns) when (@gridColumns > 7)  { .span8 { .span(8); } }
  .span9  (@gridColumns) when (@gridColumns > 8)  { .span9 { .span(9); } }
  .span10 (@gridColumns) when (@gridColumns > 9)  { .span10 { .span(10); } }
  .span11 (@gridColumns) when (@gridColumns > 10) { .span11 { .span(11); } }
  .span12 (@gridColumns) when (@gridColumns > 11) { .span12 { .span(12); } }
  .span13 (@gridColumns) when (@gridColumns > 12) { .span13 { .span(13); } }
  .span14 (@gridColumns) when (@gridColumns > 13) { .span14 { .span(14); } }
  .span15 (@gridColumns) when (@gridColumns > 14) { .span15 { .span(15); } }
  .span16 (@gridColumns) when (@gridColumns > 15) { .span16 { .span(16); } }
  .span17 (@gridColumns) when (@gridColumns > 16) { .span17 { .span(17); } }
  .span18 (@gridColumns) when (@gridColumns > 17) { .span18 { .span(18); } }
  .span19 (@gridColumns) when (@gridColumns > 18) { .span19 { .span(19); } }
  .span20 (@gridColumns) when (@gridColumns > 19) { .span20 { .span(20); } }
  .span21 (@gridColumns) when (@gridColumns > 20) { .span21 { .span(21); } }
  .span22 (@gridColumns) when (@gridColumns > 21) { .span22 { .span(22); } }
  .span23 (@gridColumns) when (@gridColumns > 22) { .span23 { .span(23); } }
  .span24 (@gridColumns) when (@gridColumns > 23) { .span24 { .span(24); } }

  .span1  (@gridColumns, @child) when (@gridColumns > 0) and (@child)  { > .span1 { .span(1); } }
  .span2  (@gridColumns, @child) when (@gridColumns > 1) and (@child)  { > .span2 { .span(2); } }
  .span3  (@gridColumns, @child) when (@gridColumns > 2) and (@child)  { > .span3 { .span(3); } }
  .span4  (@gridColumns, @child) when (@gridColumns > 3) and (@child)  { > .span4 { .span(4); } }
  .span5  (@gridColumns, @child) when (@gridColumns > 4) and (@child)  { > .span5 { .span(5); } }
  .span6  (@gridColumns, @child) when (@gridColumns > 5) and (@child)  { > .span6 { .span(6); } }
  .span7  (@gridColumns, @child) when (@gridColumns > 6) and (@child)  { > .span7 { .span(7); } }
  .span8  (@gridColumns, @child) when (@gridColumns > 7) and (@child)  { > .span8 { .span(8); } }
  .span9  (@gridColumns, @child) when (@gridColumns > 8) and (@child)  { > .span9 { .span(9); } }
  .span10 (@gridColumns, @child) when (@gridColumns > 9) and (@child)  { > .span10 { .span(10); } }
  .span11 (@gridColumns, @child) when (@gridColumns > 10) and (@child) { > .span11 { .span(11); } }
  .span12 (@gridColumns, @child) when (@gridColumns > 11) and (@child) { > .span12 { .span(12); } }
  .span13 (@gridColumns, @child) when (@gridColumns > 12) and (@child) { > .span13 { .span(13); } }
  .span14 (@gridColumns, @child) when (@gridColumns > 13) and (@child) { > .span14 { .span(14); } }
  .span15 (@gridColumns, @child) when (@gridColumns > 14) and (@child) { > .span15 { .span(15); } }
  .span16 (@gridColumns, @child) when (@gridColumns > 15) and (@child) { > .span16 { .span(16); } }
  .span17 (@gridColumns, @child) when (@gridColumns > 16) and (@child) { > .span17 { .span(17); } }
  .span18 (@gridColumns, @child) when (@gridColumns > 17) and (@child) { > .span18 { .span(18); } }
  .span19 (@gridColumns, @child) when (@gridColumns > 18) and (@child) { > .span19 { .span(19); } }
  .span20 (@gridColumns, @child) when (@gridColumns > 19) and (@child) { > .span20 { .span(20); } }
  .span21 (@gridColumns, @child) when (@gridColumns > 20) and (@child) { > .span21 { .span(21); } }
  .span22 (@gridColumns, @child) when (@gridColumns > 21) and (@child) { > .span22 { .span(22); } }
  .span23 (@gridColumns, @child) when (@gridColumns > 22) and (@child) { > .span23 { .span(23); } }
  .span24 (@gridColumns, @child) when (@gridColumns > 23) and (@child) { > .span24 { .span(24); } }


  // do the same with offset as we did with spans ;_;
  .offset1 (@gridColumns)  {}
  .offset2 (@gridColumns)  {}
  .offset3 (@gridColumns)  {}
  .offset4 (@gridColumns)  {}
  .offset5 (@gridColumns)  {}
  .offset6 (@gridColumns)  {}
  .offset7 (@gridColumns)  {}
  .offset8 (@gridColumns)  {}
  .offset9 (@gridColumns)  {}
  .offset10 (@gridColumns) {}
  .offset11 (@gridColumns) {}
  .offset12 (@gridColumns) {}
  .offset13 (@gridColumns) {}
  .offset14 (@gridColumns) {}
  .offset15 (@gridColumns) {}
  .offset16 (@gridColumns) {}
  .offset17 (@gridColumns) {}
  .offset18 (@gridColumns) {}
  .offset19 (@gridColumns) {}
  .offset20 (@gridColumns) {}
  .offset21 (@gridColumns) {}
  .offset22 (@gridColumns) {}
  .offset23 (@gridColumns) {}
  .offset24 (@gridColumns) {}


  // override with guards
  .offset1  (@gridColumns) when (@gridColumns > 0)  { .offset1 { .offset(1); } }
  .offset2  (@gridColumns) when (@gridColumns > 1)  { .offset2 { .offset(2); } }
  .offset3  (@gridColumns) when (@gridColumns > 2)  { .offset3 { .offset(3); } }
  .offset4  (@gridColumns) when (@gridColumns > 3)  { .offset4 { .offset(4); } }
  .offset5  (@gridColumns) when (@gridColumns > 4)  { .offset5 { .offset(5); } }
  .offset6  (@gridColumns) when (@gridColumns > 5)  { .offset6 { .offset(6); } }
  .offset7  (@gridColumns) when (@gridColumns > 6)  { .offset7 { .offset(7); } }
  .offset8  (@gridColumns) when (@gridColumns > 7)  { .offset8 { .offset(8); } }
  .offset9  (@gridColumns) when (@gridColumns > 8)  { .offset9 { .offset(9); } }
  .offset10 (@gridColumns) when (@gridColumns > 9)  { .offset10 { .offset(10); } }
  .offset11 (@gridColumns) when (@gridColumns > 10) { .offset11 { .offset(11); } }
  .offset12 (@gridColumns) when (@gridColumns > 11) { .offset12 { .offset(12); } }
  .offset13 (@gridColumns) when (@gridColumns > 12) { .offset13 { .offset(13); } }
  .offset14 (@gridColumns) when (@gridColumns > 13) { .offset14 { .offset(14); } }
  .offset15 (@gridColumns) when (@gridColumns > 14) { .offset15 { .offset(15); } }
  .offset16 (@gridColumns) when (@gridColumns > 15) { .offset16 { .offset(16); } }
  .offset17 (@gridColumns) when (@gridColumns > 16) { .offset17 { .offset(17); } }
  .offset18 (@gridColumns) when (@gridColumns > 17) { .offset18 { .offset(18); } }
  .offset19 (@gridColumns) when (@gridColumns > 18) { .offset19 { .offset(19); } }
  .offset20 (@gridColumns) when (@gridColumns > 19) { .offset20 { .offset(20); } }
  .offset21 (@gridColumns) when (@gridColumns > 20) { .offset21 { .offset(21); } }
  .offset22 (@gridColumns) when (@gridColumns > 21) { .offset22 { .offset(22); } }
  .offset23 (@gridColumns) when (@gridColumns > 22) { .offset23 { .offset(23); } }
  .offset24 (@gridColumns) when (@gridColumns > 23) { .offset24 { .offset(24); } }

  .core (@gridColumnWidth, @gridGutterWidth) {

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    [class*="span"] {
      float: left;
      margin-left: @gridGutterWidth;
    }

    // Set the container width, and reset it for fixed navbars
    .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container { .span(@gridColumns); }

    // define up to max of 24 columns (default is 12)
    #grid .span1(@gridColumns);
    #grid .span2(@gridColumns);
    #grid .span3(@gridColumns);
    #grid .span4(@gridColumns);
    #grid .span5(@gridColumns);
    #grid .span6(@gridColumns);
    #grid .span7(@gridColumns);
    #grid .span8(@gridColumns);
    #grid .span9(@gridColumns);
    #grid .span10(@gridColumns);
    #grid .span11(@gridColumns);
    #grid .span12(@gridColumns);
    #grid .span13(@gridColumns);
    #grid .span14(@gridColumns);
    #grid .span15(@gridColumns);
    #grid .span16(@gridColumns);
    #grid .span17(@gridColumns);
    #grid .span18(@gridColumns);
    #grid .span19(@gridColumns);
    #grid .span20(@gridColumns);
    #grid .span21(@gridColumns);
    #grid .span22(@gridColumns);
    #grid .span23(@gridColumns);
    #grid .span24(@gridColumns);

    // define up to max of 24 offsets (default is 12)
    #grid .offset1(@gridColumns);
    #grid .offset2(@gridColumns);
    #grid .offset3(@gridColumns);
    #grid .offset4(@gridColumns);
    #grid .offset5(@gridColumns);
    #grid .offset6(@gridColumns);
    #grid .offset7(@gridColumns);
    #grid .offset8(@gridColumns);
    #grid .offset9(@gridColumns);
    #grid .offset10(@gridColumns);
    #grid .offset11(@gridColumns);
    #grid .offset12(@gridColumns);
    #grid .offset13(@gridColumns);
    #grid .offset14(@gridColumns);
    #grid .offset15(@gridColumns);
    #grid .offset16(@gridColumns);
    #grid .offset17(@gridColumns);
    #grid .offset18(@gridColumns);
    #grid .offset19(@gridColumns);
    #grid .offset20(@gridColumns);
    #grid .offset21(@gridColumns);
    #grid .offset22(@gridColumns);
    #grid .offset23(@gridColumns);
    #grid .offset24(@gridColumns);

  }

  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

    .span (@columns) {
      width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
    }

    .row-fluid {
      width: 100%;
      .clearfix();
      > [class*="span"] {
        float: left;
        margin-left: @fluidGridGutterWidth;
      }
      > [class*="span"]:first-child {
        margin-left: 0;
      }

      #grid .span1(@gridColumns, true);
      #grid .span2(@gridColumns, true);
      #grid .span3(@gridColumns, true);
      #grid .span4(@gridColumns, true);
      #grid .span5(@gridColumns, true);
      #grid .span6(@gridColumns, true);
      #grid .span7(@gridColumns, true);
      #grid .span8(@gridColumns, true);
      #grid .span9(@gridColumns, true);
      #grid .span10(@gridColumns, true);
      #grid .span11(@gridColumns, true);
      #grid .span12(@gridColumns, true);
      #grid .span13(@gridColumns, true);
      #grid .span14(@gridColumns, true);
      #grid .span15(@gridColumns, true);
      #grid .span16(@gridColumns, true);
      #grid .span17(@gridColumns, true);
      #grid .span18(@gridColumns, true);
      #grid .span19(@gridColumns, true);
      #grid .span20(@gridColumns, true);
      #grid .span21(@gridColumns, true);
      #grid .span22(@gridColumns, true);
      #grid .span23(@gridColumns, true);
      #grid .span24(@gridColumns, true);
    }

  }

  .input(@gridColumnWidth, @gridGutterWidth) {

    .span(@columns) {
      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
    }

    input,
    textarea,
    .uneditable-input {
      margin-left: 0; // override margin-left from core grid system

      #grid .span1(@gridColumns, true);
      #grid .span2(@gridColumns, true);
      #grid .span3(@gridColumns, true);
      #grid .span4(@gridColumns, true);
      #grid .span5(@gridColumns, true);
      #grid .span6(@gridColumns, true);
      #grid .span7(@gridColumns, true);
      #grid .span8(@gridColumns, true);
      #grid .span9(@gridColumns, true);
      #grid .span10(@gridColumns, true);
      #grid .span11(@gridColumns, true);
      #grid .span12(@gridColumns, true);
      #grid .span13(@gridColumns, true);
      #grid .span14(@gridColumns, true);
      #grid .span15(@gridColumns, true);
      #grid .span16(@gridColumns, true);
      #grid .span17(@gridColumns, true);
      #grid .span18(@gridColumns, true);
      #grid .span19(@gridColumns, true);
      #grid .span20(@gridColumns, true);
      #grid .span21(@gridColumns, true);
      #grid .span22(@gridColumns, true);
      #grid .span23(@gridColumns, true);
      #grid .span24(@gridColumns, true);
    }

  }

}