From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 30 Nov 2015 23:44:06 +0000 (-0800)
Subject: Add Sass variables for title bar, closes #7294
X-Git-Tag: v6.0.5~23
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=573e9336fb49f6188927358c30fc9e1ebf8a1f73;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add Sass variables for title bar, closes #7294
---

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 1a0a22e5a..2b6ad5bf9 100644
--- 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 524b433ac..8fa78e426 100644
--- 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);
   }
 }