TokiCLI 0.2.1 → 0.3.0

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

@@ -11,9 +11,6 @@
 // styles get applied to [data-mysite-plugin], etc
 $namespace: false !default;
 
-// Control the inclusion of experimental properties
-$experimental: true !default;
-
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
 // for compatibility with browser-based text zoom or user-set defaults.
 
@@ -23,22 +20,12 @@ $experimental: true !default;
 $base-font-size: 100% !default;
 
 // $base-line-height is 24px while $base-font-size is 16px
-$base-line-height: 150% !default;
+$base-line-height: 1.5 !default;
 
 //
 // Global Foundation Mixins
 //
 
-// @mixins
-//
-// We use this to optionally include experimental or 
-// explicitly vendor prefixed properties
-@mixin experimental() {
-  @if $experimental {
-    @content;
-  }
-}
-
 // @mixins
 //
 // We use this to control border radius.
@@ -55,9 +42,13 @@ $base-line-height: 150% !default;
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
   @if ($side == left or $side == right) {
+    -webkit-border-bottom-#{$side}-radius: $radius;
+    -webkit-border-top-#{$side}-radius: $radius;
     border-bottom-#{$side}-radius: $radius;
     border-top-#{$side}-radius: $radius;
   } @else {
+    -webkit-#{$side}-left-radius: $radius;
+    -webkit-#{$side}-right-radius: $radius;
     border-#{$side}-left-radius: $radius;
     border-#{$side}-right-radius: $radius;
   }
@@ -135,12 +126,12 @@ $base-line-height: 150% !default;
 // $hover-color - icon color during hover
 // $offcanvas - Set to true of @include in offcanvas
 @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
-  span:after {
-    content: '';
+  span::after {
+    content: "";
     position: absolute;
     display: block;
     height: 0;
-    
+
     @if $offcanvas {
       @if $top {
         top: $top;
@@ -156,7 +147,12 @@ $base-line-height: 150% !default;
     	  left: ($tabbar-menu-icon-width - $width)/2;
     	}
     }
-    	
+    @else {
+      top: 50%;
+      margin-top: -($width/2);
+      #{$opposite-direction}: $topbar-link-padding;
+    }
+
     box-shadow:
       0 0px 0 $thickness $color,
       0 $gap + $thickness 0 $thickness $color,
@@ -224,6 +220,34 @@ $base-line-height: 150% !default;
   clip: auto;
 }
 
+// We use these as default colors throughout
+$primary-color: #008CBA !default;   // bondi-blue
+$secondary-color: #e7e7e7 !default; // white-lilac
+$alert-color: #f04124 !default;     // cinnabar
+$success-color: #43AC6A !default;   // sea-green
+$warning-color: #f08a24 !default;   // carrot
+$info-color: #a0d3e8 !default;      // cornflower
+
+$white         : #FFFFFF !default;
+$ghost         : #FAFAFA !default;
+$snow          : #F9F9F9 !default;
+$vapor         : #F6F6F6 !default;
+$white-smoke   : #F5F5F5 !default;
+$silver        : #EFEFEF !default;
+$smoke         : #EEEEEE !default;
+$gainsboro     : #DDDDDD !default;
+$iron          : #CCCCCC !default;
+$base          : #AAAAAA !default;
+$aluminum      : #999999 !default;
+$jumbo         : #888888 !default;
+$monsoon       : #777777 !default;
+$steel         : #666666 !default;
+$charcoal      : #555555 !default;
+$tuatara       : #444444 !default;
+$oil           : #333333 !default;
+$jet           : #222222 !default;
+$black         : #000000 !default;
+
 // We use these to define default font weights
 $font-weight-normal: normal !default;
 $font-weight-bold: bold !default;
@@ -249,13 +273,6 @@ $opposite-direction: right !default;
   $default-float: right;
   $opposite-direction: left;
 }
-// We use these as default colors throughout
-$primary-color: #008CBA !default;
-$secondary-color: #e7e7e7 !default;
-$alert-color: #f04124 !default;
-$success-color: #43AC6A !default;
-$warning-color: #f08a24 !default;
-$info-color: #a0d3e8 !default;
 
 // We use these to make sure border radius matches unless we want it different.
 $global-radius: 3px !default;
@@ -308,6 +325,7 @@ $large: $large-up;
 
 
 //We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+$cursor-auto-value: auto !default;
 $cursor-crosshair-value: crosshair !default;
 $cursor-default-value: default !default;
 $cursor-pointer-value: pointer !default;
@@ -320,11 +338,11 @@ $cursor-text-value: text !default;
   // Meta styles are included in all builds, as they are a dependancy of the Javascript.
   // Used to provide media query values for javascript components.
   // Forward slash placed around everything to convince PhantomJS to read the value.
-  
+
   meta.foundation-version {
-    font-family: "/5.2.3/";
+    font-family: "/5.4.3/";
   }
-  
+
   meta.foundation-mq-small {
     font-family: "/" + unquote($small-up) + "/";
     width: lower-bound($small-range);
@@ -378,9 +396,9 @@ $cursor-text-value: text !default;
       font-family: $body-font-family;
       font-weight: $body-font-weight;
       font-style: $body-font-style;
-      line-height: 1; // Set to $base-line-height to take on browser default of 150%
+      line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
       position: relative;
-      cursor: $cursor-default-value;
+      cursor: $cursor-auto-value;
     }
 
   a:hover { cursor: $cursor-pointer-value; }

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

