va_common 0.1.0

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

@@ -0,0 +1,289 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-grid-classes: $include-html-classes !default;
+$include-xl-html-grid-classes: false !default;
+
+$row-width: rem-calc(1000) !default;
+$total-columns: 12 !default;
+
+$last-child-float: $opposite-direction !default;
+
+//
+// Grid Functions
+//
+
+// Deprecated: We'll drop support for this in 5.1, use grid-calc()
+@function gridCalc($colNumber, $totalColumns) {
+  @warn "gridCalc() is deprecated, use grid-calc()";
+  @return grid-calc($colNumber, $totalColumns);
+}
+
+// @FUNCTION
+// $colNumber - Found in settings file
+// $totalColumns - Found in settings file
+@function grid-calc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}
+
+//
+// @mixins
+//
+
+// For creating container, nested, and collapsed rows.
+//
+//
+// $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
+@mixin grid-row($behavior: false) {
+
+  // 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;
+    max-width: none;
+  }
+
+  // use @include grid-row(collapse); to collapsed a container row margins
+  @else if $behavior == collapse {
+    width: 100%;
+    margin: 0;
+    max-width: $row-width;
+  }
+
+  // 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;
+  }
+
+  // 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;
+    max-width: $row-width;
+  }
+
+  // Clearfix for all rows
+  @include clearfix();
+}
+
+// Creates a column, should be used inside of a media query to control layouts
+//
+// $columns - The number of columns this should be
+// $last-column - Is this the last column? Default: false.
+// $center - Center these columns? Default: false.
+// $offset - # of columns to offset. Default: false.
+// $push - # of columns to push. Default: false.
+// $pull - # of columns to pull. Default: false.
+// $collapse - Get rid of gutter padding on column? Default: false.
+// $float - Should this float? Default: true. Options: true, false, left, right.
+@mixin grid-column(
+  $columns:false,
+  $last-column:false,
+  $center:false,
+  $offset:false,
+  $push:false,
+  $pull:false,
+  $collapse:false,
+  $float:true,
+  $position:false) {
+
+  // If positioned for default .column, include relative position
+  // push and pull require position set
+  @if $position or $push or $pull {
+    position: relative;
+  }
+
+  // If collapsed, get rid of gutter padding
+  @if $collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // Gutter padding whenever a column isn't set to collapse
+  // (use $collapse:null to do nothing)
+  @else if $collapse == false {
+    padding-left: ($column-gutter / 2);
+    padding-right: ($column-gutter / 2);
+  }
+
+  // If a column number is given, calculate width
+  @if $columns {
+    width: grid-calc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column { float: $opposite-direction; }
+  }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
+  @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
+
+  @if $float {
+    @if $float == left or $float == true { float: $default-float; }
+    @else if $float == right { float: $opposite-direction; }
+    @else { float: none; }
+  }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    float: none;
+  }
+
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; }
+
+}
+
+// Create presentational classes for grid
+//
+// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
+@mixin grid-html-classes($size) {
+
+  @for $i from 0 through $total-columns - 1 {
+    .#{$size}-push-#{$i} {
+      @include grid-column($push:$i, $collapse:null, $float:false);
+    }
+    .#{$size}-pull-#{$i} {
+      @include grid-column($pull:$i, $collapse:null, $float:false);
+    }
+  }
+
+  .column,
+  .columns { @include grid-column($columns:false, $position:true); }
+
+
+  @for $i from 1 through $total-columns {
+    .#{$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}-reset-order {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    left: auto;
+    right: auto;
+    float: $default-float;
+  }
+
+  .column.#{$size}-centered,
+  .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+  .column.#{$size}-uncentered,
+  .columns.#{$size}-uncentered {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    float: $default-float;
+  }
+
+  // Fighting [class*="column"] + [class*="column"]:last-child
+  .column.#{$size}-centered:last-child,
+  .columns.#{$size}-centered:last-child{
+    float: none;
+  }
+
+  // Fighting .column.<previous-size>-centered:last-child
+  .column.#{$size}-uncentered:last-child,
+  .columns.#{$size}-uncentered:last-child {
+    float: $default-float;
+  }
+
+  .column.#{$size}-uncentered.opposite,
+  .columns.#{$size}-uncentered.opposite {
+    float: $opposite-direction;
+  }
+
+	.row {
+		&.#{$size}-collapse {
+			> .column,
+			> .columns { @include grid-column($collapse:true, $float:false); }
+
+			.row {margin-left:0; margin-right:0;}
+		}
+		&.#{$size}-uncollapse {
+			> .column,
+			> .columns {
+				@include grid-column;
+			}
+		}
+	}
+}
+
+@include exports("grid") {
+  @if $include-html-grid-classes {
+    .row {
+      @include grid-row;
+
+      &.collapse {
+         > .column,
+         > .columns { @include grid-column($collapse:true, $float:false); }
+
+        .row {margin-left:0; margin-right:0;}
+      }
+
+      .row { @include grid-row($behavior:nest);
+        &.collapse { @include grid-row($behavior:nest-collapse); }
+      }
+    }
+
+    .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; }
+
+    @media #{$small-up} {
+      @include grid-html-classes($size:small);
+    }
+
+    @media #{$medium-up} {
+      @include grid-html-classes($size:medium);
+      // Old push and pull classes
+      @for $i from 0 through $total-columns - 1 {
+        .push-#{$i} {
+          @include grid-column($push:$i, $collapse:null, $float:false);
+        }
+        .pull-#{$i} {
+          @include grid-column($pull:$i, $collapse:null, $float:false);
+        }
+      }
+    }
+    @media #{$large-up} {
+      @include grid-html-classes($size:large);
+      @for $i from 0 through $total-columns - 1 {
+        .push-#{$i} {
+          @include grid-column($push:$i, $collapse:null, $float:false);
+        }
+        .pull-#{$i} {
+          @include grid-column($pull:$i, $collapse:null, $float:false);
+        }
+      }
+    }
+  }
+  @if $include-xl-html-grid-classes {
+    @media #{$xlarge-up} {
+      @include grid-html-classes($size:xlarge);
+    }
+    @media #{$xxlarge-up} {
+      @include grid-html-classes($size:xxlarge);
+    }
+  }
+}

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

