Tethys Update (Foundation 6.2)

.babelrc

@@ -0,0 +1,17 @@
+{
+	"plugins": [
+  	"transform-es2015-arrow-functions",
+  	"transform-es2015-block-scoped-functions",
+  	"transform-es2015-block-scoping",
+  	"transform-es2015-classes",
+  	"transform-es2015-destructuring",
+  	"transform-es2015-template-literals",
+  	"transform-es2015-parameters",
+		"transform-es2015-shorthand-properties",
+  	"transform-es2015-spread",
+    ["transform-es2015-modules-commonjs", {
+      "allowTopLevelThis": true
+    }]
+  ],
+  "compact": false
+}

assets/scss/foundation.scss

@@ -25,12 +25,13 @@
 @include foundation-global-styles;
 
 // Individual foundation components
+@include foundation-global-styles;
 @include foundation-grid;
+// @include foundation-flex-grid;
 @include foundation-typography;
 @include foundation-button;
 @include foundation-forms;
-@include foundation-visibility-classes;
-@include foundation-float-classes;
+@include foundation-range-input;
 @include foundation-accordion;
 @include foundation-accordion-menu;
 @include foundation-badge;
@@ -49,6 +50,8 @@
 @include foundation-orbit;
 @include foundation-pagination;
 @include foundation-progress-bar;
+@include foundation-progress-element;
+@include foundation-meter-element;
 @include foundation-slider;
 @include foundation-sticky;
 @include foundation-reveal;
@@ -59,6 +62,9 @@
 @include foundation-title-bar;
 @include foundation-tooltip;
 @include foundation-top-bar;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+// @include foundation-flex-classes;
 
 // Motion UI
 @include motion-ui-transitions;

assets/scss/global/_settings.scss

@@ -25,19 +25,20 @@
 //  20. Label
 //  21. Media Object
 //  22. Menu
-//  23. Off-canvas
-//  24. Orbit
-//  25. Pagination
-//  26. Progress Bar
-//  27. Reveal
-//  28. Slider
-//  29. Switch
-//  30. Table
-//  31. Tabs
-//  32. Thumbnail
-//  33. Title Bar
-//  34. Tooltip
-//  35. Top Bar
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Reveal
+//  29. Slider
+//  30. Switch
+//  31. Table
+//  32. Tabs
+//  33. Thumbnail
+//  34. Title Bar
+//  35. Tooltip
+//  36. Top Bar
 
 @import '../../components/foundation-sites/scss/util/util';
 
@@ -67,6 +68,8 @@ $global-weight-normal: normal;
 $global-weight-bold: bold;
 $global-radius: 0;
 $global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
 
 // 2. Breakpoints
 // --------------
@@ -335,6 +338,7 @@ $select-background: $white;
 $select-triangle-color: #333;
 $select-radius: $global-radius;
 $input-color: $black;
+$input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-background: $white;
@@ -371,10 +375,21 @@ $mediaobject-image-width-stacked: 100%;
 $menu-margin: 0;
 $menu-margin-nested: 1rem;
 $menu-item-padding: 0.7rem 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: $primary-color;
 $menu-icon-spacing: 0.25rem;
-$menu-expand-max: 6;
 
-// 23. Off-canvas
+// 23. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
 // --------------
 
 $offcanvas-size: 250px;
@@ -387,7 +402,7 @@ $offcanvas-exit-background: rgba($white, 0.25);
 $maincontent-class: 'off-canvas-content';
 $maincontent-shadow: 0 0 10px rgba($black, 0.5);
 
-// 24. Orbit
+// 25. Orbit
 // ---------
 
 $orbit-bullet-background: $medium-gray;
@@ -402,7 +417,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
 $orbit-control-padding: 1rem;
 $orbit-control-zindex: 10;
 
-// 25. Pagination
+// 26. Pagination
 // --------------
 
 $pagination-font-size: rem-calc(14);
@@ -419,7 +434,7 @@ $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
 $pagination-arrows: true;
 
-// 26. Progress Bar
+// 27. Progress Bar
 // ----------------
 
 $progress-height: 1rem;
@@ -428,7 +443,7 @@ $progress-margin-bottom: $global-margin;
 $progress-meter-background: $primary-color;
 $progress-radius: $global-radius;
 
-// 27. Reveal
+// 28. Reveal
 // ----------
 
 $reveal-background: $white;
