foundation-rails 5.5.1.2 → 5.5.2.0

data/vendor/assets/stylesheets/foundation/components/_global.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "../functions";
+@import '../functions';
 //
 // Foundation Variables
 //
@@ -80,7 +80,7 @@ $base-line-height: 1.5 !default;
 // We use this to add box-sizing across browser prefixes
 @mixin box-sizing($type:border-box) {
   -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
-     -moz-box-sizing: $type; // Firefox < 29
+     -moz-box-sizing: $type;
           box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
 }
 
@@ -91,11 +91,11 @@ $base-line-height: 1.5 !default;
 // $triangle-color - Used to set border-color which makes up triangle. No default
 // $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
 @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+  border: inset $triangle-size;
   content: "";
   display: block;
-  width: 0;
   height: 0;
-  border: inset $triangle-size;
+  width: 0;
   @if ($triangle-direction == top) {
     border-color: $triangle-color transparent transparent transparent;
     border-top-style: solid;
@@ -128,9 +128,9 @@ $base-line-height: 1.5 !default;
 @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
   span::after {
     content: "";
-    position: absolute;
     display: block;
     height: 0;
+    position: absolute;
 
     @if $offcanvas {
       @if $top {
@@ -148,8 +148,8 @@ $base-line-height: 1.5 !default;
       }
     }
     @else {
-      top: 50%;
       margin-top: -($width/2);
+      top: 50%;
       #{$opposite-direction}: $topbar-link-padding;
     }
 
@@ -183,8 +183,8 @@ $base-line-height: 1.5 !default;
   transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
 
   &:#{$selector} {
-    box-shadow: 0 0 5px $glowing-effect-color;
     border-color: $glowing-effect-color;
+    box-shadow: 0 0 5px $glowing-effect-color;
   }
 }
 
@@ -194,7 +194,7 @@ $base-line-height: 1.5 !default;
 // $horizontal: Default: 0
 // $vertical: Default: 0
 @mixin translate2d($horizontal:0, $vertical:0) {
-  transform: translate($horizontal,$vertical)
+  transform: translate($horizontal, $vertical)
 }
 
 // @mixins
@@ -202,11 +202,11 @@ $base-line-height: 1.5 !default;
 // Makes an element visually hidden, but accessible.
 // @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 @mixin element-invisible {
-  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
-  width: 1px;
   overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  width: 1px;
 }
 
 // @mixins
