FGABreja/static/sass/components/_navbar.scss
nav {
color: $navbar-font-color;
@extend .z-depth-1;
background-color: $primary-color;
width: 100%;
height: $navbar-height-mobile;
line-height: $navbar-height-mobile;
a { color: $navbar-font-color; }
.nav-wrapper {
position: relative;
height: 100%;
i {
display: block;
font-size: 2rem;
}
}
@media #{$large-and-up} {
a.button-collapse { display: none; }
}
// Collapse button
.button-collapse {
float: left;
position: relative;
z-index: 1;
height: $navbar-height-mobile;
i {
font-size: 2.7rem;
height: $navbar-height-mobile;
line-height: $navbar-height-mobile;
}
}
// Logo
.brand-logo {
position: absolute;
color: $navbar-font-color;
display: inline-block;
font-size: $navbar-brand-font-size;
padding: 0;
white-space: nowrap;
&.center {
left: 50%;
@include transform(translateX(-50%));
}
@media #{$medium-and-down} {
left: 50%;
@include transform(translateX(-50%));
&.left, &.right {
padding: 0;
@include transform(none);
}
&.left { left: 0.5rem; }
&.right {
right: 0.5rem;
left: auto;
}
}
&.right {
right: 0.5rem;
padding: 0;
}
}
// Navbar Links
ul {
margin: 0;
li {
@include transition(background-color .3s);
float: left;
padding: 0;
&:hover, &.active {
background-color: rgba(0,0,0,.1);
}
}
a {
font-size: 1rem;
color: $navbar-font-color;
display: block;
padding: 0 15px;
}
&.left {
float: left;
}
}
// Navbar Search Form
.input-field {
margin: 0;
input {
height: 100%;
font-size: 1.2rem;
border: none;
padding-left: 2rem;
&:focus, &[type=text]:valid, &[type=password]:valid,
&[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
border: none;
box-shadow: none;
}
}
label {
top: 0;
left: 0;
i {
color: rgba(255,255,255,.7);
@include transition(color .3s);
}
&.active i { color: $navbar-font-color; }
&.active {
@include transform(translateY(0));
}
}
}
}
// Fixed Navbar
.navbar-fixed {
position: relative;
height: $navbar-height-mobile;
z-index: 998;
nav {
position: fixed;
}
}
@media #{$medium-and-up} {
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
height: $navbar-height;
line-height: $navbar-height;
}
.navbar-fixed {
height: $navbar-height;
}
}