@@ -441,7 +456,7 @@ $reveal-radius: $global-radius;
 $reveal-zindex: 1005;
 $reveal-overlay-background: rgba($black, 0.45);
 
-// 28. Slider
+// 29. Slider
 // ----------
 
 $slider-height: 0.5rem;
@@ -455,7 +470,7 @@ $slider-opacity-disabled: 0.25;
 $slider-radius: $global-radius;
 $slider-transition: all 0.2s ease-in-out;
 
-// 29. Switch
+// 30. Switch
 // ----------
 
 $switch-background: $medium-gray;
@@ -471,7 +486,7 @@ $switch-paddle-offset: 0.25rem;
 $switch-paddle-radius: $global-radius;
 $switch-paddle-transition: all 0.25s ease-out;
 
-// 30. Table
+// 31. Table
 // ---------
 
 $table-background: $white;
@@ -488,13 +503,12 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
 $table-head-font-color: $body-font-color;
 $show-header-for-stacked: false;
 
-// 31. Tabs
+// 32. Tabs
 // --------
 
 $tab-margin: 0;
 $tab-background: $white;
 $tab-background-active: $light-gray;
-$tab-border: $light-gray;
 $tab-item-color: foreground($tab-background, $primary-color);
 $tab-item-background-hover: $white;
 $tab-item-padding: 1.25rem 1.5rem;
@@ -504,7 +518,7 @@ $tab-content-border: $light-gray;
 $tab-content-color: foreground($tab-background, $primary-color);
 $tab-content-padding: 1rem;
 
-// 32. Thumbnail
+// 33. Thumbnail
 // -------------
 
 $thumbnail-border: solid 4px $white;
@@ -514,7 +528,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
 $thumbnail-transition: box-shadow 200ms ease-out;
 $thumbnail-radius: $global-radius;
 
-// 33. Title Bar
+// 34. Title Bar
 // -------------
 
 $titlebar-background: $black;
@@ -525,7 +539,7 @@ $titlebar-icon-color: $white;
 $titlebar-icon-color-hover: $medium-gray;
 $titlebar-icon-spacing: 0.25rem;
 
-// 34. Tooltip
+// 35. Tooltip
 // -----------
 
 $tooltip-background-color: $black;
@@ -534,13 +548,14 @@ $tooltip-padding: 0.75rem;
 $tooltip-font-size: $small-font-size;
 $tooltip-pip-width: 0.75rem;
 $tooltip-pip-height: $tooltip-pip-width * 0.866;
-$tooltip-pip-offset: 1.25rem;
 $tooltip-radius: $global-radius;
 
-// 35. Top Bar
+// 36. Top Bar
 // -----------
 
 $topbar-padding: 0;
 $topbar-background: #121212;
-$topbar-link-color: #ffffff;
+$topbar-submenu-background: $topbar-background;
+$topbar-link-color: #fff;
 $topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;

assets/scss/modules/_navigation.scss

@@ -58,5 +58,7 @@
 
   .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; }
   .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; }
-  .is-dropdown-submenu-parent.is-down-arrow > a::after { display: none; }
 }
+
+.dropdown.menu > li.is-dropdown-submenu-parent > a::after { display: none; }
+

bower.json

@@ -6,8 +6,8 @@
   ],
   "ignore": [],
   "dependencies": {
-    "foundation-sites": "~6.1.0",
-    "motion-ui" : "~1.1.0",
-    "fontawesome": "~4.4.0"
+    "foundation-sites": "~6.2.0",
+    "motion-ui" : "~1.2.0",
+    "fontawesome": "~4.5.0"
   }
 }

gulpfile.js

@@ -150,6 +150,7 @@ gulp.task('javascript', function() {
 
   return gulp.src(PATHS.javascript)
     .pipe($.sourcemaps.init())
+    .pipe($.babel())
     .pipe($.concat('foundation.js'))
     .pipe($.if(isProduction, uglify))
     .pipe($.if(!isProduction, $.sourcemaps.write()))

package.json

@@ -23,13 +23,16 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.1.0",
+    "babel-core": "^6.5.2",
+    "babel-preset-es2015": "^6.5.0",
     "bower": "~1.6.4",
     "browser-sync": "^2.10.0",
     "colors": "^1.1.2",
     "dateformat": "^1.0.12",
     "del": "^2.2.0",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
+    "gulp-babel": "^6.1.2",
     "gulp-concat": "^2.6.0",
     "gulp-flatten": "^0.2.0",
     "gulp-if": "^2.0.0",