CartoAssets/src/scss/cdb-components/menu.scss

// Menu styles
// ----------------------------------------------

/* SG
# Menu/Navigation


```
<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>
      <ul class="CDB-NavSubmenu 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>
        <li class="CDB-NavSubmenu-Item">
          <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
        </li>
      </ul>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">LEGEND</button>
    </li>
  </ul>
  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
    <!-- ready for a button -->
  </div>
</nav>

<br/><br/>
<br/><br/>

<div style="background: #2E3C43; height: 100px; padding: 20px;">
  <nav class="CDB-NavMenu is-dark">
    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
      <li class="CDB-NavMenu-Item CDB-Text">
        <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>
        <ul class="CDB-NavSubmenu 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>
          <li class="CDB-NavSubmenu-Item">
            <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button>
          </li>
        </ul>
      </li>
      <li class="CDB-NavMenu-Item">
        <button class="CDB-NavMenu-Link">LEGEND</button>
      </li>
    </ul>
  </nav>
</div>

<br/><br/>
<br/><br/>

```
*/

@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';

.CDB-NavMenu {
  position: relative;
}

.CDB-NavMenu-Inner {
  position: relative;
  margin-bottom: 18px;
  border-bottom: 1px solid $cMainLine;
}

.CDB-NavMenu-Link {
  display: block;
  margin-bottom: -1px;
  padding: 4px 0 11px;
  border-bottom: 1px solid transparent;
  color: $cBlue;
}

.CDB-NavMenu-Item,
.CDB-NavSubmenu-Item {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
  border-bottom: 1px solid $cBlack;
  color: $cMainText;
}

.CDB-NavSubmenu {
  position: absolute;
  right: 0;
  left: 0;
  padding-top: 14px;
  border-bottom: 1px solid $cSecondaryLine;
}

.CDB-NavSubmenu-Link {
  display: block;
  margin-bottom: -1px;
  padding-bottom: 12px;
  border-bottom: 1px solid transparent;
  color: $cBlue;
}

.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
  border-bottom: 1px solid $cMainLine;
  color: $cMainText;
}

.CDB-NavSubmenu-Status {
  margin-left: 2px;
}

.CDB-Navmenu.is-dark {

  .CDB-NavMenu-Inner,
  .CDB-NavSubmenu {
    border-bottom: 1px solid $cSecondaryText;
  }

  .CDB-NavMenu-Link,
  .CDB-NavSubmenu-Link {
    color: $cAltText;
  }

  .CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
    border-bottom: 1px solid $cMainLine;
    color: $cWhite;
  }

  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
    border-bottom: 1px solid $cMainLine;
    color: $cWhite;
  }

  .CDB-NavSubmenu-Status {
    color: $cSecondaryText;
  }
}


/* 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 CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
      <li class="CDB-MenuEditor-navigationItem">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-view CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
      <li class="CDB-MenuEditor-navigationItem">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-odyssey CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
      <li class="CDB-MenuEditor-navigationItem">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-settings CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
    </ul>
  </nav>
  <a href="http://piensaenpixel.cartodb.com" class="CDB-MenuEditor-avatar">
    <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-MenuEditor-avatarImage">
  </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;
}
.CDB-MenuEditor-navigationItem.is-selected {
  border-left: 2px solid #FFF;
}
.CDB-MenuEditor-navigationItem.is-selected .CDB-MenuEditor-navigationIcon {
  opacity: 1;
}

.CDB-MenuEditor-navigationLink {
  display: block;
}
.CDB-MenuEditor-navigationIcon {
  color: #FFF;
  font-size: 24px;
  line-height: 24px;
  opacity: 0.32;
}
.CDB-MenuEditor-navigationLink:hover .CDB-MenuEditor-navigationIcon {
  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-MenuEditor-avatar {
  position: absolute;
  bottom: $baseSize * 2;
  left: $baseSize * 2;
  width: 40px;
  height: 40px;
}
.CDB-MenuEditor-avatarImage {
  width: 100%;
  border-radius: $baseSize / 2;
}