]> 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: eb6b0fb)
Add menu icon styles - still needs refining. Added some examples to the visual test.
authorBrett Mason <brettsmason@gmail.com>
Tue, 31 Jan 2017 11:32:49 +0000 (11:32 +0000)
committerBrett Mason <brettsmason@gmail.com>
Tue, 31 Jan 2017 11:32:49 +0000 (11:32 +0000)
scss/components/_menu.scss patch | blob | blame | history
test/visual/menu/all-menus.html patch | blob | blame | history

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 076538714f8cfbf774cf49235ed5640f4ef5b1d0..e2c6a87e29e75d5b2934d146724a7ea61844e7e0 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -192,6 +192,112 @@ $menu-item-background-hover: $light-gray !default;
   margin-#{$global-left}: $margin;
 }
 
+/// Adds basic styles for icons in menus.
+@mixin menu-icons() {
+  @if $global-flexbox {
+    a {
+      display: flex;
+    }
+  }
+  @else {
+    img,
+    i,
+    svg {
+      vertical-align: middle;
+
+      + span {
+        vertical-align: middle;
+      }
+    }
+  }
+}
+
+/// Adds position classes for icons within a menu.
+@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
+  @if $position == left {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-right}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  @else if $position == right {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-left}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  @else if $position == top {
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $spacing;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+  @else if $position == bottom {
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: $spacing auto 0;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
 @mixin foundation-menu {
   .menu {
     @include menu-base;
@@ -236,6 +342,31 @@ $menu-item-background-hover: $light-gray !default;
       @include menu-nested;
     }
 
+    // Icon Base Styles
+    &.icons {
+      @include menu-icons;
+    }
+
+    // Icon Left
+    &.icon-left {
+      @include menu-icon-position(left);
+    }
+
+    // Icon Right
+    &.icon-right {
+      @include menu-icon-position(right);
+    }
+
+    // Icon Top
+    &.icon-top {
+      @include menu-icon-position(top);
+    }
+
+    // Icon Bottom
+    &.icon-bottom {
+      @include menu-icon-position(bottom);
+    }
+
     // Active state
     .active > a {
       background: $menu-item-background-active;
diff --git a/test/visual/menu/all-menus.html b/test/visual/menu/all-menus.html
index 2cfbb6e8cfc15ca6e50cac730f61f00137f0e9f1..14231b71f807add8a7e5a002de371139d9bc012c 100644 (file)
--- a/test/visual/menu/all-menus.html
+++ b/test/visual/menu/all-menus.html
@@ -7,6 +7,7 @@
     <title>All Foundation Menu Options</title>
     <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
     <link href="../assets/css/foundation.css" rel="stylesheet" />
+    <link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
 
     <style>
       h1 {
@@ -28,6 +29,7 @@
       }
     </style>
   </head>
+
   <body>
     <div class="row column">
       <h1>Basic Menus</h1>
@@ -132,6 +134,46 @@
         </ul>
       </div>
 
+      <h3>Menu with Icons left</h3>
+      <div class="example">
+        <ul class="menu icons icon-left">
+          <li><a href="#"><i class="fi-list"></i>One</a></li>
+          <li><a href="#"><i class="fi-list"></i>Two</a></li>
+          <li><a href="#"><i class="fi-list"></i>Three</a></li>
+          <li><a href="#"><i class="fi-list"></i>Four</a></li>
+        </ul>
+      </div>
+
+      <h3>Menu with Icons Right</h3>
+      <div class="example">
+        <ul class="menu icons icon-right">
+          <li><a href="#">One<i class="fi-list"></i></a></li>
+          <li><a href="#">Two<i class="fi-list"></i></a></li>
+          <li><a href="#">Three<i class="fi-list"></i></a></li>
+          <li><a href="#">Four<i class="fi-list"></i></a></li>
+        </ul>
+      </div>
+
+      <h3>Menu with Icon Top</h3>
+      <div class="example">
+        <ul class="menu icons icon-top">
+          <li><a href="#"><i class="fi-list"></i>One</a></li>
+          <li><a href="#"><i class="fi-list"></i>Two</a></li>
+          <li><a href="#"><i class="fi-list"></i>Three</a></li>
+          <li><a href="#"><i class="fi-list"></i>Four</a></li>
+        </ul>
+      </div>
+
+      <h3>Menu with Icon Bottom</h3>
+      <div class="example">
+        <ul class="menu icons icon-bottom">
+          <li><a href="#">One<i class="fi-list"></i></a></li>
+          <li><a href="#">Two<i class="fi-list"></i></a></li>
+          <li><a href="#">Three<i class="fi-list"></i></a></li>
+          <li><a href="#">Four<i class="fi-list"></i></a></li>
+        </ul>
+      </div>
+
       <h3>Active Menu Item Class</h3>
       <div class="example">
         <ul class="menu pills">
Mirror of https://github.com/foundation/foundation-sites.git