Give menu icon its own component Sass file, closes #7787

diff --git a/scss/_global.scss b/scss/_global.scss
index a66e295f4afb7e2c212f57ea55f1cbf0da580a26..2eef7ce62c99ae3fe3c9971225c8bdc857775072 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -104,6 +104,9 @@ $success-color: map-get($foundation-palette, success);
 $warning-color: map-get($foundation-palette, warning);
 $alert-color: map-get($foundation-palette, alert);
 
+// Remove this in 6.3
+$-zf-menu-icon-imported: false;
+
 @mixin foundation-global-styles {
   @include -zf-normalize;
 

diff --git a/scss/components/_menu-icon.scss b/scss/components/_menu-icon.scss
new file mode 100644 (file)
index 0000000..e8f1e4e
--- /dev/null
+++ b/scss/components/_menu-icon.scss
@@ -0,0 +1,11 @@
+@mixin foundation-menu-icon {
+  $-zf-menu-icon-imported: true !global;
+
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}

diff --git a/scss/components/_title-bar.scss b/scss/components/_title-bar.scss
index 8fa78e4268a3f3841c71ccabe717e3c20bd62ba2..341cea968f00c10901161f0fe1c3e1c398cbf93d 100644 (file)
--- a/scss/components/_title-bar.scss
+++ b/scss/components/_title-bar.scss
@@ -62,7 +62,9 @@ $titlebar-icon-spacing: 0.25rem !default;
     display: inline-block;
   }
 
-  .menu-icon {
-    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  // Remove this in 6.3
+  @if not $-zf-menu-icon-imported {
+    @warn 'In Foundation 6.2, a new component mixin was added called "foundation-menu-icon". Add "@import foundation-menu-icon" to the main Sass file of your project to remove this warning.';
+    @include foundation-menu-icon;
   }
 }

diff --git a/scss/foundation.scss b/scss/foundation.scss
index 08af1cd8bafbfed527106fd53c1f731868c77bbb..21e32d364f9da1bfe9f4f151fe01391f8851905b 100644 (file)
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -32,6 +32,7 @@
 @import 'components/label';
 @import 'components/media-object';
 @import 'components/menu';
+@import 'components/menu-icon';
 @import 'components/off-canvas';
 @import 'components/orbit';
 @import 'components/pagination';
@@ -74,6 +75,7 @@
   @include foundation-label;
   @include foundation-media-object;
   @include foundation-menu;
+  @include foundation-menu-icon;
   @include foundation-off-canvas;
   @include foundation-orbit;
   @include foundation-pagination;