Cleanup more filemanager design
This commit is contained in:
parent
caca6cff8a
commit
8385ec7feb
3 changed files with 30 additions and 13 deletions
|
@ -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"/>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue