foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -42,7 +42,7 @@ $titlebar-icon-spacing: 0.25rem !default;
 
     @if $global-flexbox {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
       align-items: center;
     }
     @else {

data/vendor/assets/scss/components/_tooltip.scss

@@ -6,6 +6,10 @@
 /// @group tooltip
 ////
 
+/// Default cursor of the defined term.
+/// @type Keyword
+$has-tip-cursor: help !default;
+
 /// Default font weight of the defined term.
 /// @type Keyword | Number
 $has-tip-font-weight: $global-weight-bold !default;
@@ -26,6 +30,10 @@ $tooltip-color: $white !default;
 /// @type Number
 $tooltip-padding: 0.75rem !default;
 
+/// Default max width for tooltips.
+/// @type Number
+$tooltip-max-width: 10rem !default;
+
 /// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
 /// @type Number
 $tooltip-font-size: $small-font-size !default;
@@ -48,7 +56,7 @@ $tooltip-radius: $global-radius !default;
 
   border-bottom: $has-tip-border-bottom;
   font-weight: $has-tip-font-weight;
-  cursor: help;
+  cursor: $has-tip-cursor;
 }
 
 @mixin tooltip {
@@ -56,7 +64,7 @@ $tooltip-radius: $global-radius !default;
   top: calc(100% + #{$tooltip-pip-height});
   z-index: 1200;
 
-  max-width: 10rem;
+  max-width: $tooltip-max-width;
   padding: $tooltip-padding;
 
   border-radius: $tooltip-radius;
@@ -65,34 +73,79 @@ $tooltip-radius: $global-radius !default;
   color: $tooltip-color;
 
   &::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
     position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
   }
 
-  &.top::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
-    top: 100%;
-    bottom: auto;
+  &.bottom {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+      bottom: 100%;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
-  &.left::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
-    top: 50%;
-    bottom: auto;
-    left: 100%;
-    transform: translateY(-50%);
+  &.top {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
+      top: 100%;
+      bottom: auto;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.left {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
+      left: 100%;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 
-  &.right::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
-    top: 50%;
-    right: 100%;
+  &.right {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
+      right: 100%;
+      left: auto;
+    }
+
+    &.align-center::before {
+      bottom: auto;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.align-top::before {
     bottom: auto;
+    top: 10%;
+  }
+
+  &.align-bottom::before {
+    bottom: 10%;
+    top: auto;
+  }
+
+  &.align-left::before {
+    left: 10%;
+    right: auto;
+  }
+
+  &.align-right::before {
     left: auto;
-    transform: translateY(-50%);
+    right: 10%;
   }
 }
 

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

@@ -101,10 +101,12 @@ $topbar-unstack-breakpoint: medium !default;
 
     .top-bar-left {
       flex: 1 1 auto;
+      margin-right: auto;
     }
 
     .top-bar-right {
       flex: 0 1 auto;
+      margin-left: auto;
     }
   }
   @else {

data/vendor/assets/scss/forms/_fieldset.scss

@@ -32,7 +32,6 @@ $legend-padding: rem-calc(0 3) !default;
     margin: 0;
     margin-#{$global-left}: rem-calc(-3);
     padding: $legend-padding;
-    background: $body-background;
   }
 }
 

data/vendor/assets/scss/forms/_meter.scss

@@ -37,7 +37,13 @@ $meter-fill-bad: $alert-color !default;
     height: $meter-height;
     margin-bottom: 1rem;
 
-    appearance: none;
+    // Disable `-webkit-appearance: none` from getting prefixed,
+    // We have disabled autoprefixer first and are just only using 
+    // `-moz-appearance: none` as a prefix and neglecting the webkit.
+    
+    /*! autoprefixer: off */
+    -moz-appearance: none;
+         appearance: none;
 
     @if has-value($meter-radius) {
       border-radius: $meter-radius;

data/vendor/assets/scss/forms/_select.scss

@@ -19,11 +19,11 @@ $select-triangle-color: $dark-gray !default;
 $select-radius: $global-radius !default;
 
 @mixin form-select {
-  $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
 
   height: $height;
   margin: 0 0 $form-spacing;
-  padding: ($form-spacing / 2);
+  padding: $input-padding;
 
   appearance: none;
   border: $input-border;
@@ -32,7 +32,8 @@ $select-radius: $global-radius !default;
 
   font-family: $input-font-family;
   font-size: $input-font-size;
-  line-height: normal;
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
   color: $input-color;
 
   @if $select-triangle-color != transparent {

data/vendor/assets/scss/forms/_text.scss

@@ -26,6 +26,10 @@ $input-font-size: rem-calc(16) !default;
 /// @type Keyword
 $input-font-weight: $global-weight-normal !default;
 
+/// Line height of text inputs.
+/// @type Keyword
+$input-line-height: $global-lineheight !default;
+
 /// Background color of text inputs.
 /// @type Color
 $input-background: $white !default;
@@ -46,6 +50,10 @@ $input-border: 1px solid $medium-gray !default;
 /// @type Color
 $input-border-focus: 1px solid $dark-gray !default;
 
+/// Padding of text inputs.
+/// @type Color
+$input-padding: $form-spacing / 2 !default;
+
 /// Box shadow inside text inputs when not focused.
 /// @type Shadow
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
@@ -75,14 +83,14 @@ $input-radius: $global-radius !default;
 $form-button-radius: $global-radius !default;
 
 @mixin form-element {
-  $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
 
   display: block;
   box-sizing: border-box;
   width: 100%;
   height: $height;
   margin: 0 0 $form-spacing;
-  padding: $form-spacing / 2;
+  padding: $input-padding;
 
   border: $input-border;
   border-radius: $input-radius;
@@ -92,6 +100,7 @@ $form-button-radius: $global-radius !default;
   font-family: $input-font-family;
   font-size: $input-font-size;
   font-weight: $input-font-weight;
+  line-height: $input-line-height;
   color: $input-color;
 
   @if has-value($input-transition) {

data/vendor/assets/scss/foundation.scss

@@ -1,6 +1,6 @@
 /**
  * Foundation for Sites by ZURB
- * Version 6.3.1
+ * Version 6.4.1
  * foundation.zurb.com
  * Licensed under MIT Open Source
  */
@@ -27,6 +27,7 @@
 
 // Components
 @import 'grid/grid';
+@import 'xy-grid/xy-grid';
 @import 'typography/typography';
 @import 'forms/forms';
 @import 'components/visibility';
@@ -63,8 +64,12 @@
 @import 'components/top-bar';
 @import 'components/thumbnail';
 @import 'components/tooltip';
+@import 'prototype/prototype';
 
-@mixin foundation-everything($flex: false) {
+@mixin foundation-everything(
+  $flex: true,
+  $prototype: false
+) {
   @if $flex {
     $global-flexbox: true !global;
   }
@@ -74,7 +79,12 @@
     @include foundation-grid;
   }
   @else {
-    @include foundation-flex-grid;
+    @if $xy-grid {
+      @include foundation-xy-grid-classes;
+    }
+    @else {
+      @include foundation-flex-grid;
+    }
   }
   @include foundation-typography;
   @include foundation-forms;
@@ -115,4 +125,8 @@
   @if $flex {
     @include foundation-flex-classes;
   }
+
+  @if $prototype {
+    @include foundation-prototype-classes;
+  }
 }

data/vendor/assets/scss/grid/_flex-grid.scss

@@ -86,7 +86,7 @@
   // fixes recent Chrome version not limiting child width
   // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome
   @if $columns == expand {
-    min-width: initial;
+    min-width: 0;
   }
   // max-width fixes IE 10/11 not respecting the flex-basis property
   @if $columns != expand and $columns != shrink {
@@ -143,8 +143,8 @@
 
     // Expanded row
     &.expanded {
-      @include grid-row-size(expand); 
-      
+      @include grid-row-size(expand);
+
       .row {
         margin-right: auto;
         margin-left: auto;
@@ -190,29 +190,6 @@
     padding-left: 0;
   }
 
-
-  .flex-container {
-    @include flex;
-  }
-
-  .flex-child-auto {
-    flex: 1 1 auto;
-  }
-
-  .flex-child-grow {
-    flex: 1 0 auto;
-  }
-
-  .flex-child-shrink {
-    flex: 0 1 auto;
-  }
-
-  @each $dir, $prop in $-zf-flex-direction {
-    .flex-dir-#{$dir} {
-      @include flex-direction($prop);
-    }
-  }
-
   @include -zf-each-breakpoint {
     @for $i from 1 through $grid-column-count {
       // Sizing (percentage)
@@ -229,13 +206,6 @@
       }
     }
 
-    // Source ordering
-    @for $i from 1 through 6 {
-      .#{$-zf-size}-order-#{$i} {
-        @include flex-order($i);
-      }
-    }
-
     // Block grid
     @for $i from 1 through $block-grid-max {
       .#{$-zf-size}-up-#{$i} {
@@ -251,25 +221,6 @@
         }
       }
 
-      // direction helper classes
-      @each $dir, $prop in $-zf-flex-direction {
-        .#{$-zf-size}-flex-dir-#{$dir} {
-          @include flex-direction($prop);
-        }
-      }
-      // child helper classes
-      .#{$-zf-size}-flex-child-auto {
-        flex: 1 1 auto;
-      }
-
-      .#{$-zf-size}-flex-child-grow {
-        flex: 1 0 auto;
-      }
-
-      .#{$-zf-size}-flex-child-shrink {
-        flex: 0 1 auto;
-      }
-
       // Auto-stacking/unstacking
       @at-root (without: media) {
         .row.#{$-zf-size}-unstack {

data/vendor/assets/scss/prototype/_arrow.scss

@@ -0,0 +1,36 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-arrow
+////
+
+/// Map containing all the `arrow` direction
+/// @type Map
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+) !default;
+
+/// Width of the Arrow, `0.4375rem` by default.
+/// @type Number
+$prototype-arrow-size: 0.4375rem;
+
+/// Color of the Arrow, `$black` by default.
+/// @type Color
+$prototype-arrow-color: $black;
+
+@mixin foundation-prototype-arrow {
+  @each $prototype-arrow-direction in $prototype-arrow-directions {
+    .arrow-#{$prototype-arrow-direction} {
+      @include css-triangle(
+        $prototype-arrow-size, 
+        $prototype-arrow-color, 
+        $prototype-arrow-direction
+      );
+    }
+  }
+}

data/vendor/assets/scss/prototype/_border-box.scss

@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-border-box
+////
+
+/// Responsive breakpoints for border box.
+/// @type Boolean
+$prototype-border-box-breakpoints: $global-prototype-breakpoints !default;
+
+/// Border box utility
+@mixin border-box {
+  box-sizing: border-box !important;
+}
+
+@mixin foundation-prototype-border-box {
+  .border-box {
+    @include border-box;
+  }
+
+  @if ($prototype-border-box-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-border-box {
+            @include border-box;
+          }
+        }
+      }
+    }
+  }
+}