TokiCLI 0.2.1 → 0.3.0

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_pricing-tables.scss

@@ -10,50 +10,50 @@
 $include-html-pricing-classes: $include-html-classes !default;
 
 // We use this to control the border color
-$price-table-border: solid 1px #ddd !default;
+$price-table-border: solid 1px $gainsboro !default;
 
 // We use this to control the bottom margin of the pricing table
 $price-table-margin-bottom: rem-calc(20) !default;
 
 // We use these to control the title styles
-$price-title-bg: #333 !default;
+$price-title-bg: $oil !default;
 $price-title-padding: rem-calc(15 20) !default;
 $price-title-align: center !default;
-$price-title-color: #eee !default;
+$price-title-color: $smoke !default;
 $price-title-weight: $font-weight-normal !default;
 $price-title-size: rem-calc(16) !default;
 $price-title-font-family: $body-font-family !default;
 
 // We use these to control the price styles
-$price-money-bg: #f6f6f6 !default;
+$price-money-bg: $vapor !default;
 $price-money-padding: rem-calc(15 20) !default;
 $price-money-align: center !default;
-$price-money-color: #333 !default;
+$price-money-color: $oil !default;
 $price-money-weight: $font-weight-normal !default;
 $price-money-size: rem-calc(32) !default;
 $price-money-font-family: $body-font-family !default;
 
 
 // We use these to control the description styles
-$price-bg: #fff !default;
-$price-desc-color: #777 !default;
+$price-bg: $white !default;
+$price-desc-color: $monsoon !default;
 $price-desc-padding: rem-calc(15) !default;
 $price-desc-align: center !default;
 $price-desc-font-size: rem-calc(12) !default;
 $price-desc-weight: $font-weight-normal !default;
 $price-desc-line-height: 1.4 !default;
-$price-desc-bottom-border: dotted 1px #ddd !default;
+$price-desc-bottom-border: dotted 1px $gainsboro !default;
 
 // We use these to control the list item styles
-$price-item-color: #333 !default;
+$price-item-color: $oil !default;
 $price-item-padding: rem-calc(15) !default;
 $price-item-align: center !default;
 $price-item-font-size: rem-calc(14) !default;
 $price-item-weight: $font-weight-normal !default;
-$price-item-bottom-border: dotted 1px #ddd !default;
+$price-item-bottom-border: dotted 1px $gainsboro !default;
 
 // We use these to control the CTA area styles
-$price-cta-bg: #fff !default;
+$price-cta-bg: $white !default;
 $price-cta-align: center !default;
 $price-cta-padding: rem-calc(20 20 0) !default;
 

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_progress-bars.scss

@@ -11,10 +11,10 @@ $include-html-media-classes: $include-html-classes !default;
 
 // We use this to set the progress bar height
 $progress-bar-height: rem-calc(25) !default;
-$progress-bar-color: #f6f6f6 !default;
+$progress-bar-color: $vapor !default;
 
 // We use these to control the border styles
-$progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
+$progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_range-slider.scss

@@ -21,10 +21,11 @@ $range-slider-bar-height: rem-calc(16) !default;
 
 $range-slider-bar-border-width: 1px !default;
 $range-slider-bar-border-style: solid !default;
-$range-slider-bar-border-color: #ddd !default; 
+$range-slider-bar-border-color: $gainsboro !default;
 $range-slider-radius: $global-radius !default;
 $range-slider-round: $global-rounded !default;
-$range-slider-bar-bg-color: #fafafa !default;
+$range-slider-bar-bg-color: $ghost !default;
+$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default;
 
 // Vertical bar styles
 $range-slider-vertical-bar-width: rem-calc(16) !default;
@@ -43,6 +44,7 @@ $range-slider-handle-round: $global-rounded !default;
 $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
 $range-slider-handle-cursor: pointer !default;
 
+$range-slider-disabled-opacity: 0.7 !default;
 
 //
 // @mixins
@@ -66,14 +68,19 @@ $range-slider-handle-cursor: pointer !default;
 @mixin range-slider-bar-style(
   $bg: true,
   $radius: false,
-  $round: false) {
-    @if $bg == true { background: $range-slider-bar-bg-color; }
-    @if $radius == true { @include radius($range-slider-radius); }
-    @if $round == true { @include radius($range-slider-round); }
+  $round: false,
+  $disabled: false) {
+  @if $bg == true { background: $range-slider-bar-bg-color; }
+  @if $radius == true { @include radius($range-slider-radius); }
+  @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
   }
