va_common 0.1.0 → 0.2.0

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

@@ -1,157 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// @variables
-//
-
-$include-html-accordion-classes: $include-html-classes !default;
-
-$accordion-navigation-padding: rem-calc(16) !default;
-$accordion-navigation-bg-color: $silver !default;
-$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
-$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
-$accordion-navigation-font-color: $jet !default;
-$accordion-navigation-font-size: rem-calc(16) !default;
-$accordion-navigation-font-family: $body-font-family !default;
-
-$accordion-content-padding: ($column-gutter/2) !default;
-$accordion-content-active-bg-color: $white !default;
-
-
-//  Mixin: accordion-container()
-//  Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
-//  Explicit Dependencies: a clearfix mixin *is* defined.
-//  Implicit Dependencies: None
-
-@mixin accordion-container() {
-  @include clearfix;
-  margin-bottom: 0;
-}
-
-//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family){
-//    @params $bg-color: [ color or string ]: Specify the background color for the navigation element
-//    @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
-//    @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
-//    @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
-//    @params $font-color [ color or string ]: Color of the font for accordion
-//    @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
-//    @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
-
-@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
-  display: block;
-  margin-bottom: 0 !important;
-  @if type-of($active_class) != "string" {
-    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
-  }
-  @else {
-    &.#{ $active_class } > a {
-      background: $active-bg;
-    }
-  }
-  > a {
-    background: $bg;
-    color: $font-color;
-    @if type-of($padding) != number {
-      @warn "`#{$padding}` was read as #{type-of($padding)}";
-      @if $accordion-navigation-padding != null {
-        @warn "#{$padding} was read as a #{type-of($padding)}";
-        @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
-        padding: $accordion-navigation-padding;
-      }
-      @else {
-        @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
-        padding: null;
-      }
-    }
-    @else {
-      padding: $padding;
-    }
-    display: block;
-    font-family: $font-family;
-    @if type-of($font-size) != number {
-      @warn "`#{$font-size}` was read as a #{type-of($font-size)}";
-      @if $accordion-navigation-font-size != null {
-        @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
-        font-size: $accordion-navigation-font-size;
-      }
-      @else{
-        @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
-        font-size: null;
-
-      }
-    }
-    @else {
-      font-size: $font-size;
-    }
-    &:hover {
-      background: $hover-bg;
-    }
-  }
-}
-
-//  Mixin: accordion-content($bg, $padding, $active-class)
-//    @params $padding [ number ]: Padding for the content of the container
-//    @params $bg [ color  ]: Background color for the content when it's visible
-//    @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
-
-@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
-  display: none;
-  @if type-of($padding) != "number" {
-    @warn "#{$padding} was read as a #{type-of($padding)}";
-    @if $accordion-content-padding != null {
-      @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
-      padding: $accordion-content-padding;
-    } @else {
-      @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
-      padding: null;
-    }
-  } @else {
-    padding: $padding;
-  }
-
-  @if type-of($active_class) != "string" {
-    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
-  }
-  @else {
-    &.#{$active_class} {
-      display: block;
-      background: $bg;
-    }
-  }
-}
-
-@include exports("accordion") {
-  @if $include-html-accordion-classes {
-    .accordion {
-      @include clearfix;
-      margin-bottom: 0;
-      .accordion-navigation, dd {
-        display: block;
-        margin-bottom: 0 !important;
-        &.active > a { background: $accordion-navigation-active-bg-color; }
-        > a {
-          background: $accordion-navigation-bg-color;
-          color: $accordion-navigation-font-color;
-          padding: $accordion-navigation-padding;
-          display: block;
-          font-family: $accordion-navigation-font-family;
-          font-size: $accordion-navigation-font-size;
-          &:hover { background: $accordion-navigation-hover-bg-color; }
-        }
-
-        > .content {
-          display: none;
-          padding: $accordion-content-padding;
-          &.active {
-            display: block;
-            background: $accordion-content-active-bg-color;
-          }
-        }
-      }
-    }
-  }
-}

data/app/assets/stylesheets/foundation/components/_alert-boxes.scss

