va_common 0.1.0 → 0.2.0

data/app/assets/stylesheets/foundation/components/_side-nav.scss

@@ -1,116 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// @variables
-//
-
-$include-html-nav-classes: $include-html-classes !default;
-
-// We use this to control padding.
-$side-nav-padding: rem-calc(14 0) !default;
-
-// We use these to control list styles.
-$side-nav-list-type: none !default;
-$side-nav-list-position: outside !default;
-$side-nav-list-margin: rem-calc(0 0 7 0) !default;
-
-// We use these to control link styles.
-$side-nav-link-color: $primary-color !default;
-$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
-$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
-$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default;
-$side-nav-link-margin: 0 !default;
-$side-nav-link-padding: rem-calc(7 14) !default;
-$side-nav-font-size: rem-calc(14) !default;
-$side-nav-font-weight: $font-weight-normal !default;
-$side-nav-font-weight-active: $side-nav-font-weight !default;
-$side-nav-font-family: $body-font-family !default;
-$side-nav-font-family-active: $side-nav-font-family !default;
-
-// We use these to control heading styles.
-$side-nav-heading-color: $side-nav-link-color !default;
-$side-nav-heading-font-size: $side-nav-font-size !default;
-$side-nav-heading-font-weight: bold !default;
-$side-nav-heading-text-transform: uppercase !default;
-
-// We use these to control border styles
-$side-nav-divider-size: 1px !default;
-$side-nav-divider-style: solid !default;
-$side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
-
-
-//
-// @mixins
-//
-
-
-// We use this to style the side-nav
-//
-// $divider-color - Border color of divider. Default: $side-nav-divider-color.
-// $font-size - Font size of nav items. Default: $side-nav-font-size.
-// $link-color - Color of navigation links. Default: $side-nav-link-color.
-// $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover.
-@mixin side-nav(
-  $divider-color:$side-nav-divider-color,
-  $font-size:$side-nav-font-size,
-  $link-color:$side-nav-link-color,
-  $link-color-hover:$side-nav-link-color-hover,
-  $link-bg-hover:$side-nav-link-bg-hover) {
-  display: block;
-  margin: 0;
-  padding: $side-nav-padding;
-  list-style-type: $side-nav-list-type;
-  list-style-position: $side-nav-list-position;
-  font-family: $side-nav-font-family;
-
-  li {
-    margin: $side-nav-list-margin;
-    font-size: $font-size;
-    font-weight: $side-nav-font-weight;
-
-    a:not(.button) {
-      display: block;
-      color: $link-color;
-      margin: $side-nav-link-margin;
-      padding: $side-nav-link-padding;
-      &:hover,
-      &:focus {
-        background: $link-bg-hover;
-        color: $link-color-hover;
-      }
-    }
-
-    &.active > a:first-child:not(.button) {
-      color: $side-nav-link-color-active;
-      font-weight: $side-nav-font-weight-active;
-      font-family: $side-nav-font-family-active;
-    }
-
-    &.divider {
-      border-top: $side-nav-divider-size $side-nav-divider-style;
-      height: 0;
-      padding: 0;
-      list-style: none;
-      border-top-color: $divider-color;
-    }
-
-    &.heading {
-      color: $side-nav-heading-color;
-      font: {
-        size: $side-nav-heading-font-size;
-        weight: $side-nav-heading-font-weight;
-      }
-      text-transform: $side-nav-heading-text-transform;
-    }
-  }
-}
-
-@include exports("side-nav") {
-  @if $include-html-nav-classes {
-    .side-nav { @include side-nav; }
-  }
-}

data/app/assets/stylesheets/foundation/components/_split-buttons.scss

