foundation-rails 6.2.3.0 → 6.2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f32f3823c38823acc3571855ddeeabbdd1dd590e
-  data.tar.gz: d709d42eeede630436458e26a802af0b1f55e946
+  metadata.gz: d579a2cb3b53c295b40796b5c4443cee3694fe1f
+  data.tar.gz: 5f5e1db125a0f953aa860f3566a047e1cbe33de2
 SHA512:
-  metadata.gz: c0113fcb9e16914f67ab0e7565e221fe485cdee87d03dc6644663cf876021533cb57f6efdb4df65bb3fc10d5118dbc22edf51273c281dd1f43b3f4f74e384353
-  data.tar.gz: 120e60d9f7bbc4a2e6a6f89bef65ec893ba6ac962c8aa2136db96e1d49b312e92bc2f800f5d238aef8992aa4064dc2759417159e3152b286524946fa44a7c834
+  metadata.gz: 938991fd768b70aecef5a793f00b35617d622e1caf0bda0a8445068d3f841620f2384ca88069ab81a226dd5a50cc36b1a16a8468567b5f3edc16c778fe34283d
+  data.tar.gz: ae2728878fbe3a32a3ed7459307df6b631ffde107ac8ffdfcd48132533749adc51cd317d7141dabd5024381a120b979c9901a5a116459249a8e4177df6581b59

data/bower.json

@@ -2,7 +2,7 @@
   "name": "foundation-rails",
   "version": "6.2.1.0",
   "dependencies": {
-    "foundation-sites": "6.2.3",
+    "foundation-sites": "6.2.4",
     "motion-ui": "1.2.2"
   }
 }

data/lib/foundation/rails/version.rb

@@ -1,5 +1,5 @@
 module Foundation
   module Rails
-    VERSION = "6.2.3.0"
+    VERSION = "6.2.4.0"
   end
 end

data/lib/generators/foundation/templates/_settings.scss

@@ -248,6 +248,8 @@ $button-sizes: (
   large: 1.25rem,
 );
 $button-opacity-disabled: 0.25;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
 
 // 12. Button Group
 // ----------------
@@ -356,6 +358,7 @@ $input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
+$button-radius: $global-radius;
 
 // 20. Label
 // ---------
@@ -436,6 +439,7 @@ $pagination-item-color-current: foreground($pagination-item-background-current);
 $pagination-item-color-disabled: $medium-gray;
 $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
 $pagination-arrows: true;
 
 // 27. Progress Bar
@@ -502,8 +506,11 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
 $table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
 $show-header-for-stacked: false;
 
 // 32. Tabs

data/vendor/assets/js/foundation.accordion.js.es6

