Renamed (and recoded) titlebar to separator

As Titlebar conflicts with Top Bar => Title Bar

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 0cf5fd1f8046f8138e8480a82fc4b4baa2d15e70..8aa5d54fbeca414e5321a354de892bf9f1a9badb 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -198,30 +198,30 @@ These `.rounded`, `.bordered` & `.shadow` classes can be used independently or t
 
 ---
 
-## Title Bar Utility
+## Separator
 
-This creates a tiny titlebar below the heading of an element and is usually used within the heading of a section.
+This creates a tiny separator below the heading of an element and is usually used within the heading of a section.
 
 <div class="primary callout">
-       You don't need to use [Text alignment classes](typography-helpers.html#text-alignment) as this titlebar utility deals with the alignment of the text itself.
+       You don't need to use [Text alignment classes](typography-helpers.html#text-alignment) as this separator utility deals with the alignment of the text itself.
 </div>
 
 ```html
-<h3 class="titlebar-left">Lorem</h3>
-<h3 class="titlebar-center">Ipsum Dolor</h3>
-<h3 class="titlebar-right">Tempor</h3>
+<h3 class="separator-left">Lorem</h3>
+<h3 class="separator-center">Ipsum Dolor</h3>
+<h3 class="separator-right">Tempor</h3>
 ``` 
 
 <div class="docs-code-live">
        <div class="row">
                <div class="small-12 medium-4 columns">
-                       <h3 class="titlebar-left">Lorem</h3>
+                       <h3 class="separator-left">Lorem</h3>
                </div>
                <div class="small-12 medium-4 columns">
-                       <h3 class="titlebar-center">Ipsum Dolor</h3>
+                       <h3 class="separator-center">Ipsum Dolor</h3>
                </div>
                <div class="small-12 medium-4 columns">
-                       <h3 class="titlebar-right">Tempor</h3>
+                       <h3 class="separator-right">Tempor</h3>
                </div>
        </div>
 </div>

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index f282451a239c3bcc65219351238cb34c5fdd18f3..fc6f7617b491246bd048aaab145824ee3f87de0b 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -42,8 +42,8 @@
 // Shadow Utility
 @import 'shadow';
 
-// Title Bar Utility
-@import 'titlebar';
+// Separator Utility
+@import 'separator';
 
 // Overflow helper classes
 @import 'overflow';
@@ -73,7 +73,7 @@
   @include foundation-prototype-rounded;
   @include foundation-prototype-bordered;
   @include foundation-prototype-shadow;
-  @include foundation-prototype-titlebar;
+  @include foundation-prototype-separator;
   @include foundation-prototype-overflow;
   @include foundation-prototype-display;
   @include foundation-prototype-position;

diff --git a/scss/prototype/_separator.scss b/scss/prototype/_separator.scss
new file mode 100644 (file)
index 0000000..af5245a
--- /dev/null
+++ b/scss/prototype/_separator.scss
@@ -0,0 +1,94 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-separator
+////
+
+/// Responsive breakpoints for separator.
+/// @type Boolean
+$prototype-separator-breakpoints: $global-prototype-breakpoints !default;
+
+/// Default alignment of a separator.
+/// @type String
+$prototype-separator-align: center !default;
+
+/// Height of a separator.
+/// @type Number
+$prototype-separator-height: rem-calc(2px) !default;
+
+/// Width of a separator.
+/// @type Number
+$prototype-separator-width: 3rem !default;
+
+/// Default color of a separator.
+/// @type Color
+$prototype-separator-background: $primary-color !default;
+
+/// Top Margin of a separator.
+/// @type Number
+$prototype-separator-margin-top: $global-margin !default;
+
+/// Title separator Utility, mostly used to style the main heading of a section
+/// @param {String} $align [$prototype-separator-align] - separator Alignment
+/// @param {Number} $height [$prototype-separator-height] - Width
+/// @param {Number} $width [$prototype-separator-width] - Height
+/// @param {Color} $background [$prototype-separator-background] - Background
+/// @param {Number} $top [$prototype-separator-margin-top] - Margin Top
+@mixin separator (
+  $align: $prototype-separator-align,
+  $height: $prototype-separator-height,
+  $width: $prototype-separator-width,
+  $background: $prototype-separator-background,
+  $top: $prototype-separator-margin-top
+) {
+  text-align: $align !important;
+       @include clearfix;
+
+  &::after {
+    @include position(relative);
+    width: $width;
+    border-bottom: $height solid $background;
+    margin: $top auto 0;
+
+    @if $align == left {
+      margin-left: 0 !important;
+    }
+
+    @if $align == right {
+      margin-right: 0 !important;
+    } 
+  }
+}
+
+@mixin foundation-prototype-separator {
+       .separator-center {
+               @include separator(center);
+       }
+  .separator-left {
+    @include separator(left);
+  }
+  .separator-right {
+    @include separator(right);
+  }
+
+       @if ($prototype-separator-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-separator-center {
+            @include separator(center);
+          }
+          .#{$size}-separator-left {
+            @include separator(left);
+          }
+          .#{$size}-separator-right {
+            @include separator(right);
+          }
+        }
+      }
+    }
+  }
+}

