You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@netbeans.apache.org by sk...@apache.org on 2023/10/24 08:12:25 UTC
[netbeans-antora-ui] branch main updated: bump fundation and motion-ui to get rid of deprecation
This is an automated email from the ASF dual-hosted git repository.
skygo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/netbeans-antora-ui.git
The following commit(s) were added to refs/heads/main by this push:
new afc1664 bump fundation and motion-ui to get rid of deprecation
new cd30afb Merge pull request #9 from ebarboni/scssupgrade
afc1664 is described below
commit afc16645c8c4b829f548ac227e53cd7cc04e0c8d
Author: Eric Barboni <sk...@apache.org>
AuthorDate: Mon Oct 23 14:53:31 2023 +0200
bump fundation and motion-ui to get rid of deprecation
---
build/netbeans-ui-bundle.zip | Bin 1685179 -> 1685156 bytes
src/partials/head.hbs | 8 +-
src/scss/_vendor/foundation-sites/LICENSE | 2 +-
.../_vendor/normalize-scss/sass/_normalize.scss | 3 -
.../_vendor/normalize-scss/sass/normalize.scss | 298 +++++++++
.../normalize-scss/sass/normalize/_import-now.scss | 11 -
.../sass/normalize/_normalize-mixin.scss | 676 ---------------------
.../normalize-scss/sass/normalize/_variables.scss | 36 --
.../sass/normalize/_vertical-rhythm.scss | 61 --
.../_vendor/foundation-sites/scss/_global.scss | 52 +-
.../scss/components/_accordion-menu.scss | 13 +-
.../scss/components/_accordion.scss | 17 +-
.../foundation-sites/scss/components/_badge.scss | 4 +-
.../scss/components/_breadcrumbs.scss | 18 +-
.../scss/components/_button-group.scss | 105 +++-
.../foundation-sites/scss/components/_button.scss | 251 ++++----
.../foundation-sites/scss/components/_callout.scss | 26 +-
.../foundation-sites/scss/components/_card.scss | 8 +-
.../scss/components/_close-button.scss | 35 +-
.../scss/components/_drilldown.scss | 16 +-
.../scss/components/_dropdown-menu.scss | 31 +-
.../scss/components/_dropdown.scss | 15 +-
.../foundation-sites/scss/components/_flex.scss | 14 +-
.../foundation-sites/scss/components/_float.scss | 4 +-
.../foundation-sites/scss/components/_label.scss | 4 +-
.../scss/components/_media-object.scss | 70 +--
.../foundation-sites/scss/components/_menu.scss | 87 ++-
.../scss/components/_off-canvas.scss | 39 +-
.../foundation-sites/scss/components/_orbit.scss | 5 +-
.../scss/components/_pagination.scss | 16 +-
.../scss/components/_progress-bar.scss | 5 +-
.../scss/components/_responsive-embed.scss | 19 +-
.../foundation-sites/scss/components/_reveal.scss | 40 +-
.../foundation-sites/scss/components/_slider.scss | 6 +-
.../foundation-sites/scss/components/_sticky.scss | 4 +-
.../foundation-sites/scss/components/_switch.scss | 20 +-
.../foundation-sites/scss/components/_table.scss | 17 +-
.../foundation-sites/scss/components/_tabs.scss | 9 +-
.../scss/components/_thumbnail.scss | 6 +-
.../scss/components/_title-bar.scss | 4 +-
.../foundation-sites/scss/components/_tooltip.scss | 4 +-
.../foundation-sites/scss/components/_top-bar.scss | 4 +-
.../scss/components/_visibility.scss | 54 +-
.../foundation-sites/scss/forms/_checkbox.scss | 4 +-
.../foundation-sites/scss/forms/_error.scss | 5 +-
.../foundation-sites/scss/forms/_fieldset.scss | 4 +-
.../foundation-sites/scss/forms/_forms.scss | 4 +-
.../foundation-sites/scss/forms/_help-text.scss | 4 +-
.../foundation-sites/scss/forms/_input-group.scss | 24 +-
.../foundation-sites/scss/forms/_label.scss | 7 +-
.../foundation-sites/scss/forms/_meter.scss | 14 +-
.../foundation-sites/scss/forms/_progress.scss | 16 +-
.../foundation-sites/scss/forms/_range.scss | 16 +-
.../foundation-sites/scss/forms/_select.scss | 8 +-
.../_vendor/foundation-sites/scss/forms/_text.scss | 20 +-
.../_vendor/foundation-sites/scss/foundation.scss | 142 +++--
.../foundation-sites/scss/grid/_classes.scss | 41 +-
.../foundation-sites/scss/grid/_column.scss | 49 +-
.../foundation-sites/scss/grid/_flex-grid.scss | 7 +-
.../_vendor/foundation-sites/scss/grid/_grid.scss | 4 +-
.../foundation-sites/scss/grid/_gutter.scss | 21 +-
.../foundation-sites/scss/grid/_layout.scss | 14 +-
.../foundation-sites/scss/grid/_position.scss | 38 +-
.../_vendor/foundation-sites/scss/grid/_row.scss | 6 +-
.../_vendor/foundation-sites/scss/grid/_size.scss | 4 +-
.../foundation-sites/scss/prototype/_arrow.scss | 4 +-
.../scss/prototype/_border-box.scss | 4 +-
.../scss/prototype/_border-none.scss | 6 +-
.../foundation-sites/scss/prototype/_bordered.scss | 4 +-
.../foundation-sites/scss/prototype/_box.scss | 4 +-
.../foundation-sites/scss/prototype/_display.scss | 4 +-
.../scss/prototype/_font-styling.scss | 8 +-
.../scss/prototype/_list-style-type.scss | 4 +-
.../foundation-sites/scss/prototype/_overflow.scss | 13 +-
.../foundation-sites/scss/prototype/_position.scss | 4 +-
.../scss/prototype/_prototype.scss | 4 +-
.../foundation-sites/scss/prototype/_relation.scss | 2 +-
.../foundation-sites/scss/prototype/_rotate.scss | 16 +-
.../foundation-sites/scss/prototype/_rounded.scss | 11 +-
.../scss/prototype/_separator.scss | 14 +-
.../foundation-sites/scss/prototype/_shadow.scss | 7 +-
.../foundation-sites/scss/prototype/_sizing.scss | 4 +-
.../foundation-sites/scss/prototype/_spacing.scss | 223 +++----
.../scss/prototype/_text-decoration.scss | 4 +-
.../scss/prototype/_text-transformation.scss | 10 +-
.../scss/prototype/_text-utilities.scss | 4 +-
.../foundation-sites/scss/settings/_settings.scss | 93 ++-
.../scss/typography/_alignment.scss | 4 +-
.../foundation-sites/scss/typography/_base.scss | 79 +--
.../foundation-sites/scss/typography/_helpers.scss | 114 +++-
.../foundation-sites/scss/typography/_print.scss | 18 +-
.../scss/typography/_typography.scss | 4 +-
.../foundation-sites/scss/util/_breakpoint.scss | 310 ++++++----
.../_vendor/foundation-sites/scss/util/_color.scss | 35 +-
.../foundation-sites/scss/util/_direction.scss | 8 +-
.../_vendor/foundation-sites/scss/util/_flex.scss | 19 +-
.../_vendor/foundation-sites/scss/util/_math.scss | 143 ++++-
.../foundation-sites/scss/util/_mixins.scss | 137 +++--
.../foundation-sites/scss/util/_selector.scss | 20 +-
.../foundation-sites/scss/util/_typography.scss | 16 +-
.../_vendor/foundation-sites/scss/util/_unit.scss | 32 +-
.../_vendor/foundation-sites/scss/util/_util.scss | 4 +-
.../_vendor/foundation-sites/scss/util/_value.scss | 65 +-
.../foundation-sites/scss/xy-grid/_cell.scss | 290 ++++++---
.../foundation-sites/scss/xy-grid/_classes.scss | 113 ++--
.../foundation-sites/scss/xy-grid/_collapse.scss | 11 +-
.../foundation-sites/scss/xy-grid/_frame.scss | 13 +-
.../foundation-sites/scss/xy-grid/_grid.scss | 8 +-
.../foundation-sites/scss/xy-grid/_gutters.scss | 14 +-
.../foundation-sites/scss/xy-grid/_layout.scss | 25 +-
.../foundation-sites/scss/xy-grid/_position.scss | 57 +-
.../foundation-sites/scss/xy-grid/_xy-grid.scss | 8 +-
src/scss/_vendor/motion-ui/src/_settings.scss | 1 +
src/scss/_vendor/motion-ui/src/effects/_fade.scss | 5 +-
src/scss/_vendor/motion-ui/src/effects/_hinge.scss | 7 +-
src/scss/_vendor/motion-ui/src/effects/_shake.scss | 2 +-
src/scss/_vendor/motion-ui/src/effects/_slide.scss | 7 +-
src/scss/_vendor/motion-ui/src/effects/_spin.scss | 7 +-
.../_vendor/motion-ui/src/effects/_wiggle.scss | 2 +-
src/scss/_vendor/motion-ui/src/effects/_zoom.scss | 4 +-
src/scss/_vendor/motion-ui/src/motion-ui.scss | 2 +
.../_vendor/motion-ui/src/transitions/_fade.scss | 10 +-
.../_vendor/motion-ui/src/transitions/_hinge.scss | 5 +-
.../_vendor/motion-ui/src/transitions/_slide.scss | 5 +-
.../_vendor/motion-ui/src/transitions/_spin.scss | 3 +-
.../_vendor/motion-ui/src/transitions/_zoom.scss | 10 +-
.../_vendor/motion-ui/src/util/_animation.scss | 2 +-
src/scss/_vendor/motion-ui/src/util/_args.scss | 4 +-
src/scss/_vendor/motion-ui/src/util/_function.scss | 94 +++
src/scss/_vendor/motion-ui/src/util/_keyframe.scss | 10 +-
src/scss/_vendor/motion-ui/src/util/_series.scss | 37 +-
src/scss/_vendor/motion-ui/src/util/_string.scss | 36 ++
src/scss/_vendor/motion-ui/src/util/_unit.scss | 55 +-
src/scss/base/_settings.scss | 4 +-
134 files changed, 2725 insertions(+), 2150 deletions(-)
diff --git a/build/netbeans-ui-bundle.zip b/build/netbeans-ui-bundle.zip
index 77f2028..601c4ae 100644
Binary files a/build/netbeans-ui-bundle.zip and b/build/netbeans-ui-bundle.zip differ
diff --git a/src/partials/head.hbs b/src/partials/head.hbs
index c3c6806..3ad5776 100644
--- a/src/partials/head.hbs
+++ b/src/partials/head.hbs
@@ -32,10 +32,10 @@
{{#if page.attributes.syntax }}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">{{/if}}
<link rel="stylesheet" href="{{{uiRootPath}}}/css/netbeans.css">
<link rel="apple-touch-icon" sizes="180x180" href="{{{uiRootPath}}}/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="{{{uiRootPath}}}/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="{{{uiRootPath}}}/favicon-16x16.png">
- <link rel="manifest" href="{{{uiRootPath}}}/site.webmanifest">
- <link rel="mask-icon" href="{{{uiRootPath}}}/safari-pinned-tab.svg" color="#5bbad5">
+ <link rel="icon" type="image/png" sizes="32x32" href="{{{uiRootPath}}}/images/fav/favicon-32x32.png">
+ <link rel="icon" type="image/png" sizes="16x16" href="{{{uiRootPath}}}/images/fav/favicon-16x16.png">
+ <link rel="manifest" href="{{{uiRootPath}}}/images/fav/site.webmanifest">
+ <link rel="mask-icon" href="{{{uiRootPath}}}/images/fav/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<link href="{{{uiRootPath}}}/css/font-open-sans.css" rel="stylesheet">
diff --git a/src/scss/_vendor/foundation-sites/LICENSE b/src/scss/_vendor/foundation-sites/LICENSE
index 9796fea..cfa9e05 100644
--- a/src/scss/_vendor/foundation-sites/LICENSE
+++ b/src/scss/_vendor/foundation-sites/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2011-2017 ZURB, inc.
+Copyright © 2011-2020 ZURB, Inc.
MIT License
diff --git a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss
deleted file mode 100644
index fd669eb..0000000
--- a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/_normalize.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'normalize/variables';
-@import 'normalize/vertical-rhythm';
-@import 'normalize/normalize-mixin';
diff --git a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize.scss b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize.scss
new file mode 100644
index 0000000..41f46bc
--- /dev/null
+++ b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize.scss
@@ -0,0 +1,298 @@
+// sass-lint:disable no-vendor-prefixes
+
+@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: 0; // 1
+ 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;
+ }
+
+ // Disable outline when intent is clearly mouse and touch
+ [data-whatintent="mouse"],
+ [data-whatintent="touch"],
+ [data-whatinput="mouse"],
+ [data-whatinput="touch"] {
+ *, *:focus {
+ outline: none;
+ }
+ }
+
+ // Disable iOS callouts when draggable is false
+ [draggable=false] {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ }
+}
diff --git a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss
deleted file mode 100644
index aac5d2b..0000000
--- a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_import-now.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Import Now
-//
-// If you import this module directly, it will immediately output all the CSS
-// needed to normalize default HTML elements across all browsers.
-//
-// ```
-// @import "normalize/import-now";
-// ```
-
-@import '../normalize';
-@include normalize();
diff --git a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
deleted file mode 100644
index 70a8d3d..0000000
--- a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
+++ /dev/null
@@ -1,676 +0,0 @@
-// Helper function for the normalize() mixin.
-@function _normalize-include($section, $exclude: null) {
- // Initialize the global variables needed by this function.
- @if not global_variable_exists(_normalize-include) {
- $_normalize-include: () !global;
- $_normalize-exclude: () !global;
- }
- // Since we are given 2 parameters, set the global variables.
- @if $exclude != null {
- $include: $section;
- // Sass doesn't have static variables, so the work-around is to stuff these
- // values into global variables so we can access them in future calls.
- $_normalize-include: if(type-of($include) == 'list', $include, ($include)) !global;
- $_normalize-exclude: if(type-of($exclude) == 'list', $exclude, ($exclude)) !global;
- @return true;
- }
-
- // Check if $section is in the $include list.
- @if index($_normalize-include, $section) {
- @return true;
- }
- // If $include is set to (all), make sure $section is not in $exclude.
- @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) {
- @return true;
- }
- @return false;
-}
-
-@mixin normalize($include: (all), $exclude: ()) {
- // Initialize the helper function by passing it this mixin's parameters.
- $init: _normalize-include($include, $exclude);
-
- // If we've customized any font variables, we'll need extra properties.
- @if $base-font-size != 16px
- or $base-line-height != 24px
- or $base-unit != 'em'
- or $h1-font-size != 2 * $base-font-size
- or $h2-font-size != 1.5 * $base-font-size
- or $h3-font-size != 1.17 * $base-font-size
- or $h4-font-size != 1 * $base-font-size
- or $h5-font-size != 0.83 * $base-font-size
- or $h6-font-size != 0.67 * $base-font-size {
- $normalize-vertical-rhythm: true !global;
- }
-
- /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
-
- @if _normalize-include(document) {
- /* Document
- ========================================================================== */
-
- /**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Correct the line height in all browsers.
- * 3. Prevent adjustments of font size after orientation changes in
- * IE on Windows Phone and in iOS.
- */
-
- html {
- font-family: $base-font-family; /* 1 */
- @if $normalize-vertical-rhythm {
- // Correct old browser bug that prevented accessible resizing of text
- // when root font-size is set with px or em.
- font-size: ($base-font-size / 16px) * 100%;
- line-height: ($base-line-height / $base-font-size) * 1em; /* 2 */
- }
- @else {
- line-height: 1.15; /* 2 */
- }
- -ms-text-size-adjust: 100%; /* 3 */
- -webkit-text-size-adjust: 100%; /* 3 */
- }
- }
-
- @if _normalize-include(sections) {
- /* Sections
- ========================================================================== */
-
- /**
- * Remove the margin in all browsers (opinionated).
- */
-
- body {
- margin: 0;
- }
-
- /**
- * Add the correct display in IE 9-.
- */
-
- article,
- aside,
- footer,
- header,
- nav,
- section {
- display: block;
- }
-
- /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
- h1 {
- @include normalize-font-size($h1-font-size);
- @if $normalize-vertical-rhythm {
- @include normalize-line-height($h1-font-size);
- }
-
- @if $normalize-vertical-rhythm {
- /* Set 1 unit of vertical rhythm on the top and bottom margins. */
- @include normalize-margin(1 0, $h1-font-size);
- }
- @else {
- margin: 0.67em 0;
- }
- }
-
- @if $normalize-vertical-rhythm {
- h2 {
- @include normalize-font-size($h2-font-size);
- @include normalize-line-height($h2-font-size);
- @include normalize-margin(1 0, $h2-font-size);
- }
-
- h3 {
- @include normalize-font-size($h3-font-size);
- @include normalize-line-height($h3-font-size);
- @include normalize-margin(1 0, $h3-font-size);
- }
-
- h4 {
- @include normalize-font-size($h4-font-size);
- @include normalize-line-height($h4-font-size);
- @include normalize-margin(1 0, $h4-font-size);
- }
-
- h5 {
- @include normalize-font-size($h5-font-size);
- @include normalize-line-height($h5-font-size);
- @include normalize-margin(1 0, $h5-font-size);
- }
-
- h6 {
- @include normalize-font-size($h6-font-size);
- @include normalize-line-height($h6-font-size);
- @include normalize-margin(1 0, $h6-font-size);
- }
- }
- }
-
- @if _normalize-include(grouping) {
- /* Grouping content
- ========================================================================== */
-
- @if $normalize-vertical-rhythm {
- /**
- * Set 1 unit of vertical rhythm on the top and bottom margin.
- */
-
- blockquote {
- @include normalize-margin(1 $indent-amount);
- }
-
- dl,
- ol,
- ul {
- @include normalize-margin(1 0);
- }
-
- /**
- * Turn off margins on nested lists.
- */
-
- ol,
- ul {
- ol,
- ul {
- margin: 0;
- }
- }
-
- dd {
- margin: 0 0 0 $indent-amount;
- }
-
- ol,
- ul {
- padding: 0 0 0 $indent-amount;
- }
- }
-
- /**
- * Add the correct display in IE 9-.
- */
-
- figcaption,
- figure {
- display: block;
- }
-
- /**
- * Add the correct margin in IE 8.
- */
-
- figure {
- @if $normalize-vertical-rhythm {
- @include normalize-margin(1 $indent-amount);
- }
- @else {
- margin: 1em $indent-amount;
- }
- }
-
- /**
- * 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 */
- }
-
- /**
- * Add the correct display in IE.
- */
-
- main {
- display: block;
- }
-
- @if $normalize-vertical-rhythm {
- /**
- * Set 1 unit of vertical rhythm on the top and bottom margin.
- */
-
- p,
- pre {
- @include normalize-margin(1 0);
- }
- }
-
- /**
- * 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 */
- }
- }
-
- @if _normalize-include(links) {
- /* Links
- ========================================================================== */
-
- /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
- a {
- background-color: transparent; /* 1 */
- -webkit-text-decoration-skip: objects; /* 2 */
- }
-
- /**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
- a:active,
- a:hover {
- outline-width: 0;
- }
- }
-
- @if _normalize-include(text) {
- /* Text-level semantics
- ========================================================================== */
-
- /**
- * 1. Remove the bottom border in Firefox 39-.
- * 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 */
- }
-
- /**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
- b,
- strong {
- font-weight: inherit;
- }
-
- /**
- * 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 style in Android 4.3-.
- */
-
- dfn {
- font-style: italic;
- }
-
- /**
- * Add the correct background and color in IE 9-.
- */
-
- mark {
- background-color: #ff0;
- color: #000;
- }
-
- /**
- * 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;
- }
- }
-
- @if _normalize-include(embedded) {
- /* Embedded content
- ========================================================================== */
-
- /**
- * Add the correct display in IE 9-.
- */
-
- audio,
- video {
- display: inline-block;
- }
-
- /**
- * Add the correct display in iOS 4-7.
- */
-
- audio:not([controls]) {
- display: none;
- height: 0;
- }
-
- /**
- * Remove the border on images inside links in IE 10-.
- */
-
- img {
- border-style: none;
- }
-
- /**
- * Hide the overflow in IE.
- */
-
- svg:not(:root) {
- overflow: hidden;
- }
- }
-
- @if _normalize-include(forms) {
- /* Forms
- ========================================================================== */
-
- /**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
- button,
- input,
- optgroup,
- select,
- textarea {
- font-family: $base-font-family; /* 1 */
- font-size: 100%; /* 1 */
- @if $normalize-vertical-rhythm {
- line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */
- }
- @else {
- line-height: 1.15; /* 1 */
- }
- margin: 0; /* 2 */
- }
-
- /**
- * Show the overflow in IE.
- */
-
- button {
- 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;
- }
-
- /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- * controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
- button,
- html [type="button"], /* 1 */
- [type="reset"],
- [type="submit"] {
- -webkit-appearance: button; /* 2 */
- }
-
- button,
- [type="button"],
- [type="reset"],
- [type="submit"] {
-
- /**
- * Remove the inner border and padding in Firefox.
- */
-
- &::-moz-focus-inner {
- border-style: none;
- padding: 0;
- }
-
- /**
- * Restore the focus styles unset by the previous rule.
- */
-
- &:-moz-focusring {
- outline: 1px dotted ButtonText;
- }
- }
-
- /**
- * Show the overflow in Edge.
- */
-
- input {
- overflow: visible;
- }
-
- /**
- * 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 and cancel buttons in Chrome and Safari on macOS.
- */
-
- &::-webkit-search-cancel-button,
- &::-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 */
- }
-
- /**
- * Change the border, margin, and padding in all browsers (opinionated).
- */
-
- fieldset {
- border: 1px solid #c0c0c0;
- margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
- }
-
- /**
- * 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 */
- display: table; /* 1 */
- max-width: 100%; /* 1 */
- padding: 0; /* 3 */
- color: inherit; /* 2 */
- white-space: normal; /* 1 */
- }
-
- /**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
- progress {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
- }
-
- /**
- * Remove the default vertical scrollbar in IE.
- */
-
- textarea {
- overflow: auto;
- }
- }
-
- @if _normalize-include(interactive) {
- /* Interactive
- ========================================================================== */
-
- /*
- * Add the correct display in Edge, IE, and Firefox.
- */
-
- details {
- display: block;
- }
-
- /*
- * Add the correct display in all browsers.
- */
-
- summary {
- display: list-item;
- }
-
- /*
- * Add the correct display in IE 9-.
- */
-
- menu {
- display: block;
-
- @if $normalize-vertical-rhythm {
- /*
- * 1. Set 1 unit of vertical rhythm on the top and bottom margin.
- * 2. Set consistent space for the list style image.
- */
-
- @include normalize-margin(1 0); /* 1 */
- padding: 0 0 0 $indent-amount; /* 2 */
-
- /**
- * Turn off margins on nested lists.
- */
-
- menu &,
- ol &,
- ul & {
- margin: 0;
- }
- }
- }
- }
-
- @if _normalize-include(scripting) {
- /* Scripting
- ========================================================================== */
-
- /**
- * Add the correct display in IE 9-.
- */
-
- canvas {
- display: inline-block;
- }
-
- /**
- * Add the correct display in IE.
- */
-
- template {
- display: none;
- }
- }
-
- @if _normalize-include(hidden) {
- /* Hidden
- ========================================================================== */
-
- /**
- * Add the correct display in IE 10-.
- */
-
- [hidden] {
- display: none;
- }
- }
-}
diff --git a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss
deleted file mode 100644
index 2f06b25..0000000
--- a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_variables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-//
-// Variables
-//
-// You can override the default values by setting the variables in your Sass
-// before importing the normalize-scss library.
-
-// The font size set on the root html element.
-$base-font-size: 16px !default;
-
-// The base line height determines the basic unit of vertical rhythm.
-$base-line-height: 24px !default;
-
-// The length unit in which to output vertical rhythm values.
-// Supported values: px, em, rem.
-$base-unit: 'em' !default;
-
-// The default font family.
-$base-font-family: sans-serif !default;
-
-// The font sizes for h1-h6.
-$h1-font-size: 2 * $base-font-size !default;
-$h2-font-size: 1.5 * $base-font-size !default;
-$h3-font-size: 1.17 * $base-font-size !default;
-$h4-font-size: 1 * $base-font-size !default;
-$h5-font-size: 0.83 * $base-font-size !default;
-$h6-font-size: 0.67 * $base-font-size !default;
-
-// The amount lists and blockquotes are indented.
-$indent-amount: 40px !default;
-
-// The following variable controls whether normalize-scss will output
-// font-sizes, line-heights and block-level top/bottom margins that form a basic
-// vertical rhythm on the page, which differs from the original Normalize.css.
-// However, changing any of the variables above will cause
-// $normalize-vertical-rhythm to be automatically set to true.
-$normalize-vertical-rhythm: false !default;
diff --git a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss b/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
deleted file mode 100644
index 4f53647..0000000
--- a/src/scss/_vendor/foundation-sites/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-//
-// Vertical Rhythm
-//
-// This is the minimal amount of code needed to create vertical rhythm in our
-// CSS. If you are looking for a robust solution, look at the excellent Typey
-// library. @see https://github.com/jptaranto/typey
-
-@function normalize-rhythm($value, $relative-to: $base-font-size, $unit: $base-unit) {
- @if unit($value) != px {
- @error "The normalize vertical-rhythm module only supports px inputs. The typey library is better.";
- }
- @if $unit == rem {
- @return ($value / $base-font-size) * 1rem;
- }
- @else if $unit == em {
- @return ($value / $relative-to) * 1em;
- }
- @else { // $unit == px
- @return $value;
- }
-}
-
-@mixin normalize-font-size($value, $relative-to: $base-font-size) {
- @if unit($value) != 'px' {
- @error "normalize-font-size() only supports px inputs. The typey library is better.";
- }
- font-size: normalize-rhythm($value, $relative-to);
-}
-
-@mixin normalize-rhythm($property, $values, $relative-to: $base-font-size) {
- $value-list: $values;
- $sep: space;
- @if type-of($values) == 'list' {
- $sep: list-separator($values);
- }
- @else {
- $value-list: append((), $values);
- }
-
- $normalized-values: ();
- @each $value in $value-list {
- @if unitless($value) and $value != 0 {
- $value: $value * normalize-rhythm($base-line-height, $relative-to);
- }
- $normalized-values: append($normalized-values, $value, $sep);
- }
- #{$property}: $normalized-values;
-}
-
-@mixin normalize-margin($values, $relative-to: $base-font-size) {
- @include normalize-rhythm(margin, $values, $relative-to);
-}
-
-@mixin normalize-line-height($font-size, $min-line-padding: 2px) {
- $lines: ceil($font-size / $base-line-height);
- // If lines are cramped include some extra leading.
- @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) {
- $lines: $lines + 1;
- }
- @include normalize-rhythm(line-height, $lines, $font-size);
-}
diff --git a/src/scss/_vendor/foundation-sites/scss/_global.scss b/src/scss/_vendor/foundation-sites/scss/_global.scss
index 18152fe..2235b83 100644
--- a/src/scss/_vendor/foundation-sites/scss/_global.scss
+++ b/src/scss/_vendor/foundation-sites/scss/_global.scss
@@ -1,13 +1,15 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
-// sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements
+// sass-lint:disable no-color-literals, no-qualifying-elements
////
/// @group global
////
+@import 'util/util';
+
/// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
/// @type Number
$global-font-size: 100% !default;
@@ -23,11 +25,11 @@ $global-lineheight: 1.5 !default;
/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
/// @type Map
$foundation-palette: (
- primary: #1779ba,
- secondary: #767676,
- success: #3adb76,
- warning: #ffae00,
- alert: #cc4b37,
+ "primary": #1779ba,
+ "secondary": #767676,
+ "success": #3adb76,
+ "warning": #ffae00,
+ "alert": #cc4b37,
) !default;
/// Color used for light gray UI items.
@@ -62,6 +64,10 @@ $body-font-color: $black !default;
/// @type List
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
+/// Set to `true` to enable safe padding on the body for non-rectangular devices (i.e. phones with notches)
+/// @type Boolean
+$body-safe-padding: false !default;
+
/// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
/// @type Boolean
$body-antialiased: true !default;
@@ -121,19 +127,18 @@ $global-button-cursor: auto !default;
$global-left: if($global-text-direction == rtl, right, left);
$global-right: if($global-text-direction == rtl, left, right);
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+
/// Global tolerance for color pick contrast.
/// @type Number
$global-color-pick-contrast-tolerance: 0 !default;
// Internal variables used for colors
-$primary-color: get-color(primary);
-$secondary-color: get-color(secondary);
-$success-color: get-color(success);
-$warning-color: get-color(warning);
-$alert-color: get-color(alert);
+@include add-foundation-colors;
@mixin foundation-global-styles {
- @include -zf-normalize;
+ @include foundation-normalize;
// These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
.foundation-mq {
@@ -157,6 +162,14 @@ $alert-color: get-color(alert);
margin: 0;
padding: 0;
+ @if ($body-safe-padding) {
+ // using environment variables to account for non-rectangular displays e.g. phones with notches
+ padding-top: env(safe-area-inset-top);
+ padding-right: env(safe-area-inset-right);
+ padding-bottom: env(safe-area-inset-bottom);
+ padding-left: env(safe-area-inset-left);
+ }
+
background: $body-background;
font-family: $body-font-family;
@@ -165,8 +178,8 @@ $alert-color: get-color(alert);
color: $body-font-color;
@if ($body-antialiased) {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+ -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
}
}
@@ -221,6 +234,7 @@ $alert-color: get-color(alert);
// Prevent text overflow on pre
pre {
overflow: auto;
+ -webkit-overflow-scrolling: touch;
}
// Make reset inherit font-family instead of settings sans-serif
@@ -241,9 +255,3 @@ $alert-color: get-color(alert);
display: none !important;
}
}
-
-/// Loads normalize.css.
-/// @access private
-@mixin -zf-normalize {
- @include normalize();
-}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_accordion-menu.scss b/src/scss/_vendor/foundation-sites/scss/components/_accordion-menu.scss
index 7d25446..d9c3c30 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_accordion-menu.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_accordion-menu.scss
@@ -58,14 +58,16 @@ $accordionmenu-arrow-size: 6px !default;
@include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
position: absolute;
top: 50%;
- margin-top: -1 * ($accordionmenu-arrow-size / 2);
+ margin-top: -1 * ($accordionmenu-arrow-size * 0.5);
#{$global-right}: 1rem;
}
}
+
&.align-left .is-accordion-submenu-parent > a::after {
- left: auto;
right: 1rem;
+ left: auto;
}
+
&.align-right .is-accordion-submenu-parent > a::after {
right: auto;
left: 1rem;
@@ -93,7 +95,7 @@ $accordionmenu-arrow-size: 6px !default;
}
padding: $accordionmenu-padding;
}
-
+
.is-accordion-submenu a {
padding: $accordionmenu-submenu-padding;
}
@@ -138,11 +140,12 @@ $accordionmenu-arrow-size: 6px !default;
position: absolute;
top: 0;
#{$global-right}: 0;
- cursor: pointer;
width: $accordionmenu-submenu-toggle-width;
height: $accordionmenu-submenu-toggle-height;
+ cursor: pointer;
+
border-#{$global-left}: $accordion-submenu-toggle-border;
@if $accordionmenu-submenu-toggle-background {
@@ -151,7 +154,7 @@ $accordionmenu-arrow-size: 6px !default;
// Add the arrow to the toggle
&::after {
- @include css-triangle(6px, $accordionmenu-arrow-color, down);
+ @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
top: 0;
bottom: 0;
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_accordion.scss b/src/scss/_vendor/foundation-sites/scss/components/_accordion.scss
index c646be7..6ec5ccd 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_accordion.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_accordion.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -14,6 +14,14 @@ $accordion-background: $white !default;
/// @type Boolean
$accordion-plusminus: true !default;
+/// Content for the plus icon when `$accordion-plusminus` is `true`
+/// @type String
+$accordion-plus-content: '\002B' !default;
+
+/// Content for the minus icon when `$accordion-plusminus` is `true`
+/// @type String
+$accordion-minus-content: '\2013' !default;
+
/// Font size of accordion titles.
/// @type Number
$accordion-title-font-size: rem-calc(12) !default;
@@ -53,6 +61,7 @@ $accordion-content-padding: 1rem !default;
margin-#{$global-left}: 0;
background: $background;
list-style-type: none;
+
&[disabled] {
.accordion-title {
cursor: not-allowed;
@@ -106,11 +115,11 @@ $accordion-content-padding: 1rem !default;
top: 50%;
#{$global-right}: 1rem;
margin-top: -0.5rem;
- content: '+';
+ content: $accordion-plus-content;
}
.is-active > &::before {
- content: '\2013';
+ content: $accordion-minus-content;
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_badge.scss b/src/scss/_vendor/foundation-sites/scss/components/_badge.scss
index 3d5b6ba..f3b69a4 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_badge.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_badge.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/src/scss/_vendor/foundation-sites/scss/components/_breadcrumbs.scss b/src/scss/_vendor/foundation-sites/scss/components/_breadcrumbs.scss
index 75eb9a1..e9e08c8 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_breadcrumbs.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_breadcrumbs.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -82,12 +82,14 @@ $breadcrumbs-item-separator-color: $medium-gray !default;
// Need to escape the backslash
$separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
- &:not(:last-child)::after {
- position: relative;
- margin: 0 $breadcrumbs-item-margin;
- opacity: 1;
- content: $separator;
- color: $breadcrumbs-item-separator-color;
+ &:not(:last-child) {
+ &::after {
+ position: relative;
+ margin: 0 $breadcrumbs-item-margin;
+ opacity: 1;
+ content: $separator;
+ color: $breadcrumbs-item-separator-color;
+ }
}
}
@else {
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_button-group.scss b/src/scss/_vendor/foundation-sites/scss/components/_button-group.scss
index 6705e9c..4734408 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_button-group.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_button-group.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -18,7 +18,7 @@ $buttongroup-spacing: 1px !default;
/// @type String
$buttongroup-child-selector: '.button' !default;
-/// Maximum number of buttons that can be in an even-width button group.
+/// Maximum number of buttons that can be in an even-width button group. (Only needed when $global-flexbox: false;)
/// @type Number
$buttongroup-expand-max: 6 !default;
@@ -38,8 +38,14 @@ $buttongroup-radius-on-each: true !default;
@if $global-flexbox {
display: flex;
- flex-wrap: nowrap;
+ flex-wrap: wrap;
align-items: stretch;
+ flex-grow: 1;
+
+ &::before,
+ &::after {
+ display: none; // Disable clearfix
+ }
}
@else {
font-size: 0;
@@ -72,7 +78,21 @@ $buttongroup-radius-on-each: true !default;
border-bottom-#{$global-right}-radius: $button-radius;
}
}
+ }
+}
+
+/// Make buttons bonded without gap between them. Borders between buttons are merged
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+@mixin button-group-no-gaps(
+ $selector: $buttongroup-child-selector,
+ $border-width: $button-hollow-border-width
+) {
+ #{$selector} {
+ margin-#{$global-right}: rem-calc(-$border-width);
+ + #{$selector} {
+ border-#{$global-left}-color: transparent;
+ }
}
}
@@ -89,7 +109,7 @@ $buttongroup-radius-on-each: true !default;
&::before,
&::after {
- display: none;
+ display: none; // Disable clearfix
}
}
@@ -99,8 +119,10 @@ $buttongroup-radius-on-each: true !default;
}
@else {
// One child
- &:first-child:last-child {
- width: 100%;
+ &:first-child {
+ &:last-child {
+ width: calc(100% - #{$spacing});
+ }
}
// Two or more childreen
@@ -108,7 +130,7 @@ $buttongroup-radius-on-each: true !default;
&:first-child:nth-last-child(#{$i}) {
&, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
display: inline-block;
- width: calc(#{percentage(1 / $i)} - #{$spacing});
+ width: calc(#{percentage(divide(1, $i))} - #{$spacing});
margin-#{$global-right}: $spacing;
&:last-child {
@@ -142,22 +164,19 @@ $buttongroup-radius-on-each: true !default;
margin-bottom: 0;
}
-
@if not $buttongroup-radius-on-each {
border-radius: 0;
- &:first-child{
+ &:first-child {
border-top-#{$global-left}-radius: $global-radius;
border-top-#{$global-right}-radius: $global-radius;
}
&:last-child {
- margin-bottom: 0;
border-bottom-#{$global-left}-radius: $global-radius;
border-bottom-#{$global-right}-radius: $global-radius;
}
}
-
}
}
@@ -168,7 +187,7 @@ $buttongroup-radius-on-each: true !default;
) {
#{$selector} {
@if $global-flexbox {
- flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ flex: 0 0 auto;
}
@else {
width: auto;
@@ -204,27 +223,52 @@ $buttongroup-radius-on-each: true !default;
}
// Even-width Group
- &.expanded { @include button-group-expand; }
+ &.expanded {
+ @include button-group-expand;
+ }
+
+ // Solid, hollow & clear styles
+ @each $filling in (solid hollow clear) {
+ $base-selector: if($button-fill == $filling, null, '.#{$filling}');
- // Colors
- @each $name, $color in $foundation-palette {
- @if $button-fill != hollow {
- &.#{$name} #{$buttongroup-child-selector} {
- @include button-style($color, auto, auto);
+ &#{$base-selector} {
+ // Do not generate button base styles for the default filling
+ @if($button-fill != $filling) {
+ #{$buttongroup-child-selector} {
+ @include button-fill($filling);
+ @include button-fill-style($filling);
+ }
}
- }
- @else {
- &.#{$name} #{$buttongroup-child-selector} {
- @include button-hollow;
- @include button-hollow-style($color);
+
+ @each $name, $color in $button-palette {
+ @if($button-fill != $filling) {
+ $individual-selector: ' #{$buttongroup-child-selector}.#{$name}';
+ &.#{$name} #{$buttongroup-child-selector}, &#{$individual-selector} {
+ @include button-fill-style($filling, $color, auto, auto);
+ }
+ }
+ @else {
+ &.#{$name} #{$buttongroup-child-selector} {
+ @include button-fill-style($filling, $color, auto, auto);
+ }
+ }
}
}
+
+ }
+
+ &.no-gaps {
+ @include button-group-no-gaps;
}
&.stacked,
&.stacked-for-small,
&.stacked-for-medium {
@include button-group-stack;
+
+ &.expanded {
+ @include button-group-expand;
+ }
}
&.stacked-for-small {
@@ -239,7 +283,7 @@ $buttongroup-radius-on-each: true !default;
}
}
- &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
+ &.stacked-for-small.expanded {
@include breakpoint(small only) {
display: block;
@@ -249,5 +293,16 @@ $buttongroup-radius-on-each: true !default;
}
}
}
+
+ &.stacked-for-medium.expanded {
+ @include breakpoint(medium down) {
+ display: block;
+
+ #{$buttongroup-child-selector} {
+ display: block;
+ margin-#{$global-right}: 0;
+ }
+ }
+ }
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_button.scss b/src/scss/_vendor/foundation-sites/scss/components/_button.scss
index e71f264..8e7a231 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_button.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_button.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,6 +10,11 @@
/// @type Font
$button-font-family: inherit !default;
+/// Font weight for button elements.
+/// Ignored if null (default)
+/// @type Font-Weight
+$button-font-weight: null !default;
+
/// Padding inside buttons.
/// @type List
$button-padding: 0.85em 1em !default;
@@ -42,6 +47,10 @@ $button-color-alt: $black !default;
/// @type Number
$button-radius: $global-radius !default;
+/// Border for buttons, transparent by default
+/// @type List
+$button-border: 1px solid transparent !default;
+
/// Border width for hollow outline buttons
/// @type Number
$button-hollow-border-width: 1px !default;
@@ -80,13 +89,16 @@ $button-hollow-hover-lightness: -50% !default;
/// @type List
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
+/// Additional responsive classes for .expanded
+/// @type Boolean
+$button-responsive-expanded: false !default;
+
// TODO: Document button-base() mixin
@mixin button-base {
@include disable-mouse-outline;
display: inline-block;
vertical-align: middle;
margin: $button-margin;
- font-family: $button-font-family;
@if (type-of($button-padding) == 'map') {
@each $size, $padding in $button-padding {
@@ -99,12 +111,13 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
padding: $button-padding;
}
- -webkit-appearance: none;
- border: 1px solid transparent;
+ border: $button-border;
border-radius: $button-radius;
transition: $button-transition;
-
+ font-family: $button-font-family;
font-size: map-get($button-sizes, default);
+ font-weight: $button-font-weight;
+ -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
line-height: 1;
text-align: center;
cursor: pointer;
@@ -126,6 +139,43 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
}
}
+/// Sets the base styles of a hollow or clear button filling according to `$fill`.
+/// See mixin `button-fill-style` for the filling styles.
+/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`. `solid` has no effects.
+@mixin button-fill(
+ $fill: $button-fill
+) {
+ @if $fill == hollow {
+ @include button-hollow;
+ }
+ @else if $fill == clear {
+ @include button-clear;
+ }
+}
+
+/// Sets the visual styles of a solid/hollow/clear button filling according to `$fill`.
+/// See mixins `button-style`, `button-hollow-style` and `button-clear-style` for effects of visual styling parameters.
+/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`.
+/// @param {Color} $background [$button-background] - -
+/// @param {Color} $background-hover [$button-background-hover] - -
+/// @param {Color} $color [$button-color] - -
+@mixin button-fill-style(
+ $fill: $button-fill,
+ $background: $button-background,
+ $background-hover: $button-background-hover,
+ $color: $button-color
+) {
+ @if $fill == solid {
+ @include button-style($background, $background-hover, $color);
+ }
+ @else if $fill == hollow {
+ @include button-hollow-style($background);
+ }
+ @else if $fill == clear {
+ @include button-clear-style($background);
+ }
+}
+
/// Sets the visual style of a button.
/// @param {Color} $background [$button-background] - Background color of the button.
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
@@ -144,8 +194,14 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
$background-hover: scale-color($background, $lightness: $background-hover-lightness);
}
- background-color: $background;
- color: $color;
+ // Default and disabled states
+ &,
+ &.disabled, &[disabled],
+ &.disabled:hover, &[disabled]:hover,
+ &.disabled:focus, &[disabled]:focus {
+ background-color: $background;
+ color: $color;
+ }
&:hover, &:focus {
background-color: $background-hover;
@@ -153,22 +209,20 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
}
}
-/// Removes background fill on hover and focus for hollow buttons.
+/// Sets the base styles of a hollow button.
+/// See mixin `button-hollow-style` for the filling styles.
@mixin button-hollow {
- &,
- &:hover, &:focus {
- background-color: transparent;
- }
-
- &.disabled,
- &[disabled] {
- &,
- &:hover, &:focus {
+ &, &.disabled, &[disabled] {
+ &, &:hover, &:focus {
background-color: transparent;
}
}
}
+/// Sets the visual style of a hollow button.
+/// @param {Color} $color [$button-background] - Text and border color of the button.
+/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
+/// @param {Color} $border-width [$button-hollow-border-width] - Border width of the button.
@mixin button-hollow-style(
$color: $button-background,
$hover-lightness: $button-hollow-hover-lightness,
@@ -176,38 +230,61 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
) {
$color-hover: scale-color($color, $lightness: $hover-lightness);
- border: $border-width solid $color;
- color: $color;
+ // Default and disabled states
+ &,
+ &.disabled, &[disabled],
+ &.disabled:hover, &[disabled]:hover,
+ &.disabled:focus, &[disabled]:focus {
+ border: $border-width solid $color;
+ color: $color;
+ }
&:hover, &:focus {
border-color: $color-hover;
color: $color-hover;
- &.disabled,
- &[disabled] {
- border: $border-width solid $color;
- color: $color;
+ }
+}
+
+/// Sets the base styles of a clear button.
+/// See mixin `button-clear-style` for the filling styles.
+@mixin button-clear {
+ &, &.disabled, &[disabled] {
+ &, &:hover, &:focus {
+ border-color: transparent;
+ background-color: transparent;
}
}
}
-/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-/// @param [Color] $background [$button-background] - Background color of the disabled button.
-/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
-@mixin button-disabled(
- $background: $button-background,
- $color: $button-color
+/// Sets the visual style of a clear button.
+/// @param {Color} $color [$button-background] - Text color of the button.
+/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
+@mixin button-clear-style(
+ $color: $button-background,
+ $hover-lightness: $button-hollow-hover-lightness
) {
- @if $color == auto {
- $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+ $color-hover: scale-color($color, $lightness: $hover-lightness);
+
+ // Default and disabled states
+ &,
+ &.disabled, &[disabled],
+ &.disabled:hover, &[disabled]:hover,
+ &.disabled:focus, &[disabled]:focus {
+ color: $color;
+ }
+
+ &:hover, &:focus {
+ color: $color-hover;
}
+}
+/// Adds disabled styles to a button by fading the element and reseting the cursor.
+/// @param {Number} $opacity [$button-opacity-disabled] - Opacity of the disabled button.
+@mixin button-disabled(
+ $opacity: $button-opacity-disabled
+) {
opacity: $button-opacity-disabled;
cursor: not-allowed;
-
- &, &:hover, &:focus {
- background-color: $background;
- color: $color;
- }
}
/// Adds a dropdown arrow to a button.
@@ -244,14 +321,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
$style: $button-fill
) {
@include button-base;
-
- @if $style == solid {
- @include button-style($background, $background-hover, $color);
- }
- @else if $style == hollow {
- @include button-hollow;
- @include button-hollow-style($background);
- }
+ @include button-fill($style);
+ @include button-fill-style($style, $background, $background-hover, $color);
@if $expand {
@include button-expand;
@@ -260,7 +331,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
@mixin foundation-button {
.button {
- @include button;
+ @include button($style: none);
// Sizes
@each $size, $value in map-remove($button-sizes, default) {
@@ -271,77 +342,48 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
&.expanded { @include button-expand; }
- // Colors
- @each $name, $color in $button-palette {
- @if $button-fill != hollow {
- &.#{$name} {
- @include button-style($color, auto, auto);
- }
- }
- @else {
- &.#{$name} {
- @include button-hollow-style($color);
+ @if $button-responsive-expanded {
+ @each $size in $breakpoint-classes {
+ @include breakpoint(#{$size} only) {
+ &.#{$size}-only-expanded {
+ @include button-expand;
+ }
}
+ @if $size != $-zf-zero-breakpoint {
+ @include breakpoint(#{$size} down) {
+ &.#{$size}-down-expanded {
+ @include button-expand;
+ }
+ }
- &.#{$name}.dropdown::after {
- border-top-color: $color;
+ @include breakpoint(#{$size}) {
+ &.#{$size}-expanded {
+ @include button-expand;
+ }
+ }
}
}
}
- // Disabled style
- &.disabled,
- &[disabled] {
- @include button-disabled;
+ // Solid, hollow & clear styles
+ @each $filling in (solid hollow clear) {
+ $selector: if($button-fill == $filling, null, '.#{$filling}');
- @each $name, $color in $button-palette {
- &.#{$name} {
- @include button-disabled($color, auto);
- }
- }
- }
-
- // Hollow style
- @if $button-fill != hollow {
- &.hollow {
- @include button-hollow;
- @include button-hollow-style;
+ &#{$selector} {
+ @include button-fill($filling);
+ @include button-fill-style($filling);
@each $name, $color in $button-palette {
&.#{$name} {
- @include button-hollow-style($color);
+ @include button-fill-style($filling, $color, auto, auto);
}
}
}
}
- // Clear style
- @if $button-fill != clear {
- &.clear {
- @include button-hollow;
- @include button-hollow-style;
-
- &, &:hover, &:focus {
- &, &.disabled, &[disabled] {
- border-color: transparent;
- }
- }
-
- @each $name, $color in $button-palette {
- &.#{$name} {
- @include button-hollow-style($color);
-
- &, &:hover,
- &:focus {
- &,
- &.disabled,
- &[disabled] {
- border-color: transparent;
- }
- }
- }
- }
- }
+ // Disabled state
+ &.disabled, &[disabled] {
+ @include button-disabled;
}
// Dropdown arrow
@@ -354,7 +396,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
}
}
- &.hollow {
+ &.hollow, &.clear {
&::after {
border-top-color: $button-background;
}
@@ -376,7 +418,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
margin-#{$global-left}: 0;
}
}
- a.button {
+
+ a.button { // sass-lint:disable-line no-qualifying-elements
&:hover,
&:focus {
text-decoration: none;
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_callout.scss b/src/scss/_vendor/foundation-sites/scss/components/_callout.scss
index 5a0842c..c8472c0 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_callout.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_callout.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -22,9 +22,13 @@ $callout-border: 1px solid rgba($black, 0.25) !default;
/// @type Number
$callout-margin: 0 0 1rem 0 !default;
-/// Default inner padding for callouts.
-/// @type Number
-$callout-padding: 1rem !default;
+/// Sizes for Callout paddings.
+/// @type Map
+$callout-sizes: (
+ small: 0.5rem,
+ default: 1rem,
+ large: 3rem,
+) !default;
/// Default font color for callouts.
/// @type Color
@@ -46,7 +50,7 @@ $callout-link-tint: 30% !default;
@mixin callout-base() {
position: relative;
margin: $callout-margin;
- padding: $callout-padding;
+ padding: map-get($callout-sizes, default);
border: $callout-border;
border-radius: $callout-radius;
@@ -95,12 +99,10 @@ $callout-link-tint: 30% !default;
}
}
- &.small {
- @include callout-size(0.5rem);
- }
-
- &.large {
- @include callout-size(3rem);
+ @each $size, $padding in map-remove($callout-sizes, default) {
+ &.#{$size} {
+ @include callout-size($padding);
+ }
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_card.scss b/src/scss/_vendor/foundation-sites/scss/components/_card.scss
index d3ba77e..809e18f 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_card.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_card.scss
@@ -1,12 +1,12 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
/// @group card
////
-/// Defualt background color.
+/// Default background color.
/// @type Color
$card-background: $white !default;
@@ -81,8 +81,8 @@ $card-margin-bottom: $global-margin !default;
$padding: $card-padding
) {
@if $global-flexbox {
- flex: 0 1 auto;
display: flex;
+ flex: 0 1 auto;
}
padding: $padding;
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_close-button.scss b/src/scss/_vendor/foundation-sites/scss/components/_close-button.scss
index 927741f..40f737f 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_close-button.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_close-button.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,6 +10,17 @@
/// @type List
$closebutton-position: right top !default;
+/// Default z-index for a close button.
+/// @type Number
+$closebutton-z-index: 10 !default;
+
+/// Button size to use as default
+/// @type String
+/// @see $closebutton-size
+/// @see $closebutton-offset-horizontal
+/// @see $closebutton-offset-vertical
+$closebutton-default-size: medium !default;
+
/// Right (or left) offset(s) for a close button.
/// @type Number|Map
$closebutton-offset-horizontal: (
@@ -24,7 +35,7 @@ $closebutton-offset-vertical: (
medium: 0.5rem,
) !default;
-/// Default font size(s) of the close button.
+/// Size(s) of the close button. Used to generate sizing modifiers.
/// @type Number|Map
$closebutton-size: (
small: 1.5em,
@@ -83,6 +94,7 @@ $closebutton-color-hover: $black !default;
@include disable-mouse-outline;
position: absolute;
+ z-index: $closebutton-z-index;
color: $closebutton-color;
cursor: pointer;
@@ -94,9 +106,22 @@ $closebutton-color-hover: $black !default;
@mixin foundation-close-button {
.close-button {
+ // Use by default the placeholder of the default size
+ @extend %zf-close-button--#{$closebutton-default-size};
+
@include close-button;
- &.small { @include close-button-size(small) }
- &, &.medium { @include close-button-size(medium) }
+ // Generate a placeholder and a class for each size
+ @each $name, $size in $closebutton-size {
+ @at-root {
+ %zf-close-button--#{$name} {
+ @include close-button-size($name);
+ }
+ }
+
+ &.#{$name} {
+ @extend %zf-close-button--#{$name};
+ }
+ }
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_drilldown.scss b/src/scss/_vendor/foundation-sites/scss/components/_drilldown.scss
index 1719080..3dcdf32 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_drilldown.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_drilldown.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -45,25 +45,26 @@ $drilldown-arrow-size: 6px !default;
@mixin zf-drilldown-left-right-arrows {
.is-drilldown-submenu-parent > a {
position: relative;
+
&::after {
+ @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
position: absolute;
top: 50%;
margin-top: -1 * $drilldown-arrow-size;
#{$global-right}: 1rem;
- @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
}
}
&.align-left .is-drilldown-submenu-parent > a::after {
- left: auto;
- right: 1rem;
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+ right: 1rem;
+ left: auto;
}
&.align-right .is-drilldown-submenu-parent > a::after {
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
right: auto;
left: 1rem;
- @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
}
}
@@ -130,12 +131,9 @@ $drilldown-arrow-size: 6px !default;
.js-drilldown-back > a::before {
@include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
- border-#{$global-left}-width: 0;
display: inline-block;
vertical-align: middle;
margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
-
- border-#{$global-left}-width: 0;
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_dropdown-menu.scss b/src/scss/_vendor/foundation-sites/scss/components/_dropdown-menu.scss
index 463f78a..3d180a2 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_dropdown-menu.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_dropdown-menu.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,11 +28,11 @@ $dropdownmenu-min-width: 200px !default;
/// Background color for top level items.
/// @type Color
-$dropdownmenu-background: $white !default;
+$dropdownmenu-background: null !default;
/// Background color for dropdowns.
/// @type Color
-$dropdownmenu-submenu-background: $dropdownmenu-background !default;
+$dropdownmenu-submenu-background: $white !default;
/// Padding for top level items.
/// @type Number
@@ -69,9 +69,9 @@ $dropdown-menu-item-background-active: transparent !default;
}
&.opens-left > a::after {
+ @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
right: auto;
left: 5px;
- @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
}
&.opens-right > a::after {
@@ -81,7 +81,7 @@ $dropdown-menu-item-background-active: transparent !default;
@mixin dropdown-menu-direction($dir: horizontal) {
@if $dir == horizontal {
- > li.opens-left {
+ > li.opens-left { // sass-lint:disable-line no-qualifying-elements
> .is-dropdown-submenu {
top: 100%;
right: 0;
@@ -89,7 +89,7 @@ $dropdown-menu-item-background-active: transparent !default;
}
}
- > li.opens-right {
+ > li.opens-right { // sass-lint:disable-line no-qualifying-elements
> .is-dropdown-submenu {
top: 100%;
right: auto;
@@ -98,16 +98,16 @@ $dropdown-menu-item-background-active: transparent !default;
}
@if $dropdownmenu-arrows {
- > li.is-dropdown-submenu-parent > a {
+ > li.is-dropdown-submenu-parent > a { // sass-lint:disable-line no-qualifying-elements
position: relative;
padding-#{$global-right}: $dropdownmenu-arrow-padding;
}
- > li.is-dropdown-submenu-parent > a::after {
+ > li.is-dropdown-submenu-parent > a::after { // sass-lint:disable-line no-qualifying-elements
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
#{$global-right}: 5px;
#{$global-left}: auto;
- margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+ margin-top: -1 * ($dropdownmenu-arrow-size * 0.5);
}
}
}
@@ -119,9 +119,9 @@ $dropdown-menu-item-background-active: transparent !default;
&.opens-left {
> .is-dropdown-submenu {
+ top: 0;
right: 100%;
left: auto;
- top: 0;
}
}
@@ -148,11 +148,16 @@ $dropdown-menu-item-background-active: transparent !default;
a {
@include disable-mouse-outline;
+ }
+
+ // Top-level item
+ > li > a {
+ background: $dropdownmenu-background;
padding: $dropdownmenu-padding;
}
- // Active state
- .is-active > a {
+ // Top-level item active state
+ > li.is-active > a {
background: $dropdown-menu-item-background-active;
color: $dropdown-menu-item-color-active;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_dropdown.scss b/src/scss/_vendor/foundation-sites/scss/components/_dropdown.scss
index 2d6366e..974f9c6 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_dropdown.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_dropdown.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -43,11 +43,12 @@ $dropdown-sizes: (
position: absolute;
z-index: 10;
+ display: none;
+
width: $dropdown-width;
padding: $dropdown-padding;
visibility: hidden;
- display: none;
border: $dropdown-border;
border-radius: $dropdown-radius;
background-color: $dropdown-background;
@@ -61,8 +62,8 @@ $dropdown-sizes: (
}
&.is-open {
- visibility: visible;
display: block;
+ visibility: visible;
}
}
@@ -72,8 +73,10 @@ $dropdown-sizes: (
}
@each $name, $size in $dropdown-sizes {
- .dropdown-pane.#{$name} {
- width: $size;
+ .dropdown-pane {
+ &.#{$name} {
+ width: $size;
+ }
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_flex.scss b/src/scss/_vendor/foundation-sites/scss/components/_flex.scss
index 32b79ba..7d46d07 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_flex.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_flex.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -71,17 +71,19 @@ $flexbox-responsive-breakpoints: true !default;
@mixin foundation-flex-classes {
// Horizontal alignment using justify-content
- @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+ @each $hdir, $prop in $-zf-flex-justify {
.align-#{$hdir} {
@include flex-align($x: $hdir);
}
}
// Horizontal alignment Specifically for Vertical Menu
- @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+ @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {
.align-#{$hdir} {
- &.vertical.menu > li > a {
- @include flex-align($x: $hdir);
+ &.vertical {
+ &.menu > li > a {
+ @include flex-align($x: $hdir);
+ }
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_float.scss b/src/scss/_vendor/foundation-sites/scss/components/_float.scss
index 3f81f3d..fb80032 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_float.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_float.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/src/scss/_vendor/foundation-sites/scss/components/_label.scss b/src/scss/_vendor/foundation-sites/scss/components/_label.scss
index cf7cf7d..3ec8eed 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_label.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_label.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/src/scss/_vendor/foundation-sites/scss/components/_media-object.scss b/src/scss/_vendor/foundation-sites/scss/components/_media-object.scss
index 3c85f46..7f3170c 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_media-object.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_media-object.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,6 +26,18 @@ $mediaobject-image-width-stacked: 100% !default;
@if $global-flexbox {
flex-wrap: nowrap;
}
+
+ img {
+ max-width: none;
+ }
+
+ @if $global-flexbox {
+ &.stack-for-#{$-zf-zero-breakpoint} {
+ @include breakpoint($-zf-zero-breakpoint only) {
+ flex-wrap: wrap;
+ }
+ }
+ }
}
/// Adds styles for sections within a media object.
@@ -50,6 +62,27 @@ $mediaobject-image-width-stacked: 100% !default;
> :last-child {
margin-bottom: 0;
}
+
+ .stack-for-#{$-zf-zero-breakpoint} & {
+ @include breakpoint($-zf-zero-breakpoint only) {
+ @include media-object-stack;
+ }
+ }
+
+ @if $global-flexbox {
+ &.main-section {
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
+ }
+ }
+ @else {
+ &.middle {
+ vertical-align: middle;
+ }
+
+ &.bottom {
+ vertical-align: bottom;
+ }
+ }
}
/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@@ -73,42 +106,9 @@ $mediaobject-image-width-stacked: 100% !default;
@mixin foundation-media-object {
.media-object {
@include media-object-container;
-
- img {
- max-width: none;
- }
-
- @if $global-flexbox {
- &.stack-for-#{$-zf-zero-breakpoint} {
- @include breakpoint($-zf-zero-breakpoint only) {
- flex-wrap: wrap;
- }
- }
- }
-
- &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
- @include breakpoint($-zf-zero-breakpoint only) {
- @include media-object-stack;
- }
- }
}
.media-object-section {
@include media-object-section;
-
- @if $global-flexbox {
- &.main-section {
- flex: 1 1 0px; // sass-lint:disable-line zero-unit
- }
- }
- @else {
- &.middle {
- vertical-align: middle;
- }
-
- &.bottom {
- vertical-align: bottom;
- }
- }
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_menu.scss b/src/scss/_vendor/foundation-sites/scss/components/_menu.scss
index fa100c6..1ecb07a 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_menu.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_menu.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,6 +26,10 @@ $menu-simple-margin: 1rem !default;
/// @type Color
$menu-item-color-active: $white !default;
+/// Alternative text color of an active menu item..
+/// @type Color
+$menu-item-color-alt-active: $black !default;
+
/// Background color of an active menu item.
/// @type Color
$menu-item-background-active: get-color(primary) !default;
@@ -34,16 +38,12 @@ $menu-item-background-active: get-color(primary) !default;
/// @type Number
$menu-icon-spacing: 0.25rem !default;
-/// Background color for an hovered menu item.
-/// @type Color
-$menu-item-background-hover: $light-gray !default;
-
-/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`.
+/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`.
/// But please note that `active` will be removed in upcoming versions.
/// @type Boolean
$menu-state-back-compat: true !default;
-/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`.
+/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`.
/// But please note that `menu-centered` will be removed in upcoming versions.
/// @type Boolean
$menu-centered-back-compat: true !default;
@@ -258,6 +258,33 @@ $menu-icons-back-compat: true !default;
}
}
+/// Align top/bottom icons within a menu.
+/// @param {Keyword} $alignment [center] - Alignment of the icon
+@mixin menu-icon-alignment($alignment: center) {
+ @if $global-flexbox {
+ &.icon-top,
+ &.icon-bottom {
+ li a {
+ img,
+ i,
+ svg {
+ @if $alignment == left {
+ text-align: left;
+ }
+
+ @else if $alignment == right {
+ text-align: right;
+ }
+
+ @else {
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
+}
+
/// Adds position classes for icons within a menu.
@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
@if $position == left {
@@ -354,7 +381,7 @@ $menu-icons-back-compat: true !default;
@mixin menu-state-active {
background: $menu-item-background-active;
- color: $menu-item-color-active;
+ color: color-pick-contrast($menu-item-background-active, ($menu-item-color-active, $menu-item-color-alt-active));
}
@mixin foundation-menu {
@@ -369,11 +396,13 @@ $menu-icons-back-compat: true !default;
// Vertical orientation modifier
&.vertical {
@include menu-direction(vertical);
+ @include menu-icon-alignment(left);
}
// Even-width modifier for horizontal orientation
&.expanded {
@include menu-expand;
+ @include menu-icon-alignment(left);
}
// Simple
@@ -420,31 +449,36 @@ $menu-icons-back-compat: true !default;
}
}
- // Icon Left
- &.icon-left {
- @include menu-icon-position(left);
- }
+ // Menu icon position
+ // Includes specificity to nested icons with a different position
+ &,
+ &.nested {
+ // Icon Left
+ &.icon-left {
+ @include menu-icon-position(left);
+ }
- // Icon Right
- &.icon-right {
- @include menu-icon-position(right);
- }
+ // Icon Right
+ &.icon-right {
+ @include menu-icon-position(right);
+ }
- // Icon Top
- &.icon-top {
- @include menu-icon-position(top);
- }
+ // Icon Top
+ &.icon-top {
+ @include menu-icon-position(top);
+ }
- // Icon Bottom
- &.icon-bottom {
- @include menu-icon-position(bottom);
+ // Icon Bottom
+ &.icon-bottom {
+ @include menu-icon-position(bottom);
+ }
}
// Active state
.is-active > a {
@include menu-state-active;
}
-
+
// Backward Compatibility for active state
@if $menu-state-back-compat {
.active > a {
@@ -460,6 +494,7 @@ $menu-icons-back-compat: true !default;
// Align right
&.align-#{$global-right} {
@include menu-align(right);
+ @include menu-icon-alignment(right);
.nested {
@include menu-nested($nested-alignment: right);
@@ -482,7 +517,7 @@ $menu-icons-back-compat: true !default;
@if $global-flexbox {
justify-content: center;
}
-
+
@include menu-align(center);
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_off-canvas.scss b/src/scss/_vendor/foundation-sites/scss/components/_off-canvas.scss
index 03a1215..5a8894b 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_off-canvas.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_off-canvas.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -196,6 +196,7 @@ $maincontent-class: 'off-canvas-content' !default;
left: 0;
height: 100%;
overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
@each $name, $size in $sizes {
@include breakpoint($name) {
@@ -233,6 +234,7 @@ $maincontent-class: 'off-canvas-content' !default;
right: 0;
height: 100%;
overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
@each $name, $size in $sizes {
@include breakpoint($name) {
@@ -270,6 +272,7 @@ $maincontent-class: 'off-canvas-content' !default;
left: 0;
width: 100%;
overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
@each $name, $size in $sizes {
@include breakpoint($name) {
@@ -306,6 +309,7 @@ $maincontent-class: 'off-canvas-content' !default;
left: 0;
width: 100%;
overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
@each $name, $size in $sizes {
@include breakpoint($name) {
@@ -362,9 +366,14 @@ $maincontent-class: 'off-canvas-content' !default;
/// Sets the styles for the content container.
@mixin off-canvas-content() {
transform: none;
- transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
backface-visibility: hidden;
+ // Bind to has-transition-X class to prevent transition for transform:none
+ &.has-transition-overlap,
+ &.has-transition-push {
+ transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+ }
+
// Transform scope until the element is closed (makes sure transitionend gets triggered)
&.has-transition-push {
transform: translate(0, 0);
@@ -378,10 +387,10 @@ $maincontent-class: 'off-canvas-content' !default;
/// Adds styles that reveal an off-canvas panel.
@mixin off-canvas-reveal(
-$position: left,
-$zindex: $offcanvas-reveal-zindex,
-$content: $maincontent-class,
-$breakpoint: small
+ $position: left,
+ $zindex: $offcanvas-reveal-zindex,
+ $content: $maincontent-class,
+ $breakpoint: small
) {
transform: none;
z-index: $zindex;
@@ -416,10 +425,10 @@ $breakpoint: small
visibility: visible;
height: auto;
position: static;
- background: inherit;
- width: inherit;
- overflow: inherit;
- transition: inherit;
+ background: none;
+ width: auto;
+ overflow: visible;
+ transition: none;
// Increase CSS specificity
&.position-left,
@@ -448,10 +457,10 @@ $breakpoint: small
@include off-canvas-base;
// Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
- @at-root .#{$maincontent-class} & {
- // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
- // position: absolute;
- }
+ // @at-root .#{$maincontent-class} & {
+ // // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
+ // position: absolute;
+ // }
}
// Off-canvas container with absolute position
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_orbit.scss b/src/scss/_vendor/foundation-sites/scss/components/_orbit.scss
index 9b43fcd..06761cc 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_orbit.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_orbit.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -67,6 +67,7 @@ $orbit-control-zindex: 10 !default;
/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
@mixin orbit-slide {
width: 100%;
+ position: absolute;
&.no-motionui {
&.is-active {
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_pagination.scss b/src/scss/_vendor/foundation-sites/scss/components/_pagination.scss
index d02ae03..f8a8c14 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_pagination.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_pagination.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -65,6 +65,14 @@ $pagination-mobile-current-item: false !default;
/// @type Boolean
$pagination-arrows: true !default;
+/// Content for the previous arrow when `$pagination-arrows` is `true`
+/// @type String
+$pagination-arrow-previous: '\00AB' !default;
+
+/// Content for the next arrow when `$pagination-arrows` is `true`
+/// @type String
+$pagination-arrow-next: '\00BB' !default;
+
/// Adds styles for a pagination container. Apply this to a `<ul>`.
@mixin pagination-container (
$margin-bottom: $pagination-margin-bottom,
@@ -180,14 +188,14 @@ $pagination-arrows: true !default;
.pagination-previous.disabled::before {
display: inline-block;
margin-#{$global-right}: 0.5rem;
- content: '\00ab';
+ content: $pagination-arrow-previous;
}
.pagination-next a::after,
.pagination-next.disabled::after {
display: inline-block;
margin-#{$global-left}: 0.5rem;
- content: '\00bb';
+ content: $pagination-arrow-next;
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_progress-bar.scss b/src/scss/_vendor/foundation-sites/scss/components/_progress-bar.scss
index 342cfe6..b2b8913 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_progress-bar.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_progress-bar.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
/// Adds styles for a progress bar container.
@@ -26,7 +26,6 @@
/// Adds styles for text in the progress meter.
@mixin progress-meter-text {
@include absolute-center;
- position: absolute;
margin: 0;
font-size: 0.75rem;
font-weight: bold;
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_responsive-embed.scss b/src/scss/_vendor/foundation-sites/scss/components/_responsive-embed.scss
index 36cb11d..c710fca 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_responsive-embed.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_responsive-embed.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -17,9 +17,6 @@ $responsive-embed-ratios: (
widescreen: 16 by 9,
) !default;
-// WARNING: Will be removed in version 6.4
-$responsive-embed-ratio: default;
-
/// Creates a responsive embed container.
/// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
@mixin responsive-embed($ratio: default) {
@@ -49,7 +46,7 @@ $responsive-embed-ratio: default;
.flex-video {
@include responsive-embed($ratio: default);
- $ratios: map-remove($responsive-embed-ratios,default);
+ $ratios: map-remove($responsive-embed-ratios, default);
@each $name, $ratio in $ratios {
&.#{$name} {
@@ -58,13 +55,3 @@ $responsive-embed-ratio: default;
}
}
}
-
-@mixin foundation-flex-video {
- @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
- @include foundation-responsive-embed;
-}
-
-@mixin flex-video($ratio: $responsive-embed-ratio) {
- @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
- @include responsive-embed($ratio);
-}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_reveal.scss b/src/scss/_vendor/foundation-sites/scss/components/_reveal.scss
index b77de14..8355577 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_reveal.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_reveal.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -41,6 +41,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
// Placeholder selector for medium-and-up modals
// Prevents duplicate CSS when defining multiple Reveal sizes
+// This should be in the same breakpoint then `@mixin reveal-modal-width`
@include breakpoint(medium) {
%reveal-centered {
right: auto;
@@ -62,7 +63,8 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
display: none;
background-color: $background;
- overflow-y: scroll;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
}
/// Adds base styles for a modal.
@@ -101,8 +103,9 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
$width: $reveal-width,
$max-width: $reveal-max-width
) {
+ // Extends must be made outside of breakpoints for compatibility with newer Sass versions (libsass v3.5)
+ @extend %reveal-centered;
@include breakpoint(medium) {
- @extend %reveal-centered;
width: $width;
max-width: $max-width;
}
@@ -111,13 +114,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
/// Creates a full-screen modal, which stretches the full width and height of the window.
@mixin reveal-modal-fullscreen {
top: 0;
+ right: 0;
+ bottom: 0;
left: 0;
width: 100%;
max-width: none;
height: 100%;
- height: 100vh; // sass-lint:disable-line no-duplicate-properties
- min-height: 100vh;
+ min-height: 100%;
margin-left: 0;
border: 0;
@@ -125,18 +129,21 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
}
@mixin foundation-reveal {
- // [TODO] Is this necessary?
- body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements
- overflow: hidden;
- }
- // html gets this class only in iOS
- html.is-reveal-open,
- html.is-reveal-open body {
- min-height: 100%;
- overflow: hidden;
+ /// Disables the scroll when Reveal is shown to prevent the background from shifting
+ html.is-reveal-open {
position: fixed;
- user-select: none;
+ width: 100%;
+ overflow-y: hidden;
+
+ &.zf-has-scroll {
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ body { // sass-lint:disable-line no-qualifying-elements
+ overflow-y: hidden;
+ }
}
// Overlay
@@ -153,6 +160,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
margin-right: auto;
margin-left: auto;
overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
// Remove padding
&.collapse {
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_slider.scss b/src/scss/_vendor/foundation-sites/scss/components/_slider.scss
old mode 100644
new mode 100755
index c32b228..142f4a5
--- a/src/scss/_vendor/foundation-sites/scss/components/_slider.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_slider.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
// [TODO] Check how plugin confirms disabled or vertical status
@@ -54,6 +54,7 @@ $slider-transition: all 0.2s ease-in-out !default;
@include vertical-center;
left: 0;
z-index: 1;
+ cursor: grab;
display: inline-block;
width: $slider-handle-width;
@@ -70,6 +71,7 @@ $slider-transition: all 0.2s ease-in-out !default;
&.is-dragging {
transition: all 0s linear;
+ cursor: grabbing;
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_sticky.scss b/src/scss/_vendor/foundation-sites/scss/components/_sticky.scss
index 378e0e2..c2ca29d 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_sticky.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_sticky.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
@mixin foundation-sticky {
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_switch.scss b/src/scss/_vendor/foundation-sites/scss/components/_switch.scss
index a2211c6..9451777 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_switch.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_switch.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -54,6 +54,14 @@ $switch-paddle-radius: $global-radius !default;
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;
+/// Opacity of a disabled switch.
+/// @type Number
+$switch-opacity-disabled: 0.5 !default;
+
+/// Cursor for a disabled switch.
+/// @type Cursor
+$switch-cursor-disabled: not-allowed !default;
+
// make them variables
// ask about accessibility on label
// change class name for text
@@ -132,6 +140,12 @@ $switch-paddle-transition: all 0.25s ease-out !default;
}
}
+ // indicate a disabled switch
+ input:disabled ~ & {
+ cursor: $switch-cursor-disabled;
+ opacity: $switch-opacity-disabled;
+ }
+
input:focus ~ & {
@include disable-mouse-outline;
}
@@ -201,8 +215,8 @@ $switch-paddle-transition: all 0.25s ease-out !default;
@mixin foundation-switch {
// Container class
.switch {
- height: $switch-height;
@include switch-container;
+ height: $switch-height;
}
// <input> element
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_table.scss b/src/scss/_vendor/foundation-sites/scss/components/_table.scss
index fc967df..1a46d33 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_table.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_table.scss
@@ -1,8 +1,8 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
-// sass-lint:disable force-element-nesting, no-qualifying-elements
+// sass-lint:disable no-qualifying-elements
////
/// @group table
@@ -50,7 +50,7 @@ $table-stripe: even !default;
/// Default color for header background.
/// @type Color
-$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
/// Default color of header rows on hover.
/// @type List
@@ -101,7 +101,6 @@ $table-stack-breakpoint: medium !default;
@mixin -zf-table-unstripe() {
tr {
- border-bottom: 0;
border-bottom: $table-border;
background-color: $table-background;
}
@@ -188,6 +187,7 @@ $table-stack-breakpoint: medium !default;
/// Adds the general styles for tables.
/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.
+/// @param {Boolean} $nest [false] - Needed if you only want to apply this to a specific table.
@mixin table(
$stripe: $table-stripe,
$nest: false
@@ -246,7 +246,7 @@ $table-stack-breakpoint: medium !default;
}
// Darkens the odd striped table rows.
- @elseif($table-stripe == odd) {
+ @else if($table-stripe == odd) {
&:not(.unstriped) tr:nth-of-type(odd):hover {
background-color: $table-row-stripe-hover;
}
@@ -262,7 +262,7 @@ $table-stack-breakpoint: medium !default;
}
// Darkens the odd striped table rows.
- @elseif($table-stripe == odd) {
+ @else if($table-stripe == odd) {
&.striped tr:nth-of-type(odd):hover {
background-color: $table-row-stripe-hover;
}
@@ -323,8 +323,5 @@ $table-stack-breakpoint: medium !default;
.table-scroll {
overflow-x: auto;
- table {
- width: auto;
- }
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_tabs.scss b/src/scss/_vendor/foundation-sites/scss/components/_tabs.scss
index 56d962d..f100b96 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_tabs.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_tabs.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -37,10 +37,6 @@ $tab-item-background-hover: $white !default;
/// @type Number
$tab-item-padding: 1.25rem 1.5rem !default;
-/// Maximum number of `expand-n` classes to include in the CSS.
-/// @type Number
-$tab-expand-max: 6 !default;
-
/// Default background color of tab content.
/// @type Color
$tab-content-background: $white !default;
@@ -91,6 +87,7 @@ $tab-content-padding: 1rem !default;
float: #{$global-left};
> a {
+ @include disable-mouse-outline;
display: block;
padding: $padding;
font-size: $font-size;
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_thumbnail.scss b/src/scss/_vendor/foundation-sites/scss/components/_thumbnail.scss
index 2ce42b3..100fd44 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_thumbnail.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_thumbnail.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -8,7 +8,7 @@
/// Border around thumbnail images.
/// @type Border
-$thumbnail-border: solid 4px $white !default;
+$thumbnail-border: 4px solid $white !default;
/// Bottom margin for thumbnail images.
/// @type Length
diff --git a/src/scss/_vendor/foundation-sites/scss/components/_title-bar.scss b/src/scss/_vendor/foundation-sites/scss/components/_title-bar.scss
index e0f370c..31e5fc9 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_title-bar.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_title-bar.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/src/scss/_vendor/foundation-sites/scss/components/_tooltip.scss b/src/scss/_vendor/foundation-sites/scss/components/_tooltip.scss
index 36dc155..6df8fa2 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_tooltip.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_tooltip.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/src/scss/_vendor/foundation-sites/scss/components/_top-bar.scss b/src/scss/_vendor/foundation-sites/scss/components/_top-bar.scss
index 2503a7f..83e01fc 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_top-bar.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_top-bar.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/src/scss/_vendor/foundation-sites/scss/components/_visibility.scss b/src/scss/_vendor/foundation-sites/scss/components/_visibility.scss
index 8906f59..4366844 100644
--- a/src/scss/_vendor/foundation-sites/scss/components/_visibility.scss
+++ b/src/scss/_vendor/foundation-sites/scss/components/_visibility.scss
@@ -1,12 +1,15 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
/// Hide an element by default, only displaying it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin show-for($size) {
$size: map-get($breakpoints, $size);
- $size: -zf-bp-to-em($size) - (1 / 16);
+ // 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
+ $size: -zf-bp-to-em($size) - 0.00125;
@include breakpoint($size down) {
display: none !important;
@@ -20,7 +23,7 @@
$upper-bound-size: -zf-map-next($breakpoints, $size);
// more often than not this will be correct, just one time round the loop it won't so set in scope here
- $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
+ $lower-bound: -zf-bp-to-em($lower-bound-size) - 0.00125;
// test actual lower-bound-size, if 0 set it to 0em
@if strip-unit($lower-bound-size) == 0 {
$lower-bound: -zf-bp-to-em($lower-bound-size);
@@ -66,6 +69,9 @@
.invisible {
visibility: hidden;
}
+ .visible {
+ visibility: visible;
+ }
// Responsive visibility classes
@each $size in $breakpoint-classes {
@@ -129,4 +135,44 @@
display: block !important;
}
}
+
+ // Dark Mode Visibility
+ .show-for-dark-mode {
+ display: none;
+ }
+ .hide-for-dark-mode {
+ display: block;
+ }
+ @media screen and (prefers-color-scheme: dark) {
+ .show-for-dark-mode {
+ display: block !important;
+ }
+ .hide-for-dark-mode {
+ display: none !important;
+ }
+ }
+
+ // IE10+ Visibility
+ .show-for-ie {
+ display: none;
+ }
+ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ .show-for-ie {
+ display: block !important;
+ }
+ .hide-for-ie {
+ display: none !important;
+ }
+ }
+
+ // Sticky Visibility
+ .show-for-sticky {
+ display: none;
+ }
+ .is-stuck .show-for-sticky {
+ display: block;
+ }
+ .is-stuck .hide-for-sticky {
+ display: none;
+ }
}
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_checkbox.scss b/src/scss/_vendor/foundation-sites/scss/forms/_checkbox.scss
index 60e8bfc..189808d 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_checkbox.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_checkbox.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/src/scss/_vendor/foundation-sites/scss/forms/_error.scss b/src/scss/_vendor/foundation-sites/scss/forms/_error.scss
index 30e5389..e9e9028 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_error.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_error.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -45,6 +45,7 @@ $input-error-font-weight: $global-weight-bold !default;
&:not(:focus) {
border-color: $background;
background-color: mix($background, $white, $background-lighten);
+
&::placeholder {
color: $background;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_fieldset.scss b/src/scss/_vendor/foundation-sites/scss/forms/_fieldset.scss
index 8611d5a..2f0db01 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_fieldset.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_fieldset.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/src/scss/_vendor/foundation-sites/scss/forms/_forms.scss b/src/scss/_vendor/foundation-sites/scss/forms/_forms.scss
index 1507fda..8552a79 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_forms.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_forms.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/src/scss/_vendor/foundation-sites/scss/forms/_help-text.scss b/src/scss/_vendor/foundation-sites/scss/forms/_help-text.scss
index 04e5237..f126e8b 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_help-text.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_help-text.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/src/scss/_vendor/foundation-sites/scss/forms/_input-group.scss b/src/scss/_vendor/foundation-sites/scss/forms/_input-group.scss
index e26618a..2d44c96 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_input-group.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_input-group.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -22,7 +22,7 @@ $input-prefix-border: 1px solid $medium-gray !default;
$input-prefix-padding: 1rem !default;
@mixin foundation-form-prepostfix {
- $height: ($input-font-size + $form-spacing * 1.5);
+ $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
.input-group {
display: if($global-flexbox, flex, table);
@@ -34,11 +34,13 @@ $input-prefix-padding: 1rem !default;
}
> :first-child {
- border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+ &, &.input-group-button > * {
+ border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+ }
}
> :last-child {
- > * {
+ &, &.input-group-button > * {
border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
}
}
@@ -91,12 +93,8 @@ $input-prefix-padding: 1rem !default;
@if $global-flexbox {
flex: 1 1 0px; // sass-lint:disable-line zero-unit
- height: auto;
min-width: 0;
}
- @else {
- height: $height;
- }
}
.input-group-button {
@@ -121,8 +119,8 @@ $input-prefix-padding: 1rem !default;
@extend %input-group-child;
@if $global-flexbox {
- height: auto;
align-self: stretch;
+ height: auto;
}
@else {
height: $height;
@@ -135,8 +133,10 @@ $input-prefix-padding: 1rem !default;
// Specificity bump needed to prevent override by buttons
@if not $global-flexbox {
- .input-group .input-group-button {
- display: table-cell;
+ .input-group {
+ .input-group-button {
+ display: table-cell;
}
+ }
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_label.scss b/src/scss/_vendor/foundation-sites/scss/forms/_label.scss
index 1c38851..8620876 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_label.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_label.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -36,7 +36,8 @@ $form-label-line-height: 1.8 !default;
$input-border-width: get-border-value($input-border, width);
margin: 0 0 $form-spacing;
- padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
+ line-height: $global-lineheight;
+ padding: ($form-spacing * 0.5 + rem-calc($input-border-width)) 0;
}
@mixin foundation-form-label {
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_meter.scss b/src/scss/_vendor/foundation-sites/scss/forms/_meter.scss
index c31b2f9..fd34981 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_meter.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_meter.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -42,8 +42,8 @@ $meter-fill-bad: $alert-color !default;
// `-moz-appearance: none` as a prefix and neglecting the webkit.
/*! autoprefixer: off */
- -moz-appearance: none;
- appearance: none;
+ -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+ appearance: none;
@if has-value($meter-radius) {
border-radius: $meter-radius;
@@ -101,15 +101,15 @@ $meter-fill-bad: $alert-color !default;
}
}
- &:-moz-meter-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+ &:-moz-meter-optimum::-moz-meter-bar {
background: $meter-fill-good;
}
- &:-moz-meter-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+ &:-moz-meter-sub-optimum::-moz-meter-bar {
background: $meter-fill-medium;
}
- &:-moz-meter-sub-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+ &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: $meter-fill-bad;
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_progress.scss b/src/scss/_vendor/foundation-sites/scss/forms/_progress.scss
index 4dd37f1..396d0f1 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_progress.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_progress.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -35,7 +35,7 @@ $progress-radius: $global-radius !default;
appearance: none;
- @if hasvalue($progress-radius) {
+ @if has-value($progress-radius) {
border-radius: $progress-radius;
}
@@ -46,7 +46,7 @@ $progress-radius: $global-radius !default;
&::-webkit-progress-bar {
background: $progress-background;
- @if hasvalue($progress-radius) {
+ @if has-value($progress-radius) {
border-radius: $progress-radius;
}
}
@@ -54,7 +54,7 @@ $progress-radius: $global-radius !default;
&::-webkit-progress-value {
background: $progress-meter-background;
- @if hasvalue($progress-radius) {
+ @if has-value($progress-radius) {
border-radius: $progress-radius;
}
}
@@ -62,7 +62,7 @@ $progress-radius: $global-radius !default;
&::-moz-progress-bar {
background: $progress-meter-background;
- @if hasvalue($progress-radius) {
+ @if has-value($progress-radius) {
border-radius: $progress-radius;
}
}
@@ -83,8 +83,8 @@ $progress-radius: $global-radius !default;
}
// For IE and Edge
- &::-ms-fill {
- @if hasvalue($progress-radius) {
+ &::-ms-fill { // sass-lint:disable-line no-vendor-prefixes
+ @if has-value($progress-radius) {
border-radius: $progress-radius;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_range.scss b/src/scss/_vendor/foundation-sites/scss/forms/_range.scss
index b576641..f907df9 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_range.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_range.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -39,8 +39,8 @@ $slider-opacity-disabled: 0.25 !default;
$slider-radius: $global-radius !default;
@mixin foundation-range-input {
- input[type="range"] { // sass-lint:disable-line no-qualifying-elements
- $margin: ($slider-handle-height - $slider-height) / 2;
+ input[type='range'] { // sass-lint:disable-line no-qualifying-elements
+ $margin: ($slider-handle-height - $slider-height) * 0.5;
display: block;
width: 100%;
@@ -73,12 +73,12 @@ $slider-radius: $global-radius !default;
background: $slider-background;
}
- &::-webkit-slider-handle {
+ &::-webkit-slider-thumb {
width: $slider-handle-width;
height: $slider-handle-height;
margin-top: -$margin;
- -webkit-appearance: none;
+ -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
background: $slider-handle-background;
@if has-value($slider-radius) {
@@ -89,7 +89,7 @@ $slider-radius: $global-radius !default;
// Firefox
&::-moz-range-track {
height: $slider-height;
- -moz-appearance: none;
+ -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
background: $slider-background;
}
@@ -98,7 +98,7 @@ $slider-radius: $global-radius !default;
height: $slider-handle-height;
margin-top: -$margin;
- -moz-appearance: none;
+ -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
background: $slider-handle-background;
@if has-value($slider-radius) {
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_select.scss b/src/scss/_vendor/foundation-sites/scss/forms/_select.scss
index 5f5097a..f09419a 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_select.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_select.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -77,6 +77,10 @@ $select-radius: $global-radius !default;
height: auto;
background-image: none;
}
+ &:not([multiple]) {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
}
@mixin foundation-form-select {
diff --git a/src/scss/_vendor/foundation-sites/scss/forms/_text.scss b/src/scss/_vendor/foundation-sites/scss/forms/_text.scss
index b34b121..0081c53 100644
--- a/src/scss/_vendor/foundation-sites/scss/forms/_text.scss
+++ b/src/scss/_vendor/foundation-sites/scss/forms/_text.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -52,7 +52,7 @@ $input-border-focus: 1px solid $dark-gray !default;
/// Padding of text inputs.
/// @type Color
-$input-padding: $form-spacing / 2 !default;
+$input-padding: $form-spacing * 0.5 !default;
/// Box shadow inside text inputs when not focused.
/// @type Shadow
@@ -139,11 +139,6 @@ $form-button-radius: $global-radius !default;
input,
textarea {
- // Placeholder text
- &::placeholder {
- color: $input-placeholder-color;
- }
-
// Disabled/readonly state
&:disabled,
&[readonly] {
@@ -167,13 +162,18 @@ $form-button-radius: $global-radius !default;
// Number input styles
[type='number'] {
@if not $input-number-spinners {
- -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefix
+ -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefixes
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
- -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefix
+ -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
margin: 0;
}
}
}
+
+ // Placeholder text
+ ::placeholder {
+ color: $input-placeholder-color;
+ }
}
diff --git a/src/scss/_vendor/foundation-sites/scss/foundation.scss b/src/scss/_vendor/foundation-sites/scss/foundation.scss
index b32277a..d308dec 100644
--- a/src/scss/_vendor/foundation-sites/scss/foundation.scss
+++ b/src/scss/_vendor/foundation-sites/scss/foundation.scss
@@ -1,11 +1,11 @@
/**
- * Foundation for Sites by ZURB
- * Version 6.4.3
- * foundation.zurb.com
+ * Foundation for Sites
+ * Version 6.8.1
+ * https://get.foundation
* Licensed under MIT Open Source
*/
-// Dependencies
+// --- Dependencies ---
@import '../_vendor/normalize-scss/sass/normalize';
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
@@ -15,67 +15,87 @@
@import '../_vendor/sassy-lists/stylesheets/functions/replace';
@import '../_vendor/sassy-lists/stylesheets/functions/to-list';
-// Settings
+// --- Settings ---
// import your own `settings` here or
// import and modify the default settings through
// @import 'settings/settings';
-// Sass utilities
+// --- Components ---
+// Utilities
@import 'util/util';
-
-// Global variables and styles
+// Global styles
@import 'global';
+@import 'forms/forms';
+@import 'typography/typography';
-// Components
+// Grids
@import 'grid/grid';
@import 'xy-grid/xy-grid';
-@import 'typography/typography';
-@import 'forms/forms';
-@import 'components/visibility';
-@import 'components/float';
+// Generic components
@import 'components/button';
@import 'components/button-group';
-@import 'components/accordion-menu';
-@import 'components/accordion';
+@import 'components/close-button';
+@import 'components/label';
+@import 'components/progress-bar';
+@import 'components/slider';
+@import 'components/switch';
+@import 'components/table';
+// Basic components
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/card';
-@import 'components/close-button';
-@import 'components/drilldown';
-@import 'components/dropdown-menu';
@import 'components/dropdown';
-@import 'components/flex';
-@import 'components/responsive-embed';
-@import 'components/label';
+@import 'components/pagination';
+@import 'components/tooltip';
+
+// Containers
+@import 'components/accordion';
@import 'components/media-object';
+@import 'components/orbit';
+@import 'components/responsive-embed';
+@import 'components/tabs';
+@import 'components/thumbnail';
+// Menu-based containers
@import 'components/menu';
@import 'components/menu-icon';
+@import 'components/accordion-menu';
+@import 'components/drilldown';
+@import 'components/dropdown-menu';
+
+// Layout components
@import 'components/off-canvas';
-@import 'components/orbit';
-@import 'components/pagination';
-@import 'components/progress-bar';
@import 'components/reveal';
-@import 'components/slider';
@import 'components/sticky';
-@import 'components/switch';
-@import 'components/table';
-@import 'components/tabs';
@import 'components/title-bar';
@import 'components/top-bar';
-@import 'components/thumbnail';
-@import 'components/tooltip';
+
+// Helpers
+@import 'components/float';
+@import 'components/flex';
+@import 'components/visibility';
@import 'prototype/prototype';
+
@mixin foundation-everything(
$flex: true,
- $prototype: false
+ $prototype: false,
+ $xy-grid: $xy-grid
) {
@if $flex {
$global-flexbox: true !global;
}
+ @if $xy-grid {
+ $xy-grid: true !global;
+ }
+
+ // Global styles
@include foundation-global-styles;
+ @include foundation-forms;
+ @include foundation-typography;
+
+ // Grids
@if not $flex {
@include foundation-grid;
}
@@ -87,47 +107,49 @@
@include foundation-flex-grid;
}
}
- @include foundation-typography;
- @include foundation-forms;
+
+ // Generic components
@include foundation-button;
- @include foundation-accordion;
- @include foundation-accordion-menu;
+ @include foundation-button-group;
+ @include foundation-close-button;
+ @include foundation-label;
+ @include foundation-progress-bar;
+ @include foundation-slider;
+ @include foundation-switch;
+ @include foundation-table;
+ // Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
- @include foundation-button-group;
@include foundation-callout;
@include foundation-card;
- @include foundation-close-button;
+ @include foundation-dropdown;
+ @include foundation-pagination;
+ @include foundation-tooltip;
+
+ // Containers
+ @include foundation-accordion;
+ @include foundation-media-object;
+ @include foundation-orbit;
+ @include foundation-responsive-embed;
+ @include foundation-tabs;
+ @include foundation-thumbnail;
+ // Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
+ @include foundation-accordion-menu;
@include foundation-drilldown-menu;
- @include foundation-dropdown;
@include foundation-dropdown-menu;
- @include foundation-responsive-embed;
- @include foundation-label;
- @include foundation-media-object;
+
+ // Layout components
@include foundation-off-canvas;
- @include foundation-orbit;
- @include foundation-pagination;
- @include foundation-progress-bar;
- @include foundation-slider;
- @include foundation-sticky;
@include foundation-reveal;
- @include foundation-switch;
- @include foundation-table;
- @include foundation-tabs;
- @include foundation-thumbnail;
+ @include foundation-sticky;
@include foundation-title-bar;
- @include foundation-tooltip;
@include foundation-top-bar;
- @include foundation-visibility-classes;
- @include foundation-float-classes;
- @if $flex {
- @include foundation-flex-classes;
- }
-
- @if $prototype {
- @include foundation-prototype-classes;
- }
+ // Helpers
+ @include foundation-float-classes;
+ @if $flex { @include foundation-flex-classes; }
+ @include foundation-visibility-classes;
+ @if $prototype { @include foundation-prototype-classes; }
}
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_classes.scss b/src/scss/_vendor/foundation-sites/scss/grid/_classes.scss
index 3bc26f5..418ee98 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_classes.scss
+++ b/src/scss/_vendor/foundation-sites/scss/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
////
@@ -106,20 +106,26 @@
// Source ordering
@if $i < $grid-column-count {
- .#{$-zf-size}-#{$push}-#{$i} {
- @include grid-col-pos($i);
+ @if $push {
+ .#{$-zf-size}-#{$push}-#{$i} {
+ @include grid-col-pos($i);
+ }
}
- .#{$-zf-size}-#{$pull}-#{$i} {
- @include grid-col-pos(-$i);
+ @if $pull {
+ .#{$-zf-size}-#{$pull}-#{$i} {
+ @include grid-col-pos(-$i);
+ }
}
}
// Offsets
$o: $i - 1;
- .#{$-zf-size}-#{$offset}-#{$o} {
- @include grid-col-off($o);
+ @if $offset {
+ .#{$-zf-size}-#{$offset}-#{$o} {
+ @include grid-col-off($o);
+ }
}
}
@@ -150,15 +156,22 @@
}
// Positioning
- .#{$-zf-size}-#{$center} {
- @include grid-col-pos(center);
+ @if $center {
+ .#{$-zf-size}-#{$center} {
+ @include grid-col-pos(center);
+ }
}
// Gutter adjustment
- .#{$-zf-size}-#{$uncenter},
- .#{$-zf-size}-#{$push}-0,
- .#{$-zf-size}-#{$pull}-0 {
- @include grid-col-unpos;
+ $-gutter-unpos-selector: (
+ if($uncenter, '.#{$-zf-size}-#{$uncenter}', null),
+ if($push, '.#{$-zf-size}-#{$push}-0', null),
+ if($pull, '.#{$-zf-size}-#{$pull}-0', null),
+ );
+ @if ($uncenter or $push or $pull) {
+ #{$-gutter-unpos-selector} {
+ @include grid-col-unpos;
+ }
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_column.scss b/src/scss/_vendor/foundation-sites/scss/grid/_column.scss
index 615e6fd..90b9ce2 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_column.scss
+++ b/src/scss/_vendor/foundation-sites/scss/grid/_column.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,37 +16,7 @@
///
/// @returns {Number} A calculated percentage value.
@function grid-column($columns) {
- $width: 0%;
-
- // Parsing percents, decimals, and column counts
- @if type-of($columns) == 'number' {
- @if unit($columns) == '%' {
- $width: $columns;
- }
- @else if $columns < 1 {
- $width: percentage($columns);
- }
- @else {
- $width: percentage($columns / $grid-column-count);
- }
- }
-
- // Parsing "n of n" expressions
- @else if type-of($columns) == 'list' {
- @if length($columns) != 3 {
- @error 'Wrong syntax for grid-column(). Use the format "n of n".';
- }
- @else {
- $width: percentage(nth($columns, 1) / nth($columns, 3));
- }
- }
-
- // Anything else is incorrect
- @else {
- @error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
- }
-
- @return $width;
+ @return fraction-to-percentage($columns, $denominator: $grid-column-count);
}
/// Creates a grid column.
@@ -57,18 +27,13 @@
$columns: $grid-column-count,
$gutters: $grid-column-gutter
) {
- @include grid-column-size($columns);
- float: $global-left;
-
// Gutters
@include grid-column-gutter($gutters: $gutters);
+ // Position
+ @include grid-col-pos(auto);
- // Last column alignment
- @if $grid-column-align-edge {
- &:last-child:not(:first-child) {
- float: $global-right;
- }
- }
+ @include grid-column-size($columns);
+ float: $global-left;
}
/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_flex-grid.scss b/src/scss/_vendor/foundation-sites/scss/grid/_flex-grid.scss
index 61a6d2d..bda00e9 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_flex-grid.scss
+++ b/src/scss/_vendor/foundation-sites/scss/grid/_flex-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
////
@@ -13,6 +13,7 @@
/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
/// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.
/// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
+/// @param {Boolean} $wrap [true] - Set to `false` to have row wrapping behavior set to nowrap
/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default.
@mixin flex-grid-row(
$behavior: null,
@@ -101,7 +102,7 @@
flex-wrap: wrap;
> #{$selector} {
- $pct: percentage(1/$n);
+ $pct: percentage(divide(1, $n));
flex: 0 0 $pct;
max-width: $pct;
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_grid.scss b/src/scss/_vendor/foundation-sites/scss/grid/_grid.scss
index 34b2b50..d8a7eaf 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_grid.scss
+++ b/src/scss/_vendor/foundation-sites/scss/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
////
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_gutter.scss b/src/scss/_vendor/foundation-sites/scss/grid/_gutter.scss
index 745182f..7ec0f45 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_gutter.scss
+++ b/src/scss/_vendor/foundation-sites/scss/grid/_gutter.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -18,7 +18,7 @@
$gutters: $grid-column-gutter
) {
@include -zf-breakpoint-value($gutter, $gutters) {
- $padding: rem-calc($-zf-bp-value) / 2;
+ $padding: rem-calc($-zf-bp-value) * 0.5;
padding-right: $padding;
padding-left: $padding;
@@ -30,14 +30,6 @@
@include grid-column-gutter(0);
}
-/// Un-collapse the gutters on a column by re-adding the padding.
-///
-/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
-@mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
- @warn 'This mixin is being replaced by grid-column-gutter(). grid-column-uncollapse() will be removed in Foundation 6.4.';
- @include grid-column-gutter($gutters: $gutter);
-}
-
/// Shorthand for `grid-column-gutter()`.
/// @alias grid-column-gutter
@mixin grid-col-gutter(
@@ -53,13 +45,6 @@
@include grid-column-collapse;
}
-/// Shorthand for `grid-column-uncollapse()`.
-/// @alias grid-column-uncollapse
-@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
- @warn 'This mixin is being replaced by grid-col-gutter(). grid-col-uncollapse() will be removed in Foundation 6.4.';
- @include grid-column-uncollapse($gutter);
-}
-
/// Sets bottom margin on grid columns to match gutters
/// @param {Number|Keyword} $margin [auto]
/// The bottom margin on grid columns, accepts multiple values:
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_layout.scss b/src/scss/_vendor/foundation-sites/scss/grid/_layout.scss
index 1e08791..ba8e281 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_layout.scss
+++ b/src/scss/_vendor/foundation-sites/scss/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
////
@@ -21,14 +21,14 @@
) {
& > #{$selector} {
float: $global-left;
- width: percentage(1/$n);
+ width: percentage(divide(1, $n));
// If a $gutter value is passed
@if($gutter) {
// Gutters
@if type-of($gutter) == 'map' {
@each $breakpoint, $value in $gutter {
- $padding: rem-calc($value) / 2;
+ $padding: rem-calc($value) * 0.5;
@include breakpoint($breakpoint) {
padding-right: $padding;
@@ -37,7 +37,7 @@
}
}
@else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
- $padding: rem-calc($gutter) / 2;
+ $padding: rem-calc($gutter) * 0.5;
padding-right: $padding;
padding-left: $padding;
}
@@ -64,12 +64,12 @@
@for $i from 1 to $n {
@if $i == 1 {
&:nth-child(#{$n}n+1):last-child {
- margin-left: (100 - 100/$n * $i) / 2 * 1%;
+ margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
}
}
@else {
&:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
- margin-left: (100 - 100/$n * $i) / 2 * 1%;
+ margin-left: (100 - divide(100, $n) * $i) * 0.5 * 1%;
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_position.scss b/src/scss/_vendor/foundation-sites/scss/grid/_position.scss
index 3dcd29d..40f7134 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_position.scss
+++ b/src/scss/_vendor/foundation-sites/scss/grid/_position.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -8,14 +8,37 @@
/// Reposition a column.
///
-/// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.
+/// @param {Number|Keyword} $position - It can be:
+/// * A number: The column will move equal to the width of the column count
+/// specified. A positive number will push the column to the right, while
+/// a negative number will pull it to the left.
+/// * `center`: Column will be centered
+/// * `auto`: Column will be pushed to the left (or to the right for the last column).
@mixin grid-column-position($position) {
- @if type-of($position) == 'number' {
- $offset: percentage($position / $grid-column-count);
+ // Auto positioning
+ @if $position == auto {
+ &, &:last-child:not(:first-child) {
+ float: $global-left;
+ clear: none;
+ }
+
+ // Last column alignment
+ @if $grid-column-align-edge {
+ &:last-child:not(:first-child) {
+ float: $global-right;
+ }
+ }
+ }
+
+ // Push/pull
+ @else if type-of($position) == 'number' {
+ $offset: percentage(divide($position, $grid-column-count));
position: relative;
#{$global-left}: $offset;
}
+
+ // Center positioning
@else if $position == center {
&, &:last-child:not(:first-child) {
float: none;
@@ -24,15 +47,16 @@
margin-right: auto;
margin-left: auto;
}
+
@else {
- @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
+ @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, "center" or "auto".';
}
}
/// Reset a position definition.
@mixin grid-column-unposition {
+ @include grid-column-position(auto);
position: static;
- float: $global-left;
margin-right: 0;
margin-left: 0;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_row.scss b/src/scss/_vendor/foundation-sites/scss/grid/_row.scss
index e971855..0168c41 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_row.scss
+++ b/src/scss/_vendor/foundation-sites/scss/grid/_row.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -80,7 +80,7 @@
/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
@mixin grid-row-nest($gutters: $grid-column-gutter) {
@include -zf-each-breakpoint {
- $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+ $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) * 0.5 * -1;
margin-right: $margin;
margin-left: $margin;
diff --git a/src/scss/_vendor/foundation-sites/scss/grid/_size.scss b/src/scss/_vendor/foundation-sites/scss/grid/_size.scss
index c01c8ca..4978c1a 100644
--- a/src/scss/_vendor/foundation-sites/scss/grid/_size.scss
+++ b/src/scss/_vendor/foundation-sites/scss/grid/_size.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/src/scss/_vendor/foundation-sites/scss/prototype/_arrow.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_arrow.scss
index 3ba57c2..2b467a6 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_arrow.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_arrow.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/src/scss/_vendor/foundation-sites/scss/prototype/_border-box.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_border-box.scss
index e04b5f0..59ce297 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_border-box.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_border-box.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/src/scss/_vendor/foundation-sites/scss/prototype/_border-none.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_border-none.scss
index 5408038..cb0f6cc 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_border-none.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_border-none.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -12,7 +12,7 @@ $prototype-border-none-breakpoints: $global-prototype-breakpoints !default;
/// Border none utility
@mixin border-none {
- border: none !important;
+ border: 0 !important;
}
@mixin foundation-prototype-border-none {
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_bordered.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_bordered.scss
index 2d4d6ae..c518d21 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_bordered.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_bordered.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/src/scss/_vendor/foundation-sites/scss/prototype/_box.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_box.scss
index 0d4cf8e..c34feb2 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_box.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_box.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/src/scss/_vendor/foundation-sites/scss/prototype/_display.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_display.scss
index 23f8b5c..b971a8f 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_display.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_display.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/src/scss/_vendor/foundation-sites/scss/prototype/_font-styling.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_font-styling.scss
index cf6f570..cb46e89 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_font-styling.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_font-styling.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -52,7 +52,7 @@ $prototype-font-bold: $global-weight-bold !default;
}
@mixin foundation-prototype-font-styling {
- .font-wide{
+ .font-wide {
@include font-wide;
}
@@ -73,7 +73,7 @@ $prototype-font-bold: $global-weight-bold !default;
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@if $size != $-zf-zero-breakpoint {
- .#{$size}-font-wide{
+ .#{$size}-font-wide {
@include font-wide;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_list-style-type.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_list-style-type.scss
index c9678c4..c1fc11d 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_list-style-type.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_list-style-type.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/src/scss/_vendor/foundation-sites/scss/prototype/_overflow.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_overflow.scss
index 8ac43d5..cdd1272 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_overflow.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_overflow.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -22,18 +22,27 @@ $prototype-overflow: (
/// @param {String} $overflow [] Overflow classes
@mixin overflow($overflow) {
overflow: $overflow !important;
+ @if $overflow == 'scroll' {
+ -webkit-overflow-scrolling: touch;
+ }
}
/// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow`
/// @param {String} $overflow [] Overflow classes (horizontal axis)
@mixin overflow-x($overflow) {
overflow-x: $overflow !important;
+ @if $overflow == 'scroll' {
+ -webkit-overflow-scrolling: touch;
+ }
}
/// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow`
/// @param {String} $overflow [] Overflow classes (vertical axis)
@mixin overflow-y($overflow) {
overflow-y: $overflow !important;
+ @if $overflow == 'scroll' {
+ -webkit-overflow-scrolling: touch;
+ }
}
@mixin foundation-prototype-overflow {
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_position.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_position.scss
index db01507..bc00910 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_position.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_position.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/src/scss/_vendor/foundation-sites/scss/prototype/_prototype.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_prototype.scss
index c0189db..6a22a06 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_prototype.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_prototype.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/src/scss/_vendor/foundation-sites/scss/prototype/_relation.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_relation.scss
index dad7a45..87a3b35 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_relation.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_relation.scss
@@ -91,7 +91,7 @@
}
}
-/// Will only select the child if it’s unique. That means that if there are at least 2 children, the style will not be applied.
+/// Will only select the child if it's unique. That means that if there are at least 2 children, the style will not be applied.
@mixin unique {
&:only-child {
@content;
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_rotate.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_rotate.scss
index 8231db8..dae595d 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_rotate.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_rotate.scss
@@ -1,7 +1,9 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
+// sass-lint:disable mixin-name-format
+
////
/// @group prototype-rotate
////
@@ -9,23 +11,23 @@
/// Rotate Mixin: Rotate an element to a certain deg
/// @param {Number} $deg[] Degree of rotation
@mixin rotate($deg) {
- transform:rotate($deg + deg);
+ transform: rotate($deg + deg);
}
/// RotateX Mixin: Rotate an element to a certain deg on X-Axis
/// @param {Number} $deg[] Degree of rotation
@mixin rotateX($deg) {
- transform:rotateX($deg + deg);
+ transform: rotateX($deg + deg);
}
/// RotateY Mixin: Rotate an element to a certain deg on Y-Axis
/// @param {Number} $deg[] Degree of rotation
@mixin rotateY($deg) {
- transform:rotateY($deg + deg);
+ transform: rotateY($deg + deg);
}
/// RotateZ Mixin: Rotate an element to a certain deg on Z-Axis
/// @param {Number} $deg[] Degree of rotation
@mixin rotateZ($deg) {
- transform:rotateZ($deg + deg);
-}
\ No newline at end of file
+ transform: rotateZ($deg + deg);
+}
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_rounded.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_rounded.scss
index 7e37211..0bcb96e 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_rounded.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_rounded.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,6 +30,13 @@ $prototype-border-radius: rem-calc(3) !default;
@mixin foundation-prototype-rounded {
.rounded {
@include border-rounded;
+
+ .switch-paddle {
+ @include border-rounded;
+ &:after {
+ border-radius: 50%; // For switches
+ }
+ }
}
.radius {
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_separator.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_separator.scss
index 9baf121..62876a2 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_separator.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_separator.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -43,8 +43,8 @@ $prototype-separator-margin-top: $global-margin !default;
$background: $prototype-separator-background,
$top: $prototype-separator-margin-top
) {
+ @include clearfix;
text-align: $align !important;
- @include clearfix;
&::after {
@include position(relative);
@@ -63,9 +63,9 @@ $prototype-separator-margin-top: $global-margin !default;
}
@mixin foundation-prototype-separator {
- .separator-center {
- @include separator(center);
- }
+ .separator-center {
+ @include separator(center);
+ }
.separator-left {
@include separator(left);
@@ -75,7 +75,7 @@ $prototype-separator-margin-top: $global-margin !default;
@include separator(right);
}
- @if ($prototype-separator-breakpoints) {
+ @if ($prototype-separator-breakpoints) {
// Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_shadow.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_shadow.scss
index abb44a5..c7e4ff7 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_shadow.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_shadow.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -12,8 +12,7 @@ $prototype-shadow-breakpoints: $global-prototype-breakpoints !default;
/// Default value for `prototype-box-shadow`
/// @type Number
-$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
- 0 2px 10px 0 rgba(0,0,0,.12) !default;
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !default;
/// Shadow Utility: Adds a light box shadow to an element by default.
/// @param {Number} $shadow [$prototype-box-shadow] Box Shadow of a component
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_sizing.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_sizing.scss
index 9b48d48..0196fa6 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_sizing.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_sizing.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/src/scss/_vendor/foundation-sites/scss/prototype/_spacing.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_spacing.scss
index 19108d3..3955ee0 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_spacing.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_spacing.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -64,137 +64,112 @@ $prototype-spacers-count: 3 !default;
}
}
-@mixin foundation-prototype-spacing {
- @for $spacer from 0 through $prototype-spacers-count {
- // All Sides
- .margin-#{$spacer} {
- @include margin($spacer, $spacer, $spacer, $spacer);
- }
-
- .padding-#{$spacer} {
- @include padding($spacer, $spacer, $spacer, $spacer);
- }
-
- // Top Side
- .margin-top-#{$spacer} {
- @include margin($spacer, null, null, null);
- }
-
- .padding-top-#{$spacer} {
- @include padding($spacer, null, null, null);
- }
-
- // Right Side
- .margin-right-#{$spacer} {
- @include margin(null, $spacer, null, null);
- }
-
- .padding-right-#{$spacer} {
- @include padding(null, $spacer, null, null);
- }
-
- // Bottom Side
- .margin-bottom-#{$spacer} {
- @include margin(null, null, $spacer, null);
- }
-
- .padding-bottom-#{$spacer} {
- @include padding(null, null, $spacer, null);
- }
-
- // Left Side
- .margin-left-#{$spacer} {
- @include margin(null, null, null, $spacer);
- }
-
- .padding-left-#{$spacer} {
- @include padding(null, null, null, $spacer);
- }
+/// Margin classes for specific direction properties
+/// @param {String} $dir [] Direction
+/// @param {Number} $spacer [] Spacer
+@mixin margin-direction($dir, $spacer) {
+ @if ($dir == top) {
+ @include margin($top: $spacer);
+ }
+ @else if ($dir == right) {
+ @include margin($right: $spacer);
+ }
+ @else if ($dir == bottom) {
+ @include margin($bottom: $spacer);
+ }
+ @else if ($dir == left) {
+ @include margin($left: $spacer);
+ }
+ @else if ($dir == horizontal) {
+ @include margin($right: $spacer, $left: $spacer);
+ }
+ @else if ($dir == vertical) {
+ @include margin($top: $spacer, $bottom: $spacer);
+ }
+}
- // Horizontal Axes
- .margin-horizontal-#{$spacer} {
- @include margin(null, $spacer, null, $spacer);
- }
+/// Padding classes for specific direction properties
+/// @param {String} $dir [] Direction
+/// @param {Number} $spacer [] Spacer
+@mixin padding-direction($dir, $spacer) {
+ @if ($dir == top) {
+ @include padding($top: $spacer);
+ }
+ @else if ($dir == right) {
+ @include padding($right: $spacer);
+ }
+ @else if ($dir == bottom) {
+ @include padding($bottom: $spacer);
+ }
+ @else if ($dir == left) {
+ @include padding($left: $spacer);
+ }
+ @else if ($dir == horizontal) {
+ @include padding($right: $spacer, $left: $spacer);
+ }
+ @else if ($dir == vertical) {
+ @include padding($top: $spacer, $bottom: $spacer);
+ }
+}
- .padding-horizontal-#{$spacer} {
- @include padding(null, $spacer, null, $spacer);
- }
+@mixin foundation-prototype-spacing {
+ @for $spacer from 0 through $prototype-spacers-count {
- // Vertical Axes
- .margin-vertical-#{$spacer} {
- @include margin($spacer, null, $spacer, null)
- }
+ @each $prop in (margin, padding) {
+ // All Sides
+ .#{$prop}-#{$spacer} {
+ @if ($prop == margin) {
+ margin: $spacer * $global-margin !important;
+ }
+ @else if ($prop == padding) {
+ padding: $spacer * $global-padding !important;
+ }
+ }
- .padding-vertical-#{$spacer} {
- @include padding($spacer, null, $spacer, null)
+ @each $dir in (top, right, bottom, left, horizontal, vertical) {
+ // Top Side
+ .#{$prop}-#{$dir}-#{$spacer} {
+ @if ($prop == margin) {
+ @include margin-direction($dir, $spacer);
+ }
+ @else if ($prop == padding) {
+ @include padding-direction($dir, $spacer);
+ }
+ }
+ }
}
+ }
- @if ($prototype-spacing-breakpoints) {
- // Loop through Responsive Breakpoints
+ @if ($prototype-spacing-breakpoints) {
+ @for $spacer from 0 through $prototype-spacers-count {
+ // Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@if $size != $-zf-zero-breakpoint {
- // All Sides
- .#{$size}-margin-#{$spacer} {
- @include margin($spacer, $spacer, $spacer, $spacer);
- }
-
- .#{$size}-padding-#{$spacer} {
- @include padding($spacer, $spacer, $spacer, $spacer);
- }
-
- // Top Side
- .#{$size}-margin-top-#{$spacer} {
- @include margin($spacer, null, null, null);
- }
-
- .#{$size}-padding-top-#{$spacer} {
- @include padding($spacer, null, null, null);
- }
-
- // Right Side
- .#{$size}-margin-right-#{$spacer} {
- @include margin(null, $spacer, null, null);
- }
-
- .#{$size}-padding-right-#{$spacer} {
- @include padding(null, $spacer, null, null);
- }
-
- // Bottom Side
- .#{$size}-margin-bottom-#{$spacer} {
- @include margin(null, null, $spacer, null);
- }
-
- .#{$size}-padding-bottom-#{$spacer} {
- @include padding(null, null, $spacer, null);
- }
-
- // Left Side
- .#{$size}-margin-left-#{$spacer} {
- @include margin(null, null, null, $spacer);
- }
-
- .#{$size}-padding-left-#{$spacer} {
- @include padding(null, null, null, $spacer);
- }
-
- // Horizontal Axes
- .#{$size}-margin-horizontal-#{$spacer} {
- @include margin(null, $spacer, null, $spacer);
- }
-
- .#{$size}-padding-horizontal-#{$spacer} {
- @include padding(null, $spacer, null, $spacer);
- }
-
- // Vertical Axes
- .#{$size}-margin-vertical-#{$spacer} {
- @include margin($spacer, null, $spacer, null)
- }
-
- .#{$size}-padding-vertical-#{$spacer} {
- @include padding($spacer, null, $spacer, null)
+ .#{$size} {
+ @each $prop in (margin, padding) {
+ // All Sides
+ &-#{$prop}-#{$spacer} {
+ @if ($prop == margin) {
+ margin: $spacer * $global-margin !important;
+ }
+ @else if ($prop == padding) {
+ padding: $spacer * $global-padding !important;
+ }
+ }
+
+ @each $dir in (top, right, bottom, left, horizontal, vertical) {
+ // Top Side
+ &-#{$prop}-#{$dir}-#{$spacer} {
+ @if ($prop == margin) {
+ @include margin-direction($dir, $spacer);
+ }
+ @else if ($prop == padding) {
+ @include padding-direction($dir, $spacer);
+ }
+ }
+ }
+ }
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_text-decoration.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_text-decoration.scss
index 8f3c913..255f559 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_text-decoration.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_text-decoration.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/src/scss/_vendor/foundation-sites/scss/prototype/_text-transformation.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_text-transformation.scss
index ca9c2e4..90dd24b 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_text-transformation.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_text-transformation.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -33,13 +33,13 @@ $prototype-text-transformation: (
@if ($prototype-transformation-breakpoints) {
// Loop through Responsive Breakpoints
- @each $size in $breakpoint-classes {
+ @each $size in $breakpoint-classes {
@include breakpoint($size) {
@each $transformation in $prototype-text-transformation {
@if $size != $-zf-zero-breakpoint {
.#{$size}-text-#{$transformation} {
- @include text-transform($transformation);
- }
+ @include text-transform($transformation);
+ }
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/prototype/_text-utilities.scss b/src/scss/_vendor/foundation-sites/scss/prototype/_text-utilities.scss
index 8c327a2..09ffd43 100644
--- a/src/scss/_vendor/foundation-sites/scss/prototype/_text-utilities.scss
+++ b/src/scss/_vendor/foundation-sites/scss/prototype/_text-utilities.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/src/scss/_vendor/foundation-sites/scss/settings/_settings.scss b/src/scss/_vendor/foundation-sites/scss/settings/_settings.scss
index 26f74f9..caf2904 100644
--- a/src/scss/_vendor/foundation-sites/scss/settings/_settings.scss
+++ b/src/scss/_vendor/foundation-sites/scss/settings/_settings.scss
@@ -58,7 +58,7 @@
// 53. Title Bar
// 54. Tooltip
// 55. Top Bar
-// 56. Xy Grid
+// 57. Xy Grid
@import 'util/util';
@@ -69,11 +69,11 @@ $global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
- primary: #1779ba,
- secondary: #767676,
- success: #3adb76,
- warning: #ffae00,
- alert: #cc4b37,
+ "primary": #1779ba,
+ "secondary": #767676,
+ "success": #3adb76,
+ "warning": #ffae00,
+ "alert": #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
@@ -83,6 +83,7 @@ $white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-safe-padding: false;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
@@ -98,18 +99,27 @@ $global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
+$print-hrefs: true;
@include add-foundation-colors;
// 2. Breakpoints
// --------------
+$-zf-size: null;
$breakpoints: (
- small: 0,
- medium: 640px,
- large: 1024px,
- xlarge: 1200px,
- xxlarge: 1440px,
+ "small": 0,
+ "medium": 640px,
+ "large": 1024px,
+ "xlarge": 1200px,
+ "xxlarge": 1440px,
+);
+$breakpoints-hidpi: (
+ "hidpi-1": 1,
+ "hidpi-1-5": 1.5,
+ "hidpi-2": 2,
+ "retina": 2,
+ "hidpi-3": 3
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);
@@ -161,12 +171,7 @@ $header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
-$code-color: $black;
-$code-font-family: $font-family-monospace;
-$code-font-weight: $global-weight-normal;
-$code-background: $light-gray;
-$code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
+$enable-code-inline: true;
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
@@ -186,9 +191,7 @@ $defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
-$cite-font-size: rem-calc(13);
-$cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
+$enable-cite-block: true;
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
@@ -207,6 +210,17 @@ $subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
+$cite-color: $dark-gray;
+$cite-font-size: rem-calc(13);
+$cite-pseudo-content: '\2014 \0020';
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$code-block-padding: 1rem;
+$code-block-margin-bottom: 1.5rem;
// 6. Abide
// --------
@@ -224,6 +238,8 @@ $input-error-font-weight: $global-weight-bold;
$accordion-background: $white;
$accordion-plusminus: true;
+$accordion-plus-content: '\002B';
+$accordion-minus-content: '\2013';
$accordion-title-font-size: rem-calc(12);
$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
@@ -279,6 +295,7 @@ $breadcrumbs-item-separator-color: $medium-gray;
// ----------
$button-font-family: inherit;
+$button-font-weight: null;
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
@@ -287,6 +304,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
+$button-border: 1px solid transparent;
$button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
@@ -299,6 +317,7 @@ $button-opacity-disabled: 0.25;
$button-background-hover-lightness: -20%;
$button-hollow-hover-lightness: -50%;
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
// 12. Button Group
// ----------------
@@ -316,7 +335,11 @@ $callout-background: $white;
$callout-background-fade: 85%;
$callout-border: 1px solid rgba($black, 0.25);
$callout-margin: 0 0 1rem 0;
-$callout-padding: 1rem;
+$callout-sizes: (
+ small: 0.5rem,
+ default: 1rem,
+ large: 3rem,
+);
$callout-font-color: $body-font-color;
$callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
@@ -338,6 +361,8 @@ $card-margin-bottom: $global-margin;
// ----------------
$closebutton-position: right top;
+$closebutton-z-index: 10;
+$closebutton-default-size: medium;
$closebutton-offset-horizontal: (
small: 0.66rem,
medium: 1rem,
@@ -390,8 +415,8 @@ $dropdownmenu-arrow-color: $anchor-color;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-arrow-padding: 1.5rem;
$dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-submenu-background: $dropdownmenu-background;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
$dropdownmenu-padding: $global-menu-padding;
$dropdownmenu-nested-margin: 0;
$dropdownmenu-submenu-padding: $dropdownmenu-padding;
@@ -438,7 +463,7 @@ $input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
-$input-padding: $form-spacing / 2;
+$input-padding: $form-spacing * 0.5;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
@@ -473,9 +498,9 @@ $menu-nested-margin: $global-menu-nested-margin;
$menu-items-padding: $global-menu-padding;
$menu-simple-margin: 1rem;
$menu-item-color-active: $white;
+$menu-item-color-alt-active: $black;
$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
-$menu-item-background-hover: $light-gray;
$menu-state-back-compat: true;
$menu-centered-back-compat: true;
$menu-icons-back-compat: true;
@@ -545,6 +570,8 @@ $pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;
+$pagination-arrow-previous: '\00AB';
+$pagination-arrow-next: '\00BB';
// 28. Progress Bar
// ----------------
@@ -666,8 +693,7 @@ $prototype-separator-margin-top: $global-margin;
// --------------------
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
-$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
- 0 2px 10px 0 rgba(0,0,0,.12);
+$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
// 41. Prototype Sizing
// --------------------
@@ -766,6 +792,8 @@ $switch-paddle-background: $white;
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
+$switch-opacity-disabled: 0.5;
+$switch-cursor-disabled: not-allowed;
// 50. Table
// ---------
@@ -780,7 +808,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
@@ -800,7 +828,6 @@ $tab-active-color: $primary-color;
$tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
-$tab-expand-max: 6;
$tab-content-background: $white;
$tab-content-border: $light-gray;
$tab-content-color: $body-font-color;
@@ -809,7 +836,7 @@ $tab-content-padding: 1rem;
// 52. Thumbnail
// -------------
-$thumbnail-border: solid 4px $white;
+$thumbnail-border: 4px solid $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
@@ -852,15 +879,15 @@ $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;
-// 56. Xy Grid
+// 57. Xy Grid
// -----------
$xy-grid: true;
$grid-container: $global-width;
$grid-columns: 12;
$grid-margin-gutters: (
- small: 20px,
- medium: 30px
+ "small": 20px,
+ "medium": 30px
);
$grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
diff --git a/src/scss/_vendor/foundation-sites/scss/typography/_alignment.scss b/src/scss/_vendor/foundation-sites/scss/typography/_alignment.scss
index 77ffd61..4ce45fc 100644
--- a/src/scss/_vendor/foundation-sites/scss/typography/_alignment.scss
+++ b/src/scss/_vendor/foundation-sites/scss/typography/_alignment.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
@mixin foundation-text-alignment {
diff --git a/src/scss/_vendor/foundation-sites/scss/typography/_base.scss b/src/scss/_vendor/foundation-sites/scss/typography/_base.scss
index 000bd33..db68e52 100644
--- a/src/scss/_vendor/foundation-sites/scss/typography/_base.scss
+++ b/src/scss/_vendor/foundation-sites/scss/typography/_base.scss
@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
@@ -73,13 +73,13 @@ $header-styles: (
// $header-styles map is built from $header-sizes in order to ensure downward compatibility
// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss
-@function build_from_header-sizes($header-sizes) {
+@function build-from-header-sizes($header-sizes) {
@warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';
$header-styles: ();
@each $size, $headers in $header-sizes {
$header-map: ();
@each $header, $font-size in $headers {
- $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
+ $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
}
$header-styles: map-merge($header-styles, ($size: $header-map));
}
@@ -88,7 +88,7 @@ $header-styles: (
// If it exists $headers-sizes is used to build $header-styles. See the documentation.
@if variable-exists(header-sizes) {
- $header-styles: build_from_header-sizes($header-sizes);
+ $header-styles: build-from-header-sizes($header-sizes);
}
/// Text rendering method of headers.
@@ -115,29 +115,9 @@ $paragraph-margin-bottom: 1rem !default;
/// @type String
$paragraph-text-rendering: optimizeLegibility !default;
-/// Text color of code samples.
-/// @type Color
-$code-color: $black !default;
-
-/// Font family of code samples.
-/// @type String | List
-$code-font-family: $font-family-monospace !default;
-
-/// Font weight of text in code samples.
-/// @type String
-$code-font-weight: $global-weight-normal !default;
-
-/// Background color of code samples.
-/// @type Color
-$code-background: $light-gray !default;
-
-/// Border around code samples.
-/// @type List
-$code-border: 1px solid $medium-gray !default;
-
-/// Padding around text of code samples.
-/// @type Number | List
-$code-padding: rem-calc(2 5 1) !default;
+/// Use the `.code-inline` component as default for `<code>` elements.
+/// @type Boolean
+$enable-code-inline: true !default;
/// 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 `<cite>` elements.
-/// @type Number
-$cite-font-size: rem-calc(13) !default;
-
-/// Text color for `<cite>` elements.
-/// @type Color
-$cite-color: $dark-gray !default;
-
-/// Pseudo content for `<cite>` elements.
-/// @type String
-$cite-pseudo-content: '\2014 \0020' !default;
+/// Use the `.cite-block` component as default for `<cite>` elements.
+/// @type Boolean
+$enable-cite-block: true !default;
/// Font family for `<kbd>` 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/src/scss/_vendor/foundation-sites/scss/typography/_helpers.scss b/src/scss/_vendor/foundation-sites/scss/typography/_helpers.scss
index f34ac03..903dab7 100644
--- a/src/scss/_vendor/foundation-sites/scss/typography/_helpers.scss
+++ b/src/scss/_vendor/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 <header> element, like this:
@@ -77,4 +163,26 @@ $stat-font-size: 2.5rem !default;
list-style: none;
}
}
+
+ %cite-block {
+ @include cite-block;
+ }
+
+ .cite-block {
+ @extend %cite-block;
+ }
+
+ %code-inline {
+ @include code-style;
+ @include code-inline;
+ }
+
+ .code-inline {
+ @extend %code-inline;
+ }
+
+ .code-block {
+ @include code-style;
+ @include code-block;
+ }
}
diff --git a/src/scss/_vendor/foundation-sites/scss/typography/_print.scss b/src/scss/_vendor/foundation-sites/scss/typography/_print.scss
index 25255b8..cd8f8be 100644
--- a/src/scss/_vendor/foundation-sites/scss/typography/_print.scss
+++ b/src/scss/_vendor/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
+ print-color-adjust: economy;
+ }
+ // Otherwise, prevent any economy by the browser.
+ @else {
+ print-color-adjust: exact;
}
box-shadow: none !important;
-
- color: black !important; // Black prints faster: h5bp.com/s
text-shadow: none !important;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/typography/_typography.scss b/src/scss/_vendor/foundation-sites/scss/typography/_typography.scss
index c794126..bba6db6 100644
--- a/src/scss/_vendor/foundation-sites/scss/typography/_typography.scss
+++ b/src/scss/_vendor/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/src/scss/_vendor/foundation-sites/scss/util/_breakpoint.scss b/src/scss/_vendor/foundation-sites/scss/util/_breakpoint.scss
index dbfae8c..c8fa336 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_breakpoint.scss
+++ b/src/scss/_vendor/foundation-sites/scss/util/_breakpoint.scss
@@ -1,19 +1,33 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
/// @group breakpoints
////
+/// Patch to fix issue #12080
+$-zf-size: null;
+
/// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
/// @type Map
$breakpoints: (
- small: 0,
- medium: 640px,
- large: 1024px,
- xlarge: 1200px,
- xxlarge: 1440px,
+ "small": 0,
+ "medium": 640px,
+ "large": 1024px,
+ "xlarge": 1200px,
+ "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
@@ -25,7 +39,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 +53,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 - divide(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 `<meta>` 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 `<meta>` 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 +238,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
@@ -235,13 +267,13 @@ $breakpoint-classes: (small medium large) !default;
/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
@function -zf-breakpoints-less-than($key) {
$list: ();
- $found_key: false;
+ $found-key: false;
@each $name in $-zf-breakpoints-keys {
@if ($name == $key) {
- $found_key: true;
+ $found-key: true;
}
- @if not $found_key {
+ @if not $found-key {
$list: append($list, $name);
}
}
@@ -252,7 +284,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 +355,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/src/scss/_vendor/foundation-sites/scss/util/_color.scss b/src/scss/_vendor/foundation-sites/scss/util/_color.scss
index 11a04d9..67a8ab4 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_color.scss
+++ b/src/scss/_vendor/foundation-sites/scss/util/_color.scss
@@ -1,11 +1,18 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
@import 'math';
$contrast-warnings: true !default;
+/// Patch to fix issue #12080
+$primary-color: null !default;
+$secondary-color: null !default;
+$warning-color: null !default;
+$alert-color: null !default;
+$success-color: null !default;
+
////
/// @group functions
////
@@ -23,9 +30,9 @@ $contrast-warnings: true !default;
@for $i from 1 through 3 {
$rgb: nth($rgba, $i);
- $rgb: $rgb / 255;
+ $rgb: divide($rgb, 255);
- $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
+ $rgb: if($rgb < 0.03928, divide($rgb, 12.92), pow(divide($rgb + 0.055, 1.055), 2.4));
$rgba2: append($rgba2, $rgb);
}
@@ -44,13 +51,13 @@ $contrast-warnings: true !default;
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
$luminance1: color-luminance($color1) + 0.05;
$luminance2: color-luminance($color2) + 0.05;
- $ratio: $luminance1 / $luminance2;
+ $ratio: divide($luminance1, $luminance2);
@if $luminance2 > $luminance1 {
- $ratio: 1 / $ratio;
+ $ratio: divide(1, $ratio);
}
- $ratio: round($ratio * 10) / 10;
+ $ratio: round($ratio * 10) * 0.1;
@return $ratio;
}
@@ -75,7 +82,7 @@ $contrast-warnings: true !default;
}
@if ($contrast-warnings and $contrast < 3) {
- @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
+ @warn 'Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}';
}
@return $best;
@@ -109,21 +116,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/src/scss/_vendor/foundation-sites/scss/util/_direction.scss b/src/scss/_vendor/foundation-sites/scss/util/_direction.scss
index 98a868a..eff40d1 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_direction.scss
+++ b/src/scss/_vendor/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,9 +21,9 @@
@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;
+ $demi: $length * 0.5;
$opposite-place: (($place + $demi - 1) % $length) + 1;
@return nth($dirs, $opposite-place);
diff --git a/src/scss/_vendor/foundation-sites/scss/util/_flex.scss b/src/scss/_vendor/foundation-sites/scss/util/_flex.scss
index cd24dd7..06e31a0 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_flex.scss
+++ b/src/scss/_vendor/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/src/scss/_vendor/foundation-sites/scss/util/_math.scss b/src/scss/_vendor/foundation-sites/scss/util/_math.scss
index e3d1908..b0632b8 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_math.scss
+++ b/src/scss/_vendor/foundation-sites/scss/util/_math.scss
@@ -1,7 +1,9 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
+@use "sass:math";
+
////
/// @group functions
////
@@ -18,7 +20,7 @@
@return gcd($b, $a % $b);
}
@else {
- @return abs($a);
+ @return math.abs($a);
}
}
@@ -30,10 +32,10 @@
/// @returns {Number} The product of the exponentiation.
@function pow($base, $exponent, $prec: 16) {
@if (floor($exponent) != $exponent) {
- $prec2 : pow(10, $prec);
+ $prec2: pow(10, $prec);
$exponent: round($exponent * $prec2);
$denominator: gcd($exponent, $prec2);
- @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
+ @return nth-root(pow($base, divide($exponent, $denominator)), divide($prec2, $denominator), $prec);
}
$value: $base;
@@ -44,7 +46,7 @@
}
@else if $exponent < 1 {
@for $i from 0 through -$exponent {
- $value: $value / $base;
+ $value: divide($value, $base);
}
}
@@ -56,7 +58,7 @@
$x: 1;
@for $i from 0 through $prec {
- $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
+ $x: divide(1, $n) * (($n - 1) * $x + divide($num, pow($x, $n - 1)));
}
@return $x;
@@ -68,5 +70,130 @@
@function ratio-to-percentage($ratio) {
$w: nth($ratio, 1);
$h: nth($ratio, 3);
- @return $h / $w * 100%;
+ @return divide($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(divide($parsed-nominator, $parsed-denominator));
+}
+
+/// Divide the given `$divident` by the given `$divisor`.
+///
+/// @param {Number} $divident - The divident.
+/// @param {Number} $divisor - The divisor.
+/// @param {Number} $precision - The precision decimals for the division.
+///
+/// @return {Number} The product of the division.
+@function divide($dividend, $divisor, $precision: 12) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: math.abs($dividend);
+ $divisor: math.abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error 'Cannot divide by 0';
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * 0.1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ 'px': 1px,
+ 'rem': 1rem,
+ 'em': 1em,
+ '%': 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+
+ @return $result;
}
diff --git a/src/scss/_vendor/foundation-sites/scss/util/_mixins.scss b/src/scss/_vendor/foundation-sites/scss/util/_mixins.scss
index d5dbfdb..c71e084 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_mixins.scss
+++ b/src/scss/_vendor/foundation-sites/scss/util/_mixins.scss
@@ -1,13 +1,16 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
////
/// @group functions
////
+// Patch to fix issue #12080
+$-zf-bp-value: null;
+
/// 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.
@@ -44,28 +47,25 @@
width: 0;
height: 0;
- border: inset $triangle-size;
+ border-style: solid;
+ border-width: $triangle-size;
content: '';
@if ($triangle-direction == down) {
border-bottom-width: 0;
- border-top-style: solid;
border-color: $triangle-color transparent transparent;
}
@if ($triangle-direction == up) {
border-top-width: 0;
- border-bottom-style: solid;
border-color: transparent transparent $triangle-color;
}
@if ($triangle-direction == right) {
border-right-width: 0;
- border-left-style: solid;
border-color: transparent transparent transparent $triangle-color;
}
@if ($triangle-direction == left) {
border-left-width: 0;
- border-right-style: solid;
border-color: transparent $triangle-color transparent transparent;
}
}
@@ -91,7 +91,7 @@
$hover-shadow: ();
// Spacing between bars is calculated based on the total height of the icon and the weight of each bar
- $spacing: ($height - ($weight * $bars)) / ($bars - 1);
+ $spacing: divide($height - ($weight * $bars), $bars - 1);
@if unit($spacing) == 'px' {
$spacing: floor($spacing);
@@ -148,9 +148,9 @@
@mixin background-triangle($color: $black) {
$rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
- @media screen and (min-width:0\0) {
+ @media screen and (min-width: 0\0) {
@if lightness($color) < 60% {
// White triangle
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
@@ -192,7 +192,7 @@
@for $i from 2 through $max {
&:nth-last-child(#{$i}):first-child,
&:nth-last-child(#{$i}):first-child ~ #{$elem} {
- width: percentage(1 / $i);
+ width: percentage(divide(1, $i));
}
}
}
@@ -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,71 @@
///
/// @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 +359,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/src/scss/_vendor/foundation-sites/scss/util/_selector.scss b/src/scss/_vendor/foundation-sites/scss/util/_selector.scss
index 2c79c04..dfe4c77 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_selector.scss
+++ b/src/scss/_vendor/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
////
@@ -13,21 +13,7 @@
@function text-inputs($types: (), $modifier: '') {
$return: ();
- $all-types:
- text
- password
- date
- datetime
- datetime-local
- month
- week
- email
- number
- search
- tel
- time
- url
- color;
+ $all-types: text password date datetime datetime-local month week email number search tel time url color;
@if not has-value($types) {
$types: $all-types;
diff --git a/src/scss/_vendor/foundation-sites/scss/util/_typography.scss b/src/scss/_vendor/foundation-sites/scss/util/_typography.scss
index adff086..e6ad676 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_typography.scss
+++ b/src/scss/_vendor/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
////
@@ -7,12 +7,12 @@
////
$-zf-font-stack: (
- 'georgia': (Georgia, "URW Bookman L", serif),
- 'helvetica': (Helvetica, Arial, "Nimbus Sans L", sans-serif),
- 'lucida-grande': ("Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", sans-serif),
- 'monospace': ("Courier New", Courier, "Nimbus Sans L", monospace),
- 'system': (-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif),
- 'verdana': (Verdana, Geneva, "DejaVu Sans", sans-serif),
+ 'georgia': (Georgia, 'URW Bookman L', serif),
+ 'helvetica': (Helvetica, Arial, 'Nimbus Sans L', sans-serif),
+ 'lucida-grande': ('Lucida Grande', 'Lucida Sans Unicode', 'Bitstream Vera Sans', sans-serif),
+ 'monospace': ('Courier New', Courier, 'Nimbus Sans L', monospace),
+ 'system': (-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif),
+ 'verdana': (Verdana, Geneva, 'DejaVu Sans', sans-serif),
);
/// Return a font stack list from a map. Equivalent to `map-safe-get($name, $-zf-font-stack)`.
diff --git a/src/scss/_vendor/foundation-sites/scss/util/_unit.scss b/src/scss/_vendor/foundation-sites/scss/util/_unit.scss
index 6d60f38..75e0b13 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_unit.scss
+++ b/src/scss/_vendor/foundation-sites/scss/util/_unit.scss
@@ -1,7 +1,11 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
// Licensed under MIT Open Source
+@import 'math';
+
+$unit-warnings: true !default;
+
////
/// @group functions
////
@@ -14,13 +18,13 @@ $global-font-size: 100% !default;
///
/// @returns {Number} The same number, sans unit.
@function strip-unit($num) {
- @return $num / ($num * 0 + 1);
+ @return divide($num, $num * 0 + 1);
}
/// 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) {
@@ -35,7 +39,7 @@ $global-font-size: 100% !default;
// If the base font size is a %, then multiply it by 16px
// This is because 100% font size = 16px in most all browsers
@if unit($base) == '%' {
- $base: ($base / 100%) * 16px;
+ $base: divide($base, 100%) * 16px;
}
// Using rem as base allows correct scaling
@@ -75,7 +79,9 @@ $global-font-size: 100% !default;
@function -zf-to-rem($value, $base: null) {
// Check if the value is a number
@if type-of($value) != 'number' {
- @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+ @if $unit-warnings {
+ @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+ }
@return $value;
}
@@ -86,7 +92,7 @@ $global-font-size: 100% !default;
// Calculate rem if units for $value is not rem or em
@if unit($value) != 'rem' {
- $value: strip-unit($value) / strip-unit($base) * 1rem;
+ $value: divide(strip-unit($value), strip-unit($base)) * 1rem;
}
// Turn 0rem into 0
@@ -114,7 +120,7 @@ $global-font-size: 100% !default;
// If the base font size is a %, then multiply it by 16px
@if unit($base) == '%' {
- $base: ($base / 100%) * 16px;
+ $base: divide($base, 100%) * 16px;
}
@if unit($base) == 'rem' {
@@ -125,9 +131,9 @@ $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;
+ $value: divide($value, 100%) * $base;
}
@if unit($value) == 'rem' {
@@ -140,12 +146,12 @@ $global-font-size: 100% !default;
// 'px'
@if unit($value) == 'px' {
- @return strip-unit($value) / strip-unit($base);
+ @return divide(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);
+ @return divide($value, strip-unit($base));
}
@return $value;
diff --git a/src/scss/_vendor/foundation-sites/scss/util/_util.scss b/src/scss/_vendor/foundation-sites/scss/util/_util.scss
index ddcb59e..e50fd7b 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_util.scss
+++ b/src/scss/_vendor/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/src/scss/_vendor/foundation-sites/scss/util/_value.scss b/src/scss/_vendor/foundation-sites/scss/util/_value.scss
index a063a82..419dbf3 100644
--- a/src/scss/_vendor/foundation-sites/scss/util/_value.scss
+++ b/src/scss/_vendor/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
////
@@ -37,28 +37,13 @@
@return $val;
}
@if $length == 2 {
- @return map-get((
- top: nth($val, 1),
- bottom: nth($val, 1),
- left: nth($val, 2),
- right: nth($val, 2),
- ), $side);
+ @return map-get((top: nth($val, 1), bottom: nth($val, 1), left: nth($val, 2), right: nth($val, 2), ), $side);
}
@if $length == 3 {
- @return map-get((
- top: nth($val, 1),
- left: nth($val, 2),
- right: nth($val, 2),
- bottom: nth($val, 3),
- ), $side);
+ @return map-get((top: nth($val, 1), left: nth($val, 2), right: nth($val, 2), bottom: nth($val, 3), ), $side);
}
@if $length == 4 {
- @return map-get((
- top: nth($val, 1),
- right: nth($val, 2),
- bottom: nth($val, 3),
- left: nth($val, 4),
- ), $side);
+ @return map-get((top: nth($val, 1), right: nth($val, 2), bottom: nth($val, 3), left: nth($val, 4), ), $side);
}
}
@@ -139,6 +124,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 +172,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/src/scss/_vendor/foundation-sites/scss/xy-grid/_cell.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_cell.scss
index 10f70a6..ddafb3d 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_cell.scss
+++ b/src/scss/_vendor/foundation-sites/scss/xy-grid/_cell.scss
@@ -1,62 +1,139 @@
-// 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 0;
+ }
+ @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 {
+ $mgc: rem-calc($mg);
+ @if $mgc == 0 {
+ $mgc: 0rem;
+ }
+ $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{$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".';
+ // Make sure that 0 is translated in 0rem for calc()
+ $mgc: rem-calc($margin-gutter);
+ @if $mgc == 0 {
+ $mgc: 0rem;
+ }
+ $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{$mgc}));
+ @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;
+ min-height: 0;
+ min-width: 0;
}
}
@@ -64,80 +141,119 @@
///
/// @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;
}
- @elseif ($size == 'shrink') {
- #{$direction}: auto;
+}
+
+/// 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);
}
- @else {
- $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
- #{$direction}: $val;
+
+ // 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}"';
+ }
+
+ @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 +266,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/src/scss/_vendor/foundation-sites/scss/xy-grid/_classes.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_classes.scss
index ab8b577..cfee971 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_classes.scss
+++ b/src/scss/_vendor/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,24 +41,24 @@
}
.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 {
- $str: $str + ", > .#{$-zf-size}-#{$i}"
+ $str: $str + ", > .#{$-zf-size}-#{$i}";
}
#{$str} {
flex-basis: auto;
@@ -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);
}
}
}
@@ -258,10 +266,10 @@
$padding-grid: true
) {
- @include -zf-each-breakpoint() {
- @if not($-zf-size == small) {
- }
- }
+ // @include -zf-each-breakpoint() {
+ // @if not($-zf-size == $-zf-zero-breakpoint) {
+ // }
+ // }
.grid-y {
@include xy-grid(vertical, false);
@@ -272,22 +280,22 @@
}
> .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}"
+ $str: $str + ", > .#{$-zf-size}-#{$i}";
}
#{$str} {
flex-basis: auto;
@@ -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);
}
}
@@ -387,14 +404,14 @@
@if $vertical-grid {
.grid-y {
&.grid-frame {
- width: auto;
@include xy-grid-frame(true);
+ width: auto;
}
@include -zf-each-breakpoint(false) {
&.#{$-zf-size}-grid-frame {
- width: auto;
@include xy-grid-frame(true);
+ width: auto;
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/xy-grid/_collapse.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_collapse.scss
index d902937..d765f17 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_collapse.scss
+++ b/src/scss/_vendor/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/src/scss/_vendor/foundation-sites/scss/xy-grid/_frame.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_frame.scss
index 76c61e5..d0269b3 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_frame.scss
+++ b/src/scss/_vendor/foundation-sites/scss/xy-grid/_frame.scss
@@ -1,3 +1,5 @@
+// sass-lint:disable no-vendor-prefixes
+
/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
@@ -33,10 +35,18 @@
@if $vertical == true {
$unit: if($nested == true, 100%, 100vh);
$gutter: rem-calc($gutter);
+ // Make sure that 0 is translated in 0rem for calc()
+ @if $gutter == 0 {
+ $gutter: 0rem;
+ }
height: calc(#{$unit} + #{$gutter});
} @else {
$unit: if($nested == true, 100%, 100vw);
$gutter: rem-calc($gutter);
+ // Make sure that 0 is translated in 0rem for calc()
+ @if $gutter == 0 {
+ $gutter: 0rem;
+ }
width: calc(#{$unit} + #{$gutter});
}
}
@@ -61,13 +71,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/src/scss/_vendor/foundation-sites/scss/xy-grid/_grid.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_grid.scss
index 44186ea..3fdf474 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_grid.scss
+++ b/src/scss/_vendor/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/src/scss/_vendor/foundation-sites/scss/xy-grid/_gutters.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_gutters.scss
index 3ab987e..839e874 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_gutters.scss
+++ b/src/scss/_vendor/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
////
@@ -26,20 +26,20 @@
// Output our margin gutters.
@if (type-of($gutters) == 'map') {
@include -zf-breakpoint-value(auto, $gutters) {
- $gutter: rem-calc($-zf-bp-value) / 2;
+ $gutter: rem-calc($-zf-bp-value) * 0.5;
// 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') {
- $gutter: rem-calc($gutters) / 2;
+ @else if (type-of($gutters) == 'number') {
+ $gutter: rem-calc($gutters) * 0.5;
// Loop through each gutter position
@each $value in $gutter-position {
- #{$gutter-type}-#{$value}: #{$operator}$gutter;
+ #{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
}
}
}
diff --git a/src/scss/_vendor/foundation-sites/scss/xy-grid/_layout.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_layout.scss
index 3b7650e..d62e797 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_layout.scss
+++ b/src/scss/_vendor/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);
+ $size: percentage(divide(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/src/scss/_vendor/foundation-sites/scss/xy-grid/_position.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_position.scss
index c9c85ff..145cafd 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_position.scss
+++ b/src/scss/_vendor/foundation-sites/scss/xy-grid/_position.scss
@@ -1,28 +1,59 @@
-// 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') {
+ // Make sure that 0 is translated in 0rem for calc()
+ $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint));
+ @if $gutter == 0 {
+ $gutter: 0rem;
+ }
+ $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter} / 2));
+ }
+ @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,
- $vertical: false
+ $n,
+ $gutters: $grid-margin-gutters,
+ $gutter-type: margin,
+ $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/src/scss/_vendor/foundation-sites/scss/xy-grid/_xy-grid.scss b/src/scss/_vendor/foundation-sites/scss/xy-grid/_xy-grid.scss
index aa077c6..13951a6 100644
--- a/src/scss/_vendor/foundation-sites/scss/xy-grid/_xy-grid.scss
+++ b/src/scss/_vendor/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
////
@@ -21,8 +21,8 @@ $grid-columns: 12 !default;
/// The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map.
/// @type Map | Length
$grid-margin-gutters: (
- small: 20px,
- medium: 30px
+ "small": 20px,
+ "medium": 30px
) !default;
/// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map.
diff --git a/src/scss/_vendor/motion-ui/src/_settings.scss b/src/scss/_vendor/motion-ui/src/_settings.scss
index a5cc9bf..d9c4eba 100644
--- a/src/scss/_vendor/motion-ui/src/_settings.scss
+++ b/src/scss/_vendor/motion-ui/src/_settings.scss
@@ -57,5 +57,6 @@ $motion-ui-settings: (
hinge-and-fade: true,
scale-and-fade: true,
spin-and-fade: true,
+ pause-queue-class: 'is-paused',
activate-queue-class: 'is-animating',
) !default;
diff --git a/src/scss/_vendor/motion-ui/src/effects/_fade.scss b/src/scss/_vendor/motion-ui/src/effects/_fade.scss
index 4240ecf..7124679 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_fade.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_fade.scss
@@ -19,11 +19,8 @@
}
}
- $fromName: $from * 100;
- $toName: $to * 100;
-
$keyframes: (
- name: 'fade-#{$fromName}-to-#{$toName}',
+ name: -mui-string-safe('fade-#{$from}-to-#{$to}'),
0: (opacity: $from),
100: (opacity: $to),
);
diff --git a/src/scss/_vendor/motion-ui/src/effects/_hinge.scss b/src/scss/_vendor/motion-ui/src/effects/_hinge.scss
index c30386b..748222f 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_hinge.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_hinge.scss
@@ -3,13 +3,13 @@
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
/// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
-/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
@function hinge (
$state: in,
$from: left,
$axis: edge,
$perspective: 2000px,
- $turn-origin: from-back
+ $turn-origin: null
) {
// Rotation directions when hinging from back vs. front
$rotation-amount: 90deg;
@@ -27,6 +27,7 @@
);
// Rotation origin
+ $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
$rotation: '';
@if $turn-origin == from-front {
$rotation: map-get($rotations-from, $from);
@@ -56,7 +57,7 @@
}
$keyframes: (
- name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
+ name: -mui-string-safe('hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}'),
0: (transform: $start, transform-origin: $origin),
100: (transform: $end),
);
diff --git a/src/scss/_vendor/motion-ui/src/effects/_shake.scss b/src/scss/_vendor/motion-ui/src/effects/_shake.scss
index 66a291c..4071a4e 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_shake.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_shake.scss
@@ -6,7 +6,7 @@
$left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95);
$keyframes: (
- name: 'shake-#{($intensity / 1%)}',
+ name: -mui-string-safe('shake-#{$intensity}'),
$right: (transform: translateX($intensity)),
$left: (transform: translateX(-$intensity)),
);
diff --git a/src/scss/_vendor/motion-ui/src/effects/_slide.scss b/src/scss/_vendor/motion-ui/src/effects/_slide.scss
index b54ae58..5f50b94 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_slide.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_slide.scss
@@ -1,16 +1,17 @@
/// Creates a sliding animation.
/// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
-/// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`.
+/// @param {Keyword} $direction [null] - Direction to move. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
/// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
@function slide(
$state: in,
- $direction: up,
+ $direction: null,
$amount: 100%
) {
$from: $amount;
$to: 0;
$func: 'translateY';
+ $direction: if($direction != null, $direction, if($state == in, left, right));
@if $direction == left or $direction == right {
$func: 'translateX';
@@ -32,7 +33,7 @@
}
$keyframes: (
- name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}',
+ name: -mui-string-safe('slide-#{$state}-#{$direction}-#{$amount}'),
0: (transform: '#{$func}(#{$from})'),
100: (transform: '#{$func}(#{$to})'),
);
diff --git a/src/scss/_vendor/motion-ui/src/effects/_spin.scss b/src/scss/_vendor/motion-ui/src/effects/_spin.scss
index 0ceb789..0340437 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_spin.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_spin.scss
@@ -1,14 +1,15 @@
/// Creates a spinning animation.
-/// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @param {Keyword} $direction [null] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). By default `cw` and `ccw` for `in` and `out` states respectively.
/// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit.
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
@function spin(
$state: in,
- $direction: cw,
+ $direction: null,
$amount: 1turn
) {
$start: 0;
$end: 0;
+ $direction: if($direction != null, $direction, if($state == in, cw, ccw));
@if $state == in {
$start: if($direction == ccw, $amount, $amount * -1);
@@ -19,7 +20,7 @@
}
$keyframes: (
- name: 'spin-#{$direction}-#{$amount}',
+ name: -mui-string-safe('spin-#{$direction}-#{$amount}'),
0: (transform: rotate($start)),
100: (transform: rotate($end)),
);
diff --git a/src/scss/_vendor/motion-ui/src/effects/_wiggle.scss b/src/scss/_vendor/motion-ui/src/effects/_wiggle.scss
index 2866c30..e9da399 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_wiggle.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_wiggle.scss
@@ -3,7 +3,7 @@
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
@function wiggle($intensity: 7deg) {
$keyframes: (
- name: 'wiggle-#{$intensity}',
+ name: -mui-string-safe('wiggle-#{$intensity}'),
(40, 50, 60): (transform: rotate($intensity)),
(35, 45, 55, 65): (transform: rotate(-$intensity)),
(0, 30, 70, 100): (transform: rotate(0)),
diff --git a/src/scss/_vendor/motion-ui/src/effects/_zoom.scss b/src/scss/_vendor/motion-ui/src/effects/_zoom.scss
index 6b3ecdc..1cdc5a3 100644
--- a/src/scss/_vendor/motion-ui/src/effects/_zoom.scss
+++ b/src/scss/_vendor/motion-ui/src/effects/_zoom.scss
@@ -1,12 +1,12 @@
/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
-/// @param {Number} $from [1.5] - Size to start at.
+/// @param {Number} $from [0] - Size to start at.
/// @param {Number} $to [1] - Size to end at.
@function zoom(
$from: 0,
$to: 1
) {
$keyframes: (
- name: 'scale-#{$to}-to-#{$from}',
+ name: -mui-string-safe('scale-#{$to}-to-#{$from}'),
0: (transform: scale($from)),
100: (transform: scale($to)),
);
diff --git a/src/scss/_vendor/motion-ui/src/motion-ui.scss b/src/scss/_vendor/motion-ui/src/motion-ui.scss
index f80ec97..d82199b 100644
--- a/src/scss/_vendor/motion-ui/src/motion-ui.scss
+++ b/src/scss/_vendor/motion-ui/src/motion-ui.scss
@@ -6,11 +6,13 @@
@import 'util/animation';
@import 'util/args';
+@import 'util/function';
@import 'util/keyframe';
@import 'util/selector';
@import 'util/series';
@import 'util/transition';
@import 'util/unit';
+@import 'util/string';
@import 'effects/fade';
@import 'effects/hinge';
diff --git a/src/scss/_vendor/motion-ui/src/transitions/_fade.scss b/src/scss/_vendor/motion-ui/src/transitions/_fade.scss
index c3e5f05..15dfd55 100644
--- a/src/scss/_vendor/motion-ui/src/transitions/_fade.scss
+++ b/src/scss/_vendor/motion-ui/src/transitions/_fade.scss
@@ -1,18 +1,20 @@
/// Creates a fade transition by adjusting the opacity of the element.
/// @param {Keyword} $state [in] - State to transition to.
-/// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1.
-/// @param {Number} $to [1] - Opacity to end on.
+/// @param {Number} $from [null] - Opacity to start at. Must be a number between 0 and 1. By default `0` and `1` for `in` and `out` states respectively.
+/// @param {Number} $to [null] - Opacity to end on. By default `1` and `0` for `in` and `out` states respectively.
/// @param {Keyword} $duration [null] - Length (speed) of the transition.
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
@mixin mui-fade(
$state: in,
- $from: 0,
- $to: 1,
+ $from: null,
+ $to: null,
$duration: null,
$timing: null,
$delay: null
) {
+ $from: if($from != null, $from, if($state == in, 0, 1));
+ $to: if($to != null, $to, if($state == in, 1, 0));
$fade: fade($from, $to);
@include transition-start($state) {
diff --git a/src/scss/_vendor/motion-ui/src/transitions/_hinge.scss b/src/scss/_vendor/motion-ui/src/transitions/_hinge.scss
index 534bcb2..8655199 100644
--- a/src/scss/_vendor/motion-ui/src/transitions/_hinge.scss
+++ b/src/scss/_vendor/motion-ui/src/transitions/_hinge.scss
@@ -3,7 +3,7 @@
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
-/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @param {Keyword} $turn-origin [null] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. By default `from-back` and `from-front` for `in` and `out` states respectively.
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
@@ -13,12 +13,13 @@
$from: left,
$axis: edge,
$perspective: 2000px,
- $turn-origin: from-back,
+ $turn-origin: null,
$fade: map-get($motion-ui-settings, hinge-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
+ $turn-origin: if($turn-origin != null, $turn-origin, if($state == in, from-back, from-front));
$hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
@include transition-start($state) {
diff --git a/src/scss/_vendor/motion-ui/src/transitions/_slide.scss b/src/scss/_vendor/motion-ui/src/transitions/_slide.scss
index f00041d..2a01c4b 100644
--- a/src/scss/_vendor/motion-ui/src/transitions/_slide.scss
+++ b/src/scss/_vendor/motion-ui/src/transitions/_slide.scss
@@ -1,6 +1,6 @@
/// Creates a sliding transition by translating the element horizontally or vertically.
/// @param {Keyword} $state [in] - State to transition to.
-/// @param {Keyword} $direction [left] - Direction to slide to. Can be `up`, `right`, `down`, or `left`.
+/// @param {Keyword} $direction [null] - Direction to slide to. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
/// @param {Length} $amount [100%] - Length of the slide as a percentage value.
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
@@ -8,13 +8,14 @@
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
@mixin mui-slide (
$state: in,
- $direction: left,
+ $direction: null,
$amount: 100%,
$fade: map-get($motion-ui-settings, slide-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
+ $direction: if($direction != null, $direction, if($state == in, left, right));
$slide: slide($state, $direction, $amount);
// CSS Output
diff --git a/src/scss/_vendor/motion-ui/src/transitions/_spin.scss b/src/scss/_vendor/motion-ui/src/transitions/_spin.scss
index 82812e0..74f9b38 100644
--- a/src/scss/_vendor/motion-ui/src/transitions/_spin.scss
+++ b/src/scss/_vendor/motion-ui/src/transitions/_spin.scss
@@ -1,6 +1,6 @@
/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
/// @param {Keyword} $state [in] - State to transition to.
-/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @param {Keyword} $direction [null] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). By default `cw` and `ccw` for `in` and `out` states respectively.
/// @param {Number} $amount [0.75turn] - Amount to element the element.
/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
@@ -15,6 +15,7 @@
$timing: null,
$delay: null
) {
+ $direction: if($direction != null, $direction, if($state == in, cw, ccw));
$spin: spin($state, $direction, $amount);
@include transition-start($state) {
diff --git a/src/scss/_vendor/motion-ui/src/transitions/_zoom.scss b/src/scss/_vendor/motion-ui/src/transitions/_zoom.scss
index db48764..f5dcb79 100644
--- a/src/scss/_vendor/motion-ui/src/transitions/_zoom.scss
+++ b/src/scss/_vendor/motion-ui/src/transitions/_zoom.scss
@@ -1,20 +1,22 @@
/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
/// @param {Keyword} $state [in] - State to transition to.
-/// @param {Number} $from [1.5] - Size to start at.
-/// @param {Number} $from [1] - Size to end at.
+/// @param {Number} $from [null] - Size to start at. By default `0` and `1` for `in` and `out` states respectively.
+/// @param {Number} $to [null] - Size to end at. By default `1` and `0` for `in` and `out` states respectively.
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
/// @param {Duration} $duration [null] - Length (speed) of the transition.
/// @param {Keyword|Function} $timing [null] - Easing of the transition.
/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
@mixin mui-zoom(
$state: in,
- $from: 1.5,
- $to: 1,
+ $from: null,
+ $to: null,
$fade: map-get($motion-ui-settings, scale-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
+ $from: if($from != null, $from, if($state == in, 0, 1));
+ $to: if($to != null, $to, if($state == in, 1, 0));
$scale: zoom($from, $to);
@include transition-start($state) {
diff --git a/src/scss/_vendor/motion-ui/src/util/_animation.scss b/src/scss/_vendor/motion-ui/src/util/_animation.scss
index fa3b73b..c8fd645 100644
--- a/src/scss/_vendor/motion-ui/src/util/_animation.scss
+++ b/src/scss/_vendor/motion-ui/src/util/_animation.scss
@@ -1,5 +1,5 @@
/// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
-/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
+/// @param {Arglist} $effects... - One or more effect functions to build the keyframe with.
@mixin mui-animation($args...) {
$name: map-get(-mui-process-args($args...), name);
@include mui-keyframes($name, $args...);
diff --git a/src/scss/_vendor/motion-ui/src/util/_args.scss b/src/scss/_vendor/motion-ui/src/util/_args.scss
index 8cdac96..2b01240 100644
--- a/src/scss/_vendor/motion-ui/src/util/_args.scss
+++ b/src/scss/_vendor/motion-ui/src/util/_args.scss
@@ -4,8 +4,8 @@
@if length($args) == 1 {
$arg: nth($args, 1);
- @if type-of($arg) == 'string' {
- @return call(get-function($arg));
+ @if -mui-is-function($arg) {
+ @return -mui-safe-call($arg);
} @else if type-of($arg) == 'map' {
@return $arg;
}
diff --git a/src/scss/_vendor/motion-ui/src/util/_function.scss b/src/scss/_vendor/motion-ui/src/util/_function.scss
new file mode 100644
index 0000000..596477a
--- /dev/null
+++ b/src/scss/_vendor/motion-ui/src/util/_function.scss
@@ -0,0 +1,94 @@
+////
+/// In order to improve modular namespacing, LibSass 4 only accepts first-class
+/// functions as argument so functions are called in their own context.
+/// In most case, `get-function()` must only be used by the user in its own
+/// context. It is used in this library to keep a maximum compatibility.
+/// End developer must be encouraged to use first-class functions.
+///
+/// @link http://oddbird.net/2017/03/30/safe-get
+/// @link http://sass.logdown.com/posts/809572-sass-35-release-candidate
+////
+
+///
+/// Return if a given value is a function or a function name string.
+///
+/// @access private
+///
+/// @param {*} $value - Value to test
+/// @return {Boolean}
+///
+@function -mui-is-function($value) {
+ @return type-of($value) == 'function' or type-of($value) == 'string';
+}
+
+///
+/// Return if a given value is callable.
+///
+/// @access private
+///
+/// @param {*} $value - Value to test
+/// @return {Boolean}
+///
+@function -mui-is-callable($value) {
+ @return type-of($value) == 'function' or (type-of($value) == 'string' and function-exists($value));
+}
+
+///
+/// Check if a given value is callable and throw the appropriate error otherwise
+///
+/// @access private
+///
+/// @param {*} $value - Value to check
+/// @return {Boolean}
+///
+@function -mui-assert-function($value) {
+ @if -mui-is-callable($value) {
+ @return true;
+ } @else if (type-of($value) == 'string' and function-exists('get-function') == true) {
+ @error 'Assertion Error: function name string "#{$value}" cannot be found. You may need to use `get-function()` and first-class functions instead. See http://oddbird.net/2017/03/30/safe-get';
+ } @else if (type-of($value) == 'string' and function-exists('get-function') == false) {
+ @error 'Assertion Error: function name string "#{$value}" cannot be found.';
+ } @else {
+ @error 'Assertion Error: #{$value} (#{type-of($value)}) is not a function.';
+ }
+}
+
+///
+/// Return a reference to the given function or function name string compatible
+/// with the current Sass version.
+///
+/// * For Sass < 3.5, return the passed argument
+/// * For Sass >= 3.5, return a first-class function if a function name string
+/// was passed
+///
+/// @access private
+///
+/// @param {Function|String} - $func - Function or name of the function
+/// @return {Function|String} Function or name of the function following
+/// the support of first-class functions.
+///
+@function -mui-safe-get-function($func) {
+ @if -mui-assert-function($func) {
+ @if function-exists('get-function') and type-of($func) == 'string' {
+ @return get-function($func);
+ } @else {
+ @return $func;
+ }
+ }
+}
+
+///
+/// Polyfill for the `call` function supporting both functions and strings.
+///
+/// @access private
+///
+/// @param {Function|String} $func - Function or name of the function to call
+/// @param {Arglist} $args... - Arguments to call the function with
+///
+/// @return {*}
+///
+@function -mui-safe-call($func, $args...) {
+ @if -mui-assert-function($func) {
+ @return call(-mui-safe-get-function($func), $args...);
+ }
+}
diff --git a/src/scss/_vendor/motion-ui/src/util/_keyframe.scss b/src/scss/_vendor/motion-ui/src/util/_keyframe.scss
index d8b15af..a0914d9 100644
--- a/src/scss/_vendor/motion-ui/src/util/_keyframe.scss
+++ b/src/scss/_vendor/motion-ui/src/util/_keyframe.scss
@@ -3,7 +3,7 @@ $-mui-custom: 0;
/// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element.
/// @param {String} $name - Name of the keyframe.
-/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
+/// @param {Arglist} $effects... - One or more effect functions to build the keyframe with.
@mixin mui-keyframes($name, $effects...) {
$obj: -mui-process-args($effects...);
$obj: map-remove($obj, name);
@@ -36,7 +36,7 @@ $-mui-custom: 0;
}
}
- @return $output;
+ @return "#{$output}";
}
/// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions.
@@ -79,7 +79,7 @@ $-mui-custom: 0;
}
/// Combines a series of keyframe objects into one.
-/// @param {Map} $maps... - A series of maps to merge, as individual parameters.
+/// @param {Arglist} $maps... - A series of maps to merge, as individual parameters.
/// @return {Map} A combined keyframe object.
/// @access private
@function -mui-keyframe-combine($maps...) {
@@ -87,8 +87,8 @@ $-mui-custom: 0;
// Iterate through each map passed in
@each $map in $maps {
- @if type-of($map) == 'string' {
- $map: call(get-function($map));
+ @if -mui-is-function($map) {
+ $map: -mui-safe-call($map);
}
$map: -mui-keyframe-split($map);
diff --git a/src/scss/_vendor/motion-ui/src/util/_series.scss b/src/scss/_vendor/motion-ui/src/util/_series.scss
index 8baeee3..5a98292 100644
--- a/src/scss/_vendor/motion-ui/src/util/_series.scss
+++ b/src/scss/_vendor/motion-ui/src/util/_series.scss
@@ -1,16 +1,5 @@
$-mui-queue: ();
-/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end.
-/// @access private
-%animated-element {
- animation-play-state: paused;
- animation-fill-mode: both;
-
- .#{map-get($motion-ui-settings, activate-queue-class)} & {
- animation-play-state: running;
- }
-}
-
/// Creates a new animation queue.
/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
@mixin mui-series($delay: 0s) {
@@ -27,7 +16,7 @@ $-mui-queue: ();
/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
/// @param {Duration} $duration [1s] - Length of the animation.
/// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one.
-/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with.
+/// @param {Arglist} $keyframes... - One or more effect functions to build the keyframe with.
@mixin mui-queue(
$duration: 1s,
$gap: 0s,
@@ -46,9 +35,23 @@ $-mui-queue: ();
$item: ($duration, $gap);
$-mui-queue: append($-mui-queue, $item) !global;
- // CSS output
- @extend %animated-element;
- @include mui-animation($kf);
- animation-duration: $duration;
- animation-delay: $actual-delay;
+ // --- CSS output ---
+ // Initial properties
+ @include -mui-keyframe-get($kf, 0);
+ animation-fill-mode: both;
+
+ // Start the animation
+ .#{map-get($motion-ui-settings, activate-queue-class)} & {
+ @include mui-animation($kf);
+ animation-delay: $actual-delay;
+ animation-duration: $duration;
+ }
+
+ // Pause the animation.
+ // For macOS Safari to play it correctly, `animation-play-state`
+ // must not be `paused` before the animation start.
+ // See https://git.io/motion-ui-97
+ .#{map-get($motion-ui-settings, pause-queue-class)} & {
+ animation-play-state: paused;
+ }
}
diff --git a/src/scss/_vendor/motion-ui/src/util/_string.scss b/src/scss/_vendor/motion-ui/src/util/_string.scss
new file mode 100644
index 0000000..47ae3fa
--- /dev/null
+++ b/src/scss/_vendor/motion-ui/src/util/_string.scss
@@ -0,0 +1,36 @@
+/// Convert any string to a "safe" string that can be used anywhere in CSS (as class or keyframe name for example).
+/// Unsupported characters are replaced by the given `$delimiter` ("-").
+/// Several unsupported characters following each others are replaced by a single delimiter.
+///
+/// @param {*} $str - String to convert. If not a string, it will be converted to with `quote()`.
+/// @param {String} $delimiter ['-'] - Character to use instead of unsupported characters.
+/// @return {String} - Safe string usable everywhere in CSS.
+@function -mui-string-safe(
+ $str,
+ $delimiter: '-'
+) {
+ $str: quote($str);
+ $length: str_length($str);
+ $safe-chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
+
+ $ret: '';
+ $delimited: false;
+
+ @for $i from 1 through $length {
+ $c: str_slice($str, $i, $i);
+
+ @if (str_index($safe-chars, $c) != null) {
+ $ret: '#{$ret}#{$c}';
+ $delimited: false;
+ }
+ @else if (($delimited == false)
+ and (str_length($ret) > 0)
+ and ($i < $length))
+ {
+ $ret: '#{$ret}#{$delimiter}';
+ $delimited: true;
+ }
+ }
+
+ @return $ret;
+}
diff --git a/src/scss/_vendor/motion-ui/src/util/_unit.scss b/src/scss/_vendor/motion-ui/src/util/_unit.scss
index fd39166..4819c5b 100644
--- a/src/scss/_vendor/motion-ui/src/util/_unit.scss
+++ b/src/scss/_vendor/motion-ui/src/util/_unit.scss
@@ -1,7 +1,60 @@
+@use "sass:math";
+
/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
/// @param {Number} $num - Number to strip unit from.
/// @return {Number} The same number, sans unit.
/// @access private
+
+/// Divide the given `$divident` by the given `$divisor`.
+///
+/// @param {Number} $divident - The divident.
+/// @param {Number} $divisor - The divisor.
+/// @param {Number} $precision - The precision decimals for the division.
+///
+/// @return {Number} The product of the division.
+@function divide($dividend, $divisor, $precision: 12) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: math.abs($dividend);
+ $divisor: math.abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error 'Cannot divide by 0';
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * 0.1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ 'px': 1px,
+ 'rem': 1rem,
+ 'em': 1em,
+ '%': 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+
+ @return $result;
+}
+
@function strip-unit($num) {
- @return $num / ($num * 0 + 1);
+ @return divide($num, $num * 0 + 1);
}
diff --git a/src/scss/base/_settings.scss b/src/scss/base/_settings.scss
index ceb8ddc..82ede56 100644
--- a/src/scss/base/_settings.scss
+++ b/src/scss/base/_settings.scss
@@ -447,7 +447,7 @@ $input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
-$input-padding: $form-spacing / 2;
+$input-padding: $form-spacing * .5;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
@@ -784,7 +784,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-background: smart-scale($table-background, $table-color-scale * .5);
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@netbeans.apache.org
For additional commands, e-mail: commits-help@netbeans.apache.org
For further information about the NetBeans mailing lists, visit:
https://cwiki.apache.org/confluence/display/NETBEANS/Mailing+lists