/*===========================================
Top Nav
*/¶ ↑
// *TODO–need to move away from styling `header` element as // main nav for all app screens. The `header` doesn't necessarily // describe site navigation, and there can be multiple `header`s on a page // more on the header element: html5doctor.com/the-header-element/ // *BACKWARDS-INCOMPATIBLE–once we drop the `header` element styles will // not target past apps, the .top-nav class will need to be added .top-nav, header {
width: 100%; background-color: white; border-bottom: 1px solid rgba(0,0,0,0.1); position: relative; min-height: 70px; font-weight: 300; padding: 0px 30px; z-index: 1000; margin-bottom: 5rem; .logo-holder { display: inline-block; float: left; height: 70px; h1.wm-logo-title { background: image-url("wcc/styles/logo-dark.png") no-repeat; background-image: image-url("wcc/styles/logo-dark.svg"), none; background-size: 30px 30px; background-position: 0 50%; font-size: 14px; font-weight: 600; letter-spacing: .3em; padding: 25px 45px; text-transform: uppercase; a { color: $text; &:visited { color: $text; } } } h1.logo { width: 200px; height: 70px; margin: 15px 0 0 0; background: image-url("wcc/styles/logo-dark.png") no-repeat; background-image: image-url("wcc/styles/logo-dark.svg"), none; background-size: 100%; background-repeat: no-repeat; font: 0/0 a; text-shadow: none; color: transparent; a { width: 100%; height: 70px; float: left; color: $text; display: inline; cursor: pointer; } } } .account-block { line-height: 70px; float: right; display: inline; } &.dark-bar { background-color: #393939; color: white; margin: 0; h1.wm-logo-title { background: image-url("wcc/styles/logo.png") no-repeat; background-image: image-url("wcc/styles/logo.svg"), none; background-size: 30px 30px; background-position: 0 50%; font-weight: 600; a { color: white; &:visited { color: white; } } } nav { background-color: #393939; color: white; ul li { border-right: 1px solid rgba(255,255,255,0.1); color: white; a { color: white; } } li a:hover { background-color: black; } li:last-of-type { border-right: 1px solid rgba(0, 0, 0, 0); } } } nav { height: 70px; display: inline-block; ul { margin: 0; padding: 0; font-size: .825em; list-style: none; line-height: 70px; color: $text; float: left; display: inline-block; li { border-right: 1px solid rgba(0,0,0,0.1); margin: 0; height: 70px; display: inline-block; float: left; a { width: 100%; height: 70px; line-height: 70px; color: $text; font-size: 1.25em; font-weight: 400; padding: 0 30px; float: left; &:hover { background-color: $neutral2; } } &:hover ul { position: absolute; width: 200px; margin: 0; margin-top: 70px; background-color: $green; display: list-item !important; } ul { display:none; li { width: 200px; a { width: 200px; float: left; &:hover { background-color: darken($green, 15%); } } } } } &.main { float: left; margin: 0; } } } .search { float: right; position: relative; i { position: absolute; top: 17px; left: 15px; z-index: 10; } input[type="search"] { width: 100%; height: 40px; margin: 5px 0; padding: 0px 15px 0 35px; font-size: 1em; border: none; position: absolute; top: 0; right: 0; z-index: 5; } }
}
@media (max-width: 480px) {
.top-nav, header { padding: 0 10px; nav { height: auto; width: 100%; ul { width: 100%; height: auto; line-height: inherit; li, li a { height: 30px; line-height: 30px; } } } .wm-logo-title { text-indent: -9999px; } .account-block .welcome { display: none; } nav ul li { width: 100%; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.1); &:last-child { border: 0; } a { width: 100%; } } &.dark-bar nav ul li { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); &:last-child { border: 0; } } }
} .page-header {
margin-top: 30px; &.border-bottom { border-bottom: 2px solid $neutral2; padding-bottom: 10px; margin-bottom: 30px; } form.search { display: inline-block; margin: 2px 10px; input[type="search"] { @extend input[type="text"]; padding: 10px; margin: 0; vertical-align: middle; } }
}