104 lines
2.5 KiB
CSS
104 lines
2.5 KiB
CSS
.nav {
|
|
@apply .bg-primary-600 .border-b .border-t .border-primary-900;
|
|
height: 56px;
|
|
|
|
& .logo {
|
|
@apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
|
|
|
|
& a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@screen xsx {
|
|
@apply .hidden;
|
|
}
|
|
}
|
|
|
|
& .search-box {
|
|
@apply .mr-2;
|
|
|
|
& > .search-input {
|
|
@apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-800 .bg-neutral-50 .text-neutral-900 .w-96;
|
|
opacity: 0.9;
|
|
transition: ease-in-out opacity 150ms;
|
|
|
|
&:focus {
|
|
@apply .border-primary-900;
|
|
opacity: 1;
|
|
}
|
|
|
|
&.has-search-results {
|
|
@apply .border-b-0 .rounded-b-none;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
& .search-results {
|
|
@apply .absolute .bg-neutral-50 .border .border-primary-900 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
|
|
|
|
& a {
|
|
@apply .block .no-underline .p-2 .rounded;
|
|
|
|
&:hover {
|
|
@apply .bg-neutral-100;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .menu {
|
|
@apply .flex .h-full .items-center;
|
|
|
|
& > a {
|
|
@apply .block .flex .self-stretch .items-center .no-underline .text-neutral-100 .font-light .text-sm .px-5;
|
|
|
|
&:hover {
|
|
@apply .bg-primary-600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidenav {
|
|
ul {
|
|
@apply .list-reset;
|
|
|
|
& li {
|
|
@apply .block;
|
|
|
|
& > a {
|
|
transition: border-left-color 250ms linear, color 250ms linear;
|
|
@apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
|
|
|
|
&:hover, &.router-link-exact-active {
|
|
@apply .text-neutral-800;
|
|
}
|
|
|
|
&.router-link-exact-active {
|
|
@apply .border-primary-500 .cursor-default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
.sidenav {
|
|
@apply .py-2;
|
|
|
|
a {
|
|
@apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;
|
|
|
|
&:hover, &.router-link-exact-active {
|
|
@apply .border-neutral-400 .bg-neutral-50;
|
|
|
|
border-left: 1px solid transparent;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
|
|
&.router-link-exact-active + a:hover {
|
|
border-top: 1px solid transparent;
|
|
}
|
|
}
|
|
}
|
|
*/
|