TokiCLI 0.2.1 → 0.3.0

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
@@ -12,18 +16,18 @@
 $include-html-table-classes: $include-html-classes !default;
 
 // These control the background color for the table and even rows
-$table-bg: #fff !default;
-$table-even-row-bg: #f9f9f9 !default;
+$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: #ddd !default;
+$table-border-color: $gainsboro !default;
 
 // These control the table head styles
-$table-head-bg: #f5f5f5 !default;
+$table-head-bg: $white-smoke !default;
 $table-head-font-size: rem-calc(14) !default;
-$table-head-font-color: #222 !default;
+$table-head-font-color: $jet !default;
 $table-head-font-weight: $font-weight-bold !default;
 $table-head-padding: rem-calc(8 10 10) !default;
 
@@ -43,10 +47,11 @@ $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: #222 !default;
+$table-row-font-color: $jet !default;
 $table-line-height: rem-calc(18) !default;
 
-// These are for controlling the display and margin of tables
+// 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;
 
@@ -59,6 +64,7 @@ $table-margin-bottom: rem-calc(20) !default;
   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;

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

@@ -13,10 +13,10 @@
 $include-html-tabs-classes: $include-html-classes !default;
 
 $tabs-navigation-padding: rem-calc(16) !default;
-$tabs-navigation-bg-color: #efefef !default;
-$tabs-navigation-active-bg-color: #fff !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: #222 !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;
@@ -39,14 +39,25 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
         float: $default-float;
         > a {
           display: block;
-          background: $tabs-navigation-bg-color;
+          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: $tabs-navigation-hover-bg-color; }
+          &:hover {
+            background: {
+              color: $tabs-navigation-hover-bg-color;
+            }
+          }
         }
