Foundation build to bower-foundation

foundation · Aug 21, 2014 · ea87852 · ea87852
1 parent 29843af
commit ea87852
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 27 deletions.
diff --git a/css/foundation.css b/css/foundation.css
diff --git a/css/foundation.css.map b/css/foundation.css.map
diff --git a/scss/foundation/components/_icon-bar.scss b/scss/foundation/components/_icon-bar.scss
@@ -28,10 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
 // @mixins
 //
 
-// We use this mixin to create the base styles for our switch element.
+// We use this mixin to create the base styles for our Icon bar element.
 //
-// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
-// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
 @mixin icon-bar-base() {
 
  	width: 100%;
@@ -85,7 +83,7 @@ $icon-bar-item-padding: 1.25rem !default;
 		text-align: left;
 	}
 
-	&.vertical {
+	&.vertical, &.small-vertical{
 		height: 100%;
 		width: auto;
 
@@ -95,12 +93,34 @@ $icon-bar-item-padding: 1.25rem !default;
 			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;
+			}
+		}
+	}
 }
 
 // We use this mixin to create the size styles for icon bars.
-//
-// $height - Height (in px) of the switch. Default: $switch-height-med.
-// $font-size - Font size of text in switch. Default: $switch-font-size-med.
 @mixin icon-bar-size(
 	$padding: $icon-bar-item-padding,
 	$font-size: $icon-bar-font-size,
@@ -131,13 +151,6 @@ $icon-bar-item-padding: 1.25rem !default;
 
 }
 
-// We use this mixin to add color and other fanciness to the switches.
-//
-// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
-// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
-// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
-// $radius - Radius to apply to switch. Default: false.
-// $base-style - Apply base styles? Default: true.
 @mixin icon-bar-style(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
@@ -208,23 +221,73 @@ $icon-bar-item-padding: 1.25rem !default;
 
 		&.two-up {
 			.item { width: 50%; }
-			&.vertical .item { width: auto; }
+			&.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 { width: auto; }
+			&.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 { width: auto; }
+			&.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 { width: auto; }
+			&.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 { width: auto; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
 		}
 	}
 }