active_frontend 10.2.10 → 10.3.0

data/vendor/assets/stylesheets/_collapse.scss

@@ -11,5 +11,6 @@
   overflow: hidden;
   position: relative;
   -webkit-transition: height 0.35s ease;
-  transition: height 0.35s ease;
+      -ms-transition: height 0.35s ease;
+          transition: height 0.35s ease;
 }

data/vendor/assets/stylesheets/_color.scss

@@ -1,28 +1,60 @@
 /* Table of Contents
 ==================================================
-# Colors */
+# Grayscale Colors
+# Dark Colors
+# Base Colors
+# Light Colors */
 
-/* # Colors
+/* # Grayscale Colors
 ================================================== */
 $color-transparent: rgba(0,0,0,0);
-$color-black: rgba(35,41,55,1);
-$color-black-dark: rgba(0,0,0,1);
-$color-black-light: rgba(55,61,75,1);
-$color-gray: rgba(123,137,148,1);
-$color-gray-dark: rgba(71,82,93,1);
-$color-gray-light: rgba(175,184,195,1);
-$color-haze: rgba(239,240,243,1);
-$color-haze-dark: rgba(225,226,230,1);
-$color-haze-light: rgba(247,248,250,1);
-$color-haze-lighter: rgba(249,250,252,1);
-$color-blue: rgba(0,102,255,1);
-$color-green: rgba(0,180,0,1);
+$color-dark-black:  rgba(0,0,0,1);
+$color-black:       rgba(35,41,55,1);
+$color-light-black: rgba(55,61,75,1);
+$color-dark-gray:   rgba(71,82,93,1);
+$color-gray:        rgba(123,137,148,1);
+$color-light-gray:  rgba(175,184,195,1);
+$color-dark-haze:   rgba(225,226,230,1);
+$color-haze:        rgba(239,240,243,1);
+$color-light-haze:  rgba(247,248,250,1);
+$color-dark-white:  rgba(249,250,252,1);
+$color-white:       rgba(255,255,255,1);
+
+/* # Dark Colors
+================================================== */
+$color-dark-lime:   rgba(105,164,18,1);
+$color-dark-green:  rgba(0,140,0,1);
+$color-dark-teal:   rgba(1,163,153,1);
+$color-dark-blue:   rgba(0,52,235,1);
+$color-dark-indigo: rgba(56,1,207,1);
+$color-dark-purple: rgba(93,0,220,1);
+$color-dark-pink:   rgba(230,16,67,1);
+$color-dark-red:    rgba(203,8,0,1);
+$color-dark-orange: rgba(225,62,0,1);
+$color-dark-yellow: rgba(255,214,0,1);
+
+/* # Base Colors
+================================================== */
+$color-lime:   rgba(151,212,19,1);
+$color-green:  rgba(0,180,0,1);
+$color-teal:   rgba(36,198,198,1);
+$color-blue:   rgba(0,87,255,1);
 $color-indigo: rgba(86,21,237,1);
-$color-lime: rgba(151,212,19,1);
-$color-orange: rgba(255,82,0,1);
-$color-pink: rgba(255,51,102,1);
 $color-purple: rgba(128,0,255,1);
-$color-red: rgba(240,35,17,1);
-$color-teal: rgba(32,176,176,1);
-$color-white: rgba(255,255,255,1);
-$color-yellow: rgba(255,220,0,1);
+$color-pink:   rgba(255,51,102,1);
+$color-red:    rgba(240,35,17,1);
+$color-orange: rgba(255,82,0,1);
+$color-yellow: rgba(255,235,59,1);
+
+/* # Light Colors
+================================================== */
+$color-light-lime:   rgba(189,235,108,1);
+$color-light-green:  rgba(144,225,83,1);
+$color-light-teal:   rgba(136,228,208,1);
+$color-light-blue:   rgba(82,154,243,1);
+$color-light-indigo: rgba(115,105,228,1);
+$color-light-purple: rgba(158,95,252,1);
+$color-light-pink:   rgba(255,121,172,1);
+$color-light-red:    rgba(255,95,77,1);
+$color-light-orange: rgba(255,142,80,1);
+$color-light-yellow: rgba(255,255,141,1);

data/vendor/assets/stylesheets/_colorpicker.scss