@@ -291,17 +291,22 @@ $shiny-edge-active-color: rgba(#000, .2) !default;
 // We use this to control whether or not CSS classes come through in the gem files.
 $include-html-classes: true !default;
 $include-print-styles: true !default;
+$include-js-meta-styles: true !default; // Warning! Meta styles are a dependancy of the Javascript.
 $include-html-global-classes: $include-html-classes !default;
 
 $column-gutter: rem-calc(30) !default;
 
 // Media Query Ranges
-$small-range: (0, 40em) !default;
-$medium-range: (40.063em, 64em) !default;
-$large-range: (64.063em, 90em) !default;
-$xlarge-range: (90.063em, 120em) !default;
-$xxlarge-range: (120.063em, 99999999em) !default;
+$small-breakpoint:  em-calc(640)  !default;
+$medium-breakpoint: em-calc(1024) !default;
+$large-breakpoint:  em-calc(1440) !default;
+$xlarge-breakpoint: em-calc(1920) !default;
 
+$small-range:   (0, $small-breakpoint) !default;
+$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default;
+$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default;
+$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default;
+$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default;
 
 $screen: "only screen" !default;
 
@@ -323,6 +328,15 @@ $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
 
+$retina: (
+  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+  "#{$screen} and (min-device-pixel-ratio: 2)",
+  "#{$screen} and (min-resolution: 192dpi)",
+  "#{$screen} and (min-resolution: 2dppx)"
+);
+
 // Legacy
 $small: $medium-up;
 $medium: $medium-up;
@@ -341,61 +355,65 @@ $cursor-text-value: text !default;
 
 @include exports("global") {
 
-  // Meta styles are included in all builds, as they are a dependancy of the Javascript.
+  // Meta styles are a dependancy of the Javascript.
   // Used to provide media query values for javascript components.
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
-  meta.foundation-version {
-    font-family: "/5.5.1/";
-  }
+  @if $include-js-meta-styles {
 
-  meta.foundation-mq-small {
-    font-family: "/" + unquote($small-up) + "/";
-    width: lower-bound($small-range);
-  }
+    meta.foundation-version {
+      font-family: "/5.5.2/";
+    }
 
-  meta.foundation-mq-small-only {
-    font-family: "/" + unquote($small-only) + "/";
-    width: lower-bound($small-range);
-  }
+    meta.foundation-mq-small {
+      font-family: "/" + unquote($small-up) + "/";
+      width: lower-bound($small-range);
+    }
 
-  meta.foundation-mq-medium {
-    font-family: "/" + unquote($medium-up) + "/";
-    width: lower-bound($medium-range);
-  }
+    meta.foundation-mq-small-only {
+      font-family: "/" + unquote($small-only) + "/";
+      width: lower-bound($small-range);
+    }
 
-  meta.foundation-mq-medium-only {
-    font-family: "/" + unquote($medium-only) + "/";
-    width: lower-bound($medium-range);
-  }
+    meta.foundation-mq-medium {
+      font-family: "/" + unquote($medium-up) + "/";
+      width: lower-bound($medium-range);
+    }
 
-  meta.foundation-mq-large {
-    font-family: "/" + unquote($large-up) + "/";
-    width: lower-bound($large-range);
-  }
+    meta.foundation-mq-medium-only {
+      font-family: "/" + unquote($medium-only) + "/";
+      width: lower-bound($medium-range);
+    }
 
-  meta.foundation-mq-large-only {
-    font-family: "/" + unquote($large-only) + "/";
-    width: lower-bound($large-range);
-  }
+    meta.foundation-mq-large {
+      font-family: "/" + unquote($large-up) + "/";
+      width: lower-bound($large-range);
+    }
 
-  meta.foundation-mq-xlarge {
-    font-family: "/" + unquote($xlarge-up) + "/";
-    width: lower-bound($xlarge-range);
-  }
+    meta.foundation-mq-large-only {
+      font-family: "/" + unquote($large-only) + "/";
+      width: lower-bound($large-range);
+    }
 
-  meta.foundation-mq-xlarge-only {
-    font-family: "/" + unquote($xlarge-only) + "/";
-    width: lower-bound($xlarge-range);
-  }
+    meta.foundation-mq-xlarge {
+      font-family: "/" + unquote($xlarge-up) + "/";
+      width: lower-bound($xlarge-range);
+    }
 
-  meta.foundation-mq-xxlarge {
-    font-family: "/" + unquote($xxlarge-up) + "/";
-    width: lower-bound($xxlarge-range);
-  }
+    meta.foundation-mq-xlarge-only {
+      font-family: "/" + unquote($xlarge-only) + "/";
+      width: lower-bound($xlarge-range);
+    }
+
+    meta.foundation-mq-xxlarge {
+      font-family: "/" + unquote($xxlarge-up) + "/";
+      width: lower-bound($xxlarge-range);
+    }
+
+    meta.foundation-data-attribute-namespace {
+      font-family: #{$namespace};
+    }
 
-  meta.foundation-data-attribute-namespace {
-    font-family: #{$namespace};
   }
 
   @if $include-html-global-classes {
@@ -404,10 +422,13 @@ $cursor-text-value: text !default;
     html, body { height: 100%; }
 
     // Set box-sizing globally to handle padding and border widths
+    html {
+      box-sizing: border-box;
+    }
     *,
     *:before,
     *:after {
-      @include box-sizing(border-box);
+      @include box-sizing(inherit);
     }
 
     html,
@@ -417,14 +438,14 @@ $cursor-text-value: text !default;
     body {
       background: $body-bg;
       color: $body-font-color;
-      padding: 0;
-      margin: 0;
+      cursor: $cursor-auto-value;
       font-family: $body-font-family;
-      font-weight: $body-font-weight;
       font-style: $body-font-style;
+      font-weight: $body-font-weight;
       line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
+      margin: 0;
+      padding: 0;
       position: relative;
-      cursor: $cursor-auto-value;
     }
 
   a:hover { cursor: $cursor-pointer-value; }
@@ -435,7 +456,8 @@ $cursor-text-value: text !default;
     img { -ms-interpolation-mode: bicubic; }
 
     #map_canvas,
-    .map_canvas {
+    .map_canvas,
+    .mqa-display {
       img,
       embed,
       object { max-width: none !important;

data/vendor/assets/stylesheets/foundation/components/_grid.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -29,7 +29,9 @@ $last-child-float: $opposite-direction !default;
 // $colNumber - Found in settings file
 // $totalColumns - Found in settings file
 @function grid-calc($colNumber, $totalColumns) {
-  @return percentage(($colNumber / $totalColumns));
+  $result: percentage(($colNumber / $totalColumns));
+  @if $result == 0% { $result: 0; }
+  @return $result;
 }
 
 //
@@ -44,36 +46,30 @@ $last-child-float: $opposite-direction !default;
 
   // use @include grid-row(nest); to include a nested row
   @if $behavior == nest {
-    width: auto;
-    margin-#{$default-float}: -($column-gutter/2);
-    margin-#{$opposite-direction}: -($column-gutter/2);
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0 (-($column-gutter/2));
     max-width: none;
+    width: auto;
   }
 
   // use @include grid-row(collapse); to collapsed a container row margins
   @else if $behavior == collapse {
-    width: 100%;
     margin: 0;
     max-width: $row-width;
+    width: 100%;
   }
 
   // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
   @else if $behavior == nest-collapse {
-    width: auto;
     margin: 0;
     max-width: none;
+    width: auto;
   }
 
   // use @include grid-row; to use a container row
   @else {
-    width: 100%;
-    margin-#{$default-float}: auto;
-    margin-#{$opposite-direction}: auto;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin: 0 auto;
     max-width: $row-width;
+    width: 100%;
   }
 
   // Clearfix for all rows
@@ -169,19 +165,19 @@ $last-child-float: $opposite-direction !default;
 
 
   @for $i from 1 through $total-columns {
-    .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    .#{$size}-#{$i} { @include grid-column($columns:$i, $collapse:null, $float:false); }
   }
 
   @for $i from 0 through $total-columns - 1 {
-    .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null, $float:false); }
   }
 
   .#{$size}-reset-order {
+    float: $default-float;
+    left: auto;
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
-    left: auto;
     right: auto;
-    float: $default-float;
   }
 
   .column.#{$size}-centered,
@@ -189,9 +185,9 @@ $last-child-float: $opposite-direction !default;
 
   .column.#{$size}-uncentered,
   .columns.#{$size}-uncentered {
+    float: $default-float;
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
-    float: $default-float;
   }
 
   // Fighting [class*="column"] + [class*="column"]:last-child
@@ -247,8 +243,15 @@ $last-child-float: $opposite-direction !default;
     .column,
     .columns { @include grid-column($columns:$total-columns); }
 
-    [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
-    [class*="column"] + [class*="column"].end { float: $default-float; }
+    .column,
+    .columns {
+      & + &:last-child {
+        float: $last-child-float;
+      }
+      & + &.end {
+        float: $default-float;
+      }
+    }
 
     @media #{$small-up} {
       @include grid-html-classes($size:small);

data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 
 // @name
@@ -27,7 +27,7 @@ $icon-bar-active-color: $primary-color !default;
 $icon-bar-item-padding: 1.25rem !default;
 
 // We use this to set default opacity and cursor for disabled icons.
-$icon-bar-disabled-opacity: 0.7 !default;
+$icon-bar-disabled-opacity: .7 !default;
 $icon-bar-disabled-cursor: $cursor-disabled-value !default;
 
 
@@ -38,123 +38,123 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
 // We use this mixin to create the base styles for our Icon bar element.
 //
 @mixin icon-bar-base() {
+  display: inline-block;
+  font-size: 0;
+  width: 100%;
+
+  > * {
+    display: block;
+    float: left;
+    font-size: $icon-bar-font-size;
+    margin: 0 auto;
+    padding: $icon-bar-item-padding;
+    text-align: center;
+    width: 25%;
+
+    i, img {
+      display: block;
+      margin: 0 auto;
+
+      & + label {
+        margin-top: .0625rem;
+      }
+    }
+
+    i {
+      font-size: $icon-bar-icon-size;
+      vertical-align: middle;
+    }
+
+    img {
+      height: $icon-bar-image-height;
+      width: $icon-bar-image-width;
+    }
+  }
 
- 	width: 100%;
-	font-size: 0;
-	display: inline-block;
-
-	& > * {
-		text-align: center;
-		font-size: $icon-bar-font-size;
-		width: 25%;
-		margin: 0 auto;
-		display: block;
-		padding: $icon-bar-item-padding;
-		float: left;
-
-		i, img {
-			display: block;
-			margin: 0 auto;
-
-			& + label {
-				margin-top: .0625rem;
-			}
-		}
-
-		i {
-			font-size: $icon-bar-icon-size;
-			vertical-align: middle;
-		}
-
-		img {
-			width: $icon-bar-image-width;
-			height: $icon-bar-image-height;
-		}
-	}
-
-	&.label-right > * {
-
-		i, img {
-			margin: 0 .0625rem 0 0;
-			display: inline-block;
-
-			& + label {
-				margin-top: 0;
-			}
-		}
-
-		label { display: inline-block; }
-	}
-
-	&.vertical.label-right > * {
-		text-align: left;
-	}
-
-	&.vertical, &.small-vertical{
-		height: 100%;
-		width: auto;
-
-		.item {
-			width: auto;
-			margin: auto;
-			float: none;
-		}
-	}
-
-	&.medium-vertical {
-		@media #{$medium-up} {
-			height: 100%;
-			width: auto;
-
-			.item {
-				width: auto;
-				margin: auto;
-				float: none;
-			}
-		}
-	}
-	&.large-vertical {
-		@media #{$large-up} {
-			height: 100%;
-			width: auto;
-
-			.item {
-				width: auto;
-				margin: auto;
-				float: none;
-			}
-		}
-	}
+  &.label-right > * {
+
+    i, img {
+      display: inline-block;
+      margin: 0 .0625rem 0 0;
+
+      & + label {
+        margin-top: 0;
+      }
+    }
+
+    label { display: inline-block; }
+  }
+
+  &.vertical.label-right > * {
+    text-align: left;
+  }
+
+  &.vertical, &.small-vertical{
+    height: 100%;
+    width: auto;
+
+    .item {
+      float: none;
+      margin: auto;
+      width: auto;
+    }
+  }
+
+  &.medium-vertical {
+    @media #{$medium-up} {
+      height: 100%;
+      width: auto;
+
+      .item {
+        float: none;
+        margin: auto;
+        width: auto;
+      }
+    }
+  }
+  &.large-vertical {
+    @media #{$large-up} {
+      height: 100%;
+      width: auto;
+
+      .item {
+        float: none;
+        margin: auto;
+        width: auto;
+      }
+    }
+  }
 }
 
 // We use this mixin to create the size styles for icon bars.
 @mixin icon-bar-size(
-	$padding: $icon-bar-item-padding,
-	$font-size: $icon-bar-font-size,
-	$icon-size: $icon-bar-icon-size,
-	$image-width: $icon-bar-image-width,
-	$image-height: $icon-bar-image-height) {
+  $padding: $icon-bar-item-padding,
+  $font-size: $icon-bar-font-size,
+  $icon-size: $icon-bar-icon-size,
+  $image-width: $icon-bar-image-width,
+  $image-height: $icon-bar-image-height) {
 
-	& > * {
-		font-size: $font-size;
-		padding: $padding;
+  > * {
+    font-size: $font-size;
+    padding: $padding;
 
-		i, img {
+    i, img {
 
-			& + label {
-				margin-top: .0625rem;
-			}
-		}
+      & + label {
+        margin-top: .0625rem;
+        font-size: $font-size;
+      }
+    }
 
-		i {
-			font-size: $icon-size;
-		}
+    i {
+      font-size: $icon-size;
+    }
 
-		img {
-			width: $image-width;
-			height: $image-height;
-		}
-	}
+    img {
+      height: $image-height;
+      width: $image-width;
+    }
+  }
 
 }
 