-        &.active a { background: $tabs-navigation-active-bg-color; color:$tabs-navigation-active-font-color; }
+        &.active a {
+          background: {
+            color: $tabs-navigation-active-bg-color;
+          }
+          color:$tabs-navigation-active-font-color;
+          }
       }
       &.radius {
         dd:first-child, .tab:first-child {
@@ -57,7 +68,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
         }
       }
       &.vertical {
-        dd, .tab {
+        dd, .tab-title {
           position: inherit;
           float: none;
           display: block;
@@ -87,15 +98,18 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
       .tabs {
         &.vertical {
           width: 20%;
+          max-width: 20%;
           float: $default-float;
-          margin-bottom: $tabs-vertical-navigation-margin-bottom;
+          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;
         }
       }
     }

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

@@ -4,8 +4,6 @@
 
 @import "global";
 
-
-
 //
 // @name _thumbs.scss
 // @dependencies _globals.scss
@@ -20,8 +18,8 @@ $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: #fff !default;
-$thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !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

data/lib/TokiServer/bower_components/foundation/scss/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/lib/TokiServer/bower_components/foundation/scss/foundation/components/_tooltips.scss

@@ -9,26 +9,27 @@
 //
 $include-html-tooltip-classes: $include-html-classes !default;
 
-$has-tip-border-bottom: dotted 1px #ccc !default;
+$has-tip-border-bottom: dotted 1px $iron !default;
 $has-tip-font-weight: $font-weight-bold !default;
-$has-tip-font-color: #333 !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: #333 !default;
+$tooltip-bg: $oil !default;
 $tooltip-font-size: rem-calc(14) !default;
 $tooltip-font-weight: $font-weight-normal !default;
-$tooltip-font-color: #fff !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: #777 !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 {
@@ -53,12 +54,12 @@ $tooltip-pip-size: 5px !default;
     .tooltip {
       display: none;
       position: absolute;
-      z-index: 999;
+      z-index: 1006;
       font-weight: $tooltip-font-weight;
       font-size: $tooltip-font-size;
       line-height: $tooltip-line-height;
       padding: $tooltip-padding;
-      max-width: 85%;
+      max-width: $tooltip-max-width;
       #{$default-float}: 50%;
       width: 100%;
       color: $tooltip-font-color;
@@ -73,6 +74,7 @@ $tooltip-pip-size: 5px !default;
         border: solid $tooltip-pip-size;
         border-color: transparent transparent $tooltip-bg transparent;
         top: -($tooltip-pip-size * 2);
+        pointer-events: none;
 
         &.rtl {
           left: auto;

data/lib/TokiServer/bower_components/foundation/scss/foundation/components/_top-bar.scss

@@ -12,7 +12,7 @@
 $include-html-top-bar-classes: $include-html-classes !default;
 
 // Background color for the top bar
-$topbar-bg-color: #333 !default;
+$topbar-bg-color: $oil !default;
 $topbar-bg: $topbar-bg-color !default;
 
 // Height and margin
@@ -24,47 +24,49 @@ $topbar-title-weight: $font-weight-normal !default;
 $topbar-title-font-size: rem-calc(17) !default;
 
 // Style the top bar dropdown elements
-$topbar-dropdown-bg: #333 !default;
-$topbar-dropdown-link-color: #fff !default;
-$topbar-dropdown-link-bg: #333 !default;
+$topbar-dropdown-bg: $oil !default;
+$topbar-dropdown-link-color: $white !default;
+$topbar-dropdown-link-bg: $oil !default;
 $topbar-dropdown-link-weight: $font-weight-normal !default;
 $topbar-dropdown-toggle-size: 5px !default;
-$topbar-dropdown-toggle-color: #fff !default;
+$topbar-dropdown-toggle-color: $white !default;
 $topbar-dropdown-toggle-alpha: 0.4 !default;
 
 // Set the link colors and styles for top-level nav
-$topbar-link-color: #fff !default;
-$topbar-link-color-hover: #fff !default;
-$topbar-link-color-active: #fff !default;
-$topbar-link-color-active-hover: #fff !default;
+$topbar-link-color: $white !default;
+$topbar-link-color-hover: $white !default;
+$topbar-link-color-active: $white !default;
+$topbar-link-color-active-hover: $white !default;
 $topbar-link-weight: $font-weight-normal !default;
 $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
 $topbar-link-bg: $topbar-bg !default;
 $topbar-link-bg-hover: #272727 !default;
+$topbar-link-bg-color-hover: $charcoal !default;
 $topbar-link-bg-active: $primary-color !default;
 $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
 $topbar-link-font-family: $body-font-family !default;
 $topbar-link-text-transform: none !default;
 $topbar-link-padding: $topbar-height / 3 !default;
-
+$topbar-back-link-size: rem-calc(18) !default;
+$topbar-link-dropdown-padding: 20px;
 $topbar-button-font-size: 0.75rem !default;
 $topbar-button-top: 7px !default;
 
-$topbar-dropdown-label-color: #777 !default;
+$topbar-dropdown-label-color: $monsoon !default;
 $topbar-dropdown-label-text-transform: uppercase !default;
 $topbar-dropdown-label-font-weight: $font-weight-bold !default;
 $topbar-dropdown-label-font-size: rem-calc(10) !default;
-$topbar-dropdown-label-bg: #333 !default;
+$topbar-dropdown-label-bg: $oil !default;
 
 // Top menu icon styles
 $topbar-menu-link-transform: uppercase !default;
 $topbar-menu-link-font-size: rem-calc(13) !default;
 $topbar-menu-link-weight: $font-weight-bold !default;
-$topbar-menu-link-color: #fff !default;
-$topbar-menu-icon-color: #fff !default;
-$topbar-menu-link-color-toggled: #888 !default;
-$topbar-menu-icon-color-toggled: #888 !default;
+$topbar-menu-link-color: $white !default;
+$topbar-menu-icon-color: $white !default;
+$topbar-menu-link-color-toggled: $jumbo !default;
+$topbar-menu-icon-color-toggled: $jumbo !default;
 
 // Transitions and breakpoint styles
 $topbar-transition-speed: 300ms !default;
@@ -159,16 +161,21 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
       form,
       input { margin-bottom: 0; }
 
-      input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
+      input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
 
       .button, button {
-        padding-top: .45rem;
-        padding-bottom: .35rem;
+        padding-top: .35rem + rem-calc(1);
+        padding-bottom: .35rem + rem-calc(1);
         margin-bottom: 0;
         font-size: $topbar-button-font-size;
           // position: relative;
           // top: -1px;
-
+        
+        // Corrects a slight misalignment when put next to an input field
+        @media #{$small-only} {
+          position: relative;
+          top: -1px;
+        }
       }
 
       // Title Area
@@ -216,10 +223,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         // Adding the class "menu-icon" will add the 3-line icon people love and adore.
         &.menu-icon {
-          #{$opposite-direction}: $topbar-link-padding;
           top: 50%;
           margin-top: -16px;
-          padding-#{$default-float}: 40px;
 
           a {
             @if $text-direction == rtl {
@@ -227,11 +232,11 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
             height: 34px;
             line-height: 33px;
-            padding: 0;
+            padding: 0 $topbar-link-padding+25 0 $topbar-link-padding;
             color: $topbar-menu-link-color;
             position: relative;
 
-            &::after {
+            & {
               // @include hamburger icon
               //
               // We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
@@ -243,8 +248,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               // $color - icon color
               // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
               // $offcanvas - Set to false of @include in topbar
-              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false );
-              #{$opposite-direction}: 0;
+              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false);
             }
           }
         }
@@ -268,9 +272,6 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           }
         }
       }
