Add `grid-container` class in flex pages for better styling!

author harry <harmanmanchanda182@gmail.com>

Thu, 22 Jun 2017 08:56:28 +0000 (14:26 +0530)

committer harry <harmanmanchanda182@gmail.com>

Thu, 22 Jun 2017 08:56:28 +0000 (14:26 +0530)
author harry <harmanmanchanda182@gmail.com>
Thu, 22 Jun 2017 08:56:28 +0000 (14:26 +0530)
committer harry <harmanmanchanda182@gmail.com>
Thu, 22 Jun 2017 08:56:28 +0000 (14:26 +0530)
diff --git a/test/visual/menu/active-menu-flex.html b/test/visual/menu/active-menu-flex.html

index 41a3d3c9c9408b0bda9e8779be8b78ce35e135dc..8d4ceea2d53e6df3074c8d8def0ca8cbffe1a484 100644 (file)
--- a/test/visual/menu/active-menu-flex.html
+++ b/test/visual/menu/active-menu-flex.html
@@ -37,17 +37,19 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Active Menu</h1>
-
-        <div class="example">
-          <ul class="menu">
-            <li><a href="#">One</a></li>
-            <li class="is-active"><a href="#">Two (.active)</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Active Menu</h1>
+
+          <div class="example">
+            <ul class="menu">
+              <li><a href="#">One</a></li>
+              <li class="is-active"><a href="#">Two (.active)</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/advanced-nested-menu-flex.html b/test/visual/menu/advanced-nested-menu-flex.html

index 7fa495e0f37b211e19eb001e9a44f0d4f1e654ed..90d591f782396808a73d2c519f9b7b7392bfe887 100644 (file)
--- a/test/visual/menu/advanced-nested-menu-flex.html
+++ b/test/visual/menu/advanced-nested-menu-flex.html
@@ -34,103 +34,105 @@
      </style>
    </head>
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Advanced Nested Menu's</h1>
-        <h3>Nested Form within Accordion Menu</h3>
-        <div class="example" style="max-width: 450px">
-          <ul class="menu vertical accordion-menu" data-accordion-menu>
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li>
-              <a href="#">Form</a>
-              <ul class="menu nested vertical">
-                <li>
-                  <div class="card">
-                    <div class="card-section">
-                      <label> Your Name
-                        <input type="text" placeholder="Enter your Cool Name">
-                      </label>
-                      <select>
-                        <option value="husker">Husker</option>
-                        <option value="starbuck">Starbuck</option>
-                        <option value="hotdog">Hot Dog</option>
-                        <option value="apollo">Apollo</option>
-                      </select>
-                      <button class="button">Submit</button>
-                      <p><a href="#">Learn More</a>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Advanced Nested Menu's</h1>
+          <h3>Nested Form within Accordion Menu</h3>
+          <div class="example" style="max-width: 450px">
+            <ul class="menu vertical accordion-menu" data-accordion-menu>
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li>
+                <a href="#">Form</a>
+                <ul class="menu nested vertical">
+                  <li>
+                    <div class="card">
+                      <div class="card-section">
+                        <label> Your Name
+                          <input type="text" placeholder="Enter your Cool Name">
+                        </label>
+                        <select>
+                          <option value="husker">Husker</option>
+                          <option value="starbuck">Starbuck</option>
+                          <option value="hotdog">Hot Dog</option>
+                          <option value="apollo">Apollo</option>
+                        </select>
+                        <button class="button">Submit</button>
+                        <p><a href="#">Learn More</a>
+                      </div>
                      </div>
