.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 .py-2; a { @apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent; &:hover, &.router-link-exact-active { @apply .border-grey-light .bg-grey-lightest; border-left: 1px solid transparent; border-right: 1px solid transparent; } &.router-link-exact-active + a:hover { border-top: 1px solid transparent; } } }