+}
 
 @mixin range-slider-bar(
-  $bg: $range-slider-bar-bg-color, 
+  $bg: $range-slider-bar-bg-color,
   $radius:false) {
   @include range-slider-bar-base;
   @include range-slider-bar-style;
@@ -88,14 +95,23 @@ $range-slider-handle-cursor: pointer !default;
   height: $range-slider-handle-height;
   border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
   cursor: $range-slider-handle-cursor;
+
+  // This removes the 300ms touch delay on Windows 8
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
 }
 @mixin range-slider-handle-style(
   $bg: true,
   $radius: false,
-  $round: false) {
+  $round: false,
+  $disabled: false) {
   @if $bg == true { background: $range-slider-handle-bg-color; }
   @if $radius == true { @include radius($range-slider-radius); }
   @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
+  }
   &:hover {
     background: $range-slider-handle-bg-hover-color;
   }
@@ -133,12 +149,16 @@ $range-slider-handle-cursor: pointer !default;
         @include range-slider-bar-style($round:true);
         .range-slider-handle { @include range-slider-handle-style($round: true); }
       }
+      &.disabled, &[disabled] {
+        @include range-slider-bar-style($disabled:true);
+        .range-slider-handle { @include range-slider-handle-style($disabled: true); }
+      }
     }
     .range-slider-active-segment {
       display: inline-block;
       position: absolute;
       height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
-      background: scale-color($secondary-color, $lightness: -1%);
+      background: $range-slider-active-segment-bg-color;
     }
     .range-slider-handle {
       @include range-slider-handle-base;

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_reveal.scss

@@ -12,21 +12,22 @@
 $include-html-reveal-classes: $include-html-classes !default;
 
 // We use these to control the style of the reveal overlay.
-$reveal-overlay-bg: rgba(#000, .45) !default;
-$reveal-overlay-bg-old: #000 !default;
+$reveal-overlay-bg: rgba($black, .45) !default;
+$reveal-overlay-bg-old: $black !default;
 
 // We use these to control the style of the modal itself.
-$reveal-modal-bg: #fff !default;
+$reveal-modal-bg: $white !default;
 $reveal-position-top: rem-calc(100) !default;
 $reveal-default-width: 80% !default;
+$reveal-max-width: $row-width !default;
 $reveal-modal-padding: rem-calc(20) !default;
-$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
 
 // We use these to style the reveal close button
 $reveal-close-font-size: rem-calc(40) !default;
 $reveal-close-top: rem-calc(8) !default;
 $reveal-close-side: rem-calc(11) !default;
-$reveal-close-color: #aaa !default;
+$reveal-close-color: $base !default;
 $reveal-close-weight: $font-weight-bold !default;
 
 // We use this to set the default radius used throughout the core.
@@ -36,7 +37,7 @@ $reveal-round: $global-rounded !default;
 // We use these to control the modal border
 $reveal-border-style: solid !default;
 $reveal-border-width: 1px !default;
-$reveal-border-color: #666 !default;
+$reveal-border-color: $steel !default;
 
 $reveal-modal-class: "reveal-modal" !default;
 $close-reveal-modal-class: "close-reveal-modal" !default;
@@ -46,15 +47,16 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 //
 
 // We use this to create the reveal background overlay styles
-@mixin reveal-bg {
+@mixin reveal-bg( $include-z-index-value: true ) {
   position: fixed;
-  height: 100%;
-  width: 100%;
-  background: $reveal-overlay-bg-old;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
   background: $reveal-overlay-bg;
-  z-index: 99;
+  z-index: if( $include-z-index-value, 1004, null );
   display: none;
-  top: 0;
   #{$default-float}: 0;
 }
 
@@ -63,44 +65,44 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 // $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
 // $width - Sets reveal width Default: $reveal-default-width || 80%
 //
-@mixin reveal-modal-base(
-  $base-style:true,
-  $width:$reveal-default-width) {
+@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
   @if $base-style {
     visibility: hidden;
     display: none;
     position: absolute;
-    z-index: 100;
+    z-index: 1005;
     width: 100vw;
     top:0;
+    border-radius: $border-radius;
     #{$default-float}: 0;
+
     @media #{$small-only} {
       min-height:100vh;
     }
-    @media #{$medium-up} {
-      #{$default-float}: 50%;
-    }
 
     // Make sure rows don't have a min-width on them
-    .column,
-    .columns { min-width: 0; }
+    .column, .columns { min-width: 0; }
 
     // Get rid of margin from first and last element inside modal
     & > :first-child { margin-top: 0; }
+
     & > :last-child { margin-bottom: 0; }
   }
 
   @if $width {
     @media #{$medium-up} {
-      margin-#{$default-float}: -($width / 2);
       width: $width;
+      max-width: $max-width;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
     }
   }
 }
 
 // We use this to style the reveal modal defaults
 //
-// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
+// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
 // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
 // $border - Choose whether reveal uses a border. Default: true, Options: false
 // $border-style - Set reveal border style. Default: $reveal-border-style || solid
@@ -143,7 +145,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
 // We use this to create a close button for the reveal modal
 //