@@ -13,6 +13,8 @@ $include-xl-html-grid-classes: false !default;
 $row-width: rem-calc(1000) !default;
 $total-columns: 12 !default;
 
+$last-child-float: $opposite-direction !default;
+
 //
 // Grid Functions
 //
@@ -140,7 +142,7 @@ $total-columns: 12 !default;
   @if $center {
     margin-#{$default-float}: auto;
     margin-#{$opposite-direction}: auto;
-    float: none !important;
+    float: none;
   }
 
   // If offset, calculate appropriate margins
@@ -170,8 +172,6 @@ $total-columns: 12 !default;
     .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
   }
 
-  [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
-  [class*="column"] + [class*="column"].end { float: $default-float; }
 
 
   @for $i from 0 through $total-columns - 1 {
@@ -192,7 +192,19 @@ $total-columns: 12 !default;
   .columns.#{$size}-uncentered {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
-    float: $default-float !important;
+    float: $default-float;
+  }
+
+  // Fighting [class*="column"] + [class*="column"]:last-child
+  .column.#{$size}-centered:last-child,
+  .columns.#{$size}-centered:last-child{
+    float: none;
+  }
+
+  // Fighting .column.<previous-size>-centered:last-child
+  .column.#{$size}-uncentered:last-child,
+  .columns.#{$size}-uncentered:last-child {
+    float: $default-float;
   }
 
   .column.#{$size}-uncentered.opposite,
@@ -221,6 +233,9 @@ $total-columns: 12 !default;
     .column,
     .columns { @include grid-column($columns:$total-columns); }
 
+    [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
     @media #{$small-up} {
       @include grid-html-classes($size:small);
     }

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

@@ -0,0 +1,293 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+
+// @name
+// @dependencies _global.scss
+
+$include-html-icon-bar-classes: $include-html-classes !default;
+
+// @variables
+
+// We use these to style the icon-bar and items
+$icon-bar-bg: $oil !default;
+$icon-bar-font-color: $white !default;
+$icon-bar-font-size: 1rem !default;
+$icon-bar-hover-color: $primary-color !default;
+$icon-bar-icon-color: $white !default;
+$icon-bar-icon-size: 1.875rem !default;
+$icon-bar-image-width: 1.875rem !default;
+$icon-bar-image-height: 1.875rem !default;
+$icon-bar-active-color: $primary-color !default;
+$icon-bar-item-padding: 1.25rem !default;
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our Icon bar element.
+//
+@mixin icon-bar-base() {
+ 
+ 	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	& > * {
+		text-align: center;
+		font-size: $icon-bar-font-size;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: $icon-bar-item-padding;
+		float: left;
+
+		i, img { 
+			display: block;
+			margin: 0 auto; 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-bar-icon-size;
+			vertical-align: middle;
+		}
+
+		img {
+			width: $icon-bar-image-width;
+			height: $icon-bar-image-height;
+		}
+	}
+
+	&.label-right > * {
+
+		i, img { 
+			margin: 0 .0625rem 0 0; 
+			display: inline-block;
+
+			& + label {
+				margin-top: 0;
+			}
+		}
+
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right > * {
+		text-align: left;
+	}
+
+	&.vertical, &.small-vertical{
+		height: 100%;
+		width: auto;
+
+		.item {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+
+	&.medium-vertical {
+		@media #{$medium-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+	&.large-vertical {
+		@media #{$large-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+}
+
+// We use this mixin to create the size styles for icon bars.
+@mixin icon-bar-size(
+	$padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height) {
+
+	& > * {
+		font-size: $font-size;
+		padding: $padding;
+
+		i, img { 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-size;
+		}
+
+		img {
+			width: $image-width;
+			height: $image-height;
+		}
+	}
+
+}
+
+@mixin icon-bar-style(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $base-style:true) {
+
+	@if $base-style {
+	
+		background: $bar-bg;
+
+		& > * {
+
+			&:hover { background: $bar-hover-color; }
+
+			label { color: $bar-font-color; }
+
+			i {
+				color: $bar-icon-color;
+			}
+		}
+	}
+
+}
+
+// We use this to quickly create icon bars with a single mixin
+// $height - The overall calculated height of the icon bar (horizontal)
+// $bar-bg - the background color of the bar
+// $bar-font-color - the font color
+// $bar-hover-color - okay these are pretty obvious variables
+// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
+// $bar-active-color - the color of an active / hover state
+// $base-style - Apply base styles? Default: true.
+
+@mixin icon-bar(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height,
+  $base-style:true) {
+    @include icon-bar-base();
+    @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style);
+}
+
+@include exports("icon-bar") {
+  @if $include-html-icon-bar-classes {
+    .icon-bar {
+      @include icon-bar;
+    }
+  }
+}
+
+@if $include-html-icon-bar-classes {
+
+	// toolbar styles
+
+	.icon-bar {
+
+		// Counts
+
+		&.two-up {
+			.item { width: 50%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.three-up {
+			.item { width: 33.3333%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.four-up {
+			.item { width: 25%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.five-up {
+			.item { width: 20%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.six-up {
+			.item { width: 16.66667%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+	}
+}