diff --git a/scss/prototype/_titlebar.scss b/scss/prototype/_titlebar.scss
deleted file mode 100644 (file)
index 512a6f2..0000000
--- a/scss/prototype/_titlebar.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group prototype-titlebar
-////
-
-/// Responsive breakpoints for titlebar.
-/// @type Boolean
-$prototype-titlebar-breakpoints: $global-prototype-breakpoints !default;
-
-/// Default alignment of a titlebar.
-/// @type String
-$prototype-titlebar-align: center !default;
-
-/// Height of a titlebar.
-/// @type Number
-$prototype-titlebar-height: rem-calc(2px) !default;
-
-/// Width of a titlebar.
-/// @type Number
-$prototype-titlebar-width: 3rem !default;
-
-/// Default color of a titlebar.
-/// @type Color
-$prototype-titlebar-background: $primary-color !default;
-
-/// Top Margin of a titlebar.
-/// @type Number
-$prototype-titlebar-margin-top: $global-margin !default;
-
-/// Title titleBar Utility, mostly used to style the main heading of a section
-/// @param {String} $align [$prototype-titlebar-align] - titleBar Alignment
-/// @param {Number} $height [$prototype-titlebar-height] - Width
-/// @param {Number} $width [$prototype-titlebar-width] - Height
-/// @param {Color} $background [$prototype-titlebar-background] - Background
-/// @param {Number} $top [$prototype-titlebar-margin-top] - Margin Top
-@mixin titlebar (
-  $align: $prototype-titlebar-align,
-  $height: $prototype-titlebar-height,
-  $width: $prototype-titlebar-width,
-  $background: $prototype-titlebar-background,
-  $top: $prototype-titlebar-margin-top
-) {
-  text-align: $align !important;
-       @include clearfix;
-
-  &::after {
-    @include position(relative);
-    width: $width;
-    border-bottom: $height solid $background;
-    margin: $top auto 0;
-
-    @if $align == left {
-      margin-left: 0 !important;
-    }
-
-    @if $align == right {
-      margin-right: 0 !important;
-    } 
-  }
-}
-
-@mixin foundation-prototype-titlebar {
-       .titlebar-center {
-               @include titlebar(center);
-       }
-  .titlebar-left {
-    @include titlebar(left);
-  }
-  .titlebar-right {
-    @include titlebar(right);
-  }
-
-       @if ($prototype-titlebar-breakpoints) {
-    // Loop through Responsive Breakpoints
-    @each $size in $breakpoint-classes {
-      @include breakpoint($size) {
-        @if $size != $-zf-zero-breakpoint {
-          .#{$size}-titlebar-center {
-            @include titlebar(center);
-          }
-          .#{$size}-titlebar-left {
-            @include titlebar(left);
-          }
-          .#{$size}-titlebar-right {
-            @include titlebar(right);
-          }
-        }
-      }
-    }
-  }
-}