-                  </div>
-                </li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Nested Form within Dropdown Menu</h3>
-        <div class="example" style="max-width: 450px">
-          <ul class="menu vertical dropdown" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li>
-              <a href="#">Form</a>
-              <ul class="menu nested vertical">
-                <li>
-                  <div class="card">
-                    <div class="card-section">
-                      <label> Your Name
-                        <input type="text" placeholder="Enter your Cool Name">
-                      </label>
-                      <select>
-                        <option value="husker">Husker</option>
-                        <option value="starbuck">Starbuck</option>
-                        <option value="hotdog">Hot Dog</option>
-                        <option value="apollo">Apollo</option>
-                      </select>
-                      <button class="button">Submit</button>
-                      <p><a href="#">Learn More</a>
+          <h3>Nested Form within Dropdown Menu</h3>
+          <div class="example" style="max-width: 450px">
+            <ul class="menu vertical dropdown" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li>
+                <a href="#">Form</a>
+                <ul class="menu nested vertical">
+                  <li>
+                    <div class="card">
+                      <div class="card-section">
+                        <label> Your Name
+                          <input type="text" placeholder="Enter your Cool Name">
+                        </label>
+                        <select>
+                          <option value="husker">Husker</option>
+                          <option value="starbuck">Starbuck</option>
+                          <option value="hotdog">Hot Dog</option>
+                          <option value="apollo">Apollo</option>
+                        </select>
+                        <button class="button">Submit</button>
+                        <p><a href="#">Learn More</a>
+                      </div>
                      </div>
-                  </div>
-                </li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Nested Form within Drilldown Menu</h3>
-        <div class="example" style="max-width: 450px">
-          <ul class="menu vertical drilldown" data-drilldown>
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li>
-              <a href="#">Form</a>
-              <ul class="menu nested vertical">
-                <li>
-                  <div class="card">
-                    <div class="card-section">
-                      <label> Your Name
-                        <input type="text" placeholder="Enter your Cool Name">
-                      </label>
-                      <select>
-                        <option value="husker">Husker</option>
-                        <option value="starbuck">Starbuck</option>
-                        <option value="hotdog">Hot Dog</option>
-                        <option value="apollo">Apollo</option>
-                      </select>
-                      <button class="button">Submit</button>
-                      <p><a href="#">Learn More</a>
+          <h3>Nested Form within Drilldown Menu</h3>
+          <div class="example" style="max-width: 450px">
+            <ul class="menu vertical drilldown" data-drilldown>
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li>
+                <a href="#">Form</a>
+                <ul class="menu nested vertical">
+                  <li>
+                    <div class="card">
+                      <div class="card-section">
+                        <label> Your Name
+                          <input type="text" placeholder="Enter your Cool Name">
+                        </label>
+                        <select>
+                          <option value="husker">Husker</option>
+                          <option value="starbuck">Starbuck</option>
+                          <option value="hotdog">Hot Dog</option>
+                          <option value="apollo">Apollo</option>
+                        </select>
+                        <button class="button">Submit</button>
+                        <p><a href="#">Learn More</a>
+                      </div>
                      </div>
-                  </div>
-                </li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/all-menus-flex.html b/test/visual/menu/all-menus-flex.html

