Cleanup more filemanager design

This commit is contained in:
Dane Everitt 2019-02-09 17:26:08 -08:00
parent caca6cff8a
commit 8385ec7feb
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 30 additions and 13 deletions

View file

@ -25,6 +25,12 @@ export default Vue.component('file-context-menu', {
</div>
<div class="action">Copy</div>
</div>
<div class="context-row">
<div class="icon">
<icon name="download" class="h-4"/>
</div>
<div class="action">Download</div>
</div>
</div>
<div>
<div class="context-row">
@ -41,12 +47,6 @@ export default Vue.component('file-context-menu', {
</div>
</div>
<div>
<div class="context-row">
<div class="icon">
<icon name="download" class="h-4"/>
</div>
<div class="action">Download</div>
</div>
<div class="context-row danger">
<div class="icon">
<icon name="delete" class="h-4"/>

View file

@ -31,14 +31,15 @@
}
.context-menu {
@apply .absolute .bg-white .py-2 .border .rounded .text-neutral-800 .text-sm .cursor-pointer;
@apply .absolute .bg-white .py-2 .border .border-neutral-300 .shadow-lg .rounded .text-neutral-600 .text-sm .cursor-pointer;
& > div:not(:last-of-type) {
@apply .border-b .border-neutral-50 .pb-2 .mb-2;
@apply .border-b .border-neutral-100 .pb-2 .mb-2;
}
& .context-row {
@apply .flex .flex-row .items-center .py-2 .px-8 .border-t .border-b .border-transparent;
@apply .flex .flex-row .items-center .py-2 .px-8 .mx-2 .rounded;
transition: background-color 50ms linear;
& > .icon {
@apply .flex-none;
@ -53,11 +54,16 @@
}
&:hover {
@apply .bg-neutral-50 .border-t .border-b .border-neutral-100;
@apply .bg-neutral-50 .text-neutral-800;
}
&.danger:hover {
@apply .bg-red-50 .border-t .border-b .border-red-100;
&.danger {
@apply .border .border-transparent;
transition: border 50ms linear;
&:hover {
@apply .bg-red-50 .border-red-100;
}
}
}

View file

@ -69,7 +69,7 @@
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 {
&:hover, &.router-link-exact-active, &.router-link-active {
@apply .text-neutral-800;
}
@ -77,6 +77,17 @@
@apply .border-primary-500 .cursor-default;
}
}
/**
* 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;
}
}
}
}
}