zurb-foundation 4.1.6 → 4.2.0

data/js/foundation/foundation.tooltips.js

@@ -6,13 +6,14 @@
   Foundation.libs.tooltips = {
     name: 'tooltips',
 
-    version : '4.1.3',
+    version : '4.2.0',
 
     settings : {
       selector : '.has-tip',
       additionalInheritableClasses : [],
       tooltipClass : '.tooltip',
       appendTo: 'body',
+      'disable-for-touch': false,
       tipTemplate : function (selector, content) {
         return '<span data-selector="' + selector + '" class="' 
           + Foundation.libs.tooltips.settings.tooltipClass.substring(1) 
@@ -23,11 +24,13 @@
     cache : {},
 
     init : function (scope, method, options) {
+      Foundation.inherit(this, 'data_options');
       var self = this;
-      this.scope = scope || this.scope;
 
       if (typeof method === 'object') {
         $.extend(true, this.settings, method);
+      } else if (typeof options !== 'undefined') {
+        $.extend(true, this.settings, options);
       }
 
       if (typeof method != 'string') {
@@ -35,9 +38,12 @@
           $(this.scope)
             .on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip', 
               '[data-tooltip]', function (e) {
-              e.preventDefault();
-              $(self.settings.tooltipClass).hide();
-              self.showOrCreateTip($(this));
+              var settings = $.extend({}, self.settings, self.data_options($(this)));
+              if (!settings['disable-for-touch']) {
+                e.preventDefault();
+                $(settings.tooltipClass).hide();
+                self.showOrCreateTip($(this));
+              }
             })
             .on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip', 
               this.settings.tooltipClass, function (e) {
@@ -50,7 +56,7 @@
               '[data-tooltip]', function (e) {
               var $this = $(this);
 
-              if (e.type === 'mouseover' || e.type === 'mouseenter') {
+              if (/enter|over/i.test(e.type)) {
                 self.showOrCreateTip($this);
               } else if (e.type === 'mouseout' || e.type === 'mouseleave') {
                 self.hide($this);
@@ -80,7 +86,7 @@
           tip = null;
 
       if (selector) {
-        tip = $('span[data-selector=' + selector + ']' + this.settings.tooltipClass);
+        tip = $('span[data-selector="' + selector + '"]' + this.settings.tooltipClass);
       }
 
       return (typeof tip === 'object') ? tip : false;
@@ -195,6 +201,8 @@
       $(this.settings.tooltipClass).each(function (i) {
         $('[data-tooltip]').get(i).attr('title', $(this).text());
       }).remove();
-    }
+    },
+
+    reflow : function () {}
   };
 }(Foundation.zj, this, this.document));

data/js/foundation/foundation.topbar.js

@@ -6,32 +6,36 @@
   Foundation.libs.topbar = {
     name : 'topbar',
 
-    version : '4.1.2',
+    version : '4.2.0',
 
     settings : {
       index : 0,
       stickyClass : 'sticky',
       custom_back_text: true,
       back_text: 'Back',
+      is_hover: true,
+      scrolltop : true, // jump to top when sticky nav menu toggle is clicked
       init : false
     },
 
     init : function (section, method, options) {
+      Foundation.inherit(this, 'data_options');
       var self = this;
 
       if (typeof method === 'object') {
         $.extend(true, this.settings, method);
+      } else if (typeof options !== 'undefined') {
+        $.extend(true, this.settings, options);
       }
 
       if (typeof method != 'string') {
 
-        $('.top-bar').each(function () {
+        $('.top-bar, [data-topbar]').each(function () {
+          $.extend(true, self.settings, self.data_options($(this)));
           self.settings.$w = $(window);
           self.settings.$topbar = $(this);
           self.settings.$section = self.settings.$topbar.find('section');
           self.settings.$titlebar = self.settings.$topbar.children('ul').first();
-
-
           self.settings.$topbar.data('index', 0);
 
           var breakpoint = $("<div class='top-bar-js-breakpoint'/>").insertAfter(self.settings.$topbar);
@@ -58,24 +62,17 @@
 
     events : function () {
       var self = this;
-      var offst = this.outerHeight($('.top-bar'));
+      var offst = this.outerHeight($('.top-bar, [data-topbar]'));
       $(this.scope)
-        .on('click.fndtn.topbar', '.top-bar .toggle-topbar', function (e) {
-          var topbar = $(this).closest('.top-bar'),
+        .off('.fndtn.topbar')
+        .on('click.fndtn.topbar', '.top-bar .toggle-topbar, [data-topbar] .toggle-topbar', function (e) {
+          var topbar = $(this).closest('.top-bar, [data-topbar]'),
               section = topbar.find('section, .section'),
               titlebar = topbar.children('ul').first();
 
-          if (!topbar.data('height')) self.largestUL();
-
           e.preventDefault();
 
           if (self.breakpoint()) {
-            topbar
-              .toggleClass('expanded')
-              .css('min-height', '');
-          }
-
-          if (!topbar.hasClass('expanded')) {
             if (!self.rtl) {
               section.css({left: '0%'});
               section.find('>.name').css({left: '100%'});
@@ -83,9 +80,16 @@
               section.css({right: '0%'});
               section.find('>.name').css({right: '100%'});
             }
+
             section.find('li.moved').removeClass('moved');
             topbar.data('index', 0);
 
+            topbar
+              .toggleClass('expanded')
+              .css('min-height', '');
+          }
+
+          if (!topbar.hasClass('expanded')) {
             if (topbar.hasClass('fixed')) {
               topbar.parent().addClass('fixed');
               topbar.removeClass('fixed');
@@ -95,26 +99,63 @@
             topbar.parent().removeClass('fixed');
             topbar.addClass('fixed');
             $('body').css('padding-top','0');
-            window.scrollTo(0,0);
+
+            if (self.settings.scrolltop) {
+              window.scrollTo(0,0);
+            }
           }
         })
 
-        .on('click.fndtn.topbar', '.top-bar .has-dropdown>a', function (e) {
-          var topbar = $(this).closest('.top-bar'),
-              section = topbar.find('section, .section'),
-              titlebar = topbar.children('ul').first(),
-              dropdownHeight = $(this).next('.dropdown').outerHeight();
+        .on('mouseenter mouseleave', '.top-bar li', function (e) {
+          if (!self.settings.is_hover) return;
+
+          if (/enter|over/i.test(e.type)) {
+            $(this).addClass('hover');
+          } else {
+            $(this).removeClass('hover');
+          }
+        })
+
+        .on('click.fndtn.topbar', '.top-bar li.has-dropdown', function (e) {
+          if (self.breakpoint()) return;
+
+          var li = $(this),
+              target = $(e.target),
+              topbar = li.closest('[data-topbar], .top-bar'),
+              is_hover = topbar.data('topbar');
+
+          if (self.settings.is_hover && !Modernizr.touch) return;
 
-          if (Modernizr.touch || self.breakpoint()) {
+          e.stopImmediatePropagation();
+
+          if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
             e.preventDefault();
           }
 
+          if (li.hasClass('hover')) {
+            li
+              .removeClass('hover')
+              .find('li')
+              .removeClass('hover');
+          } else {
+            li.addClass('hover');
+          }
+        })
+
+        .on('click.fndtn.topbar', '.top-bar .has-dropdown>a, [data-topbar] .has-dropdown>a', function (e) {
           if (self.breakpoint()) {
+            e.preventDefault();
+
             var $this = $(this),
+                topbar = $this.closest('.top-bar, [data-topbar]'),
+                section = topbar.find('section, .section'),
+                titlebar = topbar.children('ul').first(),
+                dropdownHeight = $this.next('.dropdown').outerHeight(),
                 $selectedLi = $this.closest('li');
 
             topbar.data('index', topbar.data('index') + 1);
             $selectedLi.addClass('moved');
+
             if (!self.rtl) {
               section.css({left: -(100 * topbar.data('index')) + '%'});
               section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
@@ -123,34 +164,43 @@
               section.find('>.name').css({right: 100 * topbar.data('index') + '%'});
             }
 
-            $('.top-bar').css('min-height', dropdownHeight);
-
-            $this.siblings('ul')
-              .height(topbar.data('height') + self.outerHeight(titlebar, true));
-            topbar
-              .css('min-height', topbar.data('height') + self.outerHeight(titlebar, true) * 2)
+            topbar.css('min-height', self.height($this.siblings('ul')) + self.outerHeight(titlebar, true));
           }
         });
 
       $(window).on('resize.fndtn.topbar', function () {
         if (!self.breakpoint()) {
-          $('.top-bar')
+          $('.top-bar, [data-topbar]')
             .css('min-height', '')
-            .removeClass('expanded');
+            .removeClass('expanded')
+            .find('li')
+            .removeClass('hover');
         }
       }.bind(this));
 
+      $('body').on('click.fndtn.topbar', function (e) {
+        var parent = $(e.target).closest('[data-topbar], .top-bar');
+
+        if (parent.length > 0) {
+          return;
+        }
+
+        $('.top-bar li, [data-topbar] li').removeClass('hover');
+      });
+
       // Go up a level on Click
-      $(this.scope).on('click.fndtn', '.top-bar .has-dropdown .back', function (e) {
+      $(this.scope).on('click.fndtn', '.top-bar .has-dropdown .back, [data-topbar] .has-dropdown .back', function (e) {
         e.preventDefault();
 
         var $this = $(this),
-            topbar = $this.closest('.top-bar'),
+            topbar = $this.closest('.top-bar, [data-topbar]'),
+            titlebar = topbar.children('ul').first(),
             section = topbar.find('section, .section'),
             $movedLi = $this.closest('li.moved'),
             $previousLevelUl = $movedLi.parent();
 
         topbar.data('index', topbar.data('index') - 1);
+
         if (!self.rtl) {
           section.css({left: -(100 * topbar.data('index')) + '%'});
           section.find('>.name').css({left: 100 * topbar.data('index') + '%'});
@@ -161,6 +211,8 @@
 
         if (topbar.data('index') === 0) {
           topbar.css('min-height', 0);
+        } else {
+          topbar.css('min-height', self.height($previousLevelUl) + self.outerHeight(titlebar, true));
         }
 
         setTimeout(function () {
@@ -181,7 +233,13 @@
       this.settings.$section.find('.has-dropdown>a').each(function () {
         var $link = $(this),
             $dropdown = $link.siblings('.dropdown'),
-            $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');
+            url = $link.attr('href');
+
+        if (url && url.length > 1) {
+          var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li><li><a class="parent-link js-generated" href="' + url + '">' + $link.text() +'</a></li>');
+        } else {
+          var $titleLi = $('<li class="title back js-generated"><h5><a href="#"></a></h5></li>');
+        }
 
         // Copy link to subnav
         if (self.settings.custom_back_text == true) {
@@ -199,21 +257,13 @@
       this.sticky();
     },
 
-    largestUL : function () {
-      var uls = this.settings.$topbar.find('section ul ul'),
-          largest = uls.first(),
-          total = 0,
+    height : function (ul) {
+      var total = 0,
           self = this;
 
-      uls.each(function () {
-        if ($(this).children('li').length > largest.children('li').length) {
-          largest = $(this);
-        }
-      });
-
-      largest.children('li').each(function () { total += self.outerHeight($(this), true); });
+      ul.find('> li').each(function () { total += self.outerHeight($(this), true); });
 
-      this.settings.$topbar.data('height', total);
+      return total;
     },
 
     sticky : function () {
@@ -240,6 +290,8 @@
     off : function () {
       $(this.scope).off('.fndtn.topbar');
       $(window).off('.fndtn.topbar');
-    }
+    },
+
+    reflow : function () {}
   };
 }(Foundation.zj, this, this.document));

data/js/foundation/index.js

@@ -13,4 +13,5 @@
 =require foundation/foundation.section
 =require foundation/foundation.tooltips
 =require foundation/foundation.topbar
+=require foundation/foundation.interchange
 */

data/lib/foundation/generators/install_generator.rb

@@ -35,9 +35,9 @@ module Foundation
       end
 
       def create_layout
-        if options.haml?||(defined?(Haml) && !options.slim?)
+        if options.haml?||(defined?(Haml) && options.haml?)
           template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
-        elsif options.slim?||(defined?(Slim) && !options.haml?)
+        elsif options.slim?||(defined?(Slim) && options.slim?)
           template 'application.html.slim', "app/views/layouts/#{file_name}.html.slim"
         else
           template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "4.1.6"
+  VERSION = "4.2.0"
 end

data/scss/foundation/_variables.scss

@@ -3,7 +3,7 @@
 //
 
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with brower-based text zoom or user-set defaults.
+// for compatibility with browser-based text zoom or user-set defaults.
 $base-font-size: 100% !default;
 
 // $base-line-height is 24px while $base-font-size is 16px
@@ -21,9 +21,12 @@ $em-base: 16px !default;
   @return $pxWidth / $em-base * 1em;
 }
 
+// Change whether or not you include browser prefixes
+$experimental: true !default;
+
 // Various global styles
 
-// $default-float: left;
+$default-float: left;
 
 // $body-bg: #fff;
 // $body-font-color: #222;
@@ -76,6 +79,7 @@ $em-base: 16px !default;
 // $include-html-clearing-classes: $include-html-classes;
 // $include-html-alert-classes: $include-html-classes;
 // $include-html-nav-classes: $include-html-classes;
+// $include-html-top-bar-classes: $include-html-classes;
 // $include-html-label-classes: $include-html-classes;
 // $include-html-panel-classes: $include-html-classes;
 // $include-html-pricing-classes: $include-html-classes;
@@ -85,9 +89,9 @@ $em-base: 16px !default;
 
 // Media Queries
 
-// $small-screen: emCalc(768px);
-// $medium-screen: emCalc(1280px);
-// $large-screen: emCalc(1440px);
+// $small-screen: 768px;
+// $medium-screen: 1280px;
+// $large-screen: 1440px;
 
 // $screen: "only screen";
 // $small: "only screen and (min-width: #{$small-screen})";
@@ -96,6 +100,15 @@ $em-base: 16px !default;
 // $landscape: "only screen and (orientation: landscape)";
 // $portrait: "only screen and (orientation: portrait)";
 
+//// Cursors
+
+//Custom use example -> $cursor-default-value: url(http://cursors-site.net/path/to/custom/cursor/default.cur),progress;
+
+// $cursor-crosshair-value: "crosshair";
+// $cursor-default-value: "default";
+// $cursor-pointer-value: "pointer";
+// $cursor-help-value: "help";
+
 //
 // Grid Variables
 //
@@ -111,7 +124,7 @@ $em-base: 16px !default;
 // Maximum number of block grid elements per row
 
 // $block-grid-elements: 12;
-// $block-grid-default-spacing: 10px;
+// $block-grid-default-spacing: emCalc(20px);
 
 // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
 
@@ -187,7 +200,8 @@ $em-base: 16px !default;
 // Lists
 
 // $list-style-position: outside;
-// $list-side-margin: emCalc(18px);
+// $list-side-margin: emCalc(20px);
+// $list-nested-margin: emCalc(20px);
 // $definition-list-header-weight: bold;
 // $definition-list-header-margin-bottom: .3em;
 // $definition-list-margin-bottom: emCalc(12px);
@@ -260,6 +274,7 @@ $em-base: 16px !default;
 // $input-border-width: 1px;
 // $input-disabled-bg: #ddd;
 // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+// $input-include-glowing-effect: true;
 
 // Fieldset border and spacing.
 
@@ -294,6 +309,15 @@ $em-base: 16px !default;
 // $input-error-message-font-color: #fff;
 // $input-error-message-font-color-alt: #333;
 
+// Glowing effect of inputs when focused
+
+// $glowing-effect-fade-time: 0.45s;
+// $glowing-effect-color: $input-focus-border-color;
+
+//
+// Button Variables
+//
+
 // Padding for buttons.
 
 // $button-tny: emCalc(7px);
@@ -336,6 +360,14 @@ $em-base: 16px !default;
 
 // $button-disabled-opacity: 0.6;
 
+//
+// Button Groups
+//
+
+// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+
+// $button-bar-margin-opposite: emCalc(10px);
+
 //
 // Dropdown Button Variables
 //
@@ -420,43 +452,44 @@ $em-base: 16px !default;
 // Alert Variables
 //
 
-// Alert padding.
+// Alert padding
 
-// $alert-padding-top: emCalc(11px);
-// $alert-padding-left: $alert-padding-top;
-// $alert-padding-right: $alert-padding-top + emCalc(10px);
-// $alert-padding-bottom: $alert-padding-top + emCalc(1px);
+// $alert-padding-top:                emCalc(11px);
+// $alert-padding-default-float:      $alert-padding-top;
+// $alert-padding-opposite-direction: $alert-padding-top + emCalc(10px);
+// $alert-padding-bottom:             $alert-padding-top + emCalc(1px);
 
-// Text style.
+// Text style
 
-// $alert-font-weight: bold;
-// $alert-font-size: emCalc(14px);
-// $alert-font-color: #fff;
-// $alert-font-color-alt: darken($secondary-color, 60%);
+// $alert-font-weight:                bold;
+// $alert-font-size:                  emCalc(14px);
+// $alert-font-color:                 #fff;
+// $alert-font-color-alt:             darken($secondary-color, 60%);
 
-// Close hover effect.
+// Hover effect
 
-// $alert-function-factor: 10%;
+// $alert-function-factor:            10%;
 
-// Border styles.
+// Border Styles
 
-// $alert-border-style: solid;
-// $alert-border-width: 1px;
-// $alert-border-color: darken($primary-color, $alert-function-factor);
-// $alert-bottom-margin: emCalc(20px);
+// $alert-border-style:               solid;
+// $alert-border-width:               1px;
+// $alert-border-color:               darken($primary-color, $alert-function-factor);
+// $alert-bottom-margin:              emCalc(20px);
 
-// Close buttons
+// Close Button style
 
-// $alert-close-color: #333;
-// $alert-close-position: emCalc(5px);
-// $alert-close-font-size: emCalc(22px);
-// $alert-close-opacity: 0.3;
-// $alert-close-opacity-hover: 0.5;
-// $alert-close-padding: 5px 4px 4px;
+// $alert-close-color:                #333;
+// $alert-close-position:             emCalc(5px);
+// $alert-close-font-size:            emCalc(22px);
+// $alert-close-opacity:              0.3;
+// $alert-close-opacity-hover:        0.5;
+// $alert-close-padding:              5px 4px 4px;
 
 // Border radius
 
-// $alert-radius: $global-radius;
+// $alert-radius:                     $global-radius;
+
 
 //
 // Breadcrumb Variables
@@ -744,7 +777,6 @@ $em-base: 16px !default;
 // Caption styles
 
 // $orbit-container-bg: #f5f5f5;
-// $orbit-caption-bg-old-browser: #000;
 // $orbit-caption-bg-old: rgb(0,0,0);
 // $orbit-caption-bg: rgba(0,0,0,0.6);
 // $orbit-caption-font-color: #fff;
@@ -766,13 +798,14 @@ $em-base: 16px !default;
 
 // Slide numbers
 
-// $orbit-slide-number-bg: rgb(0,0,0);
+// $orbit-slide-number-bg: rgba(0,0,0,0);
 // $orbit-slide-number-font-color: #fff;
 // $orbit-slide-number-padding: emCalc(5px);
 
-// Margin for when Orbit is stacked on small screens
+// Graceful Loading Wrapper and preloader
 
-// $stack-on-small-margin-bottom: emCalc(20px); // Doesn't quite work yet
+// $wrapper-class: "slideshow-wrapper";
+// $preloader-class: "preloader" ;
 
 //
 // Pagination Variables
@@ -799,7 +832,7 @@ $em-base: 16px !default;
 
 // Disabled anchor links
 
-// $pagination-link-unavailable-cursor: default;
+// $pagination-link-unavailable-cursor: $cursor-default-value;
 // $pagination-link-unavailable-font-color: #999;
 // $pagination-link-unavailable-bg-active: transparent;
 
@@ -808,7 +841,7 @@ $em-base: 16px !default;
 // $pagination-link-current-background: $primary-color;
 // $pagination-link-current-font-color: #fff;
 // $pagination-link-current-font-weight: bold;
-// $pagination-link-current-cursor: default;
+// $pagination-link-current-cursor: $cursor-default-value;
 // $pagination-link-current-active-bg: $primary-color;
 
 //
@@ -951,13 +984,17 @@ $em-base: 16px !default;
 // $reveal-border-width: 1px;
 // $reveal-border-color: #666;
 
+// $reveal-modal-class: "reveal-modal";
+// $close-reveal-modal-class: "close-reveal-modal";
+
 //
 // Section Variables
 //
 
 // Padding and hover factor
 
-// $section-padding: emCalc(15px);
+// $section-title-padding: emCalc(15px);
+// $section-content-padding: emCalc(15px);
 // $section-function-factor: 10%;
 
 // Titles
@@ -966,6 +1003,7 @@ $em-base: 16px !default;
 // $section-title-bg: #efefef;
 // $section-title-bg-active: darken($section-title-bg, $section-function-factor);
 // $section-title-bg-active-tabs: #fff;
+// $section-title-bg-hover: darken($section-title-bg, $section-function-factor/2);
 
 // Border size
 
@@ -973,13 +1011,20 @@ $em-base: 16px !default;
 // $section-border-style: solid;
 // $section-border-color: #ccc;
 
-// Color of the background and some size options
+// Font controls
+
+// $section-font-size: emCalc(14px);
+
+// Control the color of the background and some size options
 
 // $section-content-bg: #fff;
 // $section-vertical-nav-min-width: emCalc(200px);
 // $section-vertical-tabs-title-width: emCalc(200px);
 // $section-bottom-margin: emCalc(20px);
 
+// $title-selector: ".title";
+// $content-selector: ".content";
+
 //
 // Side Nav Variables
 //
@@ -1030,7 +1075,7 @@ $em-base: 16px !default;
 // $sub-nav-active-bg: $primary-color;
 // $sub-nav-active-color: #fff;
 // $sub-nav-active-padding: emCalc(3px) emCalc(9px);
-// $sub-nav-active-cursor: default;
+// $sub-nav-active-cursor: $cursor-default-value;
 
 //
 // Switch Variables
@@ -1157,50 +1202,68 @@ $em-base: 16px !default;
 
 // Background color for the top bar
 
-// $topbar-bg: #111;
+// $topbar-bg:                            #111 !default;
 
 // Height and margin
 
-// $topbar-height: 45px;
-// $topbar-margin-bottom: emCalc(30px);
+// $topbar-height:                        45px;
+// $topbar-margin-bottom:                 emCalc(30px);
+
+// Control Input height for top bar
 
-// Input height for top bar
+// $topbar-input-height:                  2.45em;
 
-// $topbar-input-height: 2.45em;
+// Controlling the styles for the title in the top bar
 
-// Title in the top bar
+// $topbar-title-weight:                  bold;
+// $topbar-title-font-size:               emCalc(17px);
 
-// $topbar-title-weight: bold;
-// $topbar-title-font-size: emCalc(17px);
+// Style the top bar dropdown elements
 
-// Link colors and styles for top-level nav
+// $topbar-dropdown-bg:                   #222;
+// $topbar-dropdown-link-color:           #fff;
+// $topbar-dropdown-link-bg:              lighten($topbar-bg, 5%);
+// $topbar-dropdown-toggle-size:          5px;
+// $topbar-dropdown-toggle-color:         #fff;
+// $topbar-dropdown-toggle-alpha:         0.5;
 
-// $topbar-link-color: #fff;
-// $topbar-link-weight: bold;
-// $topbar-link-font-size: emCalc(13px);
-// $topbar-link-hover-lightness: -30% !default; // Darken by 30%
+// Set the link colors and styles for top-level nav
 
-// Top bar dropdown elements
+// $topbar-link-color:                    #fff;
+// $topbar-link-color-hover:              #fff;
+// $topbar-link-color-active:             #fff;
+// $topbar-link-weight:                   bold;
+// $topbar-link-font-size:                emCalc(13px);
+// $topbar-link-hover-lightness:          -30%; // Darken by 30%
+// $topbar-link-bg-hover:                 darken($topbar-bg, 3%);
+// $topbar-link-bg-active:                darken($topbar-bg, 3%);
 
-// $topbar-dropdown-bg: #333;
-// $topbar-dropdown-link-color: #fff;
-// $topbar-dropdown-toggle-size: 5px;
-// $topbar-dropdown-toggle-color: #fff;
-// $topbar-dropdown-toggle-alpha: 0.5;
-// $dropdown-label-color: #555;
+// $topbar-dropdown-label-color:          #555;
+// $topbar-dropdown-label-text-transform: uppercase;
+// $topbar-dropdown-label-font-weight:    bold;
+// $topbar-dropdown-label-font-size:      emCalc(10px);
 
 // Top menu icon styles
 
-// $topbar-menu-link-transform: uppercase;
-// $topbar-menu-link-font-size: emCalc(13px);
-// $topbar-menu-link-weight: bold;
-// $topbar-menu-link-color: #fff;
-// $topbar-menu-icon-color: #fff;
-// $topbar-menu-link-color-toggled: #888;
-// $topbar-menu-icon-color-toggled: #888;
+// $topbar-menu-link-transform:           uppercase;
+// $topbar-menu-link-font-size:           emCalc(13px);
+// $topbar-menu-link-weight:              bold;
+// $topbar-menu-link-color:               #fff;
+// $topbar-menu-icon-color:               #fff;
+// $topbar-menu-link-color-toggled:       #888;
+// $topbar-menu-icon-color-toggled:       #888;
 
 // Transitions and breakpoint styles
 
-// $topbar-transition-speed: 300ms;
-// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout
-// $topbar-media-query: "only screen and (min-width: "#{$topbar-breakpoint}")";
+// $topbar-transition-speed:              300ms;
+// $topbar-breakpoint:                    emCalc(940px); // Change to 9999px for always mobile layout
+// $topbar-media-query:                   "only screen and (min-width: #{$topbar-breakpoint})";
+
+// Divider Styles
+
+// $topbar-divider-border-bottom:         solid 1px lighten($topbar-bg, 10%);
+// $topbar-divider-border-top:            solid 1px darken($topbar-bg, 10%);
+
+// Sticky Class
+
+// $topbar-sticky-class:                  ".sticky";