From: harry Date: Tue, 14 Mar 2017 17:16:05 +0000 (+0530) Subject: Renamed (and recoded) titlebar to separator X-Git-Tag: v6.4.0-rc1~23^2~20^2~9 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=76c624d99d93717bac28d2e903738a175a79aa8b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git 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 0cf5fd1f8..8aa5d54fb 100644 --- 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.
- 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.
```html -

Lorem

-

Ipsum Dolor

-

Tempor

+

Lorem

+

Ipsum Dolor

+

Tempor

```
-

Lorem

+

Lorem

-

Ipsum Dolor

+

Ipsum Dolor

-

Tempor

+

Tempor

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss index f282451a2..fc6f7617b 100644 --- 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 index 000000000..af5245a85 --- /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 index 512a6f2ff..000000000 --- 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); - } - } - } - } - } -}