app/assets/stylesheets/refills/_navigation.css.scss
header.navigation {
$navigation-padding: 1em;
$navigation-background: $dark-gray;
$navigation-color: transparentize(white, 0.3);
$navigation-color-hover: white;
$navigation-nav-button-background: $base-accent-color;
$navigation-nav-button-background-hover: lighten($navigation-background, 10);
$navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
$navigation-search-background: lighten($navigation-background, 5);
$navigation-search-border: 1px solid darken($navigation-background, 5);
$navigation-active-link-color: transparentize(white, 0.5);
$navigation-submenu-padding: 1em;
$navigation-submenu-width: 12em;
$horizontal-bar-mode: $large-screen;
background-color: $navigation-background;
border-bottom: 1px solid darken($navigation-background, 10);
height: $navigation-height;
width: 100%;
z-index: 999;
.navigation-wrapper {
@include clearfix;
@include outer-container;
position: relative;
z-index: 9999;
}
.logo {
float: left;
max-height: $navigation-height;
padding-left: $navigation-padding;
padding-right: 2em;
img {
max-height: $navigation-height;
padding: .8em 0;
}
}
// Mobile view
.navigation-menu-button {
color: $navigation-color;
display: block;
float: right;
font-family: $sans-serif;
font-weight: 700;
line-height: $navigation-height;
margin: 0;
padding-right: 1em;
text-transform: uppercase;
@include media ($horizontal-bar-mode) {
display: none;
}
&:hover {
color: $navigation-color-hover;
}
}
// Nav menu
.nav {
z-index: 9999999;
float: none;
@include media ($horizontal-bar-mode) {
float: left;
}
}
ul#navigation-menu {
-webkit-transform-style: preserve-3d; // stop webkit flicker
clear: both;
display: none;
margin: 0 auto;
overflow: visible;
padding: 0;
width: 100%;
z-index: 9999;
@include media ($horizontal-bar-mode) {
display: inline;
margin: 0;
padding: 0;
}
}
// The nav items
ul li.nav-link {
background: $navigation-background;
display: block;
line-height: $navigation-height;
overflow: hidden;
padding-right: .8em;
text-align: right;
width: 100%;
z-index: 9999;
@include media ($horizontal-bar-mode) {
background: transparent;
display: inline;
line-height: $navigation-height;
text-decoration: none;
width: auto;
}
a {
color: $navigation-color;
display: inline-block;
font-weight: 400;
@include media ($horizontal-bar-mode) {
padding-right: 1em;
}
&:hover {
color: $navigation-color-hover;
}
}
}
.active-nav-item a {
border-bottom: 1px solid $navigation-active-link-color;
padding-bottom: 3px;
}
// Sub menus
li.more.nav-link {
padding-right: 0;
@include media($large-screen) {
padding-right: $navigation-submenu-padding;
}
> ul > li:first-child a {
padding-top: 1em;
}
a {
margin-right: $navigation-submenu-padding;
}
> a {
padding-right: 0.6em;
}
> a:after {
@include position(absolute, auto -.4em auto auto);
content: '\25BE';
color: $navigation-color;
}
}
li.more {
overflow: visible;
padding-right: 0;
a {
padding-right: .8em;
}
> a {
padding-right: 1.6em;
position: relative;
@include media($large-screen) {
margin-right: $navigation-submenu-padding;
}
&:after {
content: '›';
font-size: 1.2em;
position: absolute;
right: $navigation-submenu-padding / 2;
}
}
&:hover > .submenu {
display: block;
}
@include media($horizontal-bar-mode) {
padding-right: .8em;
position: relative;
}
}
ul.submenu {
display: none;
padding-left: 0;
@include media($horizontal-bar-mode) {
left: -$navigation-submenu-padding;
position: absolute;
top: 1.5em;
}
.submenu {
@include media($horizontal-bar-mode) {
left: $navigation-submenu-width - .2em;
top: 0;
}
}
li {
display: block;
padding-right: 0;
@include media($horizontal-bar-mode) {
line-height: $navigation-height / 1.3;
&:first-child > a {
border-top-left-radius: $base-border-radius;
border-top-right-radius: $base-border-radius;
}
&:last-child > a {
border-bottom-left-radius: $base-border-radius;
border-bottom-right-radius: $base-border-radius;
padding-bottom: .7em;
}
}
a {
background-color: darken($navigation-background, 3);
display: inline-block;
text-align: right;
width: 100%;
@include media($horizontal-bar-mode) {
background-color: $navigation-background;
padding-left: $navigation-submenu-padding;
text-align: left;
width: $navigation-submenu-width;
}
}
}
}
// Elements on the far right
.navigation-tools {
@include clearfix;
display: block;
padding-right: $navigation-padding;
padding-left: $navigation-padding/2;
clear: both;
background: #505050;
@include media($large-screen) {
background: transparent;
float: right;
clear: none;
}
}
a.sign-up {
margin-top: 1.2em;
float: right;
@include transition (all 0.2s ease-in-out);
display: inline;
background: $navigation-nav-button-background;
border-radius: $base-border-radius;
color: white;
font-size: .8em;
font-weight: 800;
text-transform: uppercase;
padding: .4em .5em;
@include media($large-screen) {
padding: .5em 1em;
}
&:hover {
background: lighten($navigation-nav-button-background, 10);
}
}
// Search bar
.search-bar {
$search-bar-border-color: $base-border-color;
$search-bar-border: 1px solid $search-bar-border-color;
$search-bar-background: lighten($search-bar-border-color, 10);
padding: .85em .6em;
float: left;
.search-and-submit {
position: relative;
input[type=search] {
background: $navigation-search-background;
border: $navigation-search-border;
padding: .6em .8em;
font-size: .9em;
font-style: italic;
color: $navigation-color;
border-radius: $base-border-radius * 2;
margin: 0;
@include media($large-screen) {
width: 100%;
}
}
button[type=submit] {
@include button(simple, lighten($navigation-search-background, 10));
position: absolute;
top: 0.3em;
right: 0.3em;
bottom: 0.3em;
left: auto;
outline: none;
padding: 0 15px;
img {
height: 12px;
opacity: .7;
}
}
}
@include media($horizontal-bar-mode) {
width: 16em;
position: relative;
display: inline-block;
input {
@include box-sizing(border-box);
display: block;
}
}
}
}