@@ -1,199 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-@import "buttons";
-@import "dropdown-buttons";
-
-//
-// @name _split-buttons.scss
-// @dependencies _buttons.scss, _global.scss
-//
-
-//
-// @variables
-//
-
-$include-html-button-classes: $include-html-classes !default;
-
-// We use these to control different shared styles for Split Buttons
-$split-button-function-factor: 10% !default;
-$split-button-pip-color: $white !default;
-$split-button-pip-color-alt: $oil !default;
-$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
-
-// We use these to control tiny split buttons
-$split-button-padding-tny: $button-pip-tny * 10 !default;
-$split-button-span-width-tny: $button-pip-tny * 6 !default;
-$split-button-pip-size-tny: $button-pip-tny !default;
-$split-button-pip-top-tny: $button-pip-tny * 2 !default;
-$split-button-pip-default-float-tny: rem-calc(-6) !default;
-
-// We use these to control small split buttons
-$split-button-padding-sml: $button-pip-sml * 10 !default;
-$split-button-span-width-sml: $button-pip-sml * 6 !default;
-$split-button-pip-size-sml: $button-pip-sml !default;
-$split-button-pip-top-sml: $button-pip-sml * 1.5 !default;
-$split-button-pip-default-float-sml: rem-calc(-6) !default;
-
-// We use these to control medium split buttons
-$split-button-padding-med: $button-pip-med * 9 !default;
-$split-button-span-width-med: $button-pip-med * 5.5 !default;
-$split-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
-$split-button-pip-top-med: $button-pip-med * 1.5 !default;
-$split-button-pip-default-float-med: rem-calc(-6) !default;
-
-// We use these to control large split buttons
-$split-button-padding-lrg: $button-pip-lrg * 8 !default;
-$split-button-span-width-lrg: $button-pip-lrg * 5 !default;
-$split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
-$split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5) !default;
-$split-button-pip-default-float-lrg: rem-calc(-6) !default;
-
-
-//
-// @mixins
-//
-
-// We use this mixin to create split buttons that build upon the button mixins
-//
-// $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large.
-// $pip-color - Color of the triangle. Default: $split-button-pip-color.
-// $span-border - Border color of button divider. Default: $primary-color.
-// $base-style - Apply base style to split button. Default: true.
-@mixin split-button(
-  $padding:medium,
-  $pip-color:$split-button-pip-color, 
-  $span-border:$primary-color, 
-  $base-style:true) {
-
-  // With this, we can control whether or not the base styles come through.
-  @if $base-style {
-    position: relative;
-
-    // Styling for the split arrow clickable area
-    span {
-      display: block;
-      height: 100%;
-      position: absolute;
-      #{$opposite-direction}: 0;
-      top: 0;
-      border-#{$default-float}: solid 1px;
-
-      // Building the triangle pip indicator
-      &:after {
-        position: absolute;
-        content: "";
-        width: 0;
-        height: 0;
-        display: block;
-        border-style: inset;
-        top: 50%;
-
-        #{$default-float}: 50%;
-      }
-
-      &:active { background-color: $split-button-active-bg-tint; }
-    }
-  }
-
-  // Control the border color for the span area of the split button
-  @if $span-border {
-    span {
-      border-#{$default-float}-color: rgba(255,255,255,0.5);
-    }
-  }
-
-  // Style of the button and clickable area for tiny sizes
-  @if $padding == tiny {
-    padding-#{$opposite-direction}: $split-button-padding-tny;
-
-    span { width: $split-button-span-width-tny;
-      &:after {
-        border-top-style: solid;
-        border-width: $split-button-pip-size-tny;
-        top: 48%;
-        margin-#{$default-float}: $split-button-pip-default-float-tny;
-      }
-    }
-  }
-
-  // Style of the button and clickable area for small sizes
-  @else if $padding == small {
-    padding-#{$opposite-direction}: $split-button-padding-sml;
-
-    span { width: $split-button-span-width-sml;
-      &:after {
-        border-top-style: solid;
-        border-width: $split-button-pip-size-sml;
-        top: 48%;
-        margin-#{$default-float}: $split-button-pip-default-float-sml;
-      }
-    }
-  }
-
-  // Style of the button and clickable area for default (medium) sizes
-  @else if $padding == medium {
-    padding-#{$opposite-direction}: $split-button-padding-med;
-
-    span { width: $split-button-span-width-med;
-      &:after {
-        border-top-style: solid;
-        border-width: $split-button-pip-size-med;
-        top: 48%;
-        margin-#{$default-float}: $split-button-pip-default-float-med;
-      }
-    }
-  }
-
-  // Style of the button and clickable area for large sizes
-  @else if $padding == large {
-    padding-#{$opposite-direction}: $split-button-padding-lrg;
-
-    span { width: $split-button-span-width-lrg;
-      &:after {
-        border-top-style: solid;
-        border-width: $split-button-pip-size-lrg;
-        top: 48%;
-        margin-#{$default-float}: $split-button-pip-default-float-lrg;
-      }
-    }
-  }
-
-  // Control the color of the triangle pip
-  @if $pip-color {
-    span:after { border-color: $pip-color transparent transparent transparent; }
-  }
-}
-
-@include exports("split-button") {
-  @if $include-html-button-classes {
-
-    .split.button { @include split-button;
-
-      &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
-      &.alert { @include split-button(false, false, $alert-color, false); }
-      &.success { @include split-button(false, false, $success-color, false); }
-
-      &.tiny { @include split-button(tiny, false, false, false); }
-      &.small { @include split-button(small, false, false, false); }
-      &.large { @include split-button(large, false, false, false); }
-      &.expand { padding-left: 2rem; }
-
-      &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
-
-      &.radius span { @include side-radius($opposite-direction, $global-radius); }
-      &.round span { @include side-radius($opposite-direction, 1000px); }
-      &.no-pip{
-        span:before{ border-style:none; }
-        span:after{ border-style:none; }
-        span{padding-top:$split-button-pip-top-med;}
-        &.tiny{ span{ padding-top:$split-button-pip-top-tny; } }
-        &.small{ span{ padding-top:$split-button-pip-top-sml; } }
-        &.large{ span{ padding-top:$split-button-pip-top-lrg; } }
-      }
-    }
-
-  }
-}

