va_common 0.1.0

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

@@ -0,0 +1,135 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name _tables.scss
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-table-classes: $include-html-classes !default;
+
+// These control the background color for the table and even rows
+$table-bg: $white !default;
+$table-even-row-bg: $snow !default;
+
+// These control the table cell border style
+$table-border-style: solid !default;
+$table-border-size: 1px !default;
+$table-border-color: $gainsboro !default;
+
+// These control the table head styles
+$table-head-bg: $white-smoke !default;
+$table-head-font-size: rem-calc(14) !default;
+$table-head-font-color: $jet !default;
+$table-head-font-weight: $font-weight-bold !default;
+$table-head-padding: rem-calc(8 10 10) !default;
+
+// These control the table foot styles
+$table-foot-bg: $table-head-bg !default;
+$table-foot-font-size: $table-head-font-size !default;
+$table-foot-font-color: $table-head-font-color !default;
+$table-foot-font-weight: $table-head-font-weight !default;
+$table-foot-padding: $table-head-padding !default;
+
+// These control the caption
+$table-caption-bg: transparent !default;
+$table-caption-font-color: $table-head-font-color !default;
+$table-caption-font-size: rem-calc(16) !default;
+$table-caption-font-weight: bold !default;
+
+// These control the row padding and font styles
+$table-row-padding: rem-calc(9 10) !default;
+$table-row-font-size: rem-calc(14) !default;
+$table-row-font-color: $jet !default;
+$table-line-height: rem-calc(18) !default;
+
+// These are for controlling the layout, display and margin of tables
+$table-layout: auto !default;
+$table-display: table-cell !default;
+$table-margin-bottom: rem-calc(20) !default;
+
+
+//
+// @mixins
+//
+
+@mixin table {
+  background: $table-bg;
+  margin-bottom: $table-margin-bottom;
+  border: $table-border-style $table-border-size $table-border-color;
+  table-layout: $table-layout;
+
+  caption {
+    background: $table-caption-bg;
+    color: $table-caption-font-color;
+    font: {
+      size: $table-caption-font-size;
+      weight: $table-caption-font-weight;
+    }
+  }
+
+  thead {
+    background: $table-head-bg;
+
+    tr {
+      th,
+      td {
+        padding: $table-head-padding;
+        font-size: $table-head-font-size;
+        font-weight: $table-head-font-weight;
+        color: $table-head-font-color;
+      }
+    }
+  }
+
+  tfoot {
+    background: $table-foot-bg;
+
+    tr {
+      th,
+      td {
+        padding: $table-foot-padding;
+        font-size: $table-foot-font-size;
+        font-weight: $table-foot-font-weight;
+        color: $table-foot-font-color;
+      }
+    }
+  }
+
+  tr {
+    th,
+    td {
+      padding: $table-row-padding;
+      font-size: $table-row-font-size;
+      color: $table-row-font-color;
+      text-align: $default-float;
+    }
+
+    &.even,
+    &.alt,
+    &:nth-of-type(even) { background: $table-even-row-bg; }
+  }
+
+  thead tr th,
+  tfoot tr th,
+  tfoot tr td,
+  tbody tr th,
+  tbody tr td,
+  tr td { display: $table-display; line-height: $table-line-height; }
+}
+
+
+@include exports("table") {
+  @if $include-html-table-classes {
+    table {
+      @include table;
+    }
+  }
+}

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

