From b1511f75163fc383d8775011d0a6dd74b559c8d3 Mon Sep 17 00:00:00 2001 From: harry Date: Sat, 3 Jun 2017 23:42:17 +0530 Subject: [PATCH] Prototypes - Add Arrow Utilty --- docs/pages/prototyping-utilities.md | 21 ++++++++++++++++- scss/prototype/_arrow.scss | 36 +++++++++++++++++++++++++++++ scss/prototype/_prototype.scss | 4 ++++ test/visual/prototype/arrow.html | 28 ++++++++++++++++++++++ 4 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 scss/prototype/_arrow.scss create mode 100644 test/visual/prototype/arrow.html diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md index a385306a4..896567536 100644 --- a/docs/pages/prototyping-utilities.md +++ b/docs/pages/prototyping-utilities.md @@ -65,7 +65,8 @@ You can instead import only the specific utility classes that you need. To make @include foundation-prototype-rounded; @include foundation-prototype-bordered; @include foundation-prototype-shadow; -@include foundation-prototype-titlebar; +@include foundation-prototype-arrow; +@include foundation-prototype-separator; @include foundation-prototype-overflow; @include foundation-prototype-display; @include foundation-prototype-position; @@ -212,6 +213,24 @@ These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used indepen --- +## Arrow Utility + +Mostly used as dropdown arrows for navigation. + +```html +
+
+
+
+``` + +
+
+
+
+ +--- + ## Separator This creates a tiny separator below the heading of an element and is usually used within the heading of a section. diff --git a/scss/prototype/_arrow.scss b/scss/prototype/_arrow.scss new file mode 100644 index 000000000..3ba57c28b --- /dev/null +++ b/scss/prototype/_arrow.scss @@ -0,0 +1,36 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group prototype-arrow +//// + +/// Map containing all the `arrow` direction +/// @type Map +$prototype-arrow-directions: ( + down, + up, + right, + left +) !default; + +/// Width of the Arrow, `0.4375rem` by default. +/// @type Number +$prototype-arrow-size: 0.4375rem; + +/// Color of the Arrow, `$black` by default. +/// @type Color +$prototype-arrow-color: $black; + +@mixin foundation-prototype-arrow { + @each $prototype-arrow-direction in $prototype-arrow-directions { + .arrow-#{$prototype-arrow-direction} { + @include css-triangle( + $prototype-arrow-size, + $prototype-arrow-color, + $prototype-arrow-direction + ); + } + } +} diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss index e6f37b772..2ca0bed99 100644 --- a/scss/prototype/_prototype.scss +++ b/scss/prototype/_prototype.scss @@ -42,6 +42,9 @@ // Shadow Utility @import 'shadow'; +// Arrow Utility +@import 'arrow'; + // Separator Utility @import 'separator'; @@ -76,6 +79,7 @@ @include foundation-prototype-rounded; @include foundation-prototype-bordered; @include foundation-prototype-shadow; + @include foundation-prototype-arrow; @include foundation-prototype-separator; @include foundation-prototype-overflow; @include foundation-prototype-display; diff --git a/test/visual/prototype/arrow.html b/test/visual/prototype/arrow.html new file mode 100644 index 000000000..f5a3e34d8 --- /dev/null +++ b/test/visual/prototype/arrow.html @@ -0,0 +1,28 @@ + + + + + + + Foundation for Sites Testing + + + + +
+
+

Arrow

+
+
+
+
+
+
+ + + + + + -- 2.47.3