]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Title Bar Utility: Renamed the whole codebase to `titlebar` from `bar`
authorharry <harmanmanchanda182@gmail.com>
Sat, 11 Mar 2017 20:49:50 +0000 (02:19 +0530)
committerharry <harmanmanchanda182@gmail.com>
Sat, 11 Mar 2017 20:49:50 +0000 (02:19 +0530)
docs/pages/prototyping.md
scss/prototype/_bar.scss [deleted file]
scss/prototype/_prototype.scss
scss/prototype/_titlebar.scss [new file with mode: 0644]

index a8a29309bfaea114fb5caa063bdf3ae4b037c802..4da2e4b5fe4513c30a754e2e4eb5520132e3df06 100644 (file)
@@ -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.
 
 <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>
diff --git a/scss/prototype/_bar.scss b/scss/prototype/_bar.scss
deleted file mode 100644 (file)
index 57f4ccf..0000000
+++ /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);
-          }
-        }
-      }
-    }
-  }
-}
index b6b4ac15c85a4f746ab20ae21bc35a3f4a2ec74c..6d08e91449b2e8e15bd1b0c30bcd31ea21dd01a4 100644 (file)
@@ -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 (file)
index 0000000..512a6f2
--- /dev/null
@@ -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);
+          }
+        }
+      }
+    }
+  }
+}