add menu editor

src/scss/cdb-components/menu.scss

@@ -2,7 +2,7 @@
 // ----------------------------------------------
 
 /* SG
-# Menu/
+# Menu/Navigation
 
 
 ```
@@ -71,6 +71,7 @@
 */
 
 @import '../cdb-variables/colors';
+@import '../cdb-variables/sizes';
 
 .CDB-NavMenu {
   position: relative;
@@ -155,3 +156,101 @@
 }
 
 
+/* SG
+# Menu/Editor
+
+
+```
+<div class="CDB-MenuEditor">
+  <div class="CDB-MenuEditor-logo">
+    <i class="CDB-IconFont CDB-IconFont-cartoFante u-actionTextColor"></i>
+  </div>
+  <nav>
+    <ul class="CDB-MenuEditor-navigation">
+      <li class="CDB-MenuEditor-navigationItem is-selected">
+        <a href="#" class="CDB-MenuEditor-navigationLink">
+          <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
+        </a>
+      </li>
+      <li class="CDB-MenuEditor-navigationItem">
+        <a href="#" class="CDB-MenuEditor-navigationLink">
+          <i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
+        </a>
+      </li>
+      <li class="CDB-MenuEditor-navigationItem">
+        <a href="#" class="CDB-MenuEditor-navigationLink">
+          <i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
+        </a>
+      </li>
+      <li class="CDB-MenuEditor-navigationItem">
+        <a href="#" class="CDB-MenuEditor-navigationLink">
+          <i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <a href="http://piensaenpixel.cartodb.com" class="CDB-AvatarEditor">
+    <img src="https://s3.amazonaws.com/com.cartodb.users-assets.production/production/piensaenpixel/assets/20150507074635Captura%20de%20pantalla%202015-05-07%20a%20la%28s%29%2009.46.28.png" class="CDB-AvatarEditor-img">
+  </a>
+</div>
+```
+*/
+
+.CDB-MenuEditor {
+  position: relative;
+  width: 72px;
+  min-height: 450px;
+  box-sizing: border-box;
+  padding: $baseSize * 2 0;
+  background: $cBlue;
+  box-shadow: 4px 0 $baseSize * 2 rgba(0, 0, 0, 0.05);
+}
+
+.CDB-MenuEditor-navigationItem {
+  padding: 12px $baseSize * 2 12px $baseSize + 6;
+  border-left: 2px solid transparent;
+  text-align: center;
+
+  &.is-selected {
+    border-left: 2px solid #FFF;
+    .CDB-MenuEditor-navigationLink {
+      opacity: 1;
+    }
+  }
+}
+
+.CDB-MenuEditor-navigationLink {
+  display: block;
+  height: 24px;
+  color: #FFF;
+  font-size: 24px;
+  opacity: 0.32;
+}
+.CDB-MenuEditor-navigationLink:hover {
+  opacity: 1;
+}
+
+.CDB-MenuEditor-logo {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto $baseSize * 2;
+  padding: $baseSize - 2 0;
+  border-radius: $baseSize / 2;
+  background: #FFF;
+  box-sizing: border-box;
+  font-size: $baseSize * 3;
+  text-align: center;
+}
+
+.CDB-AvatarEditor {
+  position: absolute;
+  bottom: $baseSize * 2;
+  left: $baseSize * 2;
+  width: 40px;
+  height: 40px;
+}
+.CDB-AvatarEditor-img {
+  width: 100%;
+  border-radius: $baseSize / 2;
+}
+