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

93 lines
2.2 KiB
CSS
Raw Normal View History

.nav {
2018-09-12 03:08:01 +00:00
@apply .bg-blue .border-b .border-t .border-blue-darkest;
height: 56px;
& > .logo {
2018-09-12 03:08:01 +00:00
@apply .mx-8 .font-sans .font-thin .text-3xl .text-white .inline-block .pt-2;
& a {
color: inherit;
text-decoration: none;
}
@screen xsx {
2018-09-12 04:25:02 +00:00
@apply .hidden;
}
}
& > .search-box {
& > .search-input {
@apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
2018-09-12 04:25:02 +00:00
width: 26rem;
opacity: 0.7;
transition: ease-in-out opacity 150ms;
&:focus {
@apply .border-blue-darkest;
opacity: 1;
}
&.has-search-results {
@apply .border-b-0 .rounded-b-none;
opacity: 1 !important;
}
}
& .search-results {
@apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50;
width: 26rem;
2018-09-12 04:32:01 +00:00
& a {
2018-09-12 04:25:02 +00:00
@apply .block .no-underline .p-2 .rounded;
&:hover {
@apply .bg-grey-lighter;
}
}
}
}
& > .menu {
& > ul {
@apply .list-reset;
& > li {
@apply .inline-block;
& > a {
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
&:hover {
@apply .bg-blue-dark;
}
}
}
}
@screen xsx {
@apply .w-full .text-center;
}
@screen sm {
2018-09-12 04:25:02 +00:00
@apply .float-right .mr-8 .inline-block;
}
}
2018-06-03 06:31:30 +00:00
}
.sidenav {
2018-08-04 04:30:06 +00:00
@apply .py-2;
a {
2018-08-04 04:30:06 +00:00
@apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
2018-08-04 04:30:06 +00:00
&:hover, &.router-link-exact-active {
@apply .border-grey-light .bg-grey-lightest;
2018-08-04 04:30:06 +00:00
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
&.router-link-exact-active + a:hover {
border-top: 1px solid transparent;
}
}
}