` elements.
+/// @type Boolean
+$enable-code-inline: true;
/// Default color for links.
/// @type Color
@@ -215,17 +195,9 @@ $blockquote-padding: rem-calc(9 20 0 19) !default;
/// @type List
$blockquote-border: 1px solid $medium-gray !default;
-/// Font size for `` elements.
-/// @type Number
-$cite-font-size: rem-calc(13) !default;
-
-/// Text color for `` elements.
-/// @type Color
-$cite-color: $dark-gray !default;
-
-/// Pseudo content for `` elements.
-/// @type String
-$cite-pseudo-content: '\2014 \0020' !default;
+/// Use the `.cite-block` component as default for `` elements.
+/// @type Boolean
+$enable-cite-block: true;
/// Font family for `` elements.
/// @type String | List
@@ -457,14 +429,12 @@ $abbr-underline: 1px dotted $black !default;
}
}
- // Citations
- cite {
- display: block;
- font-size: $cite-font-size;
- color: $cite-color;
-
- &:before {
- content: $cite-pseudo-content;
+ // Inline Citations
+ @if ($enable-cite-block == true) {
+ cite {
+ // Extending a class is not recommended.
+ // TODO: Break the typography-base/typography-helpers separation
+ @extend .cite-block;
}
}
@@ -479,17 +449,12 @@ $abbr-underline: 1px dotted $black !default;
figure {
margin: 0;
}
-
- // Code
- code {
- padding: $code-padding;
-
- border: $code-border;
- background-color: $code-background;
- font-family: $code-font-family;
- font-weight: $code-font-weight;
- color: $code-color;
+ // Code
+ @if ($enable-code-inline == true) {
+ code {
+ @extend .code-inline;
+ }
}
// Keystrokes
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss
index f34ac03ac4..323b285ce0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_helpers.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -26,7 +26,7 @@ $subheader-color: $dark-gray !default;
/// @type String
$subheader-font-weight: $global-weight-normal !default;
-/// Default top margin for subhheaders.
+/// Default top margin for subheaders.
/// @type Number
$subheader-margin-top: 0.2rem !default;
@@ -38,6 +38,92 @@ $subheader-margin-bottom: 0.5rem !default;
/// @type Number
$stat-font-size: 2.5rem !default;
+/// Text color for `.cite-block` component.
+/// @type Color
+$cite-color: $dark-gray !default;
+
+/// Font size for `.cite-block` component.
+/// @type Number
+$cite-font-size: rem-calc(13) !default;
+
+/// Pseudo content for `.cite-block` component.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
+/// Text color of `.code-inline` and `.code-block` components.
+/// @type Color
+$code-color: $black !default;
+
+/// Font family of `.code-inline` and `.code-block` components.
+/// @type String | List
+$code-font-family: $font-family-monospace !default;
+
+/// Font weight of text in `.code-inline` and `.code-block` components.
+/// @type String
+$code-font-weight: $global-weight-normal !default;
+
+/// Background color of `.code-inline` and `.code-block` components.
+/// @type Color
+$code-background: $light-gray !default;
+
+/// Border around `.code-inline` and `.code-block` components.
+/// @type List
+$code-border: 1px solid $medium-gray !default;
+
+/// Padding around text of the `.code-inline` component.
+/// @type Number | List
+$code-padding: rem-calc(2 5 1) !default;
+
+/// Padding around text of the `.code-block` component.
+/// @type Number | List
+$code-block-padding: 1rem !default;
+
+/// Margin under the `.code-block` component.
+/// @type Number
+$code-block-margin-bottom: 1.5rem !default;
+
+@mixin cite-block {
+ display: block;
+ color: $cite-color;
+ font-size: $cite-font-size;
+
+ &:before {
+ content: $cite-pseudo-content;
+ }
+}
+
+/// Add basic styles for a code helper.
+/// See `code-inline` and `code-block` mixins.
+@mixin code-style {
+ border: $code-border;
+ background-color: $code-background;
+
+ font-family: $code-font-family;
+ font-weight: $code-font-weight;
+ color: $code-color;
+}
+
+/// Make code helper from the `code-style` mixin inline.
+/// Used to generate `.code-inline`
+@mixin code-inline {
+ display: inline;
+ max-width: 100%;
+ word-wrap: break-word;
+
+ padding: $code-padding;
+}
+
+/// Make code helper from the `code-style` mixin a block.
+/// Used to generate `.code-block`
+@mixin code-block {
+ display: block;
+ overflow: auto;
+ white-space: pre;
+
+ padding: $code-block-padding;
+ margin-bottom: $code-block-margin-bottom;
+}
+
@mixin foundation-typography-helpers {
// Use to create a subheading under a main header
// Make sure you pair the two elements in a element, like this:
@@ -77,4 +163,18 @@ $stat-font-size: 2.5rem !default;
list-style: none;
}
}
+
+ .cite-block {
+ @include cite-block;
+ }
+
+ .code-inline {
+ @include code-style;
+ @include code-inline;
+ }
+
+ .code-block {
+ @include code-style;
+ @include code-block;
+ }
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss
index 25255b8543..716b2c9f99 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_print.scss
@@ -1,11 +1,15 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.
/// @type Boolean
/// @group global
$print-transparent-backgrounds: true !default;
+
+/// If `true`, displays next to all links their "href" when printed.
+/// @type Boolean
+/// @group global
$print-hrefs: true !default;
// sass-lint:disable-all
@@ -15,13 +19,19 @@ $print-hrefs: true !default;
@media print {
* {
+ // Ensure a "black-on-white" print by removing backgrounds,
+ // using black text everywhere and forcing the browser to economize ink.
@if $print-transparent-backgrounds {
background: transparent !important;
+ color: black !important; // Black prints faster: h5bp.com/s
+ color-adjust: economy;
+ }
+ // Otherwise, prevent any economy by the browser.
+ @else {
+ color-adjust: exact;
}
box-shadow: none !important;
-
- color: black !important; // Black prints faster: h5bp.com/s
text-shadow: none !important;
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss
index c794126adf..bba6db6534 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/typography/_typography.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss
index dbfae8c4bc..9c3e379279 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_breakpoint.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -16,6 +16,17 @@ $breakpoints: (
xxlarge: 1440px,
) !default;
+/// A list of named HiDPI breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries for resolutions.
+/// Values must represent the device pixels / web pixels ration and be unitless or in DPPX.
+/// @type Map
+$breakpoints-hidpi: (
+ hidpi-1: 1,
+ hidpi-1-5: 1.5,
+ hidpi-2: 2,
+ retina: 2,
+ hidpi-3: 3
+) !default;
+
/// The largest named breakpoint in which to include print as a media type
/// @type Keyword
$print-breakpoint: large !default;
@@ -25,7 +36,7 @@ $-zf-zero-breakpoint: small !default;
$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
@if nth(map-values($breakpoints), 1) != 0 {
- @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+ @error 'The first key in the $breakpoints map must have a value of "0".';
}
@else {
$-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
@@ -39,148 +50,146 @@ $breakpoint-classes: (small medium large) !default;
///
/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
@function breakpoint($val: $-zf-zero-breakpoint) {
+ // Web standard Pixels per inch. (1ddpx / $std-web-dpi) = 1dpi
+ // See https://www.w3.org/TR/css-values-3/#absolute-lengths
+ $std-web-dpi: 96;
+
// Size or keyword
$bp: nth($val, 1);
+ // Value of the following breakpoint
+ $bp-next: null;
// Value for max-width media queries
- $bp-max: 0;
+ $bp-min: null;
+ // Value for min-width media queries
+ $bp-max: null;
// Direction of media query (up, down, or only)
$dir: if(length($val) > 1, nth($val, 2), up);
- // Eventual output
- $str: '';
- // Is it a named media query?
- $named: false;
+ // If named, name of the breakpoint
+ $name: null;
+ // If the breakpoint is a HiDPI breakpoint
+ $hidpi: false;
// Orientation media queries have a unique syntax
@if $bp == 'landscape' or $bp == 'portrait' {
@return '(orientation: #{$bp})';
}
- @else if $bp == 'retina' {
- @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
- }
- // Try to pull a named breakpoint out of the $breakpoints map
+ // If a breakpoint name is given, get its value from the $breakpoints/$breakpoints-hidpi map.
@if type-of($bp) == 'string' {
@if map-has-key($breakpoints, $bp) {
- @if $dir == 'only' or $dir == 'down' {
- $bp-max: -zf-map-next($breakpoints, $bp);
- }
-
- $bp: map-get($breakpoints, $bp);
- $named: true;
+ $name: $bp;
+ $bp: map-get($breakpoints, $name);
+ $bp-next: -zf-map-next($breakpoints, $name);
+ }
+ @else if map-has-key($breakpoints-hidpi, $bp) {
+ $name: $bp;
+ $bp: map-get($breakpoints-hidpi, $name);
+ $bp-next: -zf-map-next-number($breakpoints-hidpi, $bp);
+ $hidpi: true;
}
@else {
$bp: 0;
- @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
+ @warn 'breakpoint(): "#{$val}" is not defined in your `$breakpoints` or `$breakpoints-hidpi` setting.';
}
}
- // Convert any pixel, rem, or unitless value to em
- $bp: -zf-bp-to-em($bp);
- @if $bp-max {
- $bp-max: -zf-bp-to-em($bp-max) - (1/16);
+ @if not $name and $dir == 'only' {
+ @warn 'breakpoint(): Only named media queries can have an `only` range.';
+ @return null;
}
- // Conditions to skip media query creation
- // - It's a named breakpoint that resolved to "0 down" or "0 up"
- // - It's a numeric breakpoint that resolved to "0 " + anything
- @if $bp > 0em or $dir == 'only' or $dir == 'down' {
- // `only` ranges use the format `(min-width: n) and (max-width: n)`
- @if $dir == 'only' {
- // Only named media queries can have an "only" range
- @if $named == true {
- // Only use "min-width" if the floor is greater than 0
- @if $bp > 0em {
- $str: $str + '(min-width: #{$bp})';
-
- // Only add "and" to the media query if there's a ceiling
- @if $bp-max != null {
- $str: $str + ' and ';
- }
- }
-
- // Only use "max-width" if there's a ceiling
- @if $bp-max != null {
- $str: $str + '(max-width: #{$bp-max})';
- }
- }
- @else {
- @warn 'breakpoint(): Only named media queries can have an `only` range.';
- }
- }
-
- // `down` ranges use the format `(max-width: n)`
- @else if $dir == 'down' {
- $max: if($named, $bp-max, $bp);
-
- // Skip media query creation if input value is exactly "0 down",
- // unless the function was called as "small down", in which case it's just "small only"
- @if $named or $bp > 0em {
- @if $max != null {
- $str: $str + '(max-width: #{$max})';
- }
- }
+ // Only 'only' and 'up' have a min limit.
+ @if $dir == 'only' or $dir == 'up' {
+ $bp-min: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
+ }
+ // Only 'only' and 'down' have a max limit.
+ @if $dir == 'only' or $dir == 'down' {
+ // If the breakpoint is a value, use it as max limit.
+ @if not $name {
+ $bp-max: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
}
-
- // `up` ranges use the format `(min-width: n)`
- @else if $bp > 0em {
- $str: $str + '(min-width: #{$bp})';
+ // If the breakpoint is named, the max limit is the following breakpoint - 1px.
+ @else if $bp-next {
+ // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
+ // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
+ // See https://github.com/foundation/foundation-sites/issues/11313
+ $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
}
}
- @return $str;
+ // Generate the media query string from min and max limits.
+ @if $hidpi {
+ // Generate values in DPI instead of DPPX for an IE9-11/Opera mini compatibility.
+ // See https://caniuse.com/#feat=css-media-resolution
+ $bp-min-dpi: if($bp-min, $bp-min * $std-web-dpi * 1dpi, $bp-min);
+ $bp-max-dpi: if($bp-max, $bp-max * $std-web-dpi * 1dpi, $bp-max);
+ @return zf-str-join(
+ -zf-bp-join($bp-min, $bp-max, '-webkit-min-device-pixel-ratio', '-webkit-max-device-pixel-ratio'),
+ -zf-bp-join($bp-min-dpi, $bp-max-dpi, 'min-resolution', 'max-resolution'),
+ ', ');
+ }
+ @else {
+ @return -zf-bp-join($bp-min, $bp-max);
+ }
}
/// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
-/// - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
+/// - If a string is passed, the mixin will look for it in the `$breakpoints` and `$breakpoints-hidpi` maps, and use a media query there.
/// - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
/// - If a rem value is passed, the unit will be changed to em.
/// - If an em value is passed, the value will be used as-is.
///
-/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
+/// If multiple values are passed, the mixin will generate a media query for each of them as described above.
+/// Since the content is duplicated for each breakpoint, this mixin should only be used with properties that
+/// change across breakpoints.
+///
+/// @param {Keyword|Number} $values... - Breakpoint name or px/rem/em value to process.
///
/// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
-@mixin breakpoint($value) {
- $str: breakpoint($value);
- $bp: index($-zf-breakpoints-keys, $value);
- $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
-
- $old-zf-size: null;
-
- // Make breakpoint size available as a variable
- @if global-variable-exists(-zf-size) {
- $old-zf-size: $-zf-size;
- }
- $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
-
- // If $str is still an empty string, no media query is needed
- @if $str == '' {
- @content;
- }
+@mixin breakpoint($values...) {
+ @for $i from 1 through length($values) {
+ $value: nth($values, $i);
+ $str: breakpoint($value);
+ $bp: index($-zf-breakpoints-keys, nth($value, 1));
+ $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
+ // Direction of media query (up, down, or only)
+ $dir: if(length($value) > 1, nth($value, 2), up);
+
+ $old-zf-size: null;
+
+ // Make breakpoint size available as a variable
+ @if global-variable-exists(-zf-size) {
+ $old-zf-size: $-zf-size;
+ }
+ $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
- // Otherwise, wrap the content in a media query
- @else {
- // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
- @if $bp != null and $bp <= $pbp {
- @media print, screen and #{$str} {
- @content;
- }
+ // If $str is still an empty string, no media query is needed
+ @if $str == '' {
+ @content;
}
+
+ // Otherwise, wrap the content in a media query
@else {
- @media screen and #{$str} {
- @content;
+ // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+ // generate print if the breakpoint affects the print-breakpoint (or smaller).
+ // This means the current condition only needs to be extended so 'down' always generates print.
+ @if $bp != null and ($bp <= $pbp or $dir == down) {
+ @media print, screen and #{$str} {
+ @content;
+ }
+ }
+ @else {
+ @media screen and #{$str} {
+ @content;
+ }
}
}
- }
- @if $old-zf-size != null {
- // Restore the old breakpoint size
$-zf-size: $old-zf-size !global;
- } @else {
- $-zf-size: null !global;
}
}
-/// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
+/// Converts the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
/// @access private
///
/// @param {Map} $map - Map to convert.
@@ -226,6 +235,26 @@ $breakpoint-classes: (small medium large) !default;
}
+/// Find the next number in a map.
+/// @access private
+///
+/// @param {Map} $map - Map to traverse.
+/// @param {Mixed} $number - Number to use as a starting point.
+///
+/// @returns {Mixed} The number following `$number`, if `$number` was found. If `$number` was not found, or `$number` was the biggest number in the map, returns `null`.
+@function -zf-map-next-number($map, $number) {
+
+ $next_number: null;
+
+ @each $k, $v in $map {
+ @if type-of($v) == 'number' and $v > $number and ($next_number == null or $v < $next_number) {
+ $next_number: $v;
+ }
+ }
+
+ @return $next_number;
+}
+
/// Return a list of our named breakpoints less than $key. Useful for dealing with
/// responsive gutters for the grid.
/// @access private
@@ -252,7 +281,7 @@ $breakpoint-classes: (small medium large) !default;
/// responsive gutters for the grid.
/// @access private
///
-/// @param {String} $breakpoing - a named or non-named breakpoing.
+/// @param {String} $breakpoint - a named or non-named breakpoint.
///
/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
@function -zf-closest-named-breakpoint($breakpoint) {
@@ -323,26 +352,84 @@ $breakpoint-classes: (small medium large) !default;
}
}
+/// Return the best breakpoint to use according to the calling context. It returns in order:
+/// 1. the given `$value` argument if it is not null.
+/// 2. the global breakpoint context `$-zf-size` if it is not null (like if called inside then `breakpoint()` mixin)
+/// 3. the given `$default` argument.
+/// @access private
+///
+/// @param {Keyword} $value [null] - Breakpoint to use in priority if non-null.
+/// @param {Keyword} $default [null] - Breakpoint to use by default if no other value can be used.
+///
+/// @return {Keyword} The resolved breakpoint.
+@function -zf-current-breakpoint($value: null, $default: null) {
+ @if ($value != null) {
+ @return $value;
+ }
+ @else if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+ @return $-zf-size;
+ }
+ @else {
+ @return $default;
+ }
+}
+
+/// Return media query string from the given min and/or max limits.
+/// If a limit is equal to `null` or `0`, it is ignored.
+/// @access private
+///
+/// @param {Number} $min [0] - Min media query limit.
+/// @param {Number} $max [0] - Max media query limit.
+/// @param {String} $min-name ['min-width'] - Name of the min media query limit.
+/// @param {String} $delimiter ['max-width'] - Name of the max media query limit.
+///
+/// @returns {String} Media Query string.
+@function -zf-bp-join(
+ $min: 0,
+ $max: 0,
+ $min-name: 'min-width',
+ $max-name: 'max-width'
+) {
+ @return zf-str-join(
+ if($min and $min > 0, '(#{$min-name}: #{$min})', null),
+ if($max and $max > 0, '(#{$max-name}: #{$max})', null),
+ ' and ');
+}
+
+$small-up: '';
+$small-only: '';
+
@if map-has-key($breakpoints, small) {
$small-up: screen;
$small-only: unquote('screen and #{breakpoint(small only)}');
}
+$medium-up: '';
+$medium-only: '';
+
@if map-has-key($breakpoints, medium) {
$medium-up: unquote('screen and #{breakpoint(medium)}');
$medium-only: unquote('screen and #{breakpoint(medium only)}');
}
+$large-up: '';
+$large-only: '';
+
@if map-has-key($breakpoints, large) {
$large-up: unquote('screen and #{breakpoint(large)}');
$large-only: unquote('screen and #{breakpoint(large only)}');
}
+$xlarge-up: '';
+$xlarge-only: '';
+
@if map-has-key($breakpoints, xlarge) {
$xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
$xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
}
+$xxlarge-up: '';
+
@if map-has-key($breakpoints, xxlarge) {
$xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss
index 11a04d9f41..da2ad51e8b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_color.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
@import 'math';
@@ -109,21 +109,31 @@ $contrast-warnings: true !default;
}
}
-/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
+/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
@mixin add-foundation-colors() {
@if map-has-key($foundation-palette, primary) {
$primary-color: map-get($foundation-palette, primary) !global;
+ } @else {
+ $primary-color: #1779ba !global;
}
@if map-has-key($foundation-palette, secondary) {
$secondary-color: map-get($foundation-palette, secondary) !global;
+ } @else {
+ $secondary-color: #767676 !global;
}
@if map-has-key($foundation-palette, success) {
$success-color: map-get($foundation-palette, success) !global;
+ } @else {
+ $success-color: #3adb76 !global;
}
@if map-has-key($foundation-palette, warning) {
$warning-color: map-get($foundation-palette, warning) !global;
+ } @else {
+ $warning-color: #ffae00 !global;
}
@if map-has-key($foundation-palette, alert) {
$alert-color: map-get($foundation-palette, alert) !global;
+ } @else {
+ $alert-color: #cc4b37 !global;
}
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss
index 98a868aa0d..8241e8da1f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_direction.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -21,7 +21,7 @@
@return null;
}
- // Calcul the opposite place in a circle, with a starting index of 1
+ // Calculate the opposite place in a circle, with a starting index of 1
$length: length($dirs);
$demi: $length / 2;
$opposite-place: (($place + $demi - 1) % $length) + 1;
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss
index cd24dd7197..2a48b6dbdb 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_flex.scss
@@ -1,10 +1,15 @@
-$-zf-flex-justify: (
- 'left': flex-start,
- 'right': flex-end,
- 'center': center,
- 'justify': space-between,
- 'spaced': space-around,
-);
+@function -zf-flex-justify($text-direction){
+ $-zf-flex-justify: (
+ 'left': if($text-direction == rtl, flex-end, flex-start),
+ 'right': if($text-direction == rtl, flex-start, flex-end),
+ 'center': center,
+ 'justify': space-between,
+ 'spaced': space-around,
+ );
+
+ @return $-zf-flex-justify;
+}
+
$-zf-flex-align: (
'top': flex-start,
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss
index e3d1908864..c94b2c9c47 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_math.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -70,3 +70,78 @@
$h: nth($ratio, 3);
@return $h / $w * 100%;
}
+
+/// Parse the given `$fraction` to numerators and denumerators.
+///
+/// @param {*} $fraction - Value representing a fraction to parse. It can be formatted as `50%`, `1 of 2`, `1/2` or `50` (no denominator would be returned).
+///
+/// @return {List} List of parsed values with numerator at first position and denumerator as second. These values may be null.
+@function zf-parse-fraction($fraction) {
+
+ @if type-of($fraction) == 'number' {
+ // "50%"
+ @if unit($fraction) == '%' {
+ @return (strip-unit($fraction), 100);
+ }
+ @else if (unit($fraction) == '') {
+ // "0.5"
+ @if $fraction < 1 {
+ @return ($fraction * 100, 100);
+ }
+ // "50"
+ @else {
+ @return ($fraction, null);
+ }
+ }
+ }
+
+ @else if type-of($fraction) == 'list' {
+ // "50 of 100", "50/100"...
+ @if length($fraction) == 3
+ and type-of(nth($fraction, 1) == 'number')
+ and type-of(nth($fraction, 3) == 'number') {
+ @return (nth($fraction, 1), nth($fraction, 3));
+ }
+ }
+
+ @return (null, null);
+}
+
+/// Returns whether the given `$value` represents a fraction. Supports formats like `50%`, `1 of 2`, `1 per 2` or `1/2`.
+///
+/// @param {*} $value - Value to test.
+/// @param {Boolean} $allow-no-denominator [false] - If `true`, simple numbers without denominators like `50` are supported.
+///
+/// @return {Boolean} `true` if `$value` represents a fraction, `false` otherwise.
+@function zf-is-fraction($value, $allow-no-denominator: false) {
+ $parsed: zf-parse-fraction($value);
+ @return not(nth($parsed, 1) == null
+ or (nth($parsed, 2) == null and $allow-no-denominator == false));
+}
+
+/// Calculate a percentage from a given fraction.
+///
+/// @param {Number|List} $fraction - Value representing a fraction to use to calculate the percentage, formatted as `50` (relative to `$denominator`), `50%`, `1 of 2` or `1/2`.
+/// @param {Number|List} $denominator - Default value to use as denominator when `$fraction` represents an absolute value.
+@function fraction-to-percentage(
+ $fraction,
+ $denominator: null
+) {
+ $parsed: zf-parse-fraction($fraction);
+ $parsed-nominator: nth($parsed, 1);
+ $parsed-denominator: nth($parsed, 2);
+
+ @if $parsed-nominator == null {
+ @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
+ }
+ @if $parsed-denominator == null {
+ @if type-of($denominator) == 'number' {
+ $parsed-denominator: $denominator;
+ }
+ @else {
+ @error 'Error with "fraction-to-percentage()". A default "$denominator" is required to support absolute values';
+ }
+ }
+
+ @return percentage($parsed-nominator / $parsed-denominator);
+}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss
index d5dbfdb656..af615ddec4 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_mixins.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -7,7 +7,7 @@
////
/// Creates an inner box-shadow for only one side
-///
+///
/// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
/// @param {Number} $size - Width for the target side.
/// @param {Color} $color - Color of the shadow.
@@ -207,27 +207,36 @@
/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
-@mixin element-invisible {
- position: absolute !important;
- width: 1px;
- height: 1px;
- padding: 0;
- overflow: hidden;
- clip: rect(0,0,0,0);
- white-space: nowrap;
- clip-path: inset(50%);
- border: 0;
+///
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible(
+ $enforce: true
+) {
+ $important: if($enforce, '!important', null);
+
+ position: absolute #{$important};
+ width: 1px #{$important};
+ height: 1px #{$important};
+ padding: 0 #{$important};
+ overflow: hidden #{$important};
+ clip: rect(0,0,0,0) #{$important};
+ white-space: nowrap #{$important};
+ border: 0 #{$important};
}
/// Reverses the CSS output created by the `element-invisible()` mixin.
-@mixin element-invisible-off {
- position: static !important;
- width: auto;
- height: auto;
- overflow: visible;
- clip: auto;
- white-space: normal;
- clip-path: none;
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible-off(
+ $enforce: true
+) {
+ $important: if($enforce, '!important', null);
+
+ position: static #{$important};
+ width: auto #{$important};
+ height: auto #{$important};
+ overflow: visible #{$important};
+ clip: auto #{$important};
+ white-space: normal #{$important};
}
/// Vertically centers the element inside of its first non-static parent,
@@ -259,24 +268,72 @@
///
/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
/// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
-@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
- $list: $breakpoint-classes;
+@mixin -zf-each-breakpoint(
+ $small: true,
+ $auto-insert-breakpoints: true
+) {
+ @include -zf-each-breakpoint-in(auto, -zf-bool($small), -zf-bool($auto-insert-breakpoints)) {
+ @content
+ };
+}
+
+/// Iterates with `@content` through the given list of breakpoints `$breakpoints`.
+///
+/// @access private
+///
+/// @param {Keyword|List} $breakpoints [auto] - Breakpoints to iterates on. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints.
+/// @param {Boolean|Null} $zero-breakpoint [null] - Whether the zero-breakpoint (often `small`) must be included. If `true`, it will always be added to the list if not already there. If `false`, it will always be removed. Does nothing by default.
+/// @param {Boolean|Keyword} $media-queries [true] - Whether media-queries must be generated. If `for-lists`, only generate media-queries when `$breakpoints` is a list.
+@mixin -zf-each-breakpoint-in(
+ $breakpoints: auto,
+ $zero-breakpoint: null,
+ $media-queries: true
+) {
+ $-list: ();
+ $-breakpoints-is-a-list: true;
- @if not $small {
- $list: sl-remove($list, $-zf-zero-breakpoint);
+ // Retrieve the list of breakpoint(s) to iterate on.
+ @if $breakpoints == auto {
+ $-list: $breakpoint-classes;
+ }
+ @else if type-of($breakpoints) == 'list' {
+ $-list: $breakpoints;
+ }
+ @else if type-of($breakpoints) == 'string' {
+ $-list: ($breakpoints);
+ $-breakpoints-is-a-list: false;
+ }
+ @else {
+ @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
+ }
+
+ // Add or remove the zero breakpoint according to `$zero-breakpoint`
+ @if $zero-breakpoint == true {
+ $-list: join(($-zf-zero-breakpoint), sl-remove($-list, $-zf-zero-breakpoint));
+ }
+ @else if $zero-breakpoint == false {
+ $-list: sl-remove($-list, $-zf-zero-breakpoint);
}
- @each $name in $list {
- $-zf-size: $name !global;
+ // Iterate on breakpoint(s)
+ @each $bp in $-list {
+ $old-zf-size: null;
+ @if global-variable-exists(-zf-size) {
+ $old-zf-size: $-zf-size;
+ }
+ $-zf-size: $bp !global;
- @if $auto-insert-breakpoints {
- @include breakpoint($name) {
+ @if ($media-queries == true
+ or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {
+ @include breakpoint($bp) {
@content;
}
}
@else {
@content;
}
+
+ $-zf-size: $old-zf-size !global;
}
}
@@ -303,7 +360,10 @@
@else {
// breakpoint name
@if type-of($name) == 'string' {
- $name: -zf-get-bp-val($map, $name);
+ $bp-value: -zf-get-bp-val($map, $name);
+ @if $bp-value != null {
+ $name: $bp-value;
+ }
}
// breakpoint value
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss
index 2c79c04112..626f86c4e9 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_selector.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss
index adff086aea..19e253eb77 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_typography.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss
index 6d60f38543..beebcdf53c 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_unit.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -20,7 +20,7 @@ $global-font-size: 100% !default;
/// Converts one or more pixel values into matching rem values.
///
/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$global-font-size` variable as the base.
///
/// @returns {List} A list of converted values.
@function rem-calc($values, $base: null) {
@@ -125,7 +125,7 @@ $global-font-size: 100% !default;
$base: strip-unit($base) * 16px;
}
- // Now lets convert our value to pixels too
+ // Now let's convert our value to pixels too
@if unit($value) == '%' {
$value: ($value / 100%) * $base;
}
@@ -143,7 +143,7 @@ $global-font-size: 100% !default;
@return strip-unit($value) / strip-unit($base);
}
- // assume that line-heights greatern then 10 are meant to be absolute in 'px'
+ // assume that line-heights greater than 10 are meant to be absolute in 'px'
@if unitless($value) and ($value > 10) {
@return $value / strip-unit($base);
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss
index ddcb59eb06..e50fd7b5b2 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_util.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
@import 'math';
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss
index a063a82af6..d7605bd81b 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/util/_value.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -139,6 +139,35 @@
}
+/// Return a join of the two given strings `$str1` and `$str2`.
+/// If the two strings are not empty, they are separated by `$delimiter`.
+///
+/// @param {String} $str1 [null] - First string to join.
+/// @param {String} $str1 [null] - Second string to join.
+/// @param {String} $delimiter [null] - Delimieter between `$str1` and `$str2`.
+///
+/// @returns {String} Join of `$str1`, `$delimiter` and `$str2`.
+@function zf-str-join(
+ $str1: null,
+ $str2: null,
+ $delimiter: null
+) {
+ $ret: '';
+
+ @if $str1 and str-length($str1) > 0 {
+ $ret: $ret + $str1;
+
+ @if $delimiter and str-length($delimiter) > 0 and $str2 and str-length($str2) > 0 {
+ $ret: $ret + $delimiter;
+ }
+ }
+ @if $str2 and str-length($str2) > 0 {
+ $ret: $ret + $str2;
+ }
+
+ @return $ret;
+}
+
/// Safely return a value from a map.
///
/// @param {Map} $map - Map to retrieve a value from.
@@ -158,3 +187,14 @@
@error '`#{$map}` is not a valid map';
}
}
+
+/// Convert the given `$val` to a Boolean. Empty values are considered as false.
+////
+/// @access private
+///
+/// @param {*} $val - Value to convert.
+///
+/// @returns {Boolean} Converted Boolean value.
+@function -zf-bool($val) {
+ @return $val != false and has-value($val);
+}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss
new file mode 100644
index 0000000000..1023303a0b
--- /dev/null
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/vendor/normalize.scss
@@ -0,0 +1,281 @@
+@mixin foundation-normalize() {
+ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+ // Document
+ // ==========================================================================
+
+ // 1. Correct the line height in all browsers.
+ // 2. Prevent adjustments of font size after orientation changes in iOS.
+
+ html {
+ line-height: 1.15; // 1
+ -webkit-text-size-adjust: 100%; // 2
+ }
+
+ // Sections
+ // ==========================================================================
+
+ // Remove the margin in all browsers.
+
+ body {
+ margin: 0;
+ }
+
+ // Correct the font size and margin on `h1` elements within `section` and
+ // `article` contexts in Chrome, Firefox, and Safari.
+
+ h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+ }
+
+ // Grouping content
+ // ==========================================================================
+
+ // 1. Add the correct box sizing in Firefox.
+ // 2. Show the overflow in Edge and IE.
+
+ hr {
+ box-sizing: content-box; // 1
+ height: 0; // 1
+ overflow: visible; // 2
+ }
+
+ // 1. Correct the inheritance and scaling of font size in all browsers.
+ // 2. Correct the odd `em` font sizing in all browsers.
+
+ pre {
+ font-family: monospace, monospace; // 1
+ font-size: 1em; // 2
+ }
+
+ // Text-level semantics
+ // ==========================================================================
+
+ // Remove the gray background on active links in IE 10.
+
+ a {
+ background-color: transparent;
+ }
+
+ // 1. Remove the bottom border in Chrome 57-
+ // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+
+ abbr[title] {
+ border-bottom: none; // 1
+ text-decoration: underline; // 2
+ text-decoration: underline dotted; // 2
+ }
+
+ // Add the correct font weight in Chrome, Edge, and Safari.
+
+ b,
+ strong {
+ font-weight: bolder;
+ }
+
+ // 1. Correct the inheritance and scaling of font size in all browsers.
+ // 2. Correct the odd `em` font sizing in all browsers.
+
+ code,
+ kbd,
+ samp {
+ font-family: monospace, monospace; // 1
+ font-size: 1em; // 2
+ }
+
+ // Add the correct font size in all browsers.
+
+ small {
+ font-size: 80%;
+ }
+
+ // Prevent `sub` and `sup` elements from affecting the line height in
+ // all browsers.
+
+ sub,
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+ }
+
+ sub {
+ bottom: -0.25em;
+ }
+
+ sup {
+ top: -0.5em;
+ }
+
+ // Embedded content
+ // ==========================================================================
+
+ // Remove the border on images inside links in IE 10.
+
+ img {
+ border-style: none;
+ }
+
+ // Forms
+ // ==========================================================================
+
+ // 1. Change the font styles in all browsers.
+ // 2. Remove the margin in Firefox and Safari.
+
+ button,
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-family: inherit; // 1
+ font-size: 100%; // 1
+ line-height: 1.15; // 1
+ margin: 0; // 2
+ }
+
+ // Show the overflow in IE.
+ // 1. Show the overflow in Edge.
+
+ button,
+ input { // 1
+ overflow: visible;
+ }
+
+ // Remove the inheritance of text transform in Edge, Firefox, and IE.
+ // 1. Remove the inheritance of text transform in Firefox.
+
+ button,
+ select { // 1
+ text-transform: none;
+ }
+
+ // Correct the inability to style clickable types in iOS and Safari.
+
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+ -webkit-appearance: button;
+ }
+
+ // Remove the inner border and padding in Firefox.
+
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+ }
+
+ // Restore the focus styles unset by the previous rule.
+
+ button:-moz-focusring,
+ [type="button"]:-moz-focusring,
+ [type="reset"]:-moz-focusring,
+ [type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+ }
+
+ // Correct the padding in Firefox.
+
+ fieldset {
+ padding: 0.35em 0.75em 0.625em;
+ }
+
+ // 1. Correct the text wrapping in Edge and IE.
+ // 2. Correct the color inheritance from `fieldset` elements in IE.
+ // 3. Remove the padding so developers are not caught out when they zero out
+ // `fieldset` elements in all browsers.
+
+ legend {
+ box-sizing: border-box; // 1
+ color: inherit; // 2
+ display: table; // 1
+ max-width: 100%; // 1
+ padding: 0; // 3
+ white-space: normal; // 1
+ }
+
+ // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+
+ progress {
+ vertical-align: baseline;
+ }
+
+ // Remove the default vertical scrollbar in IE 10+.
+
+ textarea {
+ overflow: auto;
+ }
+
+ // 1. Add the correct box sizing in IE 10.
+ // 2. Remove the padding in IE 10.
+
+ [type="checkbox"],
+ [type="radio"] {
+ box-sizing: border-box; // 1
+ padding: 0; // 2
+ }
+
+ // Correct the cursor style of increment and decrement buttons in Chrome.
+
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+ height: auto;
+ }
+
+ // 1. Correct the odd appearance in Chrome and Safari.
+ // 2. Correct the outline style in Safari.
+
+ [type="search"] {
+ -webkit-appearance: textfield; // 1
+ outline-offset: -2px; // 2
+ }
+
+ // Remove the inner padding in Chrome and Safari on macOS.
+
+ [type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+
+ // 1. Correct the inability to style clickable types in iOS and Safari.
+ // 2. Change font properties to `inherit` in Safari.
+
+ ::-webkit-file-upload-button {
+ -webkit-appearance: button; // 1
+ font: inherit; // 2
+ }
+
+ // Interactive
+ // ==========================================================================
+
+ // Add the correct display in Edge, IE 10+, and Firefox.
+
+ details {
+ display: block;
+ }
+
+ // Add the correct display in all browsers.
+
+ summary {
+ display: list-item;
+ }
+
+ // Misc
+ // ==========================================================================
+
+ // Add the correct display in IE 10+.
+
+ template {
+ display: none;
+ }
+
+ // Add the correct display in IE 10.
+
+ [hidden] {
+ display: none;
+ }
+}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss
index 10f70a64a5..94d1b05a66 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_cell.scss
@@ -1,143 +1,250 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
/// @group xy-grid
////
-/// Calculate the percentage size of a cell.
+/// Returns the appropriate CSS flex value for a cell base.
///
-/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
+///
+/// @returns {List} The cell flex property value.
+@function xy-cell-base($size: full) {
+ @if ($size == 'auto') {
+ @return 1 1 0px;
+ }
+ @else if ($size == 'grow') {
+ @return 1 0 auto;
+ }
+ @else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {
+ @return 0 0 auto;
+ }
+ @return null;
+}
+
+/// Calculate the size of a cell gutters.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns the responsive gutters map `$gutters`. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|Map} The cell gutter size or the responsive gutters map.
+@function xy-cell-gutters(
+ $gutters: $grid-margin-gutters,
+ $breakpoint: null
+) {
+ // For `auto`, returns the responsive map `$gutters`.
+ @if ($breakpoint == 'auto') {
+ @return $gutters;
+ }
+
+ // Use the contextual breakpoint by default.
+ $breakpoint: -zf-current-breakpoint($breakpoint);
+
+ @if ($breakpoint) {
+ @return -zf-get-bp-val($gutters, $breakpoint);
+ }
+ @else {
+ @return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;
+ }
+}
+
+/// Returns the percentage size of a cell.
+///
+/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.
+///
+/// @returns {Number} Size of the cell (in percent).
@function xy-cell-size(
$size: $grid-columns
) {
- // Parsing percents, decimals, n of n and number counts
- @if type-of($size) == 'number' {
- @if unit($size) == '%' {
- $size: $size;
- }
- @else if $size < 1 {
- $size: percentage($size);
- }
- @else {
- $size: percentage($size / $grid-columns);
- }
+ @return fraction-to-percentage($size, $denominator: $grid-columns);
+}
+
+/// Returns the appropriate CSS value for a cell size.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full`, `auto`, `shrink` or any fraction like `6`, `50%`, `1 of 2` or `1/2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns a map of sizes adapted to responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.
+@function xy-cell-size-css(
+ $size: full,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: null
+) {
+ $margin-gutter: 0;
+
+ @if ($size == 'auto' or $size == 'shrink') {
+ @return auto;
}
- // Parsing "n of n" or "n/n" expressions
- @elseif type-of($size) == 'list' {
- @if length($size) != 3 {
- @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
+ // For cells with margin gutters, the gutter is included in the width.
+ @if ($gutter-type == 'margin') {
+ $margin-gutter: xy-cell-gutters($gutters, $breakpoint);
+ @if ($margin-gutter == null) {
+ @error 'xy-cell-size: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
}
- @else {
- $size: percentage(nth($size, 1) / nth($size, 3));
+ }
+
+ // Calculate the cell size (number)
+ $size-raw: if($size == 'full', 100%, xy-cell-size($size));
+
+ // Calculate the cell CSS size including gutters (string)
+ // If the cell has responsive margin gutters, return a responsive map of sizes.
+ @if type-of($margin-gutter) == 'map' {
+ $responsive-css-sizes: ();
+
+ @each $bp, $mg in $margin-gutter {
+ $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($mg)}));
+ $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
}
+
+ @return $responsive-css-sizes;
}
- // Anything else is incorrect
+ // Otherwise, return a single CSS size.
@else {
- @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+ $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($margin-gutter)}));
+ @return $css-size;
}
-
- @return $size;
}
/// Sets base flex properties for cells.
///
-/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto` or `shrink`.
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
@mixin xy-cell-base($size: full) {
+ $base: xy-cell-base($size);
+
+ flex: #{$base};
+
+ // Set base styles for "full" only
@if($size == 'full') {
- // This is the base style, all others inherit from it
- flex: 0 0 auto;
min-height: 0px;
min-width: 0px;
}
- @elseif ($size == 'auto') {
- flex: 1 1 0px; // sass-lint:disable-line zero-unit
- }
- @elseif ($size == 'shrink') {
- flex: 0 0 auto;
- }
}
/// Resets a cells width (or height if vertical is true) as well as strips its gutters.
///
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
@mixin xy-cell-reset($vertical: true) {
- $direction: if($vertical == true, width, height);
+ $direction: if($vertical == true, height, width);
#{$direction}: auto;
+ max-#{$direction}: none;
}
-// Sets our cell widths or heights depending on gutter type.
-@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
+/// Sets sizing properties for cells.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates sizes adapted for responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-size(
+ $size: full,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: null,
+ $vertical: false
+) {
+ $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
$direction: if($vertical == true, height, width);
- @if($size == 'full') {
- $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
- #{$direction}: $val;
+
+ @if (type-of($sizes) == 'map') {
+ @include -zf-breakpoint-value(auto, $sizes) {
+ #{$direction}: $-zf-bp-value;
+ }
}
- @elseif ($size == 'auto') {
- #{$direction}: auto;
- $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+ @else {
+ #{$direction}: $sizes;
+ }
+}
+
+/// Sets gutters properties for cells.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.
+@mixin xy-cell-gutters(
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $gutter-position: null,
+ $breakpoint: null,
+ $vertical: false
+) {
+ // Get the default gutter position according to cell direction
+ @if($gutter-position == null) {
+ $gutter-position: if($vertical == true, top bottom, left right);
}
- @elseif ($size == 'shrink') {
- #{$direction}: auto;
+
+ // Get the gutter width for this breakpoint
+ $gutter-width: xy-cell-gutters($gutters, $breakpoint);
+ @if ($gutter-width == null) {
+ @error 'xy-cell-gutters: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
}
- @else {
- $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
- #{$direction}: $val;
+
+ @if ($gutter-type and $gutter-type != none) {
+ @include xy-gutters($gutter-width, $gutter-type, $gutter-position);
}
}
/// Creates a cell for your grid.
///
-/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work properly otherwise.
@mixin xy-cell(
$size: full,
- $gutter-output: true,
+ $gutter-output: null,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
- $gutter-position: right left,
+ $gutter-position: null,
$breakpoint: null,
- $vertical: false
+ $vertical: false,
+ $output: (base size gutters)
) {
- @if($breakpoint == null) {
- // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
- @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
- $breakpoint: $-zf-size;
- }
- @else {
- $breakpoint: $-zf-zero-breakpoint;
+ // Default for $gutter-output
+ @if ($gutter-output != null) {
+ @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
+ @if ($gutter-output == false) {
+ $output: sl-remove($output, gutters);
}
}
- // Get our gutters from map if available, if not map just return the value.
- $gutter: -zf-get-bp-val($gutters, $breakpoint);
-
- // Base flex properties
- @include xy-cell-base($size);
-
- @if($gutter-type == 'margin') {
- @include -xy-cell-properties($size, $gutter, $vertical);
+ @if (index($output, base)) {
+ @include xy-cell-base($size);
}
- @else {
- @include -xy-cell-properties($size, 0, $vertical);
+ @if (index($output, size)) {
+ @include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);
}
-
- @if $gutter-output {
- @include xy-gutters($gutter, $gutter-type, $gutter-position);
+ @if (index($output, gutters)) {
+ @include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
}
}
/// Creates a single breakpoint sized grid. Used to generate our grid classes.
///
-/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// `xy-cell-static()` is deprecated and will be removed.
+/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
+/// See migration notes at https://git.io/foundation-6-6-0
+///
+/// @deprecated v6.6.0
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
@@ -150,20 +257,16 @@
$breakpoint: $-zf-zero-breakpoint,
$vertical: false
) {
+ @warn 'xy-cell-static() mixin is deprecated and will be removed. Use "xy-cell()" instead. See migration notes at https://git.io/foundation-6-6-0';
$gutter: -zf-get-bp-val($gutters, $breakpoint);
$gutter-position: if($vertical == true, top bottom, left right);
- @if($gutter-type == 'margin') {
- @include -xy-cell-properties($size, $gutter, $vertical);
- }
- @else {
- @include -xy-cell-properties($size, 0, $vertical);
- }
+ $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
+ $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
- // If we want to output the gutters
- @if($gutter-output) {
- // TODO: Figure out if we need to pass breakpoint in here too.
+ @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+ @if ($-gutter-output) {
@include xy-gutters($gutter, $gutter-type, $gutter-position);
}
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss
index ab8b577800..29477068b0 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_classes.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -28,8 +28,7 @@
}
.cell {
- @include xy-cell-base();
- @include xy-cell-static($grid-columns, false, $gutter-type: padding);
+ @include xy-cell(full, $gutter-type: none);
&.auto {
@include xy-cell-base(auto);
@@ -42,20 +41,20 @@
}
.grid-x {
> .auto {
- @include xy-cell-static(auto, false);
+ @include xy-cell-size(auto, $gutter-type: none);
}
> .shrink {
- @include xy-cell-static(shrink, false);
+ @include xy-cell-size(shrink, $gutter-type: none);
}
}
// Auto width
@include -zf-each-breakpoint() {
// This is a bit of a hack/workaround, see these issues & PRs for the backstory:
- // https://github.com/zurb/foundation-sites/issues/10244
- // https://github.com/zurb/foundation-sites/pull/10222 and
- // https://github.com/zurb/foundation-sites/pull/10164
+ // https://github.com/foundation/foundation-sites/issues/10244
+ // https://github.com/foundation/foundation-sites/pull/10222 and
+ // https://github.com/foundation/foundation-sites/pull/10164
.grid-x {
$str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
@for $i from 1 through $grid-columns {
@@ -68,22 +67,31 @@
}
@include -zf-each-breakpoint() {
- @if not($-zf-size == small) {
+ // Responsive "auto" modifier
+ @if not($-zf-size == $-zf-zero-breakpoint) {
.grid-x > .#{$-zf-size}-auto {
- @include xy-cell-base(auto);
- @include xy-cell-static(auto, false);
+ @include xy-cell(auto, $gutter-type: none);
}
+ }
+
+ %-xy-cell-base-shrink-horizontal-#{$-zf-size} {
+ @include xy-cell-base(shrink);
+ }
+ // Responsive "shrink" modifier
+ @if not($-zf-size == $-zf-zero-breakpoint) {
.grid-x > .#{$-zf-size}-shrink {
- @include xy-cell-base(shrink);
- @include xy-cell-static(shrink, false);
+ @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
+ @include xy-cell-size(shrink, $gutter-type: none);
}
}
+ // Responsive width modifiers
@for $i from 1 through $grid-columns {
// Sizing (percentage)
.grid-x > .#{$-zf-size}-#{$i} {
- @include xy-cell-static($i, false, $gutter-type: padding);
+ @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
+ @include xy-cell-size($i, $gutter-type: none);
}
}
}
@@ -102,11 +110,11 @@
@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
$prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
> .#{$prefix}auto {
- @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ @include xy-cell-size(auto, $vertical: $vertical);
}
> .#{$prefix}shrink {
- @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ @include xy-cell-size(shrink, $vertical: $vertical);
}
@for $i from 1 through $grid-columns {
@@ -114,7 +122,7 @@
$classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
> #{$classname} {
- @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ @include xy-cell-size($i, $vertical: $vertical);
}
}
}
@@ -130,14 +138,14 @@
// Base cell styles
> .cell {
- @include xy-cell-static($vertical: $vertical);
+ @include xy-cell($vertical: $vertical, $output: (size gutters));
}
// base styles need to all be before the auto and shrink styles
@include -zf-each-breakpoint() {
@if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
> .cell {
- @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+ @include xy-cell($vertical: $vertical, $output: (size gutters));
}
}
}
@@ -145,12 +153,12 @@
@include -zf-each-breakpoint() {
// This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
- // for prior breakpoints based on the responsive gutter.
+ // for all prior breakpoints.
+ // As their gutter is defined with their width/height, even breakpoint without a new margin must be
+ // generated to not having their width/height overrided by re-adjusted smaller breakpoints.
@if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
@each $bp in -zf-breakpoints-less-than($-zf-size) {
- @if(map-has-key($grid-margin-gutters, $bp)) {
- @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
- }
+ @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
}
}
@@ -187,7 +195,7 @@
@include -zf-each-breakpoint {
@for $i from 1 through $xy-block-grid-max {
.#{$-zf-size}-up-#{$i} {
- @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
+ @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: padding, $output: (size));
}
}
}
@@ -202,7 +210,7 @@
@each $bp in -zf-breakpoints-less-than($-zf-size) {
@if(map-has-key($grid-margin-gutters, $bp)) {
.grid-margin-x.#{$bp}-up-#{$i} {
- @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
+ @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));
}
}
}
@@ -210,7 +218,7 @@
}
@for $i from 1 through $xy-block-grid-max {
.grid-margin-x.#{$-zf-size}-up-#{$i} {
- @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+ @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));
}
}
}
@@ -242,11 +250,11 @@
$o: $i - 1;
.#{$-zf-size}-offset-#{$o} {
- @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+ @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding);
}
.grid-margin-x > .#{$-zf-size}-offset-#{$o} {
- @include xy-cell-offset($o, $breakpoint: $-zf-size);
+ @include xy-cell-offset($o);
}
}
}
@@ -259,7 +267,7 @@
) {
@include -zf-each-breakpoint() {
- @if not($-zf-size == small) {
+ @if not($-zf-size == $-zf-zero-breakpoint) {
}
}
@@ -272,19 +280,19 @@
}
> .auto {
- @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell-size(auto, $gutter-type: none, $vertical: true);
}
> .shrink {
- @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell-size(shrink, $gutter-type: none, $vertical: true);
}
@include -zf-each-breakpoint() {
// This is a bit of a hack/workaround, see these issues and PRs for the backstory:
- // https://github.com/zurb/foundation-sites/issues/10244
- // https://github.com/zurb/foundation-sites/pull/10222 and
- // https://github.com/zurb/foundation-sites/pull/10164
+ // https://github.com/foundation/foundation-sites/issues/10244
+ // https://github.com/foundation/foundation-sites/pull/10222 and
+ // https://github.com/foundation/foundation-sites/pull/10164
$str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
@for $i from 1 through $grid-columns {
$str: $str + ", > .#{$-zf-size}-#{$i}"
@@ -295,22 +303,31 @@
}
@include -zf-each-breakpoint() {
- @if not($-zf-size == small) {
+ // Responsive "auto" modifier
+ @if not($-zf-size == $-zf-zero-breakpoint) {
> .#{$-zf-size}-auto {
- @include xy-cell-base(auto);
- @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell(auto, $gutter-type: none, $vertical: true);
}
+ }
+ %-xy-cell-base-shrink-vertical-#{$-zf-size} {
+ @include xy-cell-base(shrink);
+ }
+
+ // Responsive "shrink" modifier
+ @if not($-zf-size == $-zf-zero-breakpoint) {
> .#{$-zf-size}-shrink {
- @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+ @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
+ @include xy-cell-size(shrink, $gutter-type: none, $vertical: true);
}
-
}
+ // Responsive width modifiers
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$-zf-size}-#{$i} {
- @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
+ @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
+ @include xy-cell-size($i, $gutter-type: none, $vertical: true);
}
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss
index d9029370dd..d765f179ce 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_collapse.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -11,6 +11,7 @@
/// @param {String} $selector [.cell] - The child element to remove the gutter from.
/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.
/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.
@mixin xy-grid-collapse(
$selector: '.cell',
$gutter-type: margin,
@@ -41,7 +42,7 @@
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$bp}-#{$i} {
- @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+ @include xy-cell-size($i, $gutter-type: none);
}
}
}
@@ -50,11 +51,11 @@
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$bp}-#{$i} {
- @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+ @include xy-cell-size($i, $gutter-type: none);
}
}
}
- }
+ }
}
}
@else {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss
index 76c61e5ca2..9bd1d11e29 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_frame.scss
@@ -61,13 +61,14 @@
@if $vertical == true {
overflow-y: auto;
max-height: 100%;
+ min-height: 100%;
} @else {
overflow-x: auto;
max-width: 100%;
}
-webkit-overflow-scrolling: touch;
- -ms-overflow-stype: -ms-autohiding-scrollbar;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
}
/// Container for inside a grid frame containing multiple blocks. Typically used
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss
index 44186ea76e..3fdf474256 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_grid.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -9,6 +9,7 @@
/// Creates a max width container, designed to house your grid content.
///
/// @param {Number} $width [$grid-container] - a width to limit the container to.
+/// @param {Number} $padding [$grid-container-padding] - paddings of the container.
@mixin xy-grid-container(
$width: $grid-container,
$padding: $grid-container-padding
@@ -16,7 +17,8 @@
@include xy-gutters($gutters: $padding, $gutter-type: padding);
max-width: $width;
- margin: 0 auto;
+ margin-left: auto;
+ margin-right: auto;
}
/// Creates a container for your flex cells.
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss
index 3ab987ea13..ff3ea3c90f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_gutters.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -30,16 +30,16 @@
// Loop through each gutter position
@each $value in $gutter-position {
- #{$gutter-type}-#{$value}: #{$operator}$gutter;
+ #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
}
}
}
- @elseif (type-of($gutters) == 'number') {
+ @else if (type-of($gutters) == 'number') {
$gutter: rem-calc($gutters) / 2;
// Loop through each gutter position
@each $value in $gutter-position {
- #{$gutter-type}-#{$value}: #{$operator}$gutter;
+ #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
}
}
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss
index 3b7650e321..d087825acb 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_layout.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -10,24 +10,27 @@
///
/// @param {Number} $n - Number of elements to display per row.
/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
-/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.
@mixin xy-grid-layout(
$n,
$selector: '.cell',
- $gutter-output: true,
+ $gutter-output: null,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
- $gutter-position: right left,
- $breakpoint: $-zf-zero-breakpoint,
- $vertical: false
+ $gutter-position: null,
+ $breakpoint: null,
+ $vertical: false,
+ $output: (base size gutters)
) {
$size: percentage(1/$n);
& > #{$selector} {
- @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
+ @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);
}
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss
index c9c85fffa1..414f5bb77f 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_position.scss
@@ -1,28 +1,55 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
/// @group xy-grid
////
+/// Returns the appropriate CSS value to offset a cell.
+///
+/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
+/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|String} The cell offset property value.
+@function xy-cell-offset(
+ $n,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $breakpoint: null
+) {
+ $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
+ $size: xy-cell-size($n);
+
+ $offset: $size;
+ @if ($gutter-type == 'margin') {
+ $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) / 2);
+ $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter}));
+ }
+ @return $offset;
+}
+
/// Offsets a column to the right/bottom by `$n` columns.
///
-/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
+/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
+/// @param {Number|Array|Keyword} $breakpoint [null] - Breakpoint to use for `$gutters`. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints. If a list is given, media-queries will be generated. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
@mixin xy-cell-offset(
$n,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
- $breakpoint: $-zf-zero-breakpoint,
+ $breakpoint: null,
$vertical: false
) {
+ $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
$direction: if($vertical, 'top', $global-left);
- @include -zf-breakpoint-value($breakpoint, $gutters) {
- $gutter: rem-calc($-zf-bp-value) / 2;
- $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
-
- margin-#{$direction}: #{$size};
+ @include -zf-each-breakpoint-in($breakpoint, $media-queries: 'for-lists') {
+ $offset: xy-cell-offset($n, $gutters, $gutter-type);
+ margin-#{$direction}: #{$offset};
}
}
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss
index aa077c65e1..1699697d88 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/foundation-sites/scss/xy-grid/_xy-grid.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes
deleted file mode 100644
index 36fe3a5315..0000000000
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* linguist-vendored
\ No newline at end of file
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js
index f99e7b7058..70188dddf3 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/static/libs/what-input/what-input.min.js
@@ -1,7 +1,8 @@
/**
* what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
- * @version v4.1.6
+ * @version v5.2.10
* @link https://github.com/ten1seven/what-input
* @license MIT
*/
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("whatInput",[],t):"object"==typeof exports?exports.whatInput=t():e.whatInput=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";e.exports=function(){var e="initial",t=null,n=document.documentElement,o=["input","select","textarea"],i=[],r=[16,17,18,91,93],u={keydown:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch"},d=[],s=!1,a=!1,c={x:null,y:null},p={2:"touch",3:"touch",4:"mouse"},f=!1;try{var v=Object.defineProperty({},"passive",{get:function(){f=!0}});window.addEventListener("test",null,v)}catch(e){}var m=function(){window.PointerEvent?(n.addEventListener("pointerdown",w),n.addEventListener("pointermove",h)):window.MSPointerEvent?(n.addEventListener("MSPointerDown",w),n.addEventListener("MSPointerMove",h)):(n.addEventListener("mousedown",w),n.addEventListener("mousemove",h),"ontouchstart"in window&&(n.addEventListener("touchstart",y),n.addEventListener("touchend",y))),n.addEventListener(L(),h,!!f&&{passive:!0}),n.addEventListener("keydown",w)},w=function(n){if(!s){var i=n.which,d=u[n.type];if("pointer"===d&&(d=E(n)),e!==d||t!==d){var a=document.activeElement,c=!1;a&&a.nodeName&&-1===o.indexOf(a.nodeName.toLowerCase())&&(c=!0),("touch"===d||"mouse"===d||"keyboard"===d&&i&&c&&-1===r.indexOf(i))&&(e=t=d,l())}}},l=function(){n.setAttribute("data-whatinput",e),n.setAttribute("data-whatintent",e),-1===d.indexOf(e)&&(d.push(e),n.className+=" whatinput-types-"+e),x("input")},h=function(e){if(c.x!==e.screenX||c.y!==e.screenY?(a=!1,c.x=e.screenX,c.y=e.screenY):a=!0,!s&&!a){var o=u[e.type];"pointer"===o&&(o=E(e)),t!==o&&(t=o,n.setAttribute("data-whatintent",t),x("intent"))}},y=function(e){"touchstart"===e.type?(s=!1,w(e)):s=!0},x=function(e){for(var n=0,o=i.length;n
- XY grid example with Grid Frame (Foundation 6.4!!!)
+ XY grid example with Grid Frame (Foundation 6.6.3!!!)
@@ -122,10 +122,10 @@ Here's my footer
================================================== -->
{% block javascript %}
-
-
+
+
-
+
{% compress js %}