wikijs-fork/client/scss/components/nav.scss
2017-05-26 23:01:32 -04:00

173 lines
2.6 KiB
SCSS

.nav {
align-items: stretch;
background-color: mc($primary, '500');
display: flex;
min-height: 50px;
position: relative;
text-align: center;
box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2);
z-index: 2;
color: #FFF;
@each $color, $colorvalue in $material-colors {
&.is-#{$color} {
background-color: mc($color, '500');
box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2);
.nav-item {
.button {
border: 1px solid mc($color, '900');
background-color: mc($color, '800');
&.is-outlined {
background-color: mc($color, '600');
border-color: mc($color, '800');
color: mc($color, '100');
}
&:hover {
border-color: mc($color, '900');
background-color: mc($color, '900');
}
}
}
}
}
}
.nav-left {
align-items: stretch;
display: flex;
flex-basis: 0;
flex-grow: 1;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.nav-center {
align-items: stretch;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.nav-right {
@include tablet {
align-items: stretch;
display: flex;
flex-basis: 0;
flex-grow: 1;
justify-content: flex-end;
}
.nav-item {
align-items: stretch;
padding: 0 0 0 10px;
}
}
.nav-item {
align-items: center;
display: flex;
justify-content: center;
padding: 0 10px;
// LINKS
@at-root .nav-item a, a.nav-item {
color: mc($primary, '50');
transition: color .4s ease;
cursor: pointer;
&:hover {
color: mc($primary, '200');
text-decoration: none;
}
}
// LOGO
img {
max-height: 34px;
}
// HEADERS
h1 {
font-size: 16px;
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: color .4s ease;
color: #FFF;
padding-left: 10px;
i {
margin-right: 8px;
}
&:hover {
color: mc('indigo', '100');
}
}
@at-root h2.nav-item, .nav-item h2 {
color: mc($primary, '50');
}
// BUTTONS
.button {
border: none;
background-color: mc($primary, '600');
transition: all .4s ease;
color: #FFF;
border-radius: 0;
height: auto;
&.is-outlined {
background-color: mc($primary, '500');
color: mc($primary, '100');
}
&:hover {
background-color: mc($primary, '700');
color: #FFF;
}
}
// INPUTS
.control {
input[type=text] {
background-color: mc($primary, '800');
border-color: mc($primary, '400');
color: mc($primary, '50');
&:focus {
border-color: mc($primary, '200');
box-shadow: inset 0 0 5px 0 rgba(mc($primary, '900'), 0.5);
}
@include placeholder {
color: mc($primary, '200');
}
}
}
}