]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 08726b1)
Prototypes - Add Arrow Utilty
authorharry <harmanmanchanda182@gmail.com>
Sat, 3 Jun 2017 18:12:17 +0000 (23:42 +0530)
committerharry <harmanmanchanda182@gmail.com>
Sat, 3 Jun 2017 18:12:17 +0000 (23:42 +0530)
docs/pages/prototyping-utilities.md patch | blob | blame | history
scss/prototype/_arrow.scss [new file with mode: 0644] patch | blob
scss/prototype/_prototype.scss patch | blob | blame | history
test/visual/prototype/arrow.html [new file with mode: 0644] patch | blob

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index a385306a4989a39a4a121b1d784cfbc5f4ad7a7c..89656753605b7cd1872e448bbc332ba64a9451ef 100644 (file)
--- 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
+<div class="arrow-down"></div>
+<div class="arrow-up"></div>
+<div class="arrow-right"></div>
+<div class="arrow-left"></div>
+```
+
+<div class="arrow-down display-inline-block margin-right-1"></div>
+<div class="arrow-up display-inline-block margin-right-1"></div>
+<div class="arrow-right display-inline-block margin-right-1"></div>
+<div class="arrow-left display-inline-block"></div>
+
+---
+
 ## 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 (file)
index 0000000..3ba57c2
--- /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 e6f37b772c77857908fdc1762e717ac622122d79..2ca0bed9918761ec7cb8b54345fd3e764343a21f 100644 (file)
--- 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 (file)
index 0000000..f5a3e34
--- /dev/null
+++ b/test/visual/prototype/arrow.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Foundation for Sites Testing</title>
+    <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+    <link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="grid padding-gutters">
+      <div class="cell">
+        <h2 class="margin-top-1">Arrow</h2>
+        <div class="arrow-down display-inline-block margin-right-1"></div>
+        <div class="arrow-up display-inline-block margin-right-1"></div>
+        <div class="arrow-right display-inline-block margin-right-1"></div>
+        <div class="arrow-left display-inline-block"></div>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git