## Title Bar Utility
-This creates a tiny bar below the heading of an element and is usually used within the heading of a section.
+This creates a tiny titlebar 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 bar 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 titlebar utility deals with the alignment of the text itself.
</div>
```html
-<h3 class="bar-left">Lorem</h3>
-<h3 class="bar-center">Ipsum Dolor</h3>
-<h3 class="bar-right">Tempor</h3>
+<h3 class="titlebar-left">Lorem</h3>
+<h3 class="titlebar-center">Ipsum Dolor</h3>
+<h3 class="titlebar-right">Tempor</h3>
```
<div class="docs-code-live">
<div class="row">
<div class="small-12 medium-4 columns">
- <h3 class="bar-left">Lorem</h3>
+ <h3 class="titlebar-left">Lorem</h3>
</div>
<div class="small-12 medium-4 columns">
- <h3 class="bar-center">Ipsum Dolor</h3>
+ <h3 class="titlebar-center">Ipsum Dolor</h3>
</div>
<div class="small-12 medium-4 columns">
- <h3 class="bar-right">Tempor</h3>
+ <h3 class="titlebar-right">Tempor</h3>
</div>
</div>
</div>
+++ /dev/null
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group prototype-bar
-////
-
-/// Responsive breakpoints for bar.
-/// @type Boolean
-$prototype-bar-breakpoints: $global-prototype-breakpoints !default;
-
-/// Default alignment of a bar.
-/// @type String
-$prototype-bar-align: center !default;
-
-/// Height of a bar.
-/// @type Number
-$prototype-bar-height: rem-calc(2px) !default;
-
-/// Width of a bar.
-/// @type Number
-$prototype-bar-width: 3rem !default;
-
-/// Default color of a bar.
-/// @type Color
-$prototype-bar-background: $primary-color !default;
-
-/// Top Margin of a bar.
-/// @type Number
-$prototype-bar-margin-top: $global-margin !default;
-
-/// Title Bar Utility, mostly used to style the main heading of a section
-/// @param {String} $align [$prototype-bar-align] - Bar Alignment
-/// @param {Number} $height [$prototype-bar-height] - Width
-/// @param {Number} $width [$prototype-bar-width] - Height
-/// @param {Color} $background [$prototype-bar-background] - Background
-/// @param {Number} $top [$prototype-bar-margin-top] - Margin Top
-@mixin bar (
- $align: $prototype-bar-align,
- $height: $prototype-bar-height,
- $width: $prototype-bar-width,
- $background: $prototype-bar-background,
- $top: $prototype-bar-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-bar {
- .bar-center {
- @include bar(center);
- }
- .bar-left {
- @include bar(left);
- }
- .bar-right {
- @include bar(right);
- }
-
- @if ($prototype-bar-breakpoints) {
- // Loop through Responsive Breakpoints
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- @if $size != $-zf-zero-breakpoint {
- .#{$size}-bar-center {
- @include bar(center);
- }
- .#{$size}-bar-left {
- @include bar(left);
- }
- .#{$size}-bar-right {
- @include bar(right);
- }
- }
- }
- }
- }
-}
@import 'shadow';
// Title Bar Utility
-@import 'bar';
+@import 'titlebar';
// Overflow helper classes
@import 'overflow';
@include foundation-prototype-rounded;
@include foundation-prototype-bordered;
@include foundation-prototype-shadow;
- @include foundation-prototype-bar;
+ @include foundation-prototype-titlebar;
@include foundation-prototype-overflow;
@include foundation-prototype-display;
@include foundation-prototype-position;
--- /dev/null
+// 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);
+ }
+ }
+ }
+ }
+ }
+}