]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Add test for backward compatible feature! 10331/head
authorharry <harmanmanchanda182@gmail.com>
Mon, 3 Jul 2017 19:02:55 +0000 (00:32 +0530)
committerharry <harmanmanchanda182@gmail.com>
Mon, 3 Jul 2017 19:02:55 +0000 (00:32 +0530)
test/visual/menu/menu-icons-flex.html
test/visual/menu/menu-icons-float.html

index 336a1ca966cbd2ccd01410caf3892ebf1bd7b400..b0414dd5aaf5b122152cabbf5854db00496e73a0 100644 (file)
@@ -41,7 +41,7 @@
     <div class="grid-container">
       <div class="grid-x grid-padding-x">
         <div class="cell">
-          <h1>Menu with Icons</h1>
+          <h1>Menu with Icons (with icons class)</h1>
 
           <h3>Menu with Icons left</h3>
           <div class="example">
               <li><a href="#">Four<i class="fi-list"></i></a></li>
             </ul>
           </div>
+
+          <hr>
+
+          <h1>Menu with Icons (without icons class)</h1>
+
+          <h3>Menu with Icons left</h3>
+          <div class="example">
+            <ul class="menu 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 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 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 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>
         </div>
       </div>
     </div>
index 409f571b03ae6e88c14c67c4c99cc276b449f753..63c4f2ede9e8749815c99ef60997b3eda67158f7 100644 (file)
@@ -40,7 +40,7 @@
   <body>
     <div class="row">
       <div class="column">
-        <h1>Menu with Icons</h1>
+        <h1>Menu with Icons (with icons class)</h1>
 
         <h3>Menu with Icons left</h3>
         <div class="example">
             <li><a href="#">Four<i class="fi-list"></i></a></li>
           </ul>
         </div>
+
+        <hr>
+
+        <h1>Menu with Icons (without icons class)</h1>
+
+        <h3>Menu with Icons left</h3>
+        <div class="example">
+          <ul class="menu 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 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 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 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>
       </div>
     </div>