64 lines
1.6 KiB
CSS
64 lines
1.6 KiB
CSS
#navigation {
|
|
@apply .w-full .bg-neutral-900 .shadow-md;
|
|
|
|
& > div {
|
|
@apply .mx-auto .w-full .flex .items-center;
|
|
}
|
|
|
|
& #logo {
|
|
@apply .flex-1;
|
|
|
|
& > a {
|
|
@apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
|
|
transition: color 150ms linear;
|
|
|
|
&:hover {
|
|
@apply .text-neutral-100;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .right-navigation {
|
|
@apply .flex .h-full .items-center .justify-center;
|
|
|
|
& > a {
|
|
@apply .flex .items-center .h-full .no-underline .text-neutral-300 .px-6;
|
|
transition: background-color 150ms linear, color 150ms linear, box-shadow 150ms ease-in;
|
|
|
|
&.active, &:hover {
|
|
@apply .text-neutral-100 .bg-black;
|
|
box-shadow: inset 0 -2px config('colors.cyan-700');
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: inset 0 -2px config('colors.cyan-500');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#sub-navigation {
|
|
@apply .w-full .bg-neutral-700 .shadow;
|
|
|
|
.items {
|
|
@apply .flex .items-center .text-sm .mx-2;
|
|
|
|
& > a, & > div {
|
|
@apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
|
|
transition: color 150ms linear, box-shadow 150ms ease-in;
|
|
|
|
&:not(:first-of-type) {
|
|
@apply .ml-2;
|
|
}
|
|
|
|
&.active, &:hover {
|
|
@apply .text-neutral-100;
|
|
box-shadow: inset 0 -2px config('colors.cyan-700');
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: inset 0 -2px config('colors.cyan-500');
|
|
}
|
|
}
|
|
}
|
|
}
|