data/app/assets/stylesheets/foundation/components/_sub-nav.scss

@@ -1,123 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// @name _sub-nav.scss
-// @dependencies _global.scss
-//
-
-//
-// @variables
-//
-
-$include-html-nav-classes: $include-html-classes !default;
-
-// We use these to control margin and padding
-$sub-nav-list-margin: rem-calc(-4 0 18) !default;
-$sub-nav-list-padding-top: rem-calc(4) !default;
-
-// We use this to control the definition
-$sub-nav-font-family: $body-font-family !default;
-$sub-nav-font-size: rem-calc(14) !default;
-$sub-nav-font-color: $aluminum !default;
-$sub-nav-font-weight: $font-weight-normal !default;
-$sub-nav-text-decoration: none !default;
-$sub-nav-padding: rem-calc(3 16) !default;
-$sub-nav-border-radius: 3px !default;
-$sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default;
-
-
-// We use these to control the active item styles
-
-$sub-nav-active-font-weight: $font-weight-normal !default;
-$sub-nav-active-bg: $primary-color !default;
-$sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
-$sub-nav-active-color: $white !default;
-$sub-nav-active-padding: $sub-nav-padding !default;
-$sub-nav-active-cursor: default !default;
-
-$sub-nav-item-divider: "" !default;
-$sub-nav-item-divider-margin: rem-calc(12) !default;
-
-//
-// @mixins
-//
-
-
-// Create a sub-nav item
-//
-// $font-color - Font color. Default: $sub-nav-font-color.
-// $font-size - Font size. Default: $sub-nav-font-size.
-// $active-bg - Background of active nav item. Default: $sub-nav-active-bg.
-// $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover.
-@mixin sub-nav(
-  $font-color: $sub-nav-font-color,
-  $font-size: $sub-nav-font-size,
-  $active-bg: $sub-nav-active-bg,
-  $active-bg-hover: $sub-nav-active-bg-hover) {
-  display: block;
-  width: auto;
-  overflow: hidden;
-  margin: $sub-nav-list-margin;
-  padding-top: $sub-nav-list-padding-top;
-
-  dt {
-    text-transform: uppercase;
-  }
-
-  dt,
-  dd,
-  li {
-    float: $default-float;
-    display: inline;
-    margin-#{$default-float}: rem-calc(16);
-    margin-bottom: 0;
-    font-family: $sub-nav-font-family;
-    font-weight: $sub-nav-font-weight;
-    font-size: $font-size;
-    color: $font-color;
-
-    a {
-      text-decoration: $sub-nav-text-decoration;
-      color: $sub-nav-font-color;
-      padding: $sub-nav-padding;
-      &:hover {
-        color: $sub-nav-font-color-hover;
-      }
-    }
-
-    &.active a {
-      @include radius($sub-nav-border-radius);
-      font-weight: $sub-nav-active-font-weight;
-      background: $active-bg;
-      padding: $sub-nav-active-padding;
-      cursor: $sub-nav-active-cursor;
-      color: $sub-nav-active-color;
-      &:hover {
-        background: $active-bg-hover;
-      }
-    }
-    @if $sub-nav-item-divider != "" {
-      margin-#{$default-float}: 0;
-
-      &:before {
-        content: "#{$sub-nav-item-divider}";
-        margin: 0 $sub-nav-item-divider-margin;
-      }
-
-      &:first-child:before {
-        content: "";
-        margin: 0;
-      }
-    }
-  }
-}
-
-@include exports("sub-nav") {
-  @if $include-html-nav-classes {
-    .sub-nav { @include sub-nav; }
-  }
-}

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