-// $color - Default: $reveal-close-color || #aaa
+// $color - Default: $reveal-close-color || $base
 @mixin reveal-close($color:$reveal-close-color) {
   font-size: $reveal-close-font-size;
   line-height: 1;
@@ -161,7 +163,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     // Reveal Modals
     .reveal-modal-bg { @include reveal-bg; }
 
-    dialog, .#{$reveal-modal-class} {
+    .#{$reveal-modal-class} {
       @include reveal-modal-base;
       @include reveal-modal-style(
         $bg:$reveal-modal-bg,
@@ -169,48 +171,50 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
         $border:true,
         $box-shadow:true,
         $radius:false,
-        $top-offset:$reveal-position-top);
+        $top-offset:$reveal-position-top
+      );
+      @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
+
+      &.radius { @include reveal-modal-style($radius:true); }
+      &.round  { @include reveal-modal-style($radius:$reveal-round); }
+      &.collapse { @include reveal-modal-style($padding:0); }
+      &.tiny  { @include reveal-modal-base(false, 30%); }
+      &.small { @include reveal-modal-base(false, 40%); }
+      &.medium  { @include reveal-modal-base(false, 60%); }
+      &.large { @include reveal-modal-base(false, 70%); }
+      &.xlarge { @include reveal-modal-base(false, 95%); }
+      &.full {
+        @include reveal-modal-base(false, 100vw);
+        top:0;
+        left:0;
+        height:100%;
+        height: 100vh;
+        min-height:100vh;
+        margin-left: 0 !important;
+      }
 
       .#{$close-reveal-modal-class} { @include reveal-close; }
     }
 
-    dialog[open] {
-      display:block;
-      visibility: visible;
-    }
-
-    @media #{$medium-up} {
+    dialog {
+      @extend .#{$reveal-modal-class};
+      display: none;
 
-      dialog, .#{$reveal-modal-class} {
-        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
-
-        &.radius { @include reveal-modal-style($radius:true); }
-        &.round  { @include reveal-modal-style($radius:$reveal-round); }
-        
-        &.collapse { @include reveal-modal-style($padding:0); }
-
-        &.tiny  { @include reveal-modal-base(false, 30%); }
-        &.small { @include reveal-modal-base(false, 40%); }
-        &.medium  { @include reveal-modal-base(false, 60%); }
-        &.large { @include reveal-modal-base(false, 70%); }
-        &.xlarge { @include reveal-modal-base(false, 95%); }
+      &::backdrop, & + .backdrop {
+        @include reveal-bg(false);
       }
 
-      dialog, .#{$reveal-modal-class} {
-        &.full {
-          @include reveal-modal-base(false, 100vw);
-          top:0;
-          left:0;
-          height: 100vh;
-          min-height:100vh;
-          margin-left: 0 !important;
-        }
+      &[open]{
+        display: block;
       }
     }
 
-    // Reveal Print Styles
+    // Reveal Print Styles: It should be invislbe, adds no value being printed.
     @media print {
-      dialog, .#{$reveal-modal-class} {background: #fff !important;}
+      dialog, .#{$reveal-modal-class} { 
+        display: none;
+        background: $white !important;
+      }
     }
   }
 }

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_side-nav.scss

@@ -15,7 +15,7 @@ $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: inside !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.
@@ -40,7 +40,7 @@ $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(#fff, $lightness: 10%) !default;
+$side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
 
 
 //
@@ -70,6 +70,7 @@ $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
   li {
     margin: $side-nav-list-margin;
     font-size: $font-size;
+    font-weight: $side-nav-font-weight;
 
     a:not(.button) {
       display: block;

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_split-buttons.scss

@@ -19,8 +19,8 @@ $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: #fff !default;
-$split-button-pip-color-alt: #333 !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

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_sub-nav.scss

@@ -22,7 +22,7 @@ $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: #999 !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;
@@ -35,7 +35,7 @@ $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !d
 $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: #fff !default;
+$sub-nav-active-color: $white !default;
 $sub-nav-active-padding: $sub-nav-padding !default;
 $sub-nav-active-cursor: default !default;
 

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_switches.scss

@@ -0,0 +1,226 @@
+// 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) {
+ 
+
+  // 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;
+    transition: left $transition-speed $transition-ease;
+
+    -webkit-transform: translate3d(0,0,0);
+    -moz-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,
+  $radius:false,
+  $base-style:true) {
+
+  @if $base-style {
+
+    label {
+      color: transparent;
+      background: $switch-bg;
+    }
+
+    label:after {
+      background: $paddle-bg;
+    }
+
+    input:checked + label {
+      background: $switch-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) {
+    padding: 0;
+    border: none;
+    position: relative;
+    @include switch-base($transition-speed, $transition-ease);
+    @include switch-size($height);
+    @include switch-style($paddle-bg, $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); }
+        }
+
+      }
+  }
+}