@@ -5,7 +5,7 @@
 /* # Colorpicker
 ================================================== */
 .dropdown-swatch {
-  background: $color-gray-dark;
+  background: $color-dark-gray;
   border-radius: 2px;
   display: inline-block;
   height: 25px;
@@ -20,9 +20,9 @@
 .dropdown-colorpicker > .dropdown-menu > li {
   display: block;
   float: left;
-  width: 26px;
   height: 26px;
   margin: 2px;
+  width: 26px;
 }
 .dropdown-colorpicker > .dropdown-menu > li > .colorpicker-swatch {
   border-radius: 2px;
@@ -33,7 +33,8 @@
   position: relative;
   text-decoration: none;
   -webkit-transition: all ease 0.1s;
-  transition: all ease 0.1s;
+      -ms-transition: all ease 0.1s;
+          transition: all ease 0.1s;
   width: 26px;
 }
 .dropdown-colorpicker > .dropdown-menu > li > .colorpicker-swatch.selected:after {

data/vendor/assets/stylesheets/_datepicker.scss

@@ -15,11 +15,12 @@
   opacity: 1;
   padding: 0;
   -webkit-transition: none;
-  transition: none;
+      -ms-transition: none;
+          transition: none;
   visibility: visible;
 }
 .datepicker:before {
-  border-bottom: 7px solid $color-haze-dark;
+  border-bottom: 7px solid $color-dark-haze;
   border-right: 7px solid $color-transparent;
   border-left: 7px solid $color-transparent;
   content: '';
@@ -27,7 +28,7 @@
   position: absolute;
 }
 .datepicker:after {
-  border-bottom: 6px solid $color-haze-dark;
+  border-bottom: 6px solid $color-dark-haze;
   border-right: 6px solid $color-transparent;
   border-left: 6px solid $color-transparent;
   content: '';
@@ -43,12 +44,12 @@
 .datepicker.datepicker-orient-bottom:before {
   bottom: -7px;
   border-bottom: 0;
-  border-top: 7px solid $color-haze-dark;
+  border-top: 7px solid $color-dark-haze;
 }
 .datepicker.datepicker-orient-bottom:after {
   bottom: -6px;
   border-bottom: 0;
-  border-top: 6px $color-haze-dark;
+  border-top: 6px $color-dark-haze;
 }
 .dow {
   color: $color-black;
@@ -57,9 +58,9 @@
 .datepicker > div { display: none; }
 .datepicker table {
   margin: 0;
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
-  user-select: none;
+        -ms-ms-select: none;
+          user-select: none;
   width: 100%;
 }
 .datepicker table th,
@@ -74,7 +75,7 @@
   line-height: 16px;
 }
 .datepicker table td.new,
-.datepicker table td.old { color: $color-gray-light; }
+.datepicker table td.old { color: $color-light-gray; }
 .datepicker table td > span {
   border-radius: 2px;
   display: block;
@@ -110,7 +111,7 @@
   font-weight: bold;
   width: 145px;
 }
-.datepicker table td.day.disabled { color: $color-haze-dark; }
+.datepicker table td.day.disabled { color: $color-dark-haze; }
 .datepicker table td.day.disabled:hover,
 .datepicker table td.day.disabled.active,
 .datepicker table td.day.disabled:active,

data/vendor/assets/stylesheets/_dropdown.scss

@@ -11,16 +11,16 @@
 .dropdown-toggle:active,
 .open .dropdown-toggle { outline: 0; }
 .dropdown-menu {
-  background: $color-haze-light;
+  background: $color-light-haze;
   background-clip: padding-box;
-  border: 2px solid $color-haze-dark;
+  border: 2px solid $color-dark-haze;
   box-shadow: 0 0 3px rgba(220,220,220,1);
   box-sizing: border-box;
   color: $color-black;
   display: block;
   float: left;
-  font-weight: bold;
   font-size: 12px;
+  font-weight: bold;
   letter-spacing: 0;
   line-height: 12px;
   list-style: none;
@@ -32,7 +32,8 @@
   text-align: left;
   text-transform: none;
   -webkit-transition: all 0.09s ease-in-out;
-  transition: all 0.09s ease-in-out;
+      -ms-transition: all 0.09s ease-in-out;
+          transition: all 0.09s ease-in-out;
   top: 100%;
   visibility: hidden;
   z-index: 1000;
@@ -43,8 +44,8 @@
 }
 .dropdown-menu > .title {
   background: $color-haze;
-  border-bottom: 1px solid $color-haze-dark;
-  border-top: 1px solid $color-haze-dark;
+  border-bottom: 1px solid $color-dark-haze;
+  border-top: 1px solid $color-dark-haze;
   letter-spacing: 1px;
   padding: 7px 15px 6px 15px;
   text-transform: uppercase;
@@ -80,7 +81,7 @@
 .dropdown-menu > li .badge,
 .dropdown-menu > li .label {
   margin: -10px 0;
-  padding: 4px;
+  padding: 4px 6px;
 }
 .open > .dropdown-menu {
   display: block;
@@ -93,7 +94,7 @@
 }
 .dropdown-menu.dropdown-caret { top: calc(100% + 5px); }
 .dropdown-menu.dropdown-caret:before {
-  border-bottom: 7px solid $color-haze-dark;
+  border-bottom: 7px solid $color-dark-haze;
   border-left: 7px solid $color-transparent;
   border-right: 7px solid $color-transparent;
   content: "";
@@ -103,7 +104,7 @@
   top: -9px;
 }
 .dropdown-menu.dropdown-caret:after {
-  border-bottom: 6px solid $color-haze-dark;
+  border-bottom: 6px solid $color-dark-haze;
   border-left: 6px solid $color-transparent;
   border-right: 6px solid $color-transparent;
   content: "";
@@ -163,14 +164,14 @@
 }
 .dropup .dropdown-menu.dropdown-caret:before {
   border-bottom: 0;
-  border-top: 7px solid $color-haze-dark;
+  border-top: 7px solid $color-dark-haze;
   bottom: -9px;
   left: 9px;
   top: auto;
 }
 .dropup .dropdown-menu.dropdown-caret:after {
   border-bottom: 0;
-  border-top: 6px solid $color-haze-dark;
+  border-top: 6px solid $color-dark-haze;
   bottom: -7px;
   left: 10px;
   top: auto;

data/vendor/assets/stylesheets/_footer.scss

@@ -50,8 +50,8 @@
   text-transform: uppercase;
 }
 .footer-nav > li,
-.footer-navicon > li { color: $color-gray-dark; }
-.footer-subnav > li { color: $color-gray-light; }
+.footer-navicon > li { color: $color-dark-gray; }
+.footer-subnav > li { color: $color-light-gray; }
 .footer-navicon > li {
   font-size: 18px;
   line-height: 18px;
@@ -59,8 +59,8 @@
 }
 .footer-nav > li > a { font-weight: 500; }
 .footer-nav > li > a,
-.footer-navicon > li > a { color: $color-gray-dark; }
-.footer-subnav > li > a { color: $color-gray-light; }
+.footer-navicon > li > a { color: $color-dark-gray; }
+.footer-subnav > li > a { color: $color-light-gray; }
 
 /* # Styles
 ================================================== */
@@ -74,11 +74,11 @@
 ================================================== */
 .footer-dark {
   background: $color-black;
-  border-color: $color-black-dark;
+  border-color: $color-dark-black;
 }
 .footer-light {
-  background: $color-haze-light;
-  border-color: $color-haze-dark;
+  background: $color-light-haze;
+  border-color: $color-dark-haze;
 }
 .footer-dark .footer-nav > li,
 .footer-dark .footer-navicon > li,

data/vendor/assets/stylesheets/_form.scss

@@ -27,7 +27,7 @@ label {
   display: block;
   font-size: 13px;
   font-weight: bold;
-  margin: 5px 0 5px 0;
+  margin: 5px 0;
 }
 textarea,
 select,
@@ -48,7 +48,8 @@ input[type="color"],
 .uneditable-input,
 .form-select > select {
   -webkit-appearance: none;
-  appearance: none;
+      -ms-appearance: none;
+          appearance: none;
   background: $color-white;
   border: 1px solid $color-haze;
   border-radius: 2px;
@@ -63,7 +64,8 @@ input[type="color"],
   padding: 13px 0 10px 0;
   text-indent: 10px;
   -webkit-transition: border linear 0.2s;
-  transition: border linear 0.2s;
+      -ms-transition: border linear 0.2s;
+          transition: border linear 0.2s;
   width: 100%;
   vertical-align: middle;
 }
@@ -94,7 +96,8 @@ input[type="color"]:focus,
   outline: 0;
   outline: thin dotted \9;
   -webkit-transition: background 150ms linear;
-  transition: background 150ms linear;
+      -ms-transition: background 150ms linear;
+          transition: background 150ms linear;
 }
 input[type="radio"],
 input[type="checkbox"] {
@@ -158,7 +161,7 @@ input[disabled],
 textarea[disabled],
 select[disabled],
 .uneditable-input {
-  background: $color-haze-light;
+  background: $color-light-haze;
   color: $color-gray !important;
   cursor: not-allowed;
 }
@@ -187,7 +190,7 @@ select.form-input-initial-width {
   margin-bottom: 40px;
 }
 .form-error-messages > h4 {
-  background: $color-haze-light;
+  background: $color-light-haze;
   border: 1px solid $color-haze;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -251,7 +254,7 @@ select.form-input-initial-width {
   vertical-align: middle;
 }
 .form-input-group-addon {
-  background: $color-haze-light;
+  background: $color-light-haze;
   border: 1px solid $color-haze;
   color: $color-gray;
   font-size: 16px;
@@ -289,7 +292,7 @@ select.form-input-initial-width {
   padding-top: 14px;
 }
 .form-help-block {
-  color: $color-gray-light;
+  color: $color-light-gray;
   display: block;
   font-size: 12px;
   font-style: italic;
@@ -333,11 +336,12 @@ select.form-input-initial-width {
 }
 .form-select > select {
   -webkit-appearance: button;
-  appearance: button;
+      -ms-appearance: button;
+          appearance: button;
   text-overflow: '';
 }
 .form-select > select[disabled] {
-  background: $color-haze-light;
+  background: $color-light-haze;
   color: $color-gray;
 }
 .form-slider-label {
@@ -365,6 +369,17 @@ select.form-input-initial-width {
   padding-bottom: 14px;
   padding-top: 14px;
 }
+.form-inline-link,
+.form-inline-icon {
+  float: left;
+  font-size: 16px;
+  line-height: 1;
+  margin: 14px 5px 0 0;
+}
+.form-inline-icon {
+  font-size: 20px;
+  margin-top: 11px;
+}
 .form-inline-input {
   float: left;
   margin: -2px 5px 0 0;
@@ -391,6 +406,14 @@ select.form-input-initial-width {
   padding-bottom: 8px;
   padding-top: 8px;
 }
+.form-inline.form-inline-alt > .form-inline-link{
+  font-size: 12px;
+  margin-top: 11px;
+}
+.form-inline.form-inline-alt > .form-inline-icon {
+  font-size: 16px;
+  margin-top: 7px;
+}
 .form-inline.form-inline-alt .form-select::after {
   font-size: 14px;
   height: 14px;

data/vendor/assets/stylesheets/_grid.scss

@@ -1,5 +1,6 @@
 /* Table of Contents
 ==================================================
+# Variables
 # Container
 # Desktop
 # Laptop
@@ -10,6 +11,26 @@
 # Row
 # Clearing */
 
+/* # Variables
+================================================== */
+$sizes: (
+  one: 10%,
+  two: 20%,
+  three: 30%,
+  four: 40%,
+  five: 50%,
+  six: 60%,
+  seven: 70%,
+  eight: 80%,
+  nine: 90%,
+  ten: 100%,
+  one-fourth: 25%,
+  one-half: 50%,
+  three-fourths: 75%,
+  one-third: 33.33333%,
+  two-thirds: 66.66666%
+);
+
 /* # Container
 ================================================== */
 .container {
@@ -22,260 +43,88 @@
 .container .columns {
   display: inline;
   float: left;
-  margin-right: 10px;
   margin-left: 10px;
+  margin-right: 10px;
 }
 .column.alpha,
 .columns.alpha {
-  margin-right: 10px;
   margin-left: 0;
+  margin-right: 10px;
 }
 .column.omega,
 .columns.omega {
-  margin-right: 0;
   margin-left: 10px;
-}
-.alpha.omega {
   margin-right: 0;
+}
+.column.alpha.omega,
+.columns.alpha.omega {
   margin-left: 0;
+  margin-right: 0;
 }
 
 /* # Desktop
 ================================================== */
-.container .one.column,
-.container .one.columns { width: calc(10% - 20px); }
-.container .one.column.alpha,
-.container .one.columns.alpha,
-.container .one.column.omega,
-.container .one.columns.omega { width: calc(10% - 10px); }
-.container .one.column.alpha.omega,
-.container .one.columns.alpha.omega { width: 10%; }
-.container .two.columns { width: calc(20% - 20px); }
-.container .two.columns.alpha,
-.container .two.columns.omega { width: calc(20% - 10px); }
-.container .two.columns.alpha.omega { width: 20%; }
-.container .three.columns { width: calc(30% - 20px); }
-.container .three.columns.alpha,
-.container .three.columns.omega { width: calc(30% - 10px); }
-.container .three.columns.alpha.omega { width: 30%; }
-.container .four.columns { width: calc(40% - 20px); }
-.container .four.columns.alpha,
-.container .four.columns.omega { width: calc(40% - 10px); }
-.container .four.columns.alpha.omega { width: 40%; }
-.container .five.columns { width: calc(50% - 20px); }
-.container .five.columns.alpha,
-.container .five.columns.omega { width: calc(50% - 10px); }
-.container .five.columns.alpha.omega { width: 50%; }
-.container .six.columns { width: calc(60% - 20px); }
-.container .six.columns.alpha,
-.container .six.columns.omega { width: calc(60% - 10px); }
-.container .six.columns.alpha.omega { width: 60%; }
-.container .seven.columns { width: calc(70% - 20px); }
-.container .seven.columns.alpha,
-.container .seven.columns.omega { width: calc(70% - 10px); }
-.container .seven.columns.alpha.omega { width: 70%; }
-.container .eight.columns { width: calc(80% - 20px); }
-.container .eight.columns.alpha,
-.container .eight.columns.omega { width: calc(80% - 10px); }
-.container .eight.columns.alpha.omega { width: 80%; }
-.container .nine.columns { width: calc(90% - 20px); }
-.container .nine.columns.alpha,
-.container .nine.columns.omega { width: calc(90% - 10px); }
-.container .nine.columns.alpha.omega { width: 90%; }
-.container .ten.columns { width: calc(100% - 20px); }
-.container .ten.columns.alpha,
-.container .ten.columns.omega { width: calc(100% - 10px); }
-.container .ten.columns.alpha.omega { width: 100%; }
-.container .one-fourth.column,
-.container .one-fourth.columns { width: calc(25% - 20px); }
-.container .one-fourth.column.alpha,
-.container .one-fourth.columns.alpha,
-.container .one-fourth.column.omega,
-.container .one-fourth.columns.omega { width: calc(25% - 10px); }
-.container .one-fourth.column.alpha.omega,
-.container .one-fourth.columns.alpha.omega { width: 25%; }
-.container .one-half.column,
-.container .one-half.columns { width: calc(50% - 20px); }
-.container .one-half.column.alpha,
-.container .one-half.columns.alpha,
-.container .one-half.column.omega,
-.container .one-half.columns.omega { width: calc(50% - 10px); }
-.container .one-half.column.alpha.omega,
-.container .one-half.columns.alpha.omega { width: 50%; }
-.container .three-fourths.column,
-.container .three-fourths.columns { width: calc(75% - 20px); }
-.container .three-fourths.column.alpha,
-.container .three-fourths.columns.alpha,
-.container .three-fourths.column.omega,
-.container .three-fourths.columns.omega { width: calc(75% - 10px); }
-.container .three-fourths.column.alpha.omega,
-.container .three-fourths.columns.alpha.omega { width: 75%; }
-.container .one-third.column,
-.container .one-third.columns { width: calc(33.33333% - 20px); }
-.container .one-third.column.alpha,
-.container .one-third.columns.alpha,
-.container .one-third.column.omega,
-.container .one-third.columns.omega { width: calc(33.33333% - 10px); }
-.container .one-third.column.alpha.omega,
-.container .one-third.columns.alpha.omega { width: 33.33333%; }
-.container .two-thirds.column,
-.container .two-thirds.columns { width: calc(66.66666% - 20px); }
-.container .two-thirds.column.alpha,
-.container .two-thirds.columns.alpha,
-.container .two-thirds.column.omega,
-.container .two-thirds.columns.omega { width: calc(66.66666% - 10px); }
-.container .two-thirds.column.alpha.omega,
-.container .two-thirds.columns.alpha.omega { width: 66.66666%; }
-.container .offset-by-one { padding-left: 10%; }
-.container .offset-by-two { padding-left: 20%; }
-.container .offset-by-three { padding-left: 30%; }
-.container .offset-by-four { padding-left: 40%; }
-.container .offset-by-five { padding-left: 50%; }
-.container .offset-by-six { padding-left: 60%; }
-.container .offset-by-seven { padding-left: 70%; }
-.container .offset-by-eight { padding-left: 80%; }
-.container .offset-by-nine { padding-left: 90%; }
-.container .offset-by-one-fourth { padding-left: 25%; }
-.container .offset-by-one-half { padding-left: 50%; }
-.container .offset-by-three-fourths { padding-left: 75%; }
-.container .offset-by-one-third { padding-left: 33.33333%; }
-.container .offset-by-two-thirds { padding-left: 66.66666%; }
+@each $name, $size in $sizes {
+  .container .#{$name}.column,
+  .container .#{$name}.columns { width: calc(#{$size} - 20px); }
+  .container .#{$name}.column.alpha,
+  .container .#{$name}.column.omega,
+  .container .#{$name}.columns.alpha,
+  .container .#{$name}.columns.omega { width: calc(#{$size} - 10px); }
+  .container .#{$name}.column.alpha.omega,
+  .container .#{$name}.columns.alpha.omega { width: $size; }
+  .container .offset-by-#{$name} { padding-left: $size; }
+}
 .hidden { display: none !important; }
+.hidden-desktop { display: none !important; }
+.visible { display: inherit !important; }
 .visible-phone { display: none !important; }
 .visible-tablet { display: none !important; }
 .visible-laptop { display: none !important; }
-.hidden-desktop { display: none !important; }
 
 /* # Laptop
 ================================================== */
 @media only screen and (min-width: 960px) and (max-width: 1365px) {
-  .visible-laptop { display: inherit !important; }
-  .hidden-laptop { display: none !important; }
   .hidden-desktop { display: inherit !important; }
+  .hidden-laptop { display: none !important; }
   .visible-desktop { display: none !important ; }
+  .visible-laptop { display: inherit !important; }
 }
 
 /* # Tablet
 ================================================== */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
-  .hidden-tablet { display: none !important; }
-  .visible-tablet { display: inherit !important; }
-  .hidden-laptop { display: inherit !important; }
-  .visible-laptop { display: none !important ; }
   .hidden-desktop { display: inherit !important; }
+  .hidden-laptop { display: inherit !important; }
+  .hidden-tablet { display: none !important; }
   .visible-desktop { display: none !important ; }
+  .visible-laptop { display: none !important ; }
+  .visible-tablet { display: inherit !important; }
 }
 
 /* # Mobile
 ================================================== */
 @media only screen and (max-width: 767px) {
-  .container .one.column,
-  .container .one.columns,
-  .container .one.column.alpha,
-  .container .one.columns.alpha,
-  .container .one.column.omega,
-  .container .one.columns.omega,
-  .container .one.column.alpha.omega,
-  .container .one.columns.alpha.omega,
-  .container .two.columns,
-  .container .two.columns.alpha,
-  .container .two.columns.omega,
-  .container .two.columns.alpha.omega,
-  .container .three.columns,
-  .container .three.columns.alpha,
-  .container .three.columns.omega,
-  .container .three.columns.alpha.omega,
-  .container .four.columns,
-  .container .four.columns.alpha,
-  .container .four.columns.omega,
-  .container .four.columns.alpha.omega,
-  .container .five.columns,
-  .container .five.columns.alpha,
-  .container .five.columns.omega,
-  .container .five.columns.alpha.omega,
-  .container .six.columns,
-  .container .six.columns.alpha,
-  .container .six.columns.omega,
-  .container .six.columns.alpha.omega,
-  .container .seven.columns,
-  .container .seven.columns.alpha,
-  .container .seven.columns.omega,
-  .container .seven.columns.alpha.omega,
-  .container .eight.columns,
-  .container .eight.columns.alpha,
-  .container .eight.columns.omega,
-  .container .eight.columns.alpha.omega,
-  .container .nine.columns,
-  .container .nine.columns.alpha,
-  .container .nine.columns.omega,
-  .container .nine.columns.alpha.omega,
-  .container .ten.columns,
-  .container .ten.columns.alpha,
-  .container .ten.columns.omega,
-  .container .ten.columns.alpha.omega,
-  .container .one-fourth.column,
-  .container .one-fourth.columns,
-  .container .one-fourth.column.alpha,
-  .container .one-fourth.columns.alpha,
-  .container .one-fourth.column.omega,
-  .container .one-fourth.columns.omega,
-  .container .one-fourth.column.alpha.omega,
-  .container .one-fourth.columns.alpha.omega,
-  .container .one-half.column,
-  .container .one-half.columns,
-  .container .one-half.column.alpha,
-  .container .one-half.columns.alpha,
-  .container .one-half.column.omega,
-  .container .one-half.columns.omega,
-  .container .one-half.column.alpha.omega,
-  .container .one-half.columns.alpha.omega,
-  .container .three-fourths.column,
-  .container .three-fourths.columns,
-  .container .three-fourths.column.alpha,
-  .container .three-fourths.columns.alpha,
-  .container .three-fourths.column.omega,
-  .container .three-fourths.columns.omega,
-  .container .three-fourths.column.alpha.omega,
-  .container .three-fourths.columns.alpha.omega,
-  .container .one-third.column,
-  .container .one-third.columns,
-  .container .one-third.column.alpha,
-  .container .one-third.columns.alpha,
-  .container .one-third.column.omega,
-  .container .one-third.columns.omega,
-  .container .one-third.column.alpha.omega,
-  .container .one-third.columns.alpha.omega,
-  .container .two-thirds.column,
-  .container .two-thirds.columns,
-  .container .two-thirds.column.alpha,
-  .container .two-thirds.columns.alpha,
-  .container .two-thirds.column.omega,
-  .container .two-thirds.columns.omega,
-  .container .two-thirds.column.alpha.omega,
-  .container .two-thirds.columns.alpha.omega {
-    margin: 0;
-    width: 100%;
+  @each $name, $size in $sizes {
+    .container .#{$name}.column,
+    .container .#{$name}.columns,
+    .container .#{$name}.column.alpha,
+    .container .#{$name}.column.omega,
+    .container .#{$name}.columns.alpha,
+    .container .#{$name}.columns.omega,
+    .container .#{$name}.column.alpha.omega,
+    .container .#{$name}.columns.alpha.omega, {
+      margin: 0;
+      width: 100%;
+    }
+    .container .offset-by-#{$name} { padding-left: 0; }
   }
-  .container .offset-by-one,
-  .container .offset-by-two,
-  .container .offset-by-three,
-  .container .offset-by-four,
-  .container .offset-by-five,
-  .container .offset-by-six,
-  .container .offset-by-seven,
-  .container .offset-by-eight,
-  .container .offset-by-nine,
-  .container .offset-by-one-fourth,
-  .container .offset-by-one-half,
-  .container .offset-by-three-fourths,
-  .container .offset-by-one-third,
-  .container .offset-by-two-thirds { padding-left: 0; }
-  .visible-phone { display: inherit !important; }
-  .hidden-phone { display: none !important; }
-  .hidden-laptop { display: inherit !important; }
-  .visible-laptop { display: none !important; }
   .hidden-desktop { display: inherit !important; }
+  .hidden-laptop { display: inherit !important; }
+  .hidden-phone { display: none !important; }
   .visible-desktop { display: none !important; }
+  .visible-laptop { display: none !important; }
+  .visible-phone { display: inherit !important; }
 }
 
 /* # Display
@@ -292,8 +141,8 @@
 
 /* # Row
 ================================================== */
-.row { margin-bottom: 20px; }
 .row-small { margin-bottom: 10px; }
+.row { margin-bottom: 20px; }
 .row-medium { margin-bottom: 40px; }
 .row-large { margin-bottom: 60px; }