cartodb/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add menu component

Browse Source
This commit is contained in:
Emilio García 2016-01-25 15:12:32 +01:00
parent b14cf93fca
commit 31c75b057f
1 changed files with 128 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
src/scss/cdb-components/menu.scss
View File

@ -8,129 +8,148 @@
``` ```
<nav class="CDB-NavMenu"> <nav class="CDB-NavMenu">
<ul class="CDB-NavMenu-Inner"> <ul class="CDB-NavMenu-Inner">
<li class="CDB-NavMenu-item"><a href="#">Layers</a></li> <li class="CDB-NavMenu-Item Text is-semibold Size-medium u-rSpace--m u-iBlock">
<li class="CDB-NavMenu-item"><a href="#">Layers</a></li> <a class="CDB-NavMenu-Link" href="#">DATA</a>
<li class="CDB-NavMenu-item"><a href="#">Layers</a></li> </li>
<li class="CDB-NavMenu-Item Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">STYLE</a>
</li>
<li class="CDB-NavMenu-Item is-active Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">POP-UP</a>
<ul class="CDB-NavSubmenu">
<li class="CDB-NavSubmenu-Item Text is-semibold Size-small u-rSpace--m u-iBlock is-active">
<a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
</li>
<li class="CDB-NavSubmenu-Item Text is-semibold Size-small u-rSpace--m u-iBlock">
<a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
</li>
</ul>
</li>
<li class="CDB-NavMenu-Item Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">LEGEND</a>
</li>
</ul> </ul>
<div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
<!-- ready for a button -->
</div>
</nav> </nav>
<br/><br/>
<br/><br/>
<div style="background: #2E3C43; height: 100px; padding: 20px;">
<nav class="CDB-NavMenu is-dark">
<ul class="CDB-NavMenu-Inner">
<li class="CDB-NavMenu-Item Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">DATA</a>
</li>
<li class="CDB-NavMenu-Item Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">STYLE</a>
</li>
<li class="CDB-NavMenu-item is-active Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">POP-UP</a>
<ul class="CDB-NavSubmenu">
<li class="CDB-NavSubmenu-Item Text is-semibold Size-small u-rSpace--m u-iBlock is-active">
<a href="#" class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></a>
</li>
<li class="CDB-NavSubmenu-Item Text is-semibold Size-small u-rSpace--m u-iBlock">
<a href="#" class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></a>
</li>
</ul>
</li>
<li class="CDB-NavMenu-Item Text is-semibold Size-medium u-rSpace--m u-iBlock">
<a class="CDB-NavMenu-Link" href="#">LEGEND</a>
</li>
</ul>
</nav>
</div>
<br/><br/>
<br/><br/>
``` ```
*/ */
@import '../cdb-variables/colors'; @import '../cdb-variables/colors';
.box { .CDB-NavMenu {
width: 120px; position: relative;
height: 64px;
display: inline-block;
margin: 0 24px 24px 0;
} }
.Color-Blue { .CDB-NavMenu-Inner {
background: $cBlue; position: relative;
} margin-bottom: 18px;
.Color-White { border-bottom: 1px solid $cMainLine;
background: $cWhite;
border: 1px solid #e5e5e5;
}
.Color-Dark {
background: $cBlack;
} }
.Color-MainDark { .CDB-NavMenu-Link {
background: $cMainDark; display: block;
margin-bottom: -1px;
padding: 4px 0 11px;
border-bottom: 1px solid transparent;
} }
.Color-SecondaryDark {
background: $cSecondaryDark; .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link {
border-bottom: 1px solid $cMainDark;
color: $cMainDark;
} }
.Color-SecondaryBackground {
background: $cSecondaryBackground; .CDB-NavSubmenu {
position: absolute;
right: 0;
left: 0;
padding-top: 14px;
border-bottom: 1px solid $cSecondaryLine;
} }
.Color-ThirdBackground {
background: $cThirdBackground; .CDB-NavSubmenu-Link {
} display: block;
margin-bottom: -1px;
padding-bottom: 12px;
/* SG border-bottom: 1px solid transparent;
# Colors/line }
.CDB-NavSubmenu-item.is-active {
``` .CDB-NavSubmenu-Link {
<div class="box Color-Blue"></div> border-bottom: 1px solid $cTypo3;
<div class="box Color-HoverLine"></div> color: $cMainDark;
<div class="box Color-MainLine"></div> }
<div class="box Color-SecondaryLine"></div> }
```
*/ .CDB-NavSubmenu-Status {
margin-left: 2px;
color: $cTypo4;
.Color-HoverLine { }
background: $cHoverLine;
} .CDB-Navmenu.is-dark {
.Color-MainLine {
background: $cMainLine; .CDB-NavMenu-Inner,
} .CDB-NavSubmenu {
.Color-SecondaryLine { border-bottom: 1px solid $cTypo2;
background: $cSecondaryLine; }
}
.CDB-NavMenu-Link,
.CDB-NavSubmenu-Link {
/* SG color: $cTypo3;
# Colors/typography }
.CDB-NavMenu-Item.is-active {
``` .CDB-NavMenu-Link {
<div class="box Color-MainDark"></div> border-bottom: 1px solid $cMainLine;
<div class="box Color-Type02"></div> color: $cWhite;
<div class="box Color-Type03"></div> }
<div class="box Color-Type04"></div> }
<div class="box Color-White"></div>
<div class="box Color-Blue"></div> .CDB-NavSubmenu-item.is-active {
``` .CDB-NavSubmenu-Link {
*/ border-bottom: 1px solid $cMainLine;
color: $cWhite;
}
.Color-Type02 { }
background: $cTypo2;
} .CDB-NavSubmenu-Status {
.Color-Type03 { color: $cTypo2;
background: $cTypo3; }
}
.Color-Type04 {
background: $cTypo4;
}
/* SG
# Colors/other
```
<div class="box Color-Higlight"></div>
<div class="box Color-Alert"></div>
<div class="box Color-Public"></div>
<div class="box Color-Link"></div>
<div class="box Color-Password"></div>
<div class="box Color-Error"></div>
```
*/
.Color-Higlight {
background: $cHighlight;
}
.Color-Alert {
background: $cAlert;
}
.Color-Public {
background: $cPublic;
}
.Color-Link {
background: $cLink;
}
.Color-Password {
background: $cPassword;
}
.Color-Error {
background: $cError;
} }