foundation-rails 5.2.3.0 → 5.3.0.0

data/vendor/assets/stylesheets/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.

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

@@ -0,0 +1,215 @@
+// 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: #ddd !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: #fff !default;
+$switch-paddle-transition-speed: .15s !default;
+$switch-paddle-transition-ease: ease-out !default;
+$switch-active-color: $primary-color;
+
+
+//
+// @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 {
+    display: none;
+
+    & + 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 0.15s ease-out;
+    -moz-transition: left 0.15s ease-out;
+    transition: left 0.15s ease-out;
+  }
+
+  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) {
+    @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 {
+      div.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); }
+        }
+
+      }
+  }
+}

data/vendor/assets/stylesheets/foundation/components/_tabs.scss

@@ -57,7 +57,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
         }
       }
       &.vertical {
-        dd, .tab {
+        dd, .tab-title {
           position: inherit;
           float: none;
           display: block;

data/vendor/assets/stylesheets/foundation/components/_toolbar.scss

@@ -0,0 +1,67 @@
+/* toolbar styles */
+
+.toolbar {
+	background: #333;
+	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(#fff, 0.1);
+		}
+	}
+}		
+		
+.toolbar .tab-content {
+	font-size: 16px;
+	text-align: center;
+
+	label { color: #ccc; }
+
+	i {
+		font-size: 30px;
+		display: block;
+		margin: 0 auto;
+		color: #ccc;
+		vertical-align: middle;
+	}
+
+	img {
+		width: 30px;
+		height: 30px;
+		display: block;
+		margin: 0 auto;
+	}
+}

data/vendor/assets/stylesheets/foundation/components/_tooltips.scss

@@ -29,6 +29,7 @@ $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 {
@@ -58,7 +59,7 @@ $tooltip-pip-size: 5px !default;
       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;

data/vendor/assets/stylesheets/foundation/components/_top-bar.scss

@@ -42,6 +42,7 @@ $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: #555555 !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;
@@ -216,10 +217,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 +226,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 +242,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);
             }
           }
         }
@@ -335,7 +333,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;
 
         }
@@ -477,7 +478,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 +490,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) {
@@ -563,7 +572,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
             &:not(.has-form):hover > a:not(.button) {
               color: $topbar-link-color-hover;
-              background: $topbar-link-bg-hover;
+              background-color: $topbar-link-bg-color-hover;
+              @if ($topbar-link-bg-hover) {
+                background: $topbar-link-bg-hover;
+              }
             }
 
             label {
@@ -620,7 +632,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;
           }
 

data/vendor/assets/stylesheets/foundation/components/_type.scss

@@ -445,6 +445,8 @@ $align-class-breakpoints:
       h2 { font-size: $h2-font-size; }
       h3 { font-size: $h3-font-size; }
       h4 { font-size: $h4-font-size; }
+      h5 { font-size: $h5-font-size; }
+      h6 { font-size: $h6-font-size; }
     }
 
     // Only include these styles if you want them.

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: foundation-rails
 version: !ruby/object:Gem::Version
-  version: 5.2.3.0
+  version: 5.3.0.0
 platform: ruby
 authors:
 - ZURB
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-29 00:00:00.000000000 Z
+date: 2014-06-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -92,6 +92,7 @@ files:
 - lib/foundation/rails/templates/application.html.slim
 - lib/foundation/rails/version.rb
 - test/dummy/.gitignore
+- test/dummy/.ruby-version
 - test/dummy/Gemfile
 - test/dummy/README.rdoc
 - test/dummy/Rakefile
@@ -150,6 +151,7 @@ files:
 - test/dummy/vendor/assets/javascripts/.keep
 - test/dummy/vendor/assets/stylesheets/.keep
 - update-gem.sh
+- vendor/assets/_settings.scss
 - vendor/assets/javascripts/foundation.js
 - vendor/assets/javascripts/foundation/foundation.abide.js
 - vendor/assets/javascripts/foundation/foundation.accordion.js
@@ -185,6 +187,8 @@ files:
 - vendor/assets/stylesheets/foundation/components/_forms.scss
 - vendor/assets/stylesheets/foundation/components/_global.scss
 - vendor/assets/stylesheets/foundation/components/_grid.scss
+- vendor/assets/stylesheets/foundation/components/_icon-bar.scss
+- vendor/assets/stylesheets/foundation/components/_iconbar.scss
 - vendor/assets/stylesheets/foundation/components/_inline-lists.scss
 - vendor/assets/stylesheets/foundation/components/_joyride.scss
 - vendor/assets/stylesheets/foundation/components/_keystrokes.scss
@@ -197,14 +201,16 @@ files:
 - vendor/assets/stylesheets/foundation/components/_pricing-tables.scss
 - vendor/assets/stylesheets/foundation/components/_progress-bars.scss
 - vendor/assets/stylesheets/foundation/components/_range-slider.scss
+- vendor/assets/stylesheets/foundation/components/_reveal-new.scss
 - vendor/assets/stylesheets/foundation/components/_reveal.scss
 - vendor/assets/stylesheets/foundation/components/_side-nav.scss
 - vendor/assets/stylesheets/foundation/components/_split-buttons.scss
 - vendor/assets/stylesheets/foundation/components/_sub-nav.scss
-- vendor/assets/stylesheets/foundation/components/_switch.scss
+- vendor/assets/stylesheets/foundation/components/_switches.scss
 - vendor/assets/stylesheets/foundation/components/_tables.scss
 - vendor/assets/stylesheets/foundation/components/_tabs.scss
 - vendor/assets/stylesheets/foundation/components/_thumbs.scss
+- vendor/assets/stylesheets/foundation/components/_toolbar.scss
 - vendor/assets/stylesheets/foundation/components/_tooltips.scss
 - vendor/assets/stylesheets/foundation/components/_top-bar.scss
 - vendor/assets/stylesheets/foundation/components/_type.scss
@@ -236,6 +242,7 @@ specification_version: 4
 summary: ZURB Foundation on Sass/Compass
 test_files:
 - test/dummy/.gitignore
+- test/dummy/.ruby-version
 - test/dummy/Gemfile
 - test/dummy/README.rdoc
 - test/dummy/Rakefile