Add Sass variables for title bar, closes #7294

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 1a0a22e5a5f2a1f2995896d4fc966e2861da7951..2b6ad5bf99f3662ee80058b620959e39ae1aef9d 100644 (file)
--- a/docs/pages/off-canvas.md
+++ b/docs/pages/off-canvas.md
@@ -1,7 +1,9 @@
 ---
 title: Off-canvas
 description: Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.
-sass: scss/components/_off-canvas.scss
+sass:
+  - scss/components/_off-canvas.scss
+  - scss/components/_title-bar.scss
 js: js/foundation.offcanvas.js
 tags:
   - navigation

diff --git a/scss/components/_title-bar.scss b/scss/components/_title-bar.scss
index 524b433ac058e8944523d37004d4a43e0fb32054..8fa78e4268a3f3841c71ccabe717e3c20bd62ba2 100644 (file)
--- a/scss/components/_title-bar.scss
+++ b/scss/components/_title-bar.scss
@@ -6,16 +6,44 @@
 /// @group title-bar
 ////
 
+/// Background color of a title bar.
+/// @type Color
+$titlebar-background: $black !default;
+
+/// Color of text inside a title bar.
+/// @type Color
+$titlebar-color: $white !default;
+
+/// Padding inside a title bar.
+/// @type Length
+$titlebar-padding: 0.5rem !default;
+
+/// Font weight of text inside a title bar.
+/// @type Weight
+$titlebar-text-font-weight: bold !default;
+
+/// Color of menu icons inside a title bar.
+/// @type Color
+$titlebar-icon-color: $white !default;
+
+/// Color of menu icons inside a title bar on hover.
+/// @type Color
+$titlebar-icon-color-hover: $medium-gray !default;
+
+/// Spacing between the menu icon and text inside a title bar.
+/// @type Length
+$titlebar-icon-spacing: 0.25rem !default;
+
 @mixin foundation-title-bar {
   .title-bar {
     @include clearfix;
-    background: $black;
-    color: $white;
-    padding: 0.5rem;
+    background: $titlebar-background;
+    color: $titlebar-color;
+    padding: $titlebar-padding;
 
     .menu-icon {
-      margin-#{$global-left}: 0.25rem;
-      margin-#{$global-right}: 0.5rem;
+      margin-#{$global-left}: $titlebar-icon-spacing;
+      margin-#{$global-right}: $titlebar-padding;
     }
   }
 
@@ -29,16 +57,12 @@
   }
 
   .title-bar-title {
-    font-weight: bold;
+    font-weight: $titlebar-text-font-weight;
     vertical-align: middle;
     display: inline-block;
   }
 
   .menu-icon {
-    @include hamburger($color: white, $color-hover: $medium-gray);
-  }
-
-  .menu-icon.dark {
-    @include hamburger;
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
   }
 }