@@ -0,0 +1,358 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+
+// @name
+// @dependencies _global.scss
+
+$include-html-icon-bar-classes: $include-html-classes !default;
+
+// @variables
+
+// We use these to style the icon-bar and items
+$icon-bar-bg: $oil !default;
+$icon-bar-font-color: $white !default;
+$icon-bar-font-color-hover: $icon-bar-font-color !default;
+$icon-bar-font-size: 1rem !default;
+$icon-bar-hover-color: $primary-color !default;
+$icon-bar-icon-color: $white !default;
+$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
+$icon-bar-icon-size: 1.875rem !default;
+$icon-bar-image-width: 1.875rem !default;
+$icon-bar-image-height: 1.875rem !default;
+$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-cursor: $cursor-disabled-value !default;
+
+
+//
+// @mixins
+//
+
+// 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;
+
+	& > * {
+		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;
+			}
+		}
+	}
+}
+
+// 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) {
+
+	& > * {
+		font-size: $font-size;
+		padding: $padding;
+
+		i, img {
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-size;
+		}
+
+		img {
+			width: $image-width;
+			height: $image-height;
+		}
+	}
+
+}
+
+@mixin icon-bar-style(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
+  $bar-active-color:$icon-bar-active-color,
+  $base-style:true,
+  $disabled:false) {
+
+	@if $base-style {
+
+		background: $bar-bg;
+
+		& > * {
+			label { color: $bar-font-color; }
+
+			i { color: $bar-icon-color; }
+		}
+
+		& > a:hover {
+
+			background: $bar-hover-color;
+
+			label { color: $bar-font-color-hover; }
+
+			i { color: $bar-icon-color-hover; }
+		}
+
+        & > a.active {
+
+			background: $bar-active-color;
+
+			label { color: $bar-font-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;
+        cursor: $icon-bar-disabled-cursor;
+      }
+    }
+  }
+
+}
+
+// We use this to quickly create icon bars with a single mixin
+// $height - The overall calculated height of the icon bar (horizontal)
+// $bar-bg - the background color of the bar
+// $bar-font-color - the font color
+// $bar-hover-color - okay these are pretty obvious variables
+// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
+// $bar-active-color - the color of an active / hover state
+// $base-style - Apply base styles? Default: true.
+// $disabled - Allow disabled icons? Default: false.
+
+@mixin icon-bar(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $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,
+  $base-style:true,
+  $disabled:false) {
+    @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);
+}
+
+@include exports("icon-bar") {
+  @if $include-html-icon-bar-classes {
+    .icon-bar {
+      @include icon-bar;
+    }
+  }
+}
+
+@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;
+      	}
+  		}
+    }
+    &.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;
+      	}
+  		}
+    }
+	}
+}

data/app/assets/stylesheets/foundation/components/_inline-lists.scss

@@ -0,0 +1,57 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @variables
+//
+$include-html-inline-list-classes: $include-html-classes !default;
+
+// We use this to control the margins and padding of the inline list.
+$inline-list-top-margin: 0 !default;
+$inline-list-opposite-margin: 0 !default;
+$inline-list-bottom-margin: rem-calc(17) !default;
+$inline-list-default-float-margin: rem-calc(-22) !default;
+$inline-list-default-float-list-margin: rem-calc(22) !default;
+
+$inline-list-padding: 0 !default;
+
+// We use this to control the overflow of the inline list.
+$inline-list-overflow: hidden !default;
+
+// We use this to control the list items
+$inline-list-display: block !default;
+
+// We use this to control any elements within list items
+$inline-list-children-display: block !default;
+
+//
+// @mixins
+//
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: $inline-list-default-float-list-margin;
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+@include exports("inline-list") {
+  @if $include-html-inline-list-classes {
+    .inline-list {
+      @include inline-list();
+    }
+  }
+}