foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/scss/components/_flex.scss

@@ -0,0 +1,28 @@
+@mixin foundation-flex-classes {
+  // Horizontal alignment using justify-content
+  @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
+    .align-#{$hdir} {
+      @include flex-align($x: $hdir);
+    }
+  }
+
+  // Vertical alignment using align-items and align-self
+  @each $vdir, $prop in $-zf-flex-align {
+    .align-#{$vdir} {
+      @include flex-align($y: $vdir);
+    }
+
+    .align-self-#{$vdir} {
+      @include flex-align-self($y: $vdir);
+    }
+  }
+
+  // Source ordering
+  @include -zf-each-breakpoint {
+    @for $i from 1 through 6 {
+      .#{$-zf-size} {
+        @include flex-order($i);
+      }
+    }
+  }
+}

data/vendor/assets/scss/components/_label.scss

@@ -44,7 +44,7 @@ $label-radius: $global-radius !default;
     background: $label-background;
     color: $label-color;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $name != primary {
         &.#{$name} {
           background: $color;

data/vendor/assets/scss/components/_media-object.scss

@@ -14,21 +14,30 @@ $mediaobject-margin-bottom: $global-margin !default;
 /// @type Number
 $mediaobject-section-padding: $global-padding !default;
 
-/// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
 /// @type Number
 $mediaobject-image-width-stacked: 100% !default;
 
 /// Adds styles for a media object container.
 @mixin media-object-container {
   margin-bottom: $mediaobject-margin-bottom;
-  display: block;
+  display: if($global-flexbox, flex, block);
+
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+  }
 }
 
 /// Adds styles for sections within a media object.
 /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
 @mixin media-object-section($padding: $mediaobject-section-padding) {
-  display: table-cell;
-  vertical-align: top;
+  @if $global-flexbox {
+    flex: 0 0 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
 
   &:first-child {
     padding-#{$global-right}: $padding;
@@ -41,10 +50,17 @@ $mediaobject-image-width-stacked: 100% !default;
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
 @mixin media-object-stack {
-  display: block;
   padding: 0;
   padding-bottom: $mediaobject-section-padding;
 
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
   img {
     width: $mediaobject-image-width-stacked;
   }
@@ -58,6 +74,12 @@ $mediaobject-image-width-stacked: 100% !default;
       max-width: none;
     }
 
+    @if $global-flexbox {
+      &.stack-for-small {
+        flex-wrap: wrap;
+      }
+    }
+
     &.stack-for-small .media-object-section {
       @include breakpoint(small only) {
         @include media-object-stack;
@@ -68,7 +90,15 @@ $mediaobject-image-width-stacked: 100% !default;
   .media-object-section {
     @include media-object-section;
 
-    &.middle { vertical-align: middle; }
-    &.bottom { vertical-align: bottom; }
+    @if $global-flexbox {
+      // scss-lint:disable ZeroUnit
+      &.main-section {
+        flex: 1 1 0px;
+      }
+    }
+    @else {
+      &.middle { vertical-align: middle; }
+      &.bottom { vertical-align: bottom; }
+    }
   }
 }

data/vendor/assets/scss/components/_menu-icon.scss

@@ -0,0 +1,9 @@
+@mixin foundation-menu-icon {
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}

data/vendor/assets/scss/components/_menu.scss

@@ -18,24 +18,41 @@ $menu-margin-nested: 1rem !default;
 /// @type Number
 $menu-item-padding: 0.7rem 1rem !default;
 
+/// Text color of an active menu item.
+/// @type Color
+$menu-item-color-active: $white !default;
+
+/// Background color of an active menu item.
+/// @type Color
+$menu-item-background-active: map-get($foundation-palette, primary) !default;
+
 /// Spacing between an icon and text in a menu item.
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
 
-/// Maximum number of `expand-n` classes to include in the CSS.
-/// @type Number
-$menu-expand-max: 6 !default;
-
 /// Creates the base styles for a Menu.
 @mixin menu-base {
   margin: $menu-margin;
   list-style-type: none;
 
+  @if $global-flexbox {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
   // List items are table cell to allow for vertical alignment
   > li {
     @include disable-mouse-outline;
-    display: table-cell;
-    vertical-align: middle;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 
   // Reset line height to make the height of the overall item easier to calculate
@@ -55,22 +72,54 @@ $menu-expand-max: 6 !default;
 
 /// Expands the items of a Menu, so each item is the same width.
 @mixin menu-expand {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
+  @if $global-flexbox {
+    // scss-lint:disable ZeroUnit
+    > li {
+      flex: 1 1 0px;
+    }
+  }
+  @else {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+  }
 }
 
 /// Sets the direction of a Menu.
 /// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
 @mixin menu-direction($dir: horizontal) {
   @if $dir == horizontal {
-    > li {
-      display: table-cell;
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+
+      > li {
+        flex: 0 0 auto;
+      }
+    }
+    @else {
+      > li {
+        display: table-cell;
+      }
     }
   }
   @else if $dir == vertical {
-    > li {
-      display: block;
+    @if $global-flexbox {
+      flex-wrap: wrap;
+
+      > li {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
+      > li  > a {
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+    }
+    @else {
+      > li {
+        display: block;
+      }
     }
   }
   @else {
@@ -102,35 +151,62 @@ $menu-expand-max: 6 !default;
 /// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
 @mixin menu-icons($position: side, $base: true) {
   @if $base {
-    > li > a {
-      > img,
-      > i {
-        vertical-align: middle;
+    @if $global-flexbox {
+      > li > a {
+        display: flex;
       }
+    }
+    @else {
+      > li > a {
+        img,
+        i {
+          vertical-align: middle;
+        }
 
-      > span {
-        vertical-align: middle;
+        i + span,
+        img + span {
+          vertical-align: middle;
+        }
       }
     }
   }
 
   @if $position == side {
     > li > a {
-      > img,
-      > i {
-        display: inline-block;
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i {
         margin-#{$global-right}: $menu-icon-spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
       }
     }
   }
   @else if $position == top {
     > li > a {
-      text-align: center;
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
 
-      > img,
-      > i {
-        display: block;
-        margin: 0 auto $menu-icon-spacing;
+      img,
+      i {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $menu-icon-spacing;
+        }
+        @else {
+          align-self: stretch;
+          text-align: center;
+          margin-bottom: $menu-icon-spacing;
+        }
       }
     }
   }
@@ -178,8 +254,15 @@ $menu-expand-max: 6 !default;
 
     // Align right
     &.align-#{$global-right} {
-      > li {
-        float: $global-right;
+      @if $global-flexbox {
+        justify-content: flex-end;
+      }
+      @else {
+        @include clearfix;
+
+        > li {
+          float: $global-right;
+        }
       }
     }
 
@@ -201,12 +284,27 @@ $menu-expand-max: 6 !default;
     &.nested {
       @include menu-nested;
     }
+
+    // Active state
+    .active > a {
+      color: $menu-item-color-active;
+      background: $menu-item-background-active;
+    }
   }
 
   .menu-text {
     @include menu-text;
   }
 
+  // Align center
+  .menu-centered {
+    text-align: center;
+
+    > .menu {
+      display: inline-block;
+    }
+  }
+
   // Prevent FOUC when using the Responsive Menu plugin
   .no-js [data-responsive-menu] ul {
     display: none;

data/vendor/assets/scss/components/_off-canvas.scss

@@ -71,6 +71,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
     transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
     backface-visibility: hidden;
     z-index: 1;
+    padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
 
     @if has-value($maincontent-shadow) {
       box-shadow: $maincontent-shadow;

data/vendor/assets/scss/components/_pagination.scss

@@ -122,7 +122,7 @@ $pagination-arrows: true !default;
 
 /// Adds styles for an ellipsis for use in a pagination list.
 @mixin pagination-ellipsis {
-  content: '…';
+  content: '\2026';
   padding: $pagination-item-padding;
   color: $pagination-ellipsis-color;
 }
@@ -147,14 +147,14 @@ $pagination-arrows: true !default;
   @if $pagination-arrows {
     .pagination-previous a::before,
     .pagination-previous.disabled::before {
-      content: '«';
+      content: '\00ab';
       display: inline-block;
       margin-#{$global-right}: 0.5rem;
     }
 
     .pagination-next a::after,
     .pagination-next.disabled::after {
-      content: '»';
+      content: '\00bb';
       display: inline-block;
       margin-#{$global-left}: 0.5rem;
     }

data/vendor/assets/scss/components/_progress-bar.scss

@@ -2,30 +2,6 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group progress-bar
-////
-
-/// Height of a progress bar.
-/// @type Number
-$progress-height: 1rem !default;
-
-/// Background color of a progress bar.
-/// @type Color
-$progress-background: $medium-gray !default;
-
-/// Bottom margin of a progress bar.
-/// @type Number
-$progress-margin-bottom: $global-margin !default;
-
-/// Default color of a progress bar's meter.
-/// @type Color
-$progress-meter-background: $primary-color !default;
-
-/// Default radius of a progress bar.
-/// @type Number
-$progress-radius: $global-radius !default;
-
 /// Adds styles for a progress bar container.
 @mixin progress-container {
   background-color: $progress-background;
@@ -67,7 +43,7 @@ $progress-radius: $global-radius !default;
   .progress {
     @include progress-container;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         .progress-meter {
           background-color: $color;

data/vendor/assets/scss/components/_reveal.scss

@@ -18,10 +18,6 @@ $reveal-width: 600px !default;
 /// @type Number
 $reveal-max-width: $global-width !default;
 
-/// Offset from the top of the window when a modal is added.
-/// @type Number
-$reveal-offset: rem-calc(100) !default;
-
 /// Default padding inside a modal.
 /// @type Number
 $reveal-padding: $global-padding !default;
@@ -63,7 +59,6 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   z-index: $reveal-zindex + 1;
   padding: $reveal-padding;
   border: $reveal-border;
-  margin: $reveal-offset auto 0;
   background-color: $reveal-background;
   border-radius: $reveal-radius;
 
@@ -127,7 +122,10 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   .reveal {
     @include reveal-modal-base;
     @include reveal-modal-width($reveal-width);
-    position: absolute;
+    position: relative;
+    top: 100px;
+    margin-left: auto;
+    margin-right: auto;
     overflow-y: auto;
 
     // Placeholder selector for medium-and-up modals
@@ -154,5 +152,13 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
     &.full {
       @include reveal-modal-fullscreen;
     }
+
+    @include breakpoint(small only) {
+      @include reveal-modal-fullscreen;
+    }
+
+    &.without-overlay {
+      position: fixed;
+    }
   }
 }