index f208391e269a952a0caf22f52a5d3a0e9980e22e..c1aa5061dd008c78ccc822fdeb8d077705c9708d 100644 (file)
--- a/test/visual/menu/all-menus-flex.html
+++ b/test/visual/menu/all-menus-flex.html
@@ -37,370 +37,372 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Basic Menus</h1>
-
-        <h3>Default Menu</h3>
-        <div class="example">
-          <ul class="menu">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Horizontal Menu</h3>
-        <div class="example">
-          <ul class="menu horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Vertical Menu</h3>
-        <div class="example">
-          <ul class="menu vertical">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Vertical, Horizontal, Vertical Menu</h3>
-        <div class="example">
-          <ul class="menu vertical medium-horizontal large-vertical">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Horizontal, Vertical, Horizontal Menu</h3>
-        <div class="example">
-          <ul class="menu horizontal medium-vertical large-horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h1>Basic Menu Styles</h1>
-
-        <h3>Nested Menu</h3>
-        <div class="example">
-          <ul class="menu vertical">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Nested Menu - Align Right</h3>
-        <div class="example">
-          <ul class="menu vertical align-right">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Basic Menus</h1>
+
+          <h3>Default Menu</h3>
+          <div class="example">
+            <ul class="menu">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Horizontal Menu</h3>
+          <div class="example">
+            <ul class="menu horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Vertical Menu</h3>
+          <div class="example">
+            <ul class="menu vertical">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Vertical, Horizontal, Vertical Menu</h3>
+          <div class="example">
+            <ul class="menu vertical medium-horizontal large-vertical">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Horizontal, Vertical, Horizontal Menu</h3>
+          <div class="example">
+            <ul class="menu horizontal medium-vertical large-horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h1>Basic Menu Styles</h1>
+
+          <h3>Nested Menu</h3>
+          <div class="example">
+            <ul class="menu vertical">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Nested Menu - Align Right</h3>
+          <div class="example">
+            <ul class="menu vertical align-right">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Simple Menu</h3>
+          <div class="example">
+            <ul class="menu simple">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Expanded Menu</h3>
+          <div class="example">
+            <ul class="menu expanded">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Menu Text</h3>
+          <div class="example">
+            <ul class="menu simple">
+              <li class="menu-text">Site Title</li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </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>Menu with input, select and buttons</h3>
+          <div class="example">
+            <ul class="menu horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+              <li>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </li>
+              <li><input type="text" placeholder="Text input"></li>
+              <li><button class="button">button (native)</button></li>
+              <li><a class="button" href="#">button</a></li>
+            </ul>
+          </div>
+
+          <h3>Active Menu Item Class</h3>
+          <div class="example">
+            <ul class="menu">
+              <li><a href="#">One</a></li>
+              <li class="active"><a href="#">Two (.active)</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h1>Menu Alignment Classes</h1>
+
+          <h3>Right Aligned Menu</h3>
+          <div class="example">
+            <ul class="menu align-right">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Centered Menu</h3>
+          <div class="example">
+            <ul class="menu align-center">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h1>Menu Plugin Styles</h1>
+
+          <h3>Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu dropdown" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Vertical Dropdown Menu</h3>
+          <div class="example">
+            <ul class="vertical menu dropdown" data-dropdown-menu style="max-width: 250px">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Dropdown Menu - Align Right</h3>
+          <div class="example">
+            <ul class="menu align-right dropdown" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Accordion Menu</h3>
+          <div class="example">
+            <ul class="menu vertical accordion-menu" data-accordion-menu style="max-width: 250px">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Drilldown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical drilldown" data-drilldown style="max-width: 250px">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h1>Responsive Menus</h1>
+
+          <h3>Accordion to Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Drilldown to Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Drilldown to Accordion to Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Simple Menu</h3>
-        <div class="example">
-          <ul class="menu simple">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
          </div>
-
-        <h3>Expanded Menu</h3>
-        <div class="example">
-          <ul class="menu expanded">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Menu Text</h3>
-        <div class="example">
-          <ul class="menu simple">
-            <li class="menu-text">Site Title</li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </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>Menu with input, select and buttons</h3>
-        <div class="example">
-          <ul class="menu horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-            <li>
-              <select>
-                <option value="husker">Husker</option>
-                <option value="starbuck">Starbuck</option>
-                <option value="hotdog">Hot Dog</option>
-                <option value="apollo">Apollo</option>
-              </select>
-            </li>
-            <li><input type="text" placeholder="Text input"></li>
-            <li><button class="button">button (native)</button></li>
-            <li><a class="button" href="#">button</a></li>
-          </ul>
-        </div>
-
-        <h3>Active Menu Item Class</h3>
-        <div class="example">
-          <ul class="menu">
-            <li><a href="#">One</a></li>
-            <li class="active"><a href="#">Two (.active)</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h1>Menu Alignment Classes</h1>
-
-        <h3>Right Aligned Menu</h3>
-        <div class="example">
-          <ul class="menu align-right">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Centered Menu</h3>
-        <div class="example">
-          <ul class="menu align-center">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h1>Menu Plugin Styles</h1>
-
-        <h3>Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu dropdown" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Vertical Dropdown Menu</h3>
-        <div class="example">
-          <ul class="vertical menu dropdown" data-dropdown-menu style="max-width: 250px">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Dropdown Menu - Align Right</h3>
-        <div class="example">
-          <ul class="menu align-right dropdown" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Accordion Menu</h3>
-        <div class="example">
-          <ul class="menu vertical accordion-menu" data-accordion-menu style="max-width: 250px">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Drilldown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical drilldown" data-drilldown style="max-width: 250px">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h1>Responsive Menus</h1>
-
-        <h3>Accordion to Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Drilldown to Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
-        <h3>Drilldown to Accordion to Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
-
        </div>
      </div>
  
diff --git a/test/visual/menu/basic-menu-flex.html b/test/visual/menu/basic-menu-flex.html

