.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; transition: background-color 1s ease; /* THEME OVERRIDE - START */ @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 a, a.nav-item { color: mc($color, '50'); &:hover { color: mc($color, '200'); } } h1:hover { color: mc($color, '100'); } .nav-item { .button { background-color: mc($color, '800'); &.is-outlined { background-color: mc($color, '600'); color: mc($color, '100'); } &:hover { background-color: mc($color, '900'); } } } .control { input[type=text] { background-color: mc($color, '800'); border-color: mc($color, '400'); color: mc($color, '50'); &:focus { border-color: mc($color, '200'); box-shadow: inset 0 0 5px 0 rgba(mc($color, '900'), 0.5); } @include placeholder { color: mc($color, '200'); } } } } } /* THEME OVERRIDE - END */ } .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($primary, '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'); } } } }