From 613e9ec17d91073b9828751a273e374626fbf323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Matall=C3=ADn?= <matallo@cartodb.com>
Date: Tue, 19 Apr 2016 16:09:11 +0200
Subject: [PATCH 1/2] subnavbar: separate

---
 src/scss/cdb-components/menu.scss | 85 +++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 4 deletions(-)

diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss
index 2d43f8b..6c5a21c 100644
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -63,6 +63,77 @@
     </ul>
   </nav>
 </div>
+
+<br/><br/>
+<br/><br/>
+
+<div style="height: 200px; padding: 20px;">
+  <nav class="CDB-NavMenu">
+    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium js-menu">
+      <li class="CDB-NavMenu-Item">
+        <button class="CDB-NavMenu-Link u-upperCase">Data</button>
+      </li>
+      <li class="CDB-NavMenu-Item">
+        <button class="CDB-NavMenu-Link u-upperCase">Analyses</button>
+      </li>
+      <li class="CDB-NavMenu-Item">
+        <button class="CDB-NavMenu-Link u-upperCase">Style</button>
+      </li>
+      <li class="CDB-NavMenu-Item is-selected">
+        <button class="CDB-NavMenu-Link u-upperCase">Pop-up</button>
+      </li>
+      <li class="CDB-NavMenu-Item">
+        <button class="CDB-NavMenu-Link u-upperCase">Legend</button>
+      </li>
+    </ul>
+    <div class="Editor-content js-content">
+      <div>
+        <div class="TabPane">
+          <ul class="CDB-NavSubmenu CDB-Text CDB-Size-small is-semibold js-menu">
+            <li class="CDB-NavSubmenu-Item is-selected">
+              <button class="CDB-NavSubmenu-Link u-upperCase">Click</button>
+            </li>
+            <li class="CDB-NavSubmenu-Item">
+              <button class="CDB-NavSubmenu-Link u-upperCase">Hover</button>
+            </li>
+          </ul>
+          <div class="Editor-content js-content">
+            <div>
+              <div>
+                <div class="CDB-HeaderInfo">
+                  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+
+                  <div class="CDB-HeaderInfo-Inner CDB-Text">
+                    <div class="CDB-HeaderInfo-Title u-bSpace--m">
+                      <h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Style</h2>
+                    </div>
+
+                    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">None</p>
+
+                    <select class="CDB-SelectFake js-select">
+                      <option value="white" selected="selected">
+                        white
+                      </option>
+                      <option value="dark">
+                        dark
+                      </option>
+                      <option value="color">
+                        color
+                      </option>
+                      <option value="image">
+                        image
+                      </option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</div>
 ```
 */
 
@@ -99,11 +170,17 @@
   color: $cMainText;
 }
 
+// .CDB-NavSubmenu {
+//   position: absolute;
+//   right: 0;
+//   left: 0;
+//   padding-top: 14px;
+//   border-bottom: 1px solid $cSecondaryLine;
+// }
+
 .CDB-NavSubmenu {
-  position: absolute;
-  right: 0;
-  left: 0;
-  padding-top: 14px;
+  margin-top: -5px;
+  margin-bottom: 18px;
   border-bottom: 1px solid $cSecondaryLine;
 }
 

From 6ed206265757c6d2011d148a08e4719fdc0cabac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Matall=C3=ADn?= <matallo@cartodb.com>
Date: Tue, 19 Apr 2016 16:25:45 +0200
Subject: [PATCH 2/2] submenu: inside/outside

---
 src/scss/cdb-components/menu.scss | 114 ++++++++++--------------------
 1 file changed, 37 insertions(+), 77 deletions(-)

diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss
index 6c5a21c..f695c31 100644
--- a/src/scss/cdb-components/menu.scss
+++ b/src/scss/cdb-components/menu.scss
@@ -16,7 +16,7 @@
     </li>
     <li class="CDB-NavMenu-Item is-selected">
       <button class="CDB-NavMenu-Link">POP-UP</button>
-      <ul class="CDB-NavSubmenu CDB-Size-small">
+      <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
         <li class="CDB-NavSubmenu-Item is-selected">
           <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
         </li>
@@ -48,7 +48,7 @@
       </li>
       <li class="CDB-NavMenu-item is-selected">
         <button class="CDB-NavMenu-Link">POP-UP</button>
-        <ul class="CDB-NavSubmenu CDB-Size-small">
+        <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
           <li class="CDB-NavSubmenu-Item is-selected">
             <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
           </li>
@@ -67,73 +67,31 @@
 <br/><br/>
 <br/><br/>
 
-<div style="height: 200px; padding: 20px;">
-  <nav class="CDB-NavMenu">
-    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium js-menu">
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link u-upperCase">Data</button>
-      </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link u-upperCase">Analyses</button>
-      </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link u-upperCase">Style</button>
-      </li>
-      <li class="CDB-NavMenu-Item is-selected">
-        <button class="CDB-NavMenu-Link u-upperCase">Pop-up</button>
-      </li>
-      <li class="CDB-NavMenu-Item">
-        <button class="CDB-NavMenu-Link u-upperCase">Legend</button>
-      </li>
-    </ul>
-    <div class="Editor-content js-content">
-      <div>
-        <div class="TabPane">
-          <ul class="CDB-NavSubmenu CDB-Text CDB-Size-small is-semibold js-menu">
-            <li class="CDB-NavSubmenu-Item is-selected">
-              <button class="CDB-NavSubmenu-Link u-upperCase">Click</button>
-            </li>
-            <li class="CDB-NavSubmenu-Item">
-              <button class="CDB-NavSubmenu-Link u-upperCase">Hover</button>
-            </li>
-          </ul>
-          <div class="Editor-content js-content">
-            <div>
-              <div>
-                <div class="CDB-HeaderInfo">
-                  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+<nav class="CDB-NavMenu">
+  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
+    <li class="CDB-NavMenu-Item">
+      <button class="CDB-NavMenu-Link">DATA</button>
+    </li>
+    <li class="CDB-NavMenu-Item">
+      <button class="CDB-NavMenu-Link">STYLE</button>
+    </li>
+    <li class="CDB-NavMenu-Item is-selected">
+      <button class="CDB-NavMenu-Link">POP-UP</button>
+    </li>
+    <li class="CDB-NavMenu-Item">
+      <button class="CDB-NavMenu-Link">LEGEND</button>
+    </li>
+  </ul>
 
-                  <div class="CDB-HeaderInfo-Inner CDB-Text">
-                    <div class="CDB-HeaderInfo-Title u-bSpace--m">
-                      <h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Style</h2>
-                    </div>
-
-                    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">None</p>
-
-                    <select class="CDB-SelectFake js-select">
-                      <option value="white" selected="selected">
-                        white
-                      </option>
-                      <option value="dark">
-                        dark
-                      </option>
-                      <option value="color">
-                        color
-                      </option>
-                      <option value="image">
-                        image
-                      </option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-</div>
+  <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
+    <li class="CDB-NavSubmenu-Item is-selected">
+      <button class="CDB-NavSubmenu-Link u-upperCase">Click</button>
+    </li>
+    <li class="CDB-NavSubmenu-Item">
+      <button class="CDB-NavSubmenu-Link u-upperCase">Hover</button>
+    </li>
+  </ul>
+</nav>
 ```
 */
 
@@ -170,18 +128,20 @@
   color: $cMainText;
 }
 
-// .CDB-NavSubmenu {
-//   position: absolute;
-//   right: 0;
-//   left: 0;
-//   padding-top: 14px;
-//   border-bottom: 1px solid $cSecondaryLine;
-// }
-
 .CDB-NavSubmenu {
+  border-bottom: 1px solid $cSecondaryLine;
+}
+
+.CDB-NavSubmenu--inside {
+  position: absolute;
+  right: 0;
+  left: 0;
+  padding-top: 14px;
+}
+
+.CDB-NavSubmenu--outside {
   margin-top: -5px;
   margin-bottom: 18px;
-  border-bottom: 1px solid $cSecondaryLine;
 }
 
 .CDB-NavSubmenu-Link {