@@ -1,238 +0,0 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-@import "global";
-
-//
-// @name
-// @dependencies _global.scss
-//
-
-//
-// @variables
-//
-
-$include-html-form-classes: $include-html-classes !default;
-
-// Controlling background color for the switch container
-$switch-bg: $gainsboro !default;
-
-// We use these to control the switch heights for our default classes
-$switch-height-tny: 1.5rem !default;
-$switch-height-sml: 1.75rem !default;
-$switch-height-med: 2rem !default;
-$switch-height-lrg: 2.5rem !default;
-$switch-bottom-margin: 1.5rem !default;
-
-// We use these to style the switch-paddle
-$switch-paddle-bg: $white !default;
-$switch-paddle-transition-speed: .15s !default;
-$switch-paddle-transition-ease: ease-out !default;
-$switch-active-color: $primary-color !default;
-
-
-//
-// @mixins
-//
-
-// We use this mixin to create the base styles for our switch 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 switch-base(
-  $transition-speed:$switch-paddle-transition-speed,
-  $transition-ease:$switch-paddle-transition-ease) {
-
-  padding: 0;
-  border: none;
-  position: relative;
-  outline: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-
-  // Default label styles for type and transition
-  label {
-    display: block;
-    margin-bottom: ($switch-height-med / 2);
-    position: relative;
-    color: transparent;
-    background: $switch-bg;
-    text-indent: 100%;
-    width: $switch-height-med * 2; height: $switch-height-med;
-    cursor: pointer;
-
-    // Transition for the switch label to follow paddle
-    @include single-transition(left, $transition-speed, $transition-ease);
-  }
-
-  // So that we don't need to recreate the form with any JS, we use the
-  // existing checkbox or radio button, but we cleverly position and hide it.
-  input {
-    opacity: 0;
-    position: absolute;
-    top: 9px;
-    left: 10px;
-    padding:0;
-
-    & + label { margin-left: 0; margin-right: 0; }
-  }
-
-  // The paddle for the switch is created from an after psuedoclass
-  // content element. This is sized and positioned, and reacts to
-  // the state of the input.
-
-  label:after {
-    content: "";
-    display: block;
-    background: $switch-paddle-bg;
-    position: absolute;
-    top: .25rem;
-    left: .25rem;
-    width: $switch-height-med - 0.5rem;
-    height: $switch-height-med - 0.5rem;
-
-    -webkit-transition: left $transition-speed $transition-ease;
-    -moz-transition: left $transition-speed $transition-ease;
-    -o-transition: translate3d(0,0,0);
-    transition: left $transition-speed $transition-ease;
-
-    -webkit-transform: translate3d(0,0,0);
-    -moz-transform: translate3d(0,0,0);
-    -o-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
-  }
-
-  input:checked + label {
-    background: $switch-active-color;
-  }
-
-  input:checked + label:after {
-    left: $switch-height-med + 0.25rem;
-  }
-}
-
-// We use this mixin to create the size styles for switches.
-//
-// $height - Height (in px) of the switch. Default: $switch-height-med.
-// $font-size - Font size of text in switch. Default: $switch-font-size-med.
-// $line-height - Line height of switch. Default: 2.3rem.
-@mixin switch-size($height: $switch-height-med) {
-
-  label {
-    width: $height * 2;
-    height: $height;
-  }
-
-  label:after {
-    width: $height - 0.5rem;
-    height: $height - 0.5rem;
-  }
-
-  input:checked + label:after {
-    left: $height + 0.25rem;
-  }
-
-}
-
-// 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 switch-style(
-  $paddle-bg:$switch-paddle-bg,
-  $active-color:$switch-active-color,
-  $radius:false,
-  $base-style:true) {
-
-  @if $base-style {
-
-    label {
-      color: transparent;
-      background: $switch-bg;
-    }
-
-    label:after {
-      background: $paddle-bg;
-    }
-
-    input:checked + label {
-      background: $active-color;
-    }
-  }
-
-  // Setting up the radius for switches
-  @if $radius == true {
-    label {
-      border-radius: 2rem;
-    }
-    label:after {
-      border-radius: 2rem;
-    }
-  }
-  @else if $radius {
-    label {
-      border-radius: $radius;
-    }
-    label:after {
-      border-radius: $radius;
-    }
-  }
-
-}
-
-// We use this to quickly create switches with a single mixin
-//
-// $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.
-// $height - Height (in px) of the switch. Default: $switch-height-med.
-// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
-// $active-color - Background color of an active switch. Default: $switch-active-color.
-// $radius - Radius to apply to switch. Default: false.
-// $base-style - Apply base styles? Default: true.
-@mixin switch(
-  $transition-speed: $switch-paddle-transition-speed,
-  $transition-ease: $switch-paddle-transition-ease,
-  $height: $switch-height-med,
-  $paddle-bg: $switch-paddle-bg,
-  $active-color: $switch-active-color,
-  $radius:false,
-  $base-style:true) {
-    @include switch-base($transition-speed, $transition-ease);
-    @include switch-size($height);
-    @include switch-style($paddle-bg, $active-color, $radius, $base-style);
-}
-
-@include exports("switch") {
-  @if $include-html-form-classes {
-      .switch {
-        @include switch;
-
-        // Large radio switches
-        &.large { @include switch-size($switch-height-lrg); }
-
-        // Small radio switches
-        &.small { @include switch-size($switch-height-sml); }
-
-        // Tiny radio switches
-        &.tiny { @include switch-size($switch-height-tny); }
-
-        // Add a radius to the switch
-        &.radius {
-          label { @include radius(4px); }
-          label:after { @include radius(3px); }
-        }
-
-        // Make the switch completely round, like a pill
-        &.round { @include radius(1000px);
-          label { @include radius(2rem); }
-          label:after { @include radius(2rem); }
-        }
-
-      }
-  }
-}