index 927d72f38135eb6f844ba9fb82d700762699b4e6..2bc7de9a294bb7a6cc1e83aac7f2e41861d0f369 100644 (file)
--- a/test/visual/menu/basic-menu-flex.html
+++ b/test/visual/menu/basic-menu-flex.html
@@ -37,38 +37,40 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Basic Menus</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Basic Menus</h1>
  
-        <h3>Default Menu</h3>
-        <div class="example">
-          <ul class="menu">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Default Menu</h3>
+          <div class="example">
+            <ul class="menu">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Horizontal Menu</h3>
-        <div class="example">
-          <ul class="menu horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Horizontal Menu</h3>
+          <div class="example">
+            <ul class="menu horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Vertical Menu</h3>
-        <div class="example">
-          <ul class="menu vertical">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Vertical Menu</h3>
+          <div class="example">
+            <ul class="menu vertical">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/expanded-menu-flex.html b/test/visual/menu/expanded-menu-flex.html

index 32bc57610756b0b5facc9d9edeb175b5b8b3214e..6274161646fe102b24badeddb7d1e83e31d2011a 100644 (file)
--- a/test/visual/menu/expanded-menu-flex.html
+++ b/test/visual/menu/expanded-menu-flex.html
@@ -37,17 +37,19 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Expanded Menu</h1>
-
-        <div class="example">
-          <ul class="menu expanded">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Expanded Menu</h1>
+
+          <div class="example">
+            <ul class="menu expanded">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/horizontal-dropdownmenu-alignment-flex.html b/test/visual/menu/horizontal-dropdownmenu-alignment-flex.html

index 77d03b6a977ffe383cd81c890e21e2a9ad0d8b72..87661a03998054108b9c5ea3197fffc3a8b73dd3 100644 (file)
--- a/test/visual/menu/horizontal-dropdownmenu-alignment-flex.html
+++ b/test/visual/menu/horizontal-dropdownmenu-alignment-flex.html
@@ -37,44 +37,46 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Horizontal Dropdown Menu Alignment</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Horizontal Dropdown Menu Alignment</h1>
  
-        <h3>Left Aligned Dropdown Menu (Default) - Horizontal</h3>
-        <div class="example">
-          <ul class="horizontal menu dropdown" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu horizontal nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Left Aligned Dropdown Menu (Default) - Horizontal</h3>
+          <div class="example">
+            <ul class="horizontal menu dropdown" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu horizontal nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Right Aligned Dropdown Menu - Horizontal</h3>
-        <div class="example float-right">
-          <ul class="horizontal menu dropdown align-right" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu horizontal nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Right Aligned Dropdown Menu - Horizontal</h3>
+          <div class="example float-right">
+            <ul class="horizontal menu dropdown align-right" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu horizontal nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/horizontal-menu-alignment-flex.html b/test/visual/menu/horizontal-menu-alignment-flex.html

index 0a12d95dd7632e3ecce16e2d9dcebd0f344c6f48..3754f75e21fbf78cfc2e69bfe096ddf2b863551c 100644 (file)
--- a/test/visual/menu/horizontal-menu-alignment-flex.html
+++ b/test/visual/menu/horizontal-menu-alignment-flex.html
@@ -37,42 +37,44 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Horizontal Menu Alignment</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Horizontal Menu Alignment</h1>
  
-        <div class="primary callout">
-          <p>This example test case also works without adding <code>horizontal</code> class as horizontal is the default. But we have added <code>horizontal</code> in the below examples.</p>
-        </div>
+          <div class="primary callout">
+            <p>This example test case also works without adding <code>horizontal</code> class as horizontal is the default. But we have added <code>horizontal</code> in the below examples.</p>
+          </div>
  
-        <h3>Left Aligned Menu (Default) - Horizontal</h3>
-        <div class="example">
-          <ul class="menu horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Left Aligned Menu (Default) - Horizontal</h3>
+          <div class="example">
+            <ul class="menu horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Right Aligned Menu - Horizontal</h3>
-        <div class="example">
-          <ul class="menu horizontal align-right">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Right Aligned Menu - Horizontal</h3>
+          <div class="example">
+            <ul class="menu horizontal align-right">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Centered Menu - Horizontal</h3>
-        <div class="example">
-          <ul class="menu horizontal align-center">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Centered Menu - Horizontal</h3>
+          <div class="example">
+            <ul class="menu horizontal align-center">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/menu-form-flex.html b/test/visual/menu/menu-form-flex.html

