From: Rafi <rafibomb@users.noreply.github.com>
Date: Tue, 28 Oct 2014 22:34:42 +0000 (-0700)
Subject: Revert "Icon Bar microgrid cleanup"
X-Git-Tag: v5.5.0~75^2~5^2
X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=refs%2Fpull%2F5983%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Revert "Icon Bar microgrid cleanup"
---

diff --git a/doc/pages/components/icon-bar.html b/doc/pages/components/icon-bar.html
index 90e7144f0..aca908953 100644
--- a/doc/pages/components/icon-bar.html
+++ b/doc/pages/components/icon-bar.html
@@ -12,7 +12,7 @@ title: Icon Bar
 
 <h3>Basic</h3>
 
-You can create an Icon Bar using minimal markup. Specifying the number of items `one-up` through `twelve-up` will ensure the items are evenly spaced.
+You can create an Icon Bar using minimal markup. Specifying the number of items `one-up` through `six-up` will ensure the items are evenly spaced.
 
 <div class="row">
   <div class="large-6 columns">
@@ -29,7 +29,7 @@ You can create an Icon Bar using minimal markup. Specifying the number of items
 
 <h3>Vertical Icon Bar</h3>
 
-It's easy. Just add a class of `.vertical` to make the Icon Bar stack up. For an Icon bar that's horizontal on small screens but vertical on larger use '.medium-vertical' and 'large-vertical' to utilize those breakpoints.
+It's easy. Just add a class of `.vertical` to make the Icon Bar stack up. For an Icon bar that's horizontal on small screens but vertical on larger use '.medium-vertical' and 'large-vertical' to utilize those breakpoints. 
 
 <div class="row">
   <div class="large-6 columns">
@@ -88,7 +88,7 @@ For icon bars without text labels, add `aria-label` to each item, with a value r
 
 ***
 
-## Customize with Sass
+## Customize with Sass 
 
 Icon Bar can be easily customized using our provided Sass variables.
 
@@ -132,7 +132,7 @@ You can use the `icon-bar()` mixin to create your own icon-bar, like so:
 
 {{#markdown}}
 ```html
-<div class="my-custom-class"> </div>
+<div class="my-custom-class"> </div> 
 ```
 {{/markdown}}
 
@@ -143,7 +143,7 @@ You can further customize your icon bar using the provided options in the `icon
 ```scss
 .my-custom-class {
 @include icon-bar(
-
+  
   // Set the background color of the icon bar. Default: $icon-bar-bg.
   $bar-bg: $icon-bar-bg,
   //  Set the font color of the icon bar. Default: $icon-bar-font-color.
diff --git a/scss/foundation/components/_icon-bar.scss b/scss/foundation/components/_icon-bar.scss
index c35dcb2cc..bfe4dcae0 100644
--- a/scss/foundation/components/_icon-bar.scss
+++ b/scss/foundation/components/_icon-bar.scss
@@ -31,7 +31,7 @@ $icon-bar-item-padding: 1.25rem !default;
 // We use this mixin to create the base styles for our Icon bar element.
 //
 @mixin icon-bar-base() {
-
+ 
  	width: 100%;
 	font-size: 0;
 	display: inline-block;
@@ -45,9 +45,9 @@ $icon-bar-item-padding: 1.25rem !default;
 		padding: $icon-bar-item-padding;
 		float: left;
 
-		i, img {
+		i, img { 
 			display: block;
-			margin: 0 auto;
+			margin: 0 auto; 
 
 			& + label {
 				margin-top: .0625rem;
@@ -67,8 +67,8 @@ $icon-bar-item-padding: 1.25rem !default;
 
 	&.label-right > * {
 
-		i, img {
-			margin: 0 .0625rem 0 0;
+		i, img { 
+			margin: 0 .0625rem 0 0; 
 			display: inline-block;
 
 			& + label {
@@ -132,7 +132,7 @@ $icon-bar-item-padding: 1.25rem !default;
 		font-size: $font-size;
 		padding: $padding;
 
-		i, img {
+		i, img { 
 
 			& + label {
 				margin-top: .0625rem;
@@ -160,7 +160,7 @@ $icon-bar-item-padding: 1.25rem !default;
   $base-style:true) {
 
 	@if $base-style {
-
+	
 		background: $bar-bg;
 
 		& > * {
@@ -217,29 +217,77 @@ $icon-bar-item-padding: 1.25rem !default;
 
 	.icon-bar {
 
-		&.vertical .item, &.small-vertical .item { width: auto; }
-		&.medium-vertical .item {
-			@media #{$medium-up} {
-				width: auto;
+		// 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;
+				}
 			}
 		}
-		&.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;
+				}
 			}
 		}
-
-		// Counts
-		&.two-up .item 		{ width: percentage(1 / 2); }
-		&.three-up .item 	{ width: percentage(1 / 3); }
-		&.four-up .item 	{ width: percentage(1 / 4); }
-		&.five-up .item 	{ width: percentage(1 / 5); }
-		&.six-up .item 		{ width: percentage(1 / 6); }
-		&.seven-up .item 	{ width: percentage(1 / 7); }
-		&.eight-up .item 	{ width: percentage(1 / 8); }
-		&.nine-up .item 	{ width: percentage(1 / 9); }
-		&.ten-up .item 		{ width: percentage(1 / 10); }
-		&.eleven-up .item { width: percentage(1 / 11); }
-		&.twelve-up .item { width: percentage(1 / 12); }
 	}
-}
\ No newline at end of file
+}