bootstrap-sass-rails 3.0.0.0.rc1 → 3.0.0.0.rc2

data/app/assets/stylesheets/twitter/bootstrap/_forms.scss

@@ -20,7 +20,7 @@ legend {
   margin-bottom: $line-height-computed;
   font-size: ($font-size-base * 1.5);
   line-height: inherit;
-  color: $gray-dark;
+  color: $legend-color;
   border: 0;
   border-bottom: 1px solid $legend-border-color;
 }
@@ -77,7 +77,7 @@ input[type="checkbox"]:focus {
 // See https://github.com/twbs/bootstrap/issues/8350 for more.
 input[type="number"] {
   &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button  {
+  &::-webkit-inner-spin-button {
     height: auto;
   }
 }
@@ -121,7 +121,7 @@ input[type="number"] {
   padding: $padding-base-vertical $padding-base-horizontal;
   font-size: $font-size-base;
   line-height: $line-height-base;
-  color: $gray;
+  color: $input-color;
   vertical-align: middle;
   background-color: $input-bg;
   border: 1px solid $input-border;
@@ -129,11 +129,8 @@ input[type="number"] {
   @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
 
-  &:focus {
-    border-color: rgba(82,168,236,.8);
-    outline: 0;
-    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
-  }
+  // Customize the `:focus` state to imitate native WebKit styles.
+  @include form-control-focus();
 
   // Disabled and read-only inputs
   // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
@@ -146,6 +143,7 @@ input[type="number"] {
     background-color: $input-bg-disabled;
   }
 }
+
 // Reset height for `textarea`s
 textarea.form-control {
   height: auto;
@@ -210,37 +208,10 @@ textarea.form-control {
 }
 
 
-
 // Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
+@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
 
-.form-control {
-  &.input-large {
-    height: $input-height-large;
-    padding: $padding-large-vertical $padding-large-horizontal;
-    font-size: $font-size-large;
-    border-radius: $border-radius-large;
-  }
-  &.input-small {
-    height: $input-height-small;
-    padding: $padding-small-vertical $padding-small-horizontal;
-    font-size: $font-size-small;
-    border-radius: $border-radius-small;
-  }
-}
-select {
-  &.input-large {
-    height: $input-height-large;
-    line-height: $input-height-large;
-  }
-  &.input-small {
-    height: $input-height-small;
-    line-height: $input-height-small;
-  }
-}
+@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
 
 
 // Form control feedback states
@@ -261,6 +232,17 @@ select {
 }
 
 
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  margin-bottom: 0; // Remove default margin from `p`
+  padding-top: $padding-base-vertical;
+}
+
+
 // Help text
 //
 // Apply to any element you wish to create light text for placement immediately
@@ -275,137 +257,61 @@ select {
 
 
 
-// Input groups
-// --------------------------------------------------
-
-// Base styles
-// -------------------------
-.input-group {
-  display: table;
-  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
-
-  // Undo padding and float of grid classes
-  &.col {
-    float: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .form-control {
-    width: 100%;
-    margin-bottom: 0;
-  }
-}
-
-// Display as table-cell
-// -------------------------
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
-  display: table-cell;
-
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0;
-  }
-}
-// Addon and addon wrapper for buttons
-.input-group-addon,
-.input-group-btn {
-  width: 1%;
-  white-space: nowrap;
-  vertical-align: middle; // Match the inputs
-}
-
-// Text input groups
-// -------------------------
-.input-group-addon {
-  @include box-sizing(border-box);
-  padding: $padding-base-vertical $padding-base-horizontal;
-  font-size: $font-size-base;
-  font-weight: normal;
-  line-height: $line-height-base;
-  text-align: center;
-  background-color: $gray-lighter;
-  border: 1px solid $input-group-addon-border-color;
-  border-radius: $border-radius-base;
-
-  &.input-small {
-    padding: $padding-small-vertical $padding-small-horizontal;
-    font-size: $font-size-small;
-    border-radius: $border-radius-small;
-  }
-  &.input-large {
-    padding: $padding-large-vertical $padding-large-horizontal;
-    font-size: $font-size-large;
-    border-radius: $border-radius-large;
-  }
-}
-
-// Reset rounded corners
-.input-group .form-control:first-child,
-.input-group-addon:first-child,
-.input-group-btn:first-child > .btn,
-.input-group-btn:first-child > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
-  @include border-right-radius(0);
-}
-.input-group-addon:first-child {
-  border-right: 0;
-}
-.input-group .form-control:last-child,
-.input-group-addon:last-child,
-.input-group-btn:last-child > .btn,
-.input-group-btn:last-child > .dropdown-toggle,
-.input-group-btn:first-child > .btn:not(:first-child) {
-  @include border-left-radius(0);
-}
-.input-group-addon:last-child {
-  border-left: 0;
-}
-
-// Button input groups
-// -------------------------
-.input-group-btn {
-  position: relative;
-  white-space: nowrap;
-}
-.input-group-btn > .btn {
-  position: relative;
-  // Jankily prevent input button groups from wrapping
-  + .btn {
-    margin-left: -4px;
-  }
-  // Bring the "active" button to the front
-  &:hover,
-  &:active {
-    z-index: 2;
-  }
-}
-
-
 // Inline forms
-// --------------------------------------------------
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
 
 .form-inline {
-  .form-control,
-  .radio,
-  .checkbox {
-    display: inline-block;
-  }
-  .radio,
-  .checkbox {
-    margin-top: 0;
-    margin-bottom: 0;
+
+  // Kick in the inline
+  @media (min-width: $screen-tablet) {
+    // Inline-block all the things for "inline"
+    .form-group  {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // In navbar-form, allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match (which also avoids
+    // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
+    .radio,
+    .checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-left: 0;
+    }
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      float: none;
+      margin-left: 0;
+    }
   }
 }
 
 
 // Horizontal forms
-// --------------------------------------------------
-// Horizontal forms are built on grid classes.
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
 
-.form-horizontal .control-label {
-  padding-top: 6px;
+.form-horizontal .control-label,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: $padding-base-vertical;
 }
 
 .form-horizontal {

data/app/assets/stylesheets/twitter/bootstrap/_grid.scss

@@ -2,6 +2,7 @@
 // Grid system
 // --------------------------------------------------
 
+
 // Set the container width, and override it for fixed navbars in media queries
 .container {
   @include container-fixed();
@@ -13,18 +14,18 @@
 }
 
 // Common styles for small and large grid columns
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
 .col-sm-1,
 .col-sm-2,
 .col-sm-3,
@@ -37,6 +38,18 @@
 .col-sm-10,
 .col-sm-11,
 .col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
 .col-lg-1,
 .col-lg-2,
 .col-lg-3,
@@ -58,40 +71,49 @@
 }
 
 
-
+// Extra small grid
 //
-// Container and grid column sizing
+// Grid classes for extra small devices like smartphones. No offset, push, or
+// pull classes are present here due to the size of the target.
 //
+// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
 
-// Tiny device columns (smartphones)
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12 {
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
   float: left;
 }
-.col-1  { width: percentage((1 / $grid-columns)); }
-.col-2  { width: percentage((2 / $grid-columns)); }
-.col-3  { width: percentage((3 / $grid-columns)); }
-.col-4  { width: percentage((4 / $grid-columns)); }
-.col-5  { width: percentage((5 / $grid-columns)); }
-.col-6  { width: percentage((6 / $grid-columns)); }
-.col-7  { width: percentage((7 / $grid-columns)); }
-.col-8  { width: percentage((8 / $grid-columns)); }
-.col-9  { width: percentage((9 / $grid-columns)); }
-.col-10 { width: percentage((10/ $grid-columns)); }
-.col-11 { width: percentage((11/ $grid-columns)); }
-.col-12 { width: 100%; }
-
-// Small device columns (phones to tablets)
+.col-xs-1  { width: percentage((1 / $grid-columns)); }
+.col-xs-2  { width: percentage((2 / $grid-columns)); }
+.col-xs-3  { width: percentage((3 / $grid-columns)); }
+.col-xs-4  { width: percentage((4 / $grid-columns)); }
+.col-xs-5  { width: percentage((5 / $grid-columns)); }
+.col-xs-6  { width: percentage((6 / $grid-columns)); }
+.col-xs-7  { width: percentage((7 / $grid-columns)); }
+.col-xs-8  { width: percentage((8 / $grid-columns)); }
+.col-xs-9  { width: percentage((9 / $grid-columns)); }
+.col-xs-10 { width: percentage((10/ $grid-columns)); }
+.col-xs-11 { width: percentage((11/ $grid-columns)); }
+.col-xs-12 { width: 100%; }
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+//
+// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
 @media (min-width: $screen-tablet) {
   .container {
     max-width: $container-tablet;
@@ -107,8 +129,7 @@
   .col-sm-8,
   .col-sm-9,
   .col-sm-10,
-  .col-sm-11,
-  .col-sm-12 {
+  .col-sm-11 {
     float: left;
   }
   .col-sm-1  { width: percentage((1 / $grid-columns)); }
@@ -125,36 +146,134 @@
   .col-sm-12 { width: 100%; }
 
   // Push and pull columns for source order changes
-  .col-push-1  { left: percentage((1 / $grid-columns)); }
-  .col-push-2  { left: percentage((2 / $grid-columns)); }
-  .col-push-3  { left: percentage((3 / $grid-columns)); }
-  .col-push-4  { left: percentage((4 / $grid-columns)); }
-  .col-push-5  { left: percentage((5 / $grid-columns)); }
-  .col-push-6  { left: percentage((6 / $grid-columns)); }
-  .col-push-7  { left: percentage((7 / $grid-columns)); }
-  .col-push-8  { left: percentage((8 / $grid-columns)); }
-  .col-push-9  { left: percentage((9 / $grid-columns)); }
-  .col-push-10 { left: percentage((10/ $grid-columns)); }
-  .col-push-11 { left: percentage((11/ $grid-columns)); }
-
-  .col-pull-1  { right: percentage((1 / $grid-columns)); }
-  .col-pull-2  { right: percentage((2 / $grid-columns)); }
-  .col-pull-3  { right: percentage((3 / $grid-columns)); }
-  .col-pull-4  { right: percentage((4 / $grid-columns)); }
-  .col-pull-5  { right: percentage((5 / $grid-columns)); }
-  .col-pull-6  { right: percentage((6 / $grid-columns)); }
-  .col-pull-7  { right: percentage((7 / $grid-columns)); }
-  .col-pull-8  { right: percentage((8 / $grid-columns)); }
-  .col-pull-9  { right: percentage((9 / $grid-columns)); }
-  .col-pull-10 { right: percentage((10/ $grid-columns)); }
-  .col-pull-11 { right: percentage((11/ $grid-columns)); }
+  .col-sm-push-1  { left: percentage((1 / $grid-columns)); }
+  .col-sm-push-2  { left: percentage((2 / $grid-columns)); }
+  .col-sm-push-3  { left: percentage((3 / $grid-columns)); }
+  .col-sm-push-4  { left: percentage((4 / $grid-columns)); }
+  .col-sm-push-5  { left: percentage((5 / $grid-columns)); }
+  .col-sm-push-6  { left: percentage((6 / $grid-columns)); }
+  .col-sm-push-7  { left: percentage((7 / $grid-columns)); }
+  .col-sm-push-8  { left: percentage((8 / $grid-columns)); }
+  .col-sm-push-9  { left: percentage((9 / $grid-columns)); }
+  .col-sm-push-10 { left: percentage((10/ $grid-columns)); }
+  .col-sm-push-11 { left: percentage((11/ $grid-columns)); }
+
+  .col-sm-pull-1  { right: percentage((1 / $grid-columns)); }
+  .col-sm-pull-2  { right: percentage((2 / $grid-columns)); }
+  .col-sm-pull-3  { right: percentage((3 / $grid-columns)); }
+  .col-sm-pull-4  { right: percentage((4 / $grid-columns)); }
+  .col-sm-pull-5  { right: percentage((5 / $grid-columns)); }
+  .col-sm-pull-6  { right: percentage((6 / $grid-columns)); }
+  .col-sm-pull-7  { right: percentage((7 / $grid-columns)); }
+  .col-sm-pull-8  { right: percentage((8 / $grid-columns)); }
+  .col-sm-pull-9  { right: percentage((9 / $grid-columns)); }
+  .col-sm-pull-10 { right: percentage((10/ $grid-columns)); }
+  .col-sm-pull-11 { right: percentage((11/ $grid-columns)); }
+
+  // Offsets
+  .col-sm-offset-1  { margin-left: percentage((1 / $grid-columns)); }
+  .col-sm-offset-2  { margin-left: percentage((2 / $grid-columns)); }
+  .col-sm-offset-3  { margin-left: percentage((3 / $grid-columns)); }
+  .col-sm-offset-4  { margin-left: percentage((4 / $grid-columns)); }
+  .col-sm-offset-5  { margin-left: percentage((5 / $grid-columns)); }
+  .col-sm-offset-6  { margin-left: percentage((6 / $grid-columns)); }
+  .col-sm-offset-7  { margin-left: percentage((7 / $grid-columns)); }
+  .col-sm-offset-8  { margin-left: percentage((8 / $grid-columns)); }
+  .col-sm-offset-9  { margin-left: percentage((9 / $grid-columns)); }
+  .col-sm-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+  .col-sm-offset-11 { margin-left: percentage((11/ $grid-columns)); }
 }
 
-// Medium and large device columns (desktop and up)
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+//
+// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
 @media (min-width: $screen-desktop) {
   .container {
     max-width: $container-desktop;
   }
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11 {
+    float: left;
+  }
+  .col-md-1  { width: percentage((1 / $grid-columns)); }
+  .col-md-2  { width: percentage((2 / $grid-columns)); }
+  .col-md-3  { width: percentage((3 / $grid-columns)); }
+  .col-md-4  { width: percentage((4 / $grid-columns)); }
+  .col-md-5  { width: percentage((5 / $grid-columns)); }
+  .col-md-6  { width: percentage((6 / $grid-columns)); }
+  .col-md-7  { width: percentage((7 / $grid-columns)); }
+  .col-md-8  { width: percentage((8 / $grid-columns)); }
+  .col-md-9  { width: percentage((9 / $grid-columns)); }
+  .col-md-10 { width: percentage((10/ $grid-columns)); }
+  .col-md-11 { width: percentage((11/ $grid-columns)); }
+  .col-md-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-md-push-1  { left: percentage((1 / $grid-columns)); }
+  .col-md-push-2  { left: percentage((2 / $grid-columns)); }
+  .col-md-push-3  { left: percentage((3 / $grid-columns)); }
+  .col-md-push-4  { left: percentage((4 / $grid-columns)); }
+  .col-md-push-5  { left: percentage((5 / $grid-columns)); }
+  .col-md-push-6  { left: percentage((6 / $grid-columns)); }
+  .col-md-push-7  { left: percentage((7 / $grid-columns)); }
+  .col-md-push-8  { left: percentage((8 / $grid-columns)); }
+  .col-md-push-9  { left: percentage((9 / $grid-columns)); }
+  .col-md-push-10 { left: percentage((10/ $grid-columns)); }
+  .col-md-push-11 { left: percentage((11/ $grid-columns)); }
+
+  .col-md-pull-1  { right: percentage((1 / $grid-columns)); }
+  .col-md-pull-2  { right: percentage((2 / $grid-columns)); }
+  .col-md-pull-3  { right: percentage((3 / $grid-columns)); }
+  .col-md-pull-4  { right: percentage((4 / $grid-columns)); }
+  .col-md-pull-5  { right: percentage((5 / $grid-columns)); }
+  .col-md-pull-6  { right: percentage((6 / $grid-columns)); }
+  .col-md-pull-7  { right: percentage((7 / $grid-columns)); }
+  .col-md-pull-8  { right: percentage((8 / $grid-columns)); }
+  .col-md-pull-9  { right: percentage((9 / $grid-columns)); }
+  .col-md-pull-10 { right: percentage((10/ $grid-columns)); }
+  .col-md-pull-11 { right: percentage((11/ $grid-columns)); }
+
+  // Offsets
+  .col-md-offset-1  { margin-left: percentage((1 / $grid-columns)); }
+  .col-md-offset-2  { margin-left: percentage((2 / $grid-columns)); }
+  .col-md-offset-3  { margin-left: percentage((3 / $grid-columns)); }
+  .col-md-offset-4  { margin-left: percentage((4 / $grid-columns)); }
+  .col-md-offset-5  { margin-left: percentage((5 / $grid-columns)); }
+  .col-md-offset-6  { margin-left: percentage((6 / $grid-columns)); }
+  .col-md-offset-7  { margin-left: percentage((7 / $grid-columns)); }
+  .col-md-offset-8  { margin-left: percentage((8 / $grid-columns)); }
+  .col-md-offset-9  { margin-left: percentage((9 / $grid-columns)); }
+  .col-md-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+  .col-md-offset-11 { margin-left: percentage((11/ $grid-columns)); }
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+//
+// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: $screen-large-desktop) {
+  .container {
+    max-width: $container-large-desktop;
+  }
+
   .col-lg-1,
   .col-lg-2,
   .col-lg-3,
@@ -165,8 +284,7 @@
   .col-lg-8,
   .col-lg-9,
   .col-lg-10,
-  .col-lg-11,
-  .col-lg-12 {
+  .col-lg-11 {
     float: left;
   }
   .col-lg-1  { width: percentage((1 / $grid-columns)); }
@@ -182,23 +300,41 @@
   .col-lg-11 { width: percentage((11/ $grid-columns)); }
   .col-lg-12 { width: 100%; }
 
-  // Offsets
-  .col-offset-1  { margin-left: percentage((1 / $grid-columns)); }
-  .col-offset-2  { margin-left: percentage((2 / $grid-columns)); }
-  .col-offset-3  { margin-left: percentage((3 / $grid-columns)); }
-  .col-offset-4  { margin-left: percentage((4 / $grid-columns)); }
-  .col-offset-5  { margin-left: percentage((5 / $grid-columns)); }
-  .col-offset-6  { margin-left: percentage((6 / $grid-columns)); }
-  .col-offset-7  { margin-left: percentage((7 / $grid-columns)); }
-  .col-offset-8  { margin-left: percentage((8 / $grid-columns)); }
-  .col-offset-9  { margin-left: percentage((9 / $grid-columns)); }
-  .col-offset-10 { margin-left: percentage((10/ $grid-columns)); }
-  .col-offset-11 { margin-left: percentage((11/ $grid-columns)); }
-}
+  // Push and pull columns for source order changes
+  .col-lg-push-1  { left: percentage((1 / $grid-columns)); }
+  .col-lg-push-2  { left: percentage((2 / $grid-columns)); }
+  .col-lg-push-3  { left: percentage((3 / $grid-columns)); }
+  .col-lg-push-4  { left: percentage((4 / $grid-columns)); }
+  .col-lg-push-5  { left: percentage((5 / $grid-columns)); }
+  .col-lg-push-6  { left: percentage((6 / $grid-columns)); }
+  .col-lg-push-7  { left: percentage((7 / $grid-columns)); }
+  .col-lg-push-8  { left: percentage((8 / $grid-columns)); }
+  .col-lg-push-9  { left: percentage((9 / $grid-columns)); }
+  .col-lg-push-10 { left: percentage((10/ $grid-columns)); }
+  .col-lg-push-11 { left: percentage((11/ $grid-columns)); }
 
-// Large desktops and up
-@media (min-width: $screen-large-desktop) {
-  .container {
-    max-width: $container-large-desktop;
-  }
+  .col-lg-pull-1  { right: percentage((1 / $grid-columns)); }
+  .col-lg-pull-2  { right: percentage((2 / $grid-columns)); }
+  .col-lg-pull-3  { right: percentage((3 / $grid-columns)); }
+  .col-lg-pull-4  { right: percentage((4 / $grid-columns)); }
+  .col-lg-pull-5  { right: percentage((5 / $grid-columns)); }
+  .col-lg-pull-6  { right: percentage((6 / $grid-columns)); }
+  .col-lg-pull-7  { right: percentage((7 / $grid-columns)); }
+  .col-lg-pull-8  { right: percentage((8 / $grid-columns)); }
+  .col-lg-pull-9  { right: percentage((9 / $grid-columns)); }
+  .col-lg-pull-10 { right: percentage((10/ $grid-columns)); }
+  .col-lg-pull-11 { right: percentage((11/ $grid-columns)); }
+
+  // Offsets
+  .col-lg-offset-1  { margin-left: percentage((1 / $grid-columns)); }
+  .col-lg-offset-2  { margin-left: percentage((2 / $grid-columns)); }
+  .col-lg-offset-3  { margin-left: percentage((3 / $grid-columns)); }
+  .col-lg-offset-4  { margin-left: percentage((4 / $grid-columns)); }
+  .col-lg-offset-5  { margin-left: percentage((5 / $grid-columns)); }
+  .col-lg-offset-6  { margin-left: percentage((6 / $grid-columns)); }
+  .col-lg-offset-7  { margin-left: percentage((7 / $grid-columns)); }
+  .col-lg-offset-8  { margin-left: percentage((8 / $grid-columns)); }
+  .col-lg-offset-9  { margin-left: percentage((9 / $grid-columns)); }
+  .col-lg-offset-10 { margin-left: percentage((10/ $grid-columns)); }
+  .col-lg-offset-11 { margin-left: percentage((11/ $grid-columns)); }
 }