misc_pterodactyl-panel/resources/styles/components/navigation.css

65 lines
1.6 KiB
CSS
Raw Normal View History

2019-06-26 04:28:56 +00:00
#navigation {
@apply .w-full .bg-neutral-900 .shadow-md;
2019-06-26 04:28:56 +00:00
& > div {
@apply .mx-auto .w-full .flex .items-center;
}
2019-06-26 04:28:56 +00:00
& #logo {
@apply .flex-1;
& > a {
2019-06-26 04:28:56 +00:00
@apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
transition: color 150ms linear;
&:hover {
2019-06-26 04:28:56 +00:00
@apply .text-neutral-100;
}
}
}
2019-02-04 01:27:19 +00:00
2019-06-26 04:28:56 +00:00
& .right-navigation {
@apply .flex .h-full .items-center .justify-center;
2019-02-04 01:27:19 +00:00
2019-06-26 04:28:56 +00:00
& > 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;
2019-05-27 23:32:27 +00:00
2019-06-26 04:28:56 +00:00
&.active, &:hover {
@apply .text-neutral-100 .bg-black;
box-shadow: inset 0 -2px config('colors.cyan-700');
}
2019-02-10 01:26:08 +00:00
2019-06-26 04:28:56 +00:00
&.active {
box-shadow: inset 0 -2px config('colors.cyan-500');
2019-02-10 01:26:08 +00:00
}
2019-02-04 01:27:19 +00:00
}
}
}
#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');
}
}
}
}