@@ -76,16 +76,8 @@ class Accordion {
       if ($tabContent.length) {
         $elem.children('a').off('click.zf.accordion keydown.zf.accordion')
                .on('click.zf.accordion', function(e) {
-        // $(this).children('a').on('click.zf.accordion', function(e) {
           e.preventDefault();
-          if ($elem.hasClass('is-active')) {
-            if(_this.options.allowAllClosed || $elem.siblings().hasClass('is-active')){
-              _this.up($tabContent);
-            }
-          }
-          else {
-            _this.down($tabContent);
-          }
+          _this.toggle($tabContent);
         }).on('keydown.zf.accordion', function(e){
           Foundation.Keyboard.handleKey(e, 'Accordion', {
             toggle: function() {
@@ -115,14 +107,12 @@ class Accordion {
 
   /**
    * Toggles the selected content pane's open/close state.
-   * @param {jQuery} $target - jQuery object of the pane to toggle.
+   * @param {jQuery} $target - jQuery object of the pane to toggle (`.accordion-content`).
    * @function
    */
   toggle($target) {
     if($target.parent().hasClass('is-active')) {
-      if(this.options.allowAllClosed || $target.parent().siblings().hasClass('is-active')){
-        this.up($target);
-      } else { return; }
+      this.up($target);
     } else {
       this.down($target);
     }
@@ -130,25 +120,25 @@ class Accordion {
 
   /**
    * Opens the accordion tab defined by `$target`.
-   * @param {jQuery} $target - Accordion pane to open.
+   * @param {jQuery} $target - Accordion pane to open (`.accordion-content`).
    * @param {Boolean} firstTime - flag to determine if reflow should happen.
    * @fires Accordion#down
    * @function
    */
   down($target, firstTime) {
-    if (!this.options.multiExpand && !firstTime) {
-      var $currentActive = this.$element.children('.is-active').children('[data-tab-content]');
-      if($currentActive.length){
-        this.up($currentActive);
-      }
-    }
-
     $target
       .attr('aria-hidden', false)
       .parent('[data-tab-content]')
       .addBack()
       .parent().addClass('is-active');
 
+    if (!this.options.multiExpand && !firstTime) {
+      var $currentActive = this.$element.children('.is-active').children('[data-tab-content]');
+      if ($currentActive.length) {
+        this.up($currentActive.not($target));
+      }
+    }
+
     $target.slideDown(this.options.slideSpeed, () => {
       /**
        * Fires when the tab is done opening.
@@ -165,16 +155,15 @@ class Accordion {
 
   /**
    * Closes the tab defined by `$target`.
-   * @param {jQuery} $target - Accordion tab to close.
+   * @param {jQuery} $target - Accordion tab to close (`.accordion-content`).
    * @fires Accordion#up
    * @function
    */
   up($target) {
     var $aunts = $target.parent().siblings(),
         _this = this;
-    var canClose = this.options.multiExpand ? $aunts.hasClass('is-active') : $target.parent().hasClass('is-active');
 
-    if(!this.options.allowAllClosed && !canClose) {
+    if((!this.options.allowAllClosed && !$aunts.hasClass('is-active')) || !$target.parent().hasClass('is-active')) {
       return;
     }
 

data/vendor/assets/js/foundation.accordionMenu.js.es6

@@ -34,9 +34,7 @@ class AccordionMenu {
       'ARROW_UP': 'up',
       'ARROW_DOWN': 'down',
       'ARROW_LEFT': 'close',
-      'ESCAPE': 'closeAll',
-      'TAB': 'down',
-      'SHIFT_TAB': 'up'
+      'ESCAPE': 'closeAll'
     });
   }
 
@@ -49,7 +47,7 @@ class AccordionMenu {
   _init() {
     this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
     this.$element.attr({
-      'role': 'tablist',
+      'role': 'menu',
       'aria-multiselectable': this.options.multiOpen
     });
 
@@ -63,13 +61,13 @@ class AccordionMenu {
       $elem.attr({
         'aria-controls': subId,
         'aria-expanded': isActive,
-        'role': 'tab',
+        'role': 'menuitem',
         'id': linkId
       });
       $sub.attr({
         'aria-labelledby': linkId,
         'aria-hidden': !isActive,
-        'role': 'tabpanel',
+        'role': 'menu',
         'id': subId
       });
     });
@@ -117,8 +115,8 @@ class AccordionMenu {
           }
           if ($(this).is(':first-child')) { // is first element of sub menu
             $prevElement = $element.parents('li').first().find('a').first();
-          } else if ($prevElement.children('[data-submenu]:visible').length) { // if previous element has open sub menu
-            $prevElement = $prevElement.find('li:last-child').find('a').first();
+          } else if ($prevElement.parents('li').first().children('[data-submenu]:visible').length) { // if previous element has open sub menu
+            $prevElement = $prevElement.parents('li').find('li:last-child').find('a').first();
           }
           if ($(this).is(':last-child')) { // is last element of sub menu
             $nextElement = $element.parents('li').first().next('li').find('a').first();
@@ -127,6 +125,7 @@ class AccordionMenu {
           return;
         }
       });
+
       Foundation.Keyboard.handleKey(e, 'AccordionMenu', {
         open: function() {
           if ($target.is(':hidden')) {
@@ -143,11 +142,11 @@ class AccordionMenu {
           }
         },
         up: function() {
-          $prevElement.attr('tabindex', -1).focus();
+          $prevElement.focus();
           return true;
         },
         down: function() {
-          $nextElement.attr('tabindex', -1).focus();
+          $nextElement.focus();
           return true;
         },
         toggle: function() {

data/vendor/assets/js/foundation.core.js.es6

@@ -2,7 +2,7 @@
 
 "use strict";
 
-var FOUNDATION_VERSION = '6.2.2';
+var FOUNDATION_VERSION = '6.2.4';
 
 // Global Foundation object
 // This is attached to the window, or used as a module for AMD/Browserify

data/vendor/assets/js/foundation.drilldown.js.es6

@@ -71,7 +71,7 @@ class Drilldown {
       if(_this.options.parentLink){
         $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menu-item"></li>');
       }
-      $link.data('savedHref', $link.attr('href')).removeAttr('href');
+      $link.data('savedHref', $link.attr('href')).removeAttr('href').attr('tabindex', 0);
       $link.children('[data-submenu]')
           .attr({
             'aria-hidden': true,
@@ -188,13 +188,14 @@ class Drilldown {
                 $element.parent('li').parent('ul').parent('li').children('a').first().focus();
               }, 1);
             });
+            return true;            
           } else if ($element.is(_this.$submenuAnchors)) {
             _this._show($element.parent('li'));
             $element.parent('li').one(Foundation.transitionend($element), function(){
               $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
             });
+            return true;
           }
-          return true;
         },
         handled: function(preventDefault) {
           if (preventDefault) {
@@ -237,6 +238,12 @@ class Drilldown {
         e.stopImmediatePropagation();
         // console.log('mouseup on back');
         _this._hide($elem);
+
+        // If there is a parent submenu, call show
+        let parentSubMenu = $elem.parent('li').parent('ul').parent('li');
+        if (parentSubMenu.length) { 
+          _this._show(parentSubMenu);
+        }
       });
   }
 
@@ -264,7 +271,8 @@ class Drilldown {
    * @param {jQuery} $elem - the current element with a submenu to open, i.e. the `li` tag.
    */
   _show($elem) {
-    $elem.children('[data-submenu]').addClass('is-active');
+    $elem.attr('aria-expanded', true);
+    $elem.children('[data-submenu]').addClass('is-active').attr('aria-hidden', false);
     /**
      * Fires when the submenu has opened.
      * @event Drilldown#open
@@ -280,7 +288,8 @@ class Drilldown {
    */
   _hide($elem) {
     var _this = this;
-    $elem.addClass('is-closing')
+    $elem.parent('li').attr('aria-expanded', false);
+    $elem.attr('aria-hidden', true).addClass('is-closing')
          .one(Foundation.transitionend($elem), function(){
            $elem.removeClass('is-active is-closing');
            $elem.blur();
@@ -299,13 +308,15 @@ class Drilldown {
    * @private
    */
   _getMaxDims() {
-    var max = 0, result = {};
-    this.$submenus.add(this.$element).each(function(){
-      var numOfElems = $(this).children('li').length;
-      max = numOfElems > max ? numOfElems : max;
+    var biggest = 0
+    var result = {};
+
+    this.$submenus.add(this.$element).each((i, elem) => {
+      var height = elem.getBoundingClientRect().height;
+      if (height > biggest) biggest = height;
     });
 
-    result['min-height'] = `${max * this.$menuItems[0].getBoundingClientRect().height}px`;
+    result['min-height'] = `${biggest}px`;
     result['max-width'] = `${this.$element[0].getBoundingClientRect().width}px`;
 
     return result;
@@ -327,6 +338,7 @@ class Drilldown {
     });
     this.$element.find('a').each(function(){
       var $link = $(this);
+      $link.removeAttr('tabindex');
       if($link.data('savedHref')){
         $link.attr('href', $link.data('savedHref')).removeData('savedHref');
       }else{ return; }

data/vendor/assets/js/foundation.dropdown.js.es6

@@ -41,7 +41,7 @@ class Dropdown {
   _init() {
     var $id = this.$element.attr('id');
 
-    this.$anchor = $(`[data-toggle="${$id}"]`) || $(`[data-open="${$id}"]`);
+    this.$anchor = $(`[data-toggle="${$id}"]`).length ? $(`[data-toggle="${$id}"]`) : $(`[data-open="${$id}"]`);
     this.$anchor.attr({
       'aria-controls': $id,
       'data-is-focus': false,
@@ -71,9 +71,10 @@ class Dropdown {
   getPositionClass() {
     var verticalPosition = this.$element[0].className.match(/(top|left|right|bottom)/g);
         verticalPosition = verticalPosition ? verticalPosition[0] : '';
-    var horizontalPosition = /float-(\S+)\s/.exec(this.$anchor[0].className);
+    var horizontalPosition = /float-(\S+)/.exec(this.$anchor[0].className);
         horizontalPosition = horizontalPosition ? horizontalPosition[1] : '';
     var position = horizontalPosition ? horizontalPosition + ' ' + verticalPosition : verticalPosition;
+
     return position;
   }
 
@@ -168,12 +169,14 @@ class Dropdown {
 
     if(this.options.hover){
       this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
-          .on('mouseenter.zf.dropdown', function(){
-            clearTimeout(_this.timeout);
-            _this.timeout = setTimeout(function(){
-              _this.open();
-              _this.$anchor.data('hover', true);
-            }, _this.options.hoverDelay);
+      .on('mouseenter.zf.dropdown', function(){
+            if($('body[data-whatinput="mouse"]').is('*')) {
+              clearTimeout(_this.timeout);
+              _this.timeout = setTimeout(function(){
+                _this.open();
+                _this.$anchor.data('hover', true);
+              }, _this.options.hoverDelay);
+            }
           }).on('mouseleave.zf.dropdown', function(){
             clearTimeout(_this.timeout);
             _this.timeout = setTimeout(function(){

data/vendor/assets/js/foundation.dropdownMenu.js.es6

@@ -59,6 +59,11 @@ class DropdownMenu {
     this.changed = false;
     this._events();
   };
+
+  _isVertical() {
+    return this.$tabs.css('display') === 'block';
+  }
+
   /**
    * Adds event listeners to elements within the menu
    * @private
@@ -87,10 +92,15 @@ class DropdownMenu {
         } else {
           e.preventDefault();
           e.stopImmediatePropagation();
-          _this._show($elem.children('.is-dropdown-submenu'));
+          _this._show($sub);
           $elem.add($elem.parentsUntil(_this.$element, `.${parClass}`)).attr('data-is-click', true);
         }
-      } else { return; }
+      } else {
+        if(_this.options.closeOnClickInside){
+          _this._hide($elem);
+        }
+        return;
+      }
     };
 
     if (this.options.clickOpen || hasTouch) {
@@ -172,42 +182,51 @@ class DropdownMenu {
       };
 
       if (isTab) {
-        if (_this.$element.hasClass(_this.options.verticalClass)) { // vertical menu
-          if (_this.options.alignment === 'left') { // left aligned
+        if (_this._isVertical()) { // vertical menu
+          if (Foundation.rtl()) { // right aligned
             $.extend(functions, {
               down: nextSibling,
               up: prevSibling,
-              next: openSub,
-              previous: closeSub
+              next: closeSub,
+              previous: openSub
             });
-          } else { // right aligned
+          } else { // left aligned
             $.extend(functions, {
               down: nextSibling,
               up: prevSibling,
-              next: closeSub,
-              previous: openSub
+              next: openSub,
+              previous: closeSub
             });
           }
         } else { // horizontal menu
-          $.extend(functions, {
-            next: nextSibling,
-            previous: prevSibling,
-            down: openSub,
-            up: closeSub
-          });
+          if (Foundation.rtl()) { // right aligned
+            $.extend(functions, {
+              next: prevSibling,
+              previous: nextSibling,
+              down: openSub,
+              up: closeSub
+            });
+          } else { // left aligned
+            $.extend(functions, {
+              next: nextSibling,
+              previous: prevSibling,
+              down: openSub,
+              up: closeSub
+            });
+          }
         }
       } else { // not tabs -> one sub
-        if (_this.options.alignment === 'left') { // left aligned
+        if (Foundation.rtl()) { // right aligned
           $.extend(functions, {
-            next: openSub,
-            previous: closeSub,
+            next: closeSub,
+            previous: openSub,
             down: nextSibling,
             up: prevSibling
           });
-        } else { // right aligned
+        } else { // left aligned
           $.extend(functions, {
-            next: closeSub,
-            previous: openSub,
+            next: openSub,
+            previous: closeSub,
             down: nextSibling,
             up: prevSibling
           });
@@ -378,6 +397,12 @@ DropdownMenu.defaults = {
    * @example true
    */
   closeOnClick: true,
+  /**
+   * Allow clicks on leaf anchor links to close any open submenus.
+   * @option
+   * @example true
+   */
+  closeOnClickInside: true,
   /**
    * Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
    * @option