index 1b40c2c37d86c41fc8a58810996aa404597e3667..8317b3d6265fcce576fc3258b28284acef3f0879 100644 (file)
--- a/test/visual/menu/menu-form-flex.html
+++ b/test/visual/menu/menu-form-flex.html
@@ -37,28 +37,30 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Menu with Form(input, select and buttons)</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Menu with Form(input, select and buttons)</h1>
  
-        <div class="example">
-          <ul class="menu horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-            <li>
-              <select>
-                <option value="husker">Husker</option>
-                <option value="starbuck">Starbuck</option>
-                <option value="hotdog">Hot Dog</option>
-                <option value="apollo">Apollo</option>
-              </select>
-            </li>
-            <li><input type="text" placeholder="Text input"></li>
-            <li><button class="button">button (native)</button></li>
-            <li><a class="button" href="#">button</a></li>
-          </ul>
+          <div class="example">
+            <ul class="menu horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+              <li>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </li>
+              <li><input type="text" placeholder="Text input"></li>
+              <li><button class="button">button (native)</button></li>
+              <li><a class="button" href="#">button</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/menu-icons-flex.html b/test/visual/menu/menu-icons-flex.html

index 219ef0feb2ae461c51d1d87beb438d39318dbfa7..bda67346adcac94e3278271a9fefa6bc6aba27a3 100644 (file)
--- a/test/visual/menu/menu-icons-flex.html
+++ b/test/visual/menu/menu-icons-flex.html
@@ -37,48 +37,50 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Menu with Icons</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Menu with Icons</h1>
  
-        <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 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 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 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>
+          <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>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/menu-text-flex.html b/test/visual/menu/menu-text-flex.html

index 991908fa91f2023551a2de8dd30cd7e45b062136..059fe0231e21c7833a8aee116a2ffe8cc0bce63d 100644 (file)
--- a/test/visual/menu/menu-text-flex.html
+++ b/test/visual/menu/menu-text-flex.html
@@ -37,17 +37,19 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Menu Text</h1>
-
-        <div class="example">
-          <ul class="menu simple">
-            <li class="menu-text">Site Title</li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Menu Text</h1>
+
+          <div class="example">
+            <ul class="menu simple">
+              <li class="menu-text">Site Title</li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/nested-menu-flex.html b/test/visual/menu/nested-menu-flex.html

index 2f89a1b40a08600e33c3c828f11006872c5c5f5d..b02b69af53df3dd76fa1ab867c4edd5f1a7cc230 100644 (file)
--- a/test/visual/menu/nested-menu-flex.html
+++ b/test/visual/menu/nested-menu-flex.html
@@ -37,43 +37,45 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Nested Menu</h1>
-        <h3>Nested Menu  - Align Left (Default)</h3>
-        <div class="example">
-          <ul class="menu vertical">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Nested Menu</h1>
+          <h3>Nested Menu  - Align Left (Default)</h3>
+          <div class="example">
+            <ul class="menu vertical">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Nested Menu - Align Right</h3>
-        <div class="example">
-          <ul class="menu vertical align-right">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Nested Menu - Align Right</h3>
+          <div class="example">
+            <ul class="menu vertical align-right">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/responsive-menu-flex.html b/test/visual/menu/responsive-menu-flex.html

index 6b12328cc21a06f20e16628568dbee706e170f42..08fe8122a54dc0599e92c79405f41e8719394dce 100644 (file)
--- a/test/visual/menu/responsive-menu-flex.html
+++ b/test/visual/menu/responsive-menu-flex.html
@@ -37,82 +37,84 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Responsive Menus</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Responsive Menus</h1>
  