-
-
-
     }
 
     // Right and Left Navigation that stacked by default
@@ -335,7 +336,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         // Apply the hover link color when it has that class
         &:hover:not(.has-form) > a {
-          background: $topbar-link-bg-hover;
+          background-color: $topbar-link-bg-color-hover;
+          @if ($topbar-link-bg-hover) {
+            background: $topbar-link-bg-hover;
+          }
           color: $topbar-link-color-hover;
 
         }
@@ -403,13 +407,16 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
           }
 
-          &.title h5 {
+          &.title h5, &.parent-link {
+            // Back Button
             margin-bottom: 0;
             margin-top: 0;
+            font-size: $topbar-back-link-size;
             a {
               color: $topbar-link-color;
-              line-height: $topbar-height / 2;
+              // line-height: $topbar-height / 2;
               display: block;
+              &:hover { background:none; }
             }
           }
           &.has-form { padding: 8px $topbar-link-padding; }
@@ -477,7 +484,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         li {
           &.hover {
             > a:not(.button) {
-              background: $topbar-link-bg-hover;
+              background-color: $topbar-link-bg-color-hover;
+              @if ($topbar-link-bg-hover) {
+                background: $topbar-link-bg-hover;
+              }
               color: $topbar-link-color-hover;
             }
           }
@@ -486,7 +496,12 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               padding: 0 $topbar-link-padding;
               line-height: $topbar-height;
               background: $topbar-link-bg;
-              &:hover { background: $topbar-link-bg-hover; }
+              &:hover {
+                background-color: $topbar-link-bg-color-hover;
+                @if ($topbar-link-bg-hover) {
+                  background: $topbar-link-bg-hover;
+                }
+              }
             }
           }
           &.active:not(.has-form) {
@@ -495,7 +510,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               line-height: $topbar-height;
               color: $topbar-link-color-active;
               background: $topbar-link-bg-active;
-              &:hover { background: $topbar-link-bg-active-hover; }
+              &:hover {
+                background: $topbar-link-bg-active-hover;
+                color: $topbar-link-color-active-hover;
+              }
             }
           }
         }
@@ -505,7 +523,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           @if($topbar-arrows){
 
             & > a {
-              padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
+              padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
               &:after {
                 @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                 margin-top: -($topbar-dropdown-toggle-size / 2);
@@ -526,6 +544,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               @include topbar-show-dropdown();
             }
           }
+          > a:focus + .dropdown {
+            @include topbar-show-dropdown();
+          }
 
           .dropdown li.has-dropdown {
             & > a {
@@ -557,13 +578,19 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               background: $topbar-dropdown-link-bg;
             }
 
-            &:not(.has-form) a:not(.button) {
-              color: $topbar-dropdown-link-color;
-              background: $topbar-dropdown-link-bg;
-            }
-            &:not(.has-form):hover > a:not(.button) {
-              color: $topbar-link-color-hover;
-              background: $topbar-link-bg-hover;
+            &:not(.has-form):not(.active) {
+              & > a:not(.button) {
+                color: $topbar-dropdown-link-color;
+                background: $topbar-dropdown-link-bg;
+              }
+
+              &:hover > a:not(.button) {
+                color: $topbar-link-color-hover;
+                background-color: $topbar-link-bg-color-hover;
+                @if ($topbar-link-bg-hover) {
+                  background: $topbar-link-bg-hover;
+                }
+              }
             }
 
             label {
@@ -620,7 +647,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         ul li {
           // Apply the hover link color when it has that class
           &:hover > a {
-            background: $topbar-link-bg-hover;
+            background-color: $topbar-link-bg-color-hover;
+            @if ($topbar-link-bg-hover) {
+              background: $topbar-link-bg-hover;
+            }
             color: $topbar-link-color-hover;
           }
 
@@ -637,6 +667,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               @include topbar-show-dropdown();
             }
           }
+          > a:focus + .dropdown {
+            @include topbar-show-dropdown();
+          }
         }
       }
     }