.nav { @apply .bg-blue; height: 48px; & > .logo { @apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2; & a { color: inherit; text-decoration: none; } @screen xsx { @apply .hidden } } & > .menu { & > ul { @apply .list-reset; & > li { @apply .inline-block; & > a { @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm; padding: 15px; &:hover { @apply .bg-blue-dark; } } } } @screen xsx { @apply .w-full .text-center; } @screen sm { @apply .float-right .mx-8 .inline-block; } } } .sidenav { @apply .mb-2; a { @apply .block .py-3 .px-8 .text-grey-darkest .no-underline; &:hover { @apply .border-r-4 .border-blue-lightest; } &.router-link-exact-active { @apply .text-blue .border-r-4 .border-blue; } } }