-        <h3>Vertical, Horizontal, Vertical Menu</h3>
-        <div class="example">
-          <ul class="menu vertical medium-horizontal large-vertical">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Vertical, Horizontal, Vertical Menu</h3>
+          <div class="example">
+            <ul class="menu vertical medium-horizontal large-vertical">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Horizontal, Vertical, Horizontal Menu</h3>
-        <div class="example">
-          <ul class="menu horizontal medium-vertical large-horizontal">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Horizontal, Vertical, Horizontal Menu</h3>
+          <div class="example">
+            <ul class="menu horizontal medium-vertical large-horizontal">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Accordion to Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Accordion to Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Drilldown to Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Drilldown to Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Drilldown to Accordion to Dropdown Menu</h3>
-        <div class="example">
-          <ul class="menu vertical large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu nested vertical">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Drilldown to Accordion to Dropdown Menu</h3>
+          <div class="example">
+            <ul class="menu vertical large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu nested vertical">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/simple-menu-flex.html b/test/visual/menu/simple-menu-flex.html

index 25cf10cf3fdb1dc5080d5816933506b2c5d800c7..f1270d6f2205b040ab9776593d9b844a75710be6 100644 (file)
--- a/test/visual/menu/simple-menu-flex.html
+++ b/test/visual/menu/simple-menu-flex.html
@@ -37,17 +37,19 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Simple Menu</h1>
-
-        <div class="example">
-          <ul class="menu simple">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Simple Menu</h1>
+
+          <div class="example">
+            <ul class="menu simple">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/vertical-accordionmenu-alignment-flex.html b/test/visual/menu/vertical-accordionmenu-alignment-flex.html

index 9f5ad45d887b2c40120a86afa6cea0fa651e7ae2..cfece7e68f87bbe4afa5413bd47182bfae3c60b4 100644 (file)
--- a/test/visual/menu/vertical-accordionmenu-alignment-flex.html
+++ b/test/visual/menu/vertical-accordionmenu-alignment-flex.html
@@ -37,44 +37,46 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Vertical Accordion Menu Alignment</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Vertical Accordion Menu Alignment</h1>
  
-        <h3>Left Aligned Accordion Menu (Default) - Vertical</h3>
-        <div class="example" style="max-width: 250px">
-          <ul class="vertical menu accordion-menu" data-accordion-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Left Aligned Accordion Menu (Default) - Vertical</h3>
+          <div class="example" style="max-width: 250px">
+            <ul class="vertical menu accordion-menu" data-accordion-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Right Aligned Accordion Menu - Vertical</h3>
-        <div class="example float-right" style="max-width: 250px">
-          <ul class="vertical menu accordion-menu align-right" data-accordion-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Right Aligned Accordion Menu - Vertical</h3>
+          <div class="example float-right" style="max-width: 250px">
+            <ul class="vertical menu accordion-menu align-right" data-accordion-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/vertical-drilldownmenu-alignment-flex.html b/test/visual/menu/vertical-drilldownmenu-alignment-flex.html

index 6ff0d9faa34410fa49559230194009bae54cd561..a0cf9267245425d34e42dd7e2c0e934cd5ab3e77 100644 (file)
--- a/test/visual/menu/vertical-drilldownmenu-alignment-flex.html
+++ b/test/visual/menu/vertical-drilldownmenu-alignment-flex.html
@@ -37,44 +37,46 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Vertical Accordion Menu Alignment</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Vertical Accordion Menu Alignment</h1>
  
-        <h3>Left Aligned Drilldown Menu (Default) - Vertical</h3>
-        <div class="example" style="max-width: 250px">
-          <ul class="vertical menu drilldown" data-drilldown>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Left Aligned Drilldown Menu (Default) - Vertical</h3>
+          <div class="example" style="max-width: 250px">
+            <ul class="vertical menu drilldown" data-drilldown>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Right Aligned Drilldown Menu - Vertical</h3>
-        <div class="example float-right" style="max-width: 250px">
-          <ul class="vertical menu drilldown align-right" data-drilldown>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Right Aligned Drilldown Menu - Vertical</h3>
+          <div class="example float-right" style="max-width: 250px">
+            <ul class="vertical menu drilldown align-right" data-drilldown>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/vertical-dropdownmenu-alignment-flex.html b/test/visual/menu/vertical-dropdownmenu-alignment-flex.html

index 1c8120d18d51261b93fc4f5499370706aa89df03..f6633c79eb357ab9ed8001ac792be92621293469 100644 (file)
--- a/test/visual/menu/vertical-dropdownmenu-alignment-flex.html
+++ b/test/visual/menu/vertical-dropdownmenu-alignment-flex.html
@@ -37,44 +37,46 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Vertical Dropdown Menu Alignment</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Vertical Dropdown Menu Alignment</h1>
  
-        <h3>Left Aligned Dropdown Menu (Default) - Vertical</h3>
-        <div class="example" style="max-width: 250px">
-          <ul class="vertical menu dropdown" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Left Aligned Dropdown Menu (Default) - Vertical</h3>
+          <div class="example" style="max-width: 250px">
+            <ul class="vertical menu dropdown" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Right Aligned Dropdown Menu - Vertical</h3>
-        <div class="example float-right" style="max-width: 250px">
-          <ul class="vertical menu dropdown align-right" data-dropdown-menu>
-            <li><a href="#">One</a></li>
-            <li>
-              <a href="#">Two</a>
-              <ul class="menu vertical nested">
-                <li><a href="#">Two A</a></li>
-                <li><a href="#">Two B</a></li>
-                <li><a href="#">Two C</a></li>
-                <li><a href="#">Two D</a></li>
-              </ul>
-            </li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Right Aligned Dropdown Menu - Vertical</h3>
+          <div class="example float-right" style="max-width: 250px">
+            <ul class="vertical menu dropdown align-right" data-dropdown-menu>
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
diff --git a/test/visual/menu/vertical-menu-alignment-flex.html b/test/visual/menu/vertical-menu-alignment-flex.html

index 32c2421be2953cb9244fd3b237ec6028a75bafc2..e35b2c186144556068a36a7c27dc9e9bc5c2fa17 100644 (file)
--- a/test/visual/menu/vertical-menu-alignment-flex.html
+++ b/test/visual/menu/vertical-menu-alignment-flex.html
@@ -37,38 +37,40 @@
    </head>
  
    <body>
-    <div class="grid-x grid-padding-x">
-      <div class="cell">
-        <h1>Vertical Menu Alignment</h1>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Vertical Menu Alignment</h1>
  
-        <h3>Left Aligned Menu (Default) - Vertical</h3>
-        <div class="example">
-          <ul class="menu vertical">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Left Aligned Menu (Default) - Vertical</h3>
+          <div class="example">
+            <ul class="menu vertical">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Right Aligned Menu - Vertical</h3>
-        <div class="example">
-          <ul class="menu vertical align-right">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
-        </div>
+          <h3>Right Aligned Menu - Vertical</h3>
+          <div class="example">
+            <ul class="menu vertical align-right">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
  
-        <h3>Centered Menu - Vertical</h3>
-        <div class="example">
-          <ul class="menu vertical align-center">
-            <li><a href="#">One</a></li>
-            <li><a href="#">Two</a></li>
-            <li><a href="#">Three</a></li>
-            <li><a href="#">Four</a></li>
-          </ul>
+          <h3>Centered Menu - Vertical</h3>
+          <div class="example">
+            <ul class="menu vertical align-center">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
          </div>
        </div>
      </div>
author	harry <harmanmanchanda182@gmail.com>
	Thu, 22 Jun 2017 08:56:28 +0000 (14:26 +0530)
committer	harry <harmanmanchanda182@gmail.com>
	Thu, 22 Jun 2017 08:56:28 +0000 (14:26 +0530)
test/visual/menu/active-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/advanced-nested-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/all-menus-flex.html		patch \| blob \| blame \| history
test/visual/menu/basic-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/expanded-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/horizontal-dropdownmenu-alignment-flex.html		patch \| blob \| blame \| history
test/visual/menu/horizontal-menu-alignment-flex.html		patch \| blob \| blame \| history
test/visual/menu/menu-form-flex.html		patch \| blob \| blame \| history
test/visual/menu/menu-icons-flex.html		patch \| blob \| blame \| history
test/visual/menu/menu-text-flex.html		patch \| blob \| blame \| history
test/visual/menu/nested-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/responsive-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/simple-menu-flex.html		patch \| blob \| blame \| history
test/visual/menu/vertical-accordionmenu-alignment-flex.html		patch \| blob \| blame \| history
test/visual/menu/vertical-drilldownmenu-alignment-flex.html		patch \| blob \| blame \| history
test/visual/menu/vertical-dropdownmenu-alignment-flex.html		patch \| blob \| blame \| history
test/visual/menu/vertical-menu-alignment-flex.html		patch \| blob \| blame \| history