@@ -169,38 +169,38 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
   $base-style:true,
   $disabled:false) {
 
-	@if $base-style {
+  @if $base-style {
 
-		background: $bar-bg;
+    background: $bar-bg;
 
-		& > * {
-			label { color: $bar-font-color; }
+    > * {
+      label { color: $bar-font-color; }
 
-			i { color: $bar-icon-color; }
-		}
+      i { color: $bar-icon-color; }
+    }
 
-		& > a:hover {
+    > a:hover {
 
-			background: $bar-hover-color;
+      background: $bar-hover-color;
 
-			label { color: $bar-font-color-hover; }
+      label { color: $bar-font-color-hover; }
 
-			i { color: $bar-icon-color-hover; }
-		}
+      i { color: $bar-icon-color-hover; }
+    }
 
-        & > a.active {
+        > a.active {
 
-			background: $bar-active-color;
+      background: $bar-active-color;
 
-			label { color: $bar-font-color-hover; }
+      label { color: $bar-font-color-hover; }
 
-			i { color: $bar-icon-color-hover; }
-		}
-	}
+      i { color: $bar-icon-color-hover; }
+    }
+  }
   @if $disabled {
     .item.disabled {
-      opacity: $icon-bar-disabled-opacity;
       cursor: $icon-bar-disabled-cursor;
+      opacity: $icon-bar-disabled-opacity;
       pointer-events: none;
       >* {
         opacity: $icon-bar-disabled-opacity;
@@ -230,15 +230,116 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
   $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
   $padding: $icon-bar-item-padding,
-	$font-size: $icon-bar-font-size,
-	$icon-size: $icon-bar-icon-size,
-	$image-width: $icon-bar-image-width,
-	$image-height: $icon-bar-image-height,
+  $font-size: $icon-bar-font-size,
+  $icon-size: $icon-bar-icon-size,
+  $image-width: $icon-bar-image-width,
+  $image-height: $icon-bar-image-height,
   $base-style:true,
   $disabled:true) {
     @include icon-bar-base();
     @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
     @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
+
+  // Counts
+
+  &.two-up {
+    .item { width: 50%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.three-up {
+    .item { width: 33.3333%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.four-up {
+    .item { width: 25%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.five-up {
+    .item { width: 20%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.six-up {
+    .item { width: 16.66667%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.seven-up {
+    .item { width: 14.28571%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+            width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+         width: auto;
+      }
+    }
+  }
+  &.eight-up {
+    .item { width: 12.5%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+            width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+         width: auto;
+      }
+    }
+  }
 }
 
 @include exports("icon-bar") {
@@ -251,109 +352,109 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
 
 @if $include-html-icon-bar-classes {
 
-	// toolbar styles
-
-	.icon-bar {
-
-		// Counts
-
-		&.two-up {
-			.item { width: 50%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.three-up {
-			.item { width: 33.3333%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.four-up {
-			.item { width: 25%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.five-up {
-			.item { width: 20%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.six-up {
-			.item { width: 16.66667%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.seven-up {
-  		.item { width: 14.28571%; }
-  		&.vertical .item, &.small-vertical .item { width: auto; }
-  		&.medium-vertical .item {
-    		@media #{$medium-up} {
-        			width: auto;
-    		}
-  		}
-  		&.large-vertical .item {
-      	@media #{$large-up} {
-       		width: auto;
-      	}
-  		}
+  // toolbar styles
+
+  .icon-bar {
+
+    // Counts
+
+    &.two-up {
+      .item { width: 50%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.three-up {
+      .item { width: 33.3333%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.four-up {
+      .item { width: 25%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.five-up {
+      .item { width: 20%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.six-up {
+      .item { width: 16.66667%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.seven-up {
+      .item { width: 14.28571%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+              width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+           width: auto;
+        }
+      }
     }
     &.eight-up {
-  		.item { width: 12.5%; }
-  		&.vertical .item, &.small-vertical .item { width: auto; }
-  		&.medium-vertical .item {
-    		@media #{$medium-up} {
-        			width: auto;
-    		}
-  		}
-  		&.large-vertical .item {
-      	@media #{$large-up} {
-       		width: auto;
-      	}
-  		}
-    }
-	}
+      .item { width: 12.5%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+              width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+           width: auto;
+        }
+      }
+    }
+  }
 }