Cleanup more filemanager design
This commit is contained in:
		
							parent
							
								
									caca6cff8a
								
							
						
					
					
						commit
						8385ec7feb
					
				| @ -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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 Dane Everitt
						Dane Everitt