foundation-rails 5.0.3.1 → 5.1.0.1

data/vendor/assets/stylesheets/foundation/_functions.scss

@@ -1,6 +1,8 @@
 // This is the default html and body font-size for the base rem value.
 $rem-base: 16px !default;
 
+// IMPORT ONCE
+// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 
 $modules: () !default;
 @mixin exports($name) {
   @if (index($modules, $name) == false) {
@@ -13,6 +15,9 @@ $modules: () !default;
 // @functions
 //
 
+
+// RANGES
+// We use these functions to define ranges for various things, like media queries. 
 @function lower-bound($range){
   @if length($range) <= 0 {
     @return 0;
@@ -27,28 +32,46 @@ $modules: () !default;
   @return nth($range, 2);
 }
 
-
+// STRIP UNIT
 // It strips the unit of measure and returns it
 @function strip-unit($num) {
   @return $num / ($num * 0 + 1);
 }
 
-// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
-// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported
-// rem-calc(10 20 30px 40);
-// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
-// rem-calc((10, 20, 30, 40px));
-// Optionally call with a different base (eg: 8px) to calculate rem.
-// rem-calc(16px 32px 48px, 8px);
-// If you require to comma separate your list
-// rem-calc((16px, 32px, 48), 8px);
-
+// CONVERT TO REM
 @function convert-to-rem($value, $base-value: $rem-base)  {
   $value: strip-unit($value) / strip-unit($base-value) * 1rem;
   @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
   @return $value;
 }
 
+@function data($attr) {
+  @if $namespace {
+    @return '[data-' + $namespace + '-' + $attr + ']';
+  }
+
+  @return '[data-' + $attr + ']';
+}
+
+// REM CALC 
+/*
+New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
+Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
+
+  rem-calc(10 20 30px 40);
+
+Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
+
+  rem-calc((10, 20, 30, 40px));
+
+Optionally call with a different base (eg: 8px) to calculate rem.
+
+  rem-calc(16px 32px 48px, 8px);
+
+If you require to comma separate your list
+
+  rem-calc((16px, 32px, 48), 8px);
+*/
 @function rem-calc($values, $base-value: $rem-base) {
   $max: length($values);
 
@@ -61,18 +84,14 @@ $modules: () !default;
   @return $remValues;
 }
 
+// OLD EM CALC
 // Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
 @function emCalc($values){
   @return rem-calc($values);
 }
 
+// OLD EM CALC
 // Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
 @function em-calc($values){
   @return rem-calc($values);
-}
-
-// Maybe you want to create rems with pixels
-// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
-// @function remCalc($pxWidth) {
-//   @return $pxWidth / $rem-base * 1rem;
-// }
+}

data/vendor/assets/stylesheets/foundation/_settings.scss

@@ -11,7 +11,7 @@
 // $experimental: true;
 
 // 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.
 
 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
 // If you want your base font-size to be different and not have it affect the grid breakpoints,
@@ -29,6 +29,7 @@
 // Grid
 
 // $include-html-grid-classes: $include-html-classes;
+// $include-xl-html-grid-classes: false;
 
 // $row-width: rem-calc(1000);
 // $column-gutter: rem-calc(30);
@@ -105,6 +106,112 @@
 // $cursor-help-value: help;
 // $cursor-text-value: text;
 
+//
+// TYPOGRAPHY
+//
+
+// $include-html-type-classes: $include-html-classes;
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: 300;
+// $header-font-style: normal;
+// $header-font-color: #222;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+// $header-bottom-margin: .5rem;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+// $h1-font-size: rem-calc(44);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: 300;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+// $small-font-size: 60%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: normal;
+// $paragraph-font-size: 1rem;
+// $paragraph-line-height: 1.6;
+// $paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: scale-color($alert-color, $lightness: -27%);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: bold;
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: #ddd;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid #ddd;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted #ddd;
+
+// We use these to control padding and margin
+// $microformat-padding: rem-calc(10 12);
+// $microformat-margin: rem-calc(0 0 20 0);
+
+// We use these to control the border styles
+// $microformat-border-width: 1px;
+// $microformat-border-style: solid;
+// $microformat-border-color: #ddd;
+
+// We use these to control full name font styles
+// $microformat-fullname-font-weight: bold;
+// $microformat-fullname-font-size: rem-calc(15);
+
+// We use this to control the summary font styles
+// $microformat-summary-font-weight: bold;
+
+// We use this to control abbr padding
+// $microformat-abbr-padding: rem-calc(0 1);
+
+// We use this to control abbr font styles
+// $microformat-abbr-font-weight: bold;
+// $microformat-abbr-font-decoration: none;
+
 // Accordion
 
 // $include-html-accordion-classes: $include-html-classes;
@@ -371,8 +478,9 @@
 // $form-label-pointer: pointer;
 // $form-label-font-size: rem-calc(14);
 // $form-label-font-weight: normal;
+// $form-label-line-height: 1.5;
 // $form-label-font-color: scale-color(#000, $lightness: 30%);
-// $form-label-bottom-margin: rem-calc(8);
+// $form-label-bottom-margin: 0;
 // $input-font-family: inherit;
 // $input-font-color: rgba(0,0,0,0.75);
 // $input-font-size: rem-calc(14);
@@ -382,6 +490,7 @@
 // $input-focus-border-color: scale-color(#fff, $lightness: -40%);
 // $input-border-style: solid;
 // $input-border-width: 1px;
+// $input-border-radius: 0;
 // $input-disabled-bg: #ddd;
 // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 // $input-include-glowing-effect: true;
@@ -792,7 +901,8 @@
 
 // We use these to control link styles.
 // $side-nav-link-color: $primary-color;
-// $side-nav-link-color-active: scale-color(#000, $lightness: 30%);
+// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
 // $side-nav-font-size: rem-calc(14);
 // $side-nav-font-weight: normal;
 // $side-nav-font-family: $body-font-family;
@@ -1003,6 +1113,7 @@
 // $tooltip-close-font-color: #777;
 // $tooltip-font-size-sml: rem-calc(14);
 // $tooltip-radius: $global-radius;
+// $tooltip-rounded: $global-rounded;
 // $tooltip-pip-size: 5px;
 
 //
@@ -1036,6 +1147,7 @@
 // $topbar-link-color: #fff;
 // $topbar-link-color-hover: #fff;
 // $topbar-link-color-active: #fff;
+// $topbar-link-color-active-hover: #fff;
 // $topbar-link-weight: normal;
 // $topbar-link-font-size: rem-calc(13);
 // $topbar-link-hover-lightness: -10%; // Darken by 10%
@@ -1075,113 +1187,6 @@
 // $topbar-sticky-class: ".sticky";
 // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
 
-//
-// TYPOGRAPHY
-//
-
-// $include-html-type-classes: $include-html-classes;
-// $include-open-sans: true;
-
-// We use these to control header font styles
-// $header-font-family: join("Open Sans", $body-font-family);
-// $header-font-weight: 300;
-// $header-font-style: normal;
-// $header-font-color: #222;
-// $header-line-height: 1.4;
-// $header-top-margin: .2rem;
-// $header-bottom-margin: .5rem;
-// $header-text-rendering: optimizeLegibility;
-
-// We use these to control header font sizes
-// $h1-font-size: rem-calc(44);
-// $h2-font-size: rem-calc(37);
-// $h3-font-size: rem-calc(27);
-// $h4-font-size: rem-calc(23);
-// $h5-font-size: rem-calc(18);
-// $h6-font-size: 1rem;
-
-// These control how subheaders are styled.
-// $subheader-line-height: 1.4;
-// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
-// $subheader-font-weight: 300;
-// $subheader-top-margin: .2rem;
-// $subheader-bottom-margin: .5rem;
-
-// A general <small> styling
-// $small-font-size: 60%;
-// $small-font-color: scale-color($header-font-color, $lightness: 35%);
-
-// We use these to style paragraphs
-// $paragraph-font-family: inherit;
-// $paragraph-font-weight: normal;
-// $paragraph-font-size: 1rem;
-// $paragraph-line-height: 1.6;
-// $paragraph-margin-bottom: rem-calc(20);
-// $paragraph-aside-font-size: rem-calc(14);
-// $paragraph-aside-line-height: 1.35;
-// $paragraph-aside-font-style: italic;
-// $paragraph-text-rendering: optimizeLegibility;
-
-// We use these to style <code> tags
-// $code-color: scale-color($alert-color, $lightness: -27%);
-// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
-// $code-font-weight: bold;
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-font-color: $primary-color;
-// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
-
-// We use these to style the <hr> element
-// $hr-border-width: 1px;
-// $hr-border-style: solid;
-// $hr-border-color: #ddd;
-// $hr-margin: rem-calc(20);
-
-// We use these to style lists
-// $list-style-position: outside;
-// $list-side-margin: 1.1rem;
-// $list-ordered-side-margin: 1.4rem;
-// $list-side-margin-no-bullet: 0;
-// $list-nested-margin: rem-calc(20);
-// $definition-list-header-weight: bold;
-// $definition-list-header-margin-bottom: .3rem;
-// $definition-list-margin-bottom: rem-calc(12);
-
-// We use these to style blockquotes
-// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
-// $blockquote-padding: rem-calc(9 20 0 19);
-// $blockquote-border: 1px solid #ddd;
-// $blockquote-cite-font-size: rem-calc(13);
-// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
-// $blockquote-cite-link-color: $blockquote-cite-font-color;
-
-// Acronym styles
-// $acronym-underline: 1px dotted #ddd;
-
-// We use these to control padding and margin
-// $microformat-padding: rem-calc(10 12);
-// $microformat-margin: rem-calc(0 0 20 0);
-
-// We use these to control the border styles
-// $microformat-border-width: 1px;
-// $microformat-border-style: solid;
-// $microformat-border-color: #ddd;
-
-// We use these to control full name font styles
-// $microformat-fullname-font-weight: bold;
-// $microformat-fullname-font-size: rem-calc(15);
-
-// We use this to control the summary font styles
-// $microformat-summary-font-weight: bold;
-
-// We use this to control abbr padding
-// $microformat-abbr-padding: rem-calc(0 1);
-
-// We use this to control abbr font styles
-// $microformat-abbr-font-weight: bold;
-// $microformat-abbr-font-decoration: none;
-
 //
 // VISIBILITY CLASSES
 //

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -24,26 +24,31 @@ $block-grid-media-queries: true !default;
 @mixin block-grid(
   $per-row:false, 
   $spacing:$block-grid-default-spacing, 
+  $include-spacing:true,
   $base-style:true) {
 
   @if $base-style {
     display: block;
     padding: 0;
-    margin: 0 0 0 (-$spacing/2);
+    margin: 0 (-$spacing/2);
     @include clearfix;
 
     &>li {
-      display: inline;
+      display: block;
       height: auto;
       float: $default-float;
-      padding: 0 ($spacing/2) $spacing;
+      @if $include-spacing {
+        padding: 0 ($spacing/2) $spacing;
+      }
     }
   }
 
   @if $per-row {
     &>li {
       width: 100%/$per-row;
-      padding: 0 ($spacing/2) $spacing;
+      @if $include-spacing {
+        padding: 0 ($spacing/2) $spacing;
+      }
       list-style: none;
 
       &:nth-of-type(n) { clear: none; }
@@ -56,10 +61,10 @@ $block-grid-media-queries: true !default;
 // Generate presentational markup for block grid.
 //
 // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
-@mixin block-grid-html-classes($size) {
+@mixin block-grid-html-classes($size,$include-spacing) {
   @for $i from 1 through $block-grid-elements {
     .#{$size}-block-grid-#{($i)} {
-      @include block-grid($i,$block-grid-default-spacing,false);
+      @include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
     }
   }
 }
@@ -70,15 +75,15 @@ $block-grid-media-queries: true !default;
     [class*="block-grid-"] { @include block-grid; }
 
     @media #{$small-up} {
-      @include block-grid-html-classes($size:small);
+      @include block-grid-html-classes($size:small,$include-spacing:false);
     }
 
     @media #{$medium-up} {
-      @include block-grid-html-classes($size:medium);
+      @include block-grid-html-classes($size:medium,$include-spacing:false);
     }
 
     @media #{$large-up} {
-      @include block-grid-html-classes($size:large);
+      @include block-grid-html-classes($size:large,$include-spacing:false);
     }
   }
 }

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

@@ -32,7 +32,7 @@ $crumb-slash-color: #aaa !default;
 $crumb-slash: "/" !default;
 
 //
-// Breakcrumb Mixins
+// Breadcrumb Mixins
 //
 
 // We use this mixin to create a container around our breadcrumbs
@@ -120,4 +120,4 @@ $crumb-slash: "/" !default;
       }
     }
   }
-}
+}