@@ -1,128 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// Alert Box Variables
-//
-$include-html-alert-classes: $include-html-classes !default;
-
-// We use this to control alert padding.
-$alert-padding-top: rem-calc(14) !default;
-$alert-padding-default-float: $alert-padding-top !default;
-$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default;
-$alert-padding-bottom: $alert-padding-top !default;
-
-// We use these to control text style.
-$alert-font-weight: $font-weight-normal !default;
-$alert-font-size: rem-calc(13) !default;
-$alert-font-color: $white !default;
-$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
-
-// We use this for close hover effect.
-$alert-function-factor: -14% !default;
-
-// We use these to control border styles.
-$alert-border-style: solid !default;
-$alert-border-width: 1px !default;
-$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default;
-$alert-bottom-margin: rem-calc(20) !default;
-
-// We use these to style the close buttons
-$alert-close-color: $oil !default;
-$alert-close-top: 50% !default;
-$alert-close-position: rem-calc(4) !default;
-$alert-close-font-size: rem-calc(22) !default;
-$alert-close-opacity: 0.3 !default;
-$alert-close-opacity-hover: 0.5 !default;
-$alert-close-padding: 9px 6px 4px !default;
-$alert-close-background: inherit !default;
-
-// We use this to control border radius
-$alert-radius: $global-radius !default;
-
-$alert-transition-speed: 300ms !default;
-$alert-transition-ease: ease-out !default;
-
-//
-// Alert Mixins
-//
-
-// We use this mixin to create a default alert base.
-@mixin alert-base {
-  border-style: $alert-border-style;
-  border-width: $alert-border-width;
-  display: block;
-  font-weight: $alert-font-weight;
-  margin-bottom: $alert-bottom-margin;
-  position: relative;
-  padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
-  font-size: $alert-font-size;
-  @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
-}
-
-// We use this mixin to add alert styles
-//
-// $bg - The background of the alert. Default: $primary-color.
-@mixin alert-style($bg:$primary-color) {
-
-  // This finds the lightness percentage of the background color.
-  $bg-lightness: lightness($bg);
-
-  // We control which background color and border come through.
-  background-color: $bg;
-  border-color: scale-color($bg, $lightness: $alert-function-factor);
-
-  // We control the text color for you based on the background color.
-  @if $bg-lightness > 70% { color: $alert-font-color-alt; }
-  @else                   { color: $alert-font-color; }
-
-}
-
-// We use this to create the close button.
-@mixin alert-close {
-  font-size: $alert-close-font-size;
-  padding: $alert-close-padding;
-  line-height: 0;
-  position: absolute;
-  top: $alert-close-top;
-  margin-top: -($alert-close-font-size / 2);
-  #{$opposite-direction}: $alert-close-position;
-  color: $alert-close-color;
-  opacity: $alert-close-opacity;
-  background: $alert-close-background;
-  &:hover,
-  &:focus { opacity: $alert-close-opacity-hover; }
-}
-
-// We use this to quickly create alerts with a single mixin.
-//
-// $bg - Background of alert. Default: $primary-color.
-// $radius - Radius of alert box. Default: false.
-@mixin alert($bg:$primary-color, $radius:false) {
-  @include alert-base;
-  @include alert-style($bg);
-  @include radius($radius);
-}
-
-@include exports("alert-box") {
-  @if $include-html-alert-classes {
-    .alert-box {
-      @include alert;
-
-      .close      { @include alert-close; }
-
-      &.radius    { @include radius($alert-radius); }
-      &.round     { @include radius($global-rounded); }
-
-      &.success   { @include alert-style($success-color); }
-      &.alert     { @include alert-style($alert-color); }
-      &.secondary { @include alert-style($secondary-color); }
-      &.warning { @include alert-style($warning-color); }
-      &.info { @include alert-style($info-color); }
-      &.alert-close { opacity: 0}
-    }
-  }
-}

data/app/assets/stylesheets/foundation/components/_block-grid.scss

@@ -1,132 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// Block Grid Variables
-//
-$include-html-block-grid-classes: $include-html-classes !default;
-$include-xl-html-block-grid-classes: false !default;
-
-// We use this to control the maximum number of block grid elements per row
-$block-grid-elements: 12 !default;
-$block-grid-default-spacing: rem-calc(20) !default;
-
-$align-block-grid-to-grid: false !default;
-@if $align-block-grid-to-grid {
-  $block-grid-default-spacing: $column-gutter;
-}
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-$block-grid-media-queries: true !default;
-
-//
-// Block Grid Mixins
-//
-
-// Create a custom block grid
-//
-// $per-row - # of items to display per row. Default: false.
-// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
-// $base-style - Apply a base style to block grid. Default: true.
-@mixin block-grid(
-  $per-row:false,
-  $spacing:$block-grid-default-spacing,
-  $include-spacing:true,
-  $base-style:true) {
-
-  @if $base-style {
-    display: block;
-    padding: 0;
-    @if $align-block-grid-to-grid {
-      margin: 0;
-    } @else {
-      margin: 0 (-$spacing/2);
-    }
-    @include clearfix;
-
-    &>li {
-      display: block;
-      height: auto;
-      float: $default-float;
-      @if $include-spacing {
-        padding: 0 ($spacing/2) $spacing;
-      }
-    }
-  }
-
-  @if $per-row {
-    &>li {
-      width: 100%/$per-row;
-      @if $include-spacing {
-        padding: 0 ($spacing/2) $spacing;
-      }
-      list-style: none;
-
-      &:nth-of-type(1n) { clear: none; }
-      &:nth-of-type(#{$per-row}n+1) { clear: both; }
-      @if $align-block-grid-to-grid {
-        @include block-grid-aligned($per-row, $spacing);
-      }
-    }
-  }
-}
-
-@mixin block-grid-aligned($per-row, $spacing) {
-  @for $i from 1 through $block-grid-elements {
-    @if $per-row >= $i {
-      $grid-column: '+' + $i;
-      @if $per-row == $i {
-        $grid-column: '';
-      }
-      &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
-        padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
-        padding-right: ($spacing - (($spacing / $per-row) * $i));
-      }
-    }
-  }
-}
-
-// Generate presentational markup for block grid.
-//
-// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
-@mixin block-grid-html-classes($size,$include-spacing) {
-  @for $i from 1 through $block-grid-elements {
-    .#{$size}-block-grid-#{($i)} {
-      @include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
-    }
-  }
-}
-
-@include exports("block-grid") {
-  @if $include-html-block-grid-classes {
-
-    [class*="block-grid-"] { @include block-grid; }
-
-    @if $block-grid-media-queries {
-      @media #{$small-up} {
-        @include block-grid-html-classes($size:small,$include-spacing:false);
-      }
-
-      @media #{$medium-up} {
-        @include block-grid-html-classes($size:medium,$include-spacing:false);
-      }
-
-      @media #{$large-up} {
-        @include block-grid-html-classes($size:large,$include-spacing:false);
-      }
-
-      @if $include-xl-html-block-grid-classes {
-        @media #{$xlarge-up} {
-          @include block-grid-html-classes($size:xlarge,$include-spacing:false);
-        }
-
-        @media #{$xxlarge-up} {
-          @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
-        }
-      }
-    }
-  }
-}

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