@@ -0,0 +1,123 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+@import "grid";
+
+//
+// @variables
+//
+
+$include-html-tabs-classes: $include-html-classes !default;
+
+$tabs-navigation-padding: rem-calc(16) !default;
+$tabs-navigation-bg-color: $silver !default;
+$tabs-navigation-active-bg-color: $white !default;
+$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
+$tabs-navigation-font-color: $jet !default;
+$tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
+$tabs-navigation-font-size: rem-calc(16) !default;
+$tabs-navigation-font-family: $body-font-family !default;
+
+$tabs-content-margin-bottom: rem-calc(24) !default;
+$tabs-content-padding: ($column-gutter/2) !default;
+
+$tabs-vertical-navigation-margin-bottom: 1.25rem !default;
+
+@include exports("tab") {
+  @if $include-html-tabs-classes {
+    .tabs {
+      @include clearfix;
+      margin-bottom: 0 !important;
+      margin-left: 0;
+      dd, .tab-title {
+        position: relative;
+        margin-bottom: 0 !important;
+        list-style: none;
+        float: $default-float;
+        > a {
+          outline: none;
+          display: block;
+          background: {
+            color: $tabs-navigation-bg-color;
+          }
+          color: $tabs-navigation-font-color;
+          padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
+          font-family: $tabs-navigation-font-family;
+          font-size: $tabs-navigation-font-size;
+          &:hover {
+            background: {
+              color: $tabs-navigation-hover-bg-color;
+            }
+          }
+        }
+        &.active a {
+          background: {
+            color: $tabs-navigation-active-bg-color;
+          }
+          color:$tabs-navigation-active-font-color;
+          }
+      }
+      &.radius {
+        dd:first-child, .tab:first-child {
+          a { @include side-radius($default-float, $global-radius); }
+        }
+        dd:last-child, .tab:last-child {
+          a { @include side-radius($opposite-direction, $global-radius); }
+        }
+      }
+      &.vertical {
+        dd, .tab-title {
+          position: inherit;
+          float: none;
+          display: block;
+          top: auto;
+        }
+      }
+    }
+
+    .tabs-content {
+      @include clearfix;
+      margin-bottom: $tabs-content-margin-bottom;
+      width: 100%;
+      > .content {
+        display: none;
+        float: $default-float;
+        padding: $tabs-content-padding 0;
+        width: 100%;
+        &.active { display: block; float: none; }
+        &.contained { padding: $tabs-content-padding; }
+      }
+      &.vertical {
+        display: block;
+        > .content { padding: 0 $tabs-content-padding; }
+      }
+    }
+    @media #{$medium-up} {
+      .tabs {
+        &.vertical {
+          width: 20%;
+          max-width: 20%;
+          float: $default-float;
+          margin: 0 0 $tabs-vertical-navigation-margin-bottom;
+        }
+      }
+      .tabs-content {
+        &.vertical {
+          width: 80%;
+          max-width: 80%;
+          float: $default-float;
+          margin-#{$default-float}: -1px;
+          padding-#{$default-float}: 1rem;
+        }
+      }
+    }
+    .no-js {
+      .tabs-content > .content {
+        display: block;
+        float: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name _thumbs.scss
+// @dependencies _globals.scss
+//
+
+//
+// @variables
+//
+
+$include-html-media-classes: $include-html-classes !default;
+
+// We use these to control border styles
+$thumb-border-style: solid !default;
+$thumb-border-width: 4px !default;
+$thumb-border-color: $white !default;
+$thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default;
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
+
+// Radius and transition speed for thumbs
+$thumb-radius: $global-radius !default;
+$thumb-transition-speed: 200ms !default;
+
+//
+// @mixins
+//
+
+// We use this to create image thumbnail styles.
+//
+// $border-width - Width of border around thumbnail. Default: $thumb-border-width.
+// $box-shadow - Box shadow to apply to thumbnail. Default: $thumb-box-shadow.
+// $box-shadow-hover - Box shadow to apply on hover. Default: $thumb-box-shadow-hover.
+@mixin thumb(
+  $border-width:$thumb-border-width, 
+  $box-shadow:$thumb-box-shadow, 
+  $box-shadow-hover:$thumb-box-shadow-hover) {
+  line-height: 0;
+  display: inline-block;
+  border: $thumb-border-style $border-width $thumb-border-color;
+  max-width: 100%;
+  box-shadow: $box-shadow;
+
+  &:hover,
+  &:focus {
+    box-shadow: $box-shadow-hover;
+  }
+}
+
+
+@include exports("thumb") {
+  @if $include-html-media-classes {
+
+    /* Image Thumbnails */
+    .th {
+      @include thumb;
+      @include single-transition(all,$thumb-transition-speed,ease-out);
+
+      &.radius { @include radius($thumb-radius); }
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+// toolbar styles
+
+.toolbar {
+	background: $oil;
+	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	&.label-bottom .tab .tab-content {
+		i, img { margin-bottom: 10px; }
+	}
+
+	&.label-right .tab .tab-content {
+		i, img { margin-right: 10px; display: inline-block;}
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right .tab .tab-content {
+		text-align: left;
+	}
+
+	&.vertical {
+		height: 100%;
+		width: auto;
+
+		.tab {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+
+	.tab {
+		text-align: center;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: 20px;
+		float: left;
+
+		&:hover {
+			background: rgba($white, 0.1);
+		}
+	}
+}
+
+.toolbar .tab-content {
+	font-size: 16px;
+	text-align: center;
+
+	label { color: $iron; }
+
+	i {
+		font-size: 30px;
+		display: block;
+		margin: 0 auto;
+		color: $iron;
+		vertical-align: middle;
+	}
+
+	img {
+		width: 30px;
+		height: 30px;
+		display: block;
+		margin: 0 auto;
+	}
+}

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

@@ -0,0 +1,142 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// Tooltip Variables
+//
+$include-html-tooltip-classes: $include-html-classes !default;
+
+$has-tip-border-bottom: dotted 1px $iron !default;
+$has-tip-font-weight: $font-weight-bold !default;
+$has-tip-font-color: $oil !default;
+$has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
+$has-tip-font-color-hover: $primary-color !default;
+$has-tip-cursor-type: help !default;
+
+$tooltip-padding: rem-calc(12) !default;
+$tooltip-bg: $oil !default;
+$tooltip-font-size: rem-calc(14) !default;
+$tooltip-font-weight: $font-weight-normal !default;
+$tooltip-font-color: $white !default;
+$tooltip-line-height: 1.3 !default;
+$tooltip-close-font-size: rem-calc(10) !default;
+$tooltip-close-font-weight: $font-weight-normal !default;
+$tooltip-close-font-color: $monsoon !default;
+$tooltip-font-size-sml: rem-calc(14) !default;
+$tooltip-radius: $global-radius !default;
+$tooltip-rounded: $global-rounded !default;
+$tooltip-pip-size: 5px !default;
+$tooltip-max-width: 300px !default;
+
+@include exports("tooltip") {
+  @if $include-html-tooltip-classes {
+
+    /* Tooltips */
+    .has-tip {
+      border-bottom: $has-tip-border-bottom;
+      cursor: $has-tip-cursor-type;
+      font-weight: $has-tip-font-weight;
+      color: $has-tip-font-color;
+
+      &:hover,
+      &:focus {
+        border-bottom: $has-tip-border-bottom-hover;
+        color: $has-tip-font-color-hover;
+      }
+
+      &.tip-left,
+      &.tip-right { float: none !important; }
+    }
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      z-index: 1006;
+      font-weight: $tooltip-font-weight;
+      font-size: $tooltip-font-size;
+      line-height: $tooltip-line-height;
+      padding: $tooltip-padding;
+      max-width: $tooltip-max-width;
+      #{$default-float}: 50%;
+      width: 100%;
+      color: $tooltip-font-color;
+      background: $tooltip-bg;
+
+      &>.nub {
+        display: block;
+        #{$default-float}: $tooltip-pip-size;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: solid $tooltip-pip-size;
+        border-color: transparent transparent $tooltip-bg transparent;
+        top: -($tooltip-pip-size * 2);
+        pointer-events: none;
+
+        &.rtl {
+          left: auto;
+          #{$opposite-direction}: $tooltip-pip-size;
+        }
+      }
+
+      &.radius {
+        @include radius($tooltip-radius);
+      }
+      &.round {
+        @include radius($tooltip-rounded);
+        &>.nub {
+          left: 2rem;
+        }
+      }
+
+      &.opened {
+        color: $has-tip-font-color-hover !important;
+        border-bottom: $has-tip-border-bottom-hover !important;
+      }
+    }
+
+    .tap-to-close {
+      display: block;
+      font-size: $tooltip-close-font-size;
+      color: $tooltip-close-font-color;
+      font-weight: $tooltip-close-font-weight;
+    }
+
+    @media #{$small} {
+      .tooltip {
+        &>.nub {
+          border-color: transparent transparent $tooltip-bg transparent;
+          top: -($tooltip-pip-size * 2);
+        }
+        &.tip-top>.nub {
+          border-color: $tooltip-bg transparent transparent transparent;
+          top: auto;
+          bottom: -($tooltip-pip-size * 2);
+        }
+
+        &.tip-left,
+        &.tip-right { float: none !important; }
+
+        &.tip-left>.nub {
+          border-color: transparent transparent transparent $tooltip-bg;
+          right: -($tooltip-pip-size * 2);
+          left: auto;
+          top: 50%;
+          margin-top: -$tooltip-pip-size;
+        }
+        &.tip-right>.nub {
+          border-color: transparent $tooltip-bg transparent transparent;
+          right: auto;
+          left: -($tooltip-pip-size * 2);
+          top: 50%;
+          margin-top: -$tooltip-pip-size;
+        }
+
+      }
+    }
+
+  }
+}