StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add basic navigation bar

Browse source
This commit is contained in:
Dane Everitt 2019-06-25 21:28:56 -07:00
parent c7355975ad
commit 9cb8020dbe
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 121 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

133
resources/assets/styles/components/navigation.css
View file

@ -1,117 +1,38 @@
.nav {
@apply .bg-primary-600 .border-b .border-t .border-primary-700;
height: 56px;
#navigation {
@apply .w-full .bg-neutral-900 .shadow-md;
& .logo {
@apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
& a {
color: inherit;
text-decoration: none;
}
@screen xsx {
@apply .hidden;
}
& > div {
@apply .mx-auto .w-full .flex .items-center;
}
& .search-box {
@apply .mr-2;
& > .search-input {
@apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-600 .bg-white .text-neutral-900 .w-96;
transition: border 150ms ease-in;
&:focus {
@apply .border-primary-700;
}
&.has-search-results {
@apply .border-b-0 .rounded-b-none;
}
}
& .search-results {
@apply .absolute .bg-white .border .border-primary-700 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
& a {
@apply .block .no-underline .p-2 .rounded;
&:not(.no-hover):hover {
@apply .bg-neutral-50;
}
}
}
}
& .menu {
@apply .flex .h-full .items-center;
& #logo {
@apply .flex-1;
& > a {
transition: background-color 150ms linear;
@apply .block .flex .self-stretch .items-center .no-underline .text-white .font-light .text-sm .px-5;
@apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
transition: color 150ms linear;
&:hover {
@apply .bg-primary-700;
@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');
}
}
}
}
.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, &.router-link-active {
@apply .text-neutral-800;
}
&.router-link-exact-active, &.router-link-active {
@apply .border-primary-500 .cursor-default;
}
&::-moz-focus-inner {
@apply .border-none;
}
}
/**
* Because of how the router works the first sidebar link is always active
* since that is the container for all of the server things. Override the
* style for active links if its the first one and not an exact route match.
*/
&:first-of-type > a {
&.router-link-active:not(.router-link-exact-active) {
@apply .border-neutral-100 .text-neutral-400 .cursor-pointer;
}
}
}
}
}
/*
.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;
}
}
}
*/