on-standards-rails 2.0.0.pre.alpha.1 → 2.0.0.pre.alpha.2

data/vendor/assets/stylesheets/on-standards/_breadcrumb.scss

@@ -1,17 +1,20 @@
 .breadcrumb {
-  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
   margin-bottom: $spacer-y;
+  padding: 0;
   list-style: none;
-  background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
   @include clearfix;
 
   > li {
-    float: left;
+    display: inline-block;
+    font-size: $font-size-1;
+    a {
+      color: $breadcrumb-divider-color;
+    }
 
     + li::before {
-      padding-right: .5rem;
-      padding-left: .5rem;
+      padding-right: 6px;
+      padding-left: 2px;
       color: $breadcrumb-divider-color;
       content: "#{$breadcrumb-divider}";
     }
@@ -19,5 +22,11 @@
 
   > .active {
     color: $breadcrumb-active-color;
+    display: block;
+    margin-top: 1px;
+    @extend h1;
+    &::before {
+      display: none;
+    }
   }
 }

data/vendor/assets/stylesheets/on-standards/_card.scss

@@ -7,8 +7,11 @@
   display: block;
   margin-bottom: $card-spacer-y;
   background-color: $card-bg;
-  border: $card-border-width solid $card-border-color;
+  box-shadow: $box-shadow-1;
   @include border-radius($card-border-radius);
+  &.card-border {
+    border: $card-border-width solid $card-border-color;
+  }
 }
 
 .card-block {
@@ -70,7 +73,7 @@
 .card-header {
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
+  border-bottom: $card-border-width solid $gray-10;
 
   &:first-child {
     @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
@@ -80,7 +83,7 @@
 .card-footer {
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
+  border-top: $card-border-width solid $gray-10;
 
   &:last-child {
     @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
@@ -98,9 +101,6 @@
 .card-success {
   @include card-variant($brand-success, $brand-success);
 }
-.card-info {
-  @include card-variant($brand-info, $brand-info);
-}
 .card-warning {
   @include card-variant($brand-warning, $brand-warning);
 }
@@ -152,12 +152,15 @@
   @include border-radius(.25rem);
 }
 .card-img-overlay {
+  @include card-inverse;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 1.25rem;
+  background: $overlay;
+  border-radius: $card-border-radius;
 }
 
 
@@ -165,9 +168,11 @@
 // Card image caps
 .card-img-top {
   @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+  width: 100%;
 }
 .card-img-bottom {
   @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+  width: 100%;
 }
 
 
@@ -216,6 +221,7 @@
 
 @include media-breakpoint-up(sm) {
   .card-group {
+    box-shadow: $box-shadow-1;
     @if $enable-flex {
       display: flex;
       flex-flow: row wrap;
@@ -226,6 +232,8 @@
     }
 
     .card {
+      box-shadow: none;
+      border-right: 1px solid $gray-10;
       @if $enable-flex {
         flex: 1 0 0;
       } @else {
@@ -251,6 +259,7 @@
           }
         }
         &:last-child {
+          border-right: 0;
           @include border-left-radius(0);
 
           .card-img-top {

data/vendor/assets/stylesheets/on-standards/_custom-forms.scss

@@ -42,27 +42,36 @@
   }
 }
 
+// Resets labels to match body copy on radios and checkboxes.
+label {
+  &.c-checkbox,
+  &.c-radio {
+    font-size: $font-size-2;
+    font-weight: $font-weight-normal;
+  }
+}
+
 // Custom indicator
 //
 // Generates a shadow element to create our makeshift checkbox/radio background.
 
 .c-indicator {
   position: absolute;
-  top: 0;
+  top: 1px;
   left: 0;
   display: block;
   width: 1rem;
   height: 1rem;
   font-size: 65%;
   line-height: 1rem;
-  color: #eee;
+  color: $white;
   text-align: center;
   user-select: none;
-  background-color: #eee;
+  background-color: $white;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50% 50%;
-  @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1));
+  border: 1px solid $line-color;
 }
 
 // Checkboxes
@@ -71,17 +80,18 @@
 
 .c-checkbox {
   .c-indicator {
-    border-radius: .25rem;
+    border-radius: $border-radius;
   }
 
   input:checked ~ .c-indicator {
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
+    border: 1px solid $brand-action;
   }
 
   input:indeterminate ~ .c-indicator {
-    background-color: #0074d9;
+    background-color: $brand-action;
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
-    @include box-shadow(none);
+    border: 1px solid $brand-action;
   }
 }
 
@@ -175,8 +185,10 @@
 .file {
   position: relative;
   display: inline-block;
-  height: 2.5rem;
+  height: 2.25rem;
   cursor: pointer;
+  font-size: $font-size-2;
+  font-weight: $font-weight-normal;
 }
 .file input {
   min-width: 14rem;
@@ -190,15 +202,14 @@
   right: 0;
   left: 0;
   z-index: 5;
-  height: 2.5rem;
-  padding: .5rem 1rem;
-  line-height: 1.5;
-  color: #555;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  line-height: $line-height;
+  color: $body-color;
   user-select: none;
   background-color: #fff;
-  border: $input-button-border-width solid #ddd;
-  border-radius: .25rem;
-  @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
+  border: $input-button-border-width solid $line-color;
+  border-radius: $border-radius;
 }
 .file-custom::after {
   content: "Choose file...";
@@ -210,14 +221,14 @@
   bottom: -.075rem;
   z-index: 6;
   display: block;
-  height: 2.5rem;
-  padding: .5rem 1rem;
-  line-height: 1.5;
-  color: #555;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  line-height: $line-height;
+  color: $body-color;
   content: "Browse";
-  background-color: #eee;
-  border: $input-button-border-width solid #ddd;
-  border-radius: 0 .25rem .25rem 0;
+  background-color: $gray-20;
+  border: $input-button-border-width solid $line-color;
+  border-radius: 0 $border-radius $border-radius 0;
 }
 
 // Focus state

data/vendor/assets/stylesheets/on-standards/_forms.scss

@@ -102,18 +102,18 @@
       line-height: $input-height;
     }
 
-    &.input-xsm,
-    .input-group-xsm &.form-control {
+    &.input-xsmall,
+    .input-group-xsmall &.form-control {
       line-height: $input-height-xsm;
     }
 
-    &.input-sm,
-    .input-group-sm &.form-control {
+    &.input-small,
+    .input-group-small &.form-control {
       line-height: $input-height-sm;
     }
 
-    &.input-lg,
-    .input-group-lg &.form-control {
+    &.input-large,
+    .input-group-large &.form-control {
       line-height: $input-height-lg;
     }
   }
@@ -132,9 +132,9 @@
   // Remove default margin from `p`
   margin-bottom: 0;
 
-  &.form-control-xsm,
-  &.form-control-sm,
-  &.form-control-lg {
+  &.form-control-xsmall,
+  &.form-control-small,
+  &.form-control-large {
     padding-right: 0;
     padding-left: 0;
   }
@@ -149,27 +149,40 @@
 // The `.form-group-* form-control` variations are sadly duplicated to avoid the
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
-.form-control-xsm {
+.form-control-xsmall {
   padding: ($input-padding-y-xsm + .0625rem) $input-padding-x-xsm $input-padding-y-xsm $input-padding-x-xsm;
   font-size: $font-size-sm;
   line-height: $line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
-.form-control-sm {
+.form-control-small {
   padding: ($input-padding-y-sm + .0625rem) $input-padding-x-sm $input-padding-y-sm $input-padding-x-sm;
   font-size: $font-size-sm;
   line-height: $line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
-.form-control-lg {
+.form-control-large {
   padding: $input-padding-y-lg $input-padding-x-lg;
   font-size: $font-size-lg;
   line-height: $line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
+select {
+  height: 2.25rem;
+  &.form-control-large {
+    height: 3rem;
+  }
+  &.form-control-small {
+    height: 1.75rem;
+  }
+  &.form-control-xsmall {
+    height: 1.25rem;
+  }
+}
+
 
 // Form groups
 //

data/vendor/assets/stylesheets/on-standards/_input-group.scss

@@ -67,20 +67,20 @@
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.
 
-.input-group-lg > .form-control,
-.input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-button > .button {
-  @extend .form-control-lg;
+.input-group-large > .form-control,
+.input-group-large > .input-group-addon,
+.input-group-large > .input-group-button > .button {
+  @extend .form-control-large;
 }
-.input-group-sm > .form-control,
-.input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-button > .button {
-  @extend .form-control-sm;
+.input-group-small > .form-control,
+.input-group-small > .input-group-addon,
+.input-group-small > .input-group-button > .button {
+  @extend .form-control-small;
 }
-.input-group-xsm > .form-control,
-.input-group-xsm > .input-group-addon,
-.input-group-xsm > .input-group-button > .button {
-  @extend .form-control-xsm;
+.input-group-xsmall > .form-control,
+.input-group-xsmall > .input-group-addon,
+.input-group-xsmall > .input-group-button > .button {
+  @extend .form-control-xsmall;
 }
 
 
@@ -100,12 +100,12 @@
   @include border-radius($border-radius);
 
   // Sizing
-  &.form-control-sm {
+  &.form-control-small {
     padding: $input-padding-y-sm $input-padding-x-sm;
     font-size: $font-size-sm;
     @include border-radius($border-radius-sm);
   }
-  &.form-control-lg {
+  &.form-control-large {
     padding: $input-padding-y-lg $input-padding-x-lg;
     font-size: $font-size-lg;
     @include border-radius($border-radius-lg);

data/vendor/assets/stylesheets/on-standards/_mixins.scss

@@ -28,6 +28,7 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
+@import "mixins/font-base";
 
 // // Components
 @import "mixins/alert";

data/vendor/assets/stylesheets/on-standards/_off-canvas.scss

@@ -86,6 +86,8 @@
   background-color: $off-canvas-bg;
   width: 100%;
   height: 100%;
+  box-shadow: $box-shadow-2;
+  
   .off-canvas-right & {
     float: right;
     @include clearfix;
@@ -192,10 +194,10 @@
 
 .off-canvas-left {
   padding-right: 48px; 
-  left: (-$off-canvas-small);
+  left: -100%;
 }
 
 .off-canvas-right {
   padding-left: 48px;
-  right: (-$off-canvas-small);
+  right: -100%;
 }

data/vendor/assets/stylesheets/on-standards/_tooltip.scss

@@ -68,7 +68,7 @@
 // Wrapper for the tooltip content
 .tooltip-inner {
   max-width: $tooltip-max-width;
-  padding: 3px 8px;
+  padding: 3px 8px 2px;
   color: $tooltip-color;
   text-align: center;
   background-color: $tooltip-bg;

data/vendor/assets/stylesheets/on-standards/_utilities-background.scss

@@ -1,19 +1,22 @@
 //
 // Contextual backgrounds
+// Default text color is: #fff.
 //
 
-.bg-faded {
-  background-color: $gray-10;
-}
-
 @include bg-variant('.bg-primary', $brand-primary);
 
 @include bg-variant('.bg-success', $brand-success);
 
-@include bg-variant('.bg-info', $brand-info, $body-color);
-
 @include bg-variant('.bg-warning', $brand-warning, $body-color);
 
 @include bg-variant('.bg-danger', $brand-danger);
 
-@include bg-variant('.bg-gray', $body-color);
+@include bg-variant('.bg-gray-dark', $gray-dark);
+
+@include bg-variant('.bg-gray', $gray);
+
+@include bg-variant('.bg-gray-20', $gray-20, $body-color);
+
+@include bg-variant('.bg-gray-10', $gray-10, $body-color);
+
+@include bg-variant('.bg-gray-5', $gray-5, $body-color);

data/vendor/assets/stylesheets/on-standards/_variables.scss

@@ -113,6 +113,11 @@ $link-decoration:            none !default;
 $link-hover-color:           lighten($link-color, 10%) !default;
 $link-hover-decoration:      underline !default;
 
+// Line color
+//
+// Color for typical lines and rules
+
+$line-color:                 $gray-20 !default;
 
 // Grid breakpoints
 //
@@ -150,7 +155,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:               12 !default;
-$grid-gutter-width:          1rem !default;
+$grid-gutter-width:          2rem !default;
 
 
 // Typography
@@ -220,7 +225,7 @@ $abbr-border-color:           $gray-50 !default;
 
 $blockquote-small-color:      $gray-50 !default;
 $blockquote-font-size:        $font-size-3 !default;
-$blockquote-border-color:     $gray-20 !default;
+$blockquote-border-color:     $brand-primary !default;
 
 $hr-border-color:             $gray-20 !default;
 $hr-border-width:             $border-width !default;
@@ -528,13 +533,13 @@ $state-danger-border:            darken($state-danger-bg, 5%) !default;
 
 
 // Cards
-$card-spacer-x:            1.25rem !default;
-$card-spacer-y:            .75rem !default;
+$card-spacer-x:            1rem !default;
+$card-spacer-y:            1rem !default;
 $card-border-width:        1px !default;
-$card-border-radius:       $border-radius !default;
-$card-border-color:        #e5e5e5 !default;
+$card-border-radius:       $border-radius-lg !default;
+$card-border-color:        $gray-20 !default; // TODO: Change $gray-20 to $line-color
 $card-border-radius-inner: $card-border-radius !default;
-$card-cap-bg:              #f5f5f5 !default;
+$card-cap-bg:              $gray-5 !default;
 $card-bg:                  #fff !default;
 
 $card-link-hover-color:    #fff !default;
@@ -544,10 +549,10 @@ $card-link-hover-color:    #fff !default;
 
 $tooltip-max-width:           200px !default;
 $tooltip-color:               #fff !default;
-$tooltip-bg:                  #000 !default;
-$tooltip-opacity:             .9 !default;
+$tooltip-bg:                  $overlay-dark !default;
+$tooltip-opacity:             1 !default;
 
-$tooltip-arrow-width:         5px !default;
+$tooltip-arrow-width:         4px !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
 
@@ -682,12 +687,8 @@ $thumbnail-border-radius:     $border-radius !default;
 
 // Breadcrumbs
 
-$breadcrumb-padding-vertical:   .75rem !default;
-$breadcrumb-padding-horizontal: 1rem !default;
-
-$breadcrumb-bg:                 $gray-50 !default;
 $breadcrumb-divider-color:      $gray-50 !default;
-$breadcrumb-active-color:       $gray-50 !default;
+$breadcrumb-active-color:       $body-color !default;
 $breadcrumb-divider:            "/" !default;
 
 

data/vendor/assets/stylesheets/on-standards/mixins/_cards.scss

@@ -28,7 +28,7 @@
   .card-link,
   .card-text,
   .card-blockquote > footer {
-    color: rgba(255,255,255,.65);
+    color: #fff;
   }
   .card-link {
     @include hover-focus {

data/vendor/assets/stylesheets/on-standards/mixins/_font-base.scss

@@ -0,0 +1,33 @@
+// Font Base
+//
+// Use these mixins when needing to reference a different font family.
+// Use this mixin in a ':before' or ':after' to add Font Awesome characters.
+// You must add the appropriate icon in the 'content' decleration. (e.g. content: "\f00c")
+
+// Icomoon Awesome
+@mixin icomoon-base {
+  display: inline-block;
+  // use !important to prevent issues with browser extensions that change fonts.
+  font: normal normal normal 16px/1'icomoon' !important;
+  speak: none;
+  font-size: inherit;
+  text-transform: none;
+  text-rendering: auto;
+  // Better Font Rendering
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Font Awesome
+@mixin font-awesome-base {
+  display: inline-block;
+  // use !important to prevent issues with browser extensions that change fonts.
+  font: normal normal normal 16px/1 FontAwesome !important;
+  speak: none;
+  font-size: inherit;
+  text-transform: none;
+  text-rendering: auto;
+  // Better Font Rendering
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

data/vendor/assets/stylesheets/on-standards/mixins/_forms.scss

@@ -11,10 +11,7 @@
   .checkbox,
   .radio-inline,
   .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label  {
+  label {
     color: $color;
   }
   // Set the border and box shadow on specific inputs to match

data/vendor/assets/stylesheets/on-standards/mixins/_text-emphasis.scss

@@ -6,7 +6,7 @@
   }
   a#{$parent} {
     @include hover-focus {
-      color: darken($color, 10%);
+      color: tint($color, 20%) !important;
     }
   }
 }

data/vendor/assets/stylesheets/on-standards/modules/_type.scss

@@ -123,7 +123,7 @@ mark,
   padding: ($spacer / 2) $spacer;
   margin-bottom: $spacer;
   font-size: $blockquote-font-size;
-  border-left: .25rem solid $blockquote-border-color;
+  border-left: 4px solid $blockquote-border-color;
 }
 
 .blockquote-footer {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: on-standards-rails
 version: !ruby/object:Gem::Version
-  version: 2.0.0.pre.alpha.1
+  version: 2.0.0.pre.alpha.2
 platform: ruby
 authors:
 - Scott Hill
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-11-01 00:00:00.000000000 Z
+date: 2016-12-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -24,20 +24,34 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.4'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.4'
 - !ruby/object:Gem::Dependency
   name: sass-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 5.0.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 5.0.3
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -45,7 +59,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-  type: :runtime
+  type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
@@ -119,6 +133,7 @@ files:
 - vendor/assets/stylesheets/on-standards/mixins/_cards.scss
 - vendor/assets/stylesheets/on-standards/mixins/_center-block.scss
 - vendor/assets/stylesheets/on-standards/mixins/_clearfix.scss
+- vendor/assets/stylesheets/on-standards/mixins/_font-base.scss
 - vendor/assets/stylesheets/on-standards/mixins/_forms.scss
 - vendor/assets/stylesheets/on-standards/mixins/_gradients.scss
 - vendor/assets/stylesheets/on-standards/mixins/_grid-framework.scss