misc_pterodactyl-panel/resources/styles/components/navigation.css
2019-12-22 21:22:08 -08:00

69 lines
1.8 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;
/*! purgecss start ignore */
&.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');
}
/*! purgecss end ignore */
}
}
}
#sub-navigation {
@apply .w-full .bg-neutral-700 .shadow;
.items {
@apply .flex .items-center .text-sm .mx-auto .px-2;
max-width: 1200px;
/*! purgecss start ignore */
& > 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');
}
}
/*! purgecss end ignore */
}
}