From 329277989a9eebe5382c026033f1d0c76400ae8a Mon Sep 17 00:00:00 2001 From: harry Date: Sun, 12 Mar 2017 02:19:50 +0530 Subject: [PATCH] Title Bar Utility: Renamed the whole codebase to `titlebar` from `bar` --- docs/pages/prototyping.md | 16 +++--- scss/prototype/_bar.scss | 94 ---------------------------------- scss/prototype/_prototype.scss | 4 +- scss/prototype/_titlebar.scss | 94 ++++++++++++++++++++++++++++++++++ 4 files changed, 104 insertions(+), 104 deletions(-) delete mode 100644 scss/prototype/_bar.scss create mode 100644 scss/prototype/_titlebar.scss diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index a8a29309b..4da2e4b5f 100644 --- a/docs/pages/prototyping.md +++ b/docs/pages/prototyping.md @@ -198,28 +198,28 @@ These `.rounded`, `.bordered` & `.shadow` classes can be used independently or t ## 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.
- 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.
```html -

Lorem

-

Ipsum Dolor

-

Tempor

+

Lorem

+

Ipsum Dolor

+

Tempor

```
-

Lorem

+

Lorem

-

Ipsum Dolor

+

Ipsum Dolor

-

Tempor

+

Tempor

diff --git a/scss/prototype/_bar.scss b/scss/prototype/_bar.scss deleted file mode 100644 index 57f4ccf7c..000000000 --- a/scss/prototype/_bar.scss +++ /dev/null @@ -1,94 +0,0 @@ -// 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); - } - } - } - } - } -} diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss index b6b4ac15c..6d08e9144 100644 --- a/scss/prototype/_prototype.scss +++ b/scss/prototype/_prototype.scss @@ -40,7 +40,7 @@ @import 'shadow'; // Title Bar Utility -@import 'bar'; +@import 'titlebar'; // Overflow helper classes @import 'overflow'; @@ -70,7 +70,7 @@ @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; diff --git a/scss/prototype/_titlebar.scss b/scss/prototype/_titlebar.scss new file mode 100644 index 000000000..512a6f2ff --- /dev/null +++ b/scss/prototype/_titlebar.scss @@ -0,0 +1,94 @@ +// 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); + } + } + } + } + } +} -- 2.47.2