@@ -1,132 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// Breadcrumb Variables
-//
-$include-html-nav-classes: $include-html-classes !default;
-
-// We use this to set the background color for the breadcrumb container.
-$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
-
-// We use these to set the padding around the breadcrumbs.
-$crumb-padding: rem-calc(9 14 9) !default;
-$crumb-side-padding: rem-calc(12) !default;
-
-// We use these to control border styles.
-$crumb-function-factor: -10% !default;
-$crumb-border-size: 1px !default;
-$crumb-border-style: solid !default;
-$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
-$crumb-radius: $global-radius !default;
-
-// We use these to set various text styles for breadcrumbs.
-$crumb-font-size: rem-calc(11) !default;
-$crumb-font-color: $primary-color !default;
-$crumb-font-color-current: $oil !default;
-$crumb-font-color-unavailable: $aluminum !default;
-$crumb-font-transform: uppercase !default;
-$crumb-link-decor: underline !default;
-
-// We use these to control the slash between breadcrumbs
-$crumb-slash-color: $base !default;
-$crumb-slash: "/" !default;
-
-//
-// Breadcrumb Mixins
-//
-
-// We use this mixin to create a container around our breadcrumbs
-@mixin crumb-container {
-  display: block;
-  padding: $crumb-padding;
-  overflow: hidden;
-  margin-#{$default-float}: 0;
-  list-style: none;
-  border-style: $crumb-border-style;
-  border-width: $crumb-border-size;
-
-  // We control which background color and border come through.
-  background-color: $crumb-bg;
-  border-color: $crumb-border-color;
-}
-
-// We use this mixin to create breadcrumb styles from list items.
-@mixin crumbs {
-
-  // A normal state will make the links look and act like clickable breadcrumbs.
-  margin: 0;
-  float: $default-float;
-  font-size: $crumb-font-size;
-  line-height: $crumb-font-size;
-  text-transform: $crumb-font-transform;
-  color: $crumb-font-color;
-
-  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
-
-  a {
-    color: $crumb-font-color;
-  }
-
-  // Current is for the link of the current page
-  &.current {
-    cursor: $cursor-default-value;
-    color: $crumb-font-color-current;
-    a {
-      cursor: $cursor-default-value;
-      color: $crumb-font-color-current;
-    }
-
-    &:hover, &:hover a,
-    &:focus, &:focus a { text-decoration: none; }
-  }
-
-  // Unavailable removed color and link styles so it looks inactive.
-  &.unavailable {
-    color: $crumb-font-color-unavailable;
-    a { color: $crumb-font-color-unavailable; }
-
-    &:hover,
-    &:hover a,
-    &:focus,
-    a:focus {
-      text-decoration: none;
-      color: $crumb-font-color-unavailable;
-      cursor: $cursor-disabled-value;
-    }
-  }
-
-  &:before {
-    content: "#{$crumb-slash}";
-    color: $crumb-slash-color;
-    margin: 0 $crumb-side-padding;
-    position: relative;
-    top: 1px;
-  }
-
-  &:first-child:before {
-    content: " ";
-    margin: 0;
-  }
-}
-
-@include exports("breadcrumbs") {
-  @if $include-html-nav-classes {
-    .breadcrumbs {
-      @include crumb-container;
-      @include radius($crumb-radius);
-
-      &>* {
-        @include crumbs;
-      }
-    }
-  }
-}
-
-/* Accessibility - hides the forward slash */
-[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
-  content: "/";
-  }