Left align the submenu of the dropdown - `flex-start`

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 38f00ceea4b73d93ac88afe66505e0f0ecf85dcd..7b0dd2bc03b74d38ec3f494a23fefd363a8853fc 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -105,6 +105,10 @@ $menu-item-background-hover: $light-gray !default;
       li {
         display: flex;
         justify-content: flex-end;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
       }
     }
     @else {
@@ -120,6 +124,10 @@ $menu-item-background-hover: $light-gray !default;
       li {
         display: flex;
         justify-content: center;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
       }
     }
     @else {

diff --git a/test/visual/menu/all-menus-flex.html b/test/visual/menu/all-menus-flex.html
index 250f29ef1de02caeae5bafc3e9cf6f60756c18b9..09a6056b6c594aa066b39b53f92420840294eb25 100644 (file)
--- a/test/visual/menu/all-menus-flex.html
+++ b/test/visual/menu/all-menus-flex.html
@@ -253,6 +253,42 @@
         </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 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 Center</h3>
+      <div class="example">
+        <ul class="menu align-center dropdown" data-dropdown-menu>
+          <li><a href="#">One</a></li>
+          <li>
+            <a href="#">Two</a>
+            <ul class="menu 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>

diff --git a/test/visual/menu/all-menus.html b/test/visual/menu/all-menus.html
index eda07d33903dd275c52441e16d9d9e73e7e8b9ec..41eb82b8aabc7bcc94401cc1332f42613ca919f3 100644 (file)
--- a/test/visual/menu/all-menus.html
+++ b/test/visual/menu/all-menus.html
@@ -247,6 +247,42 @@
         </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 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 Center</h3>
+      <div class="example">
+        <ul class="menu align-center dropdown" data-dropdown-menu>
+          <li><a href="#">One</a></li>
+          <li>
+            <a href="#">Two</a>
+            <ul class="menu 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>