mirror of https://github.com/usememos/memos
chore: update style of home sidebar (#1311)
boojack
3 years ago
committed by
GitHub
parent
ccf6af4dc3
commit
3a466ad2a1
@ -1,98 +0,0 @@
|
||||
.shortcuts-wrapper {
|
||||
@apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar;
|
||||
|
||||
> .title-text {
|
||||
@apply flex flex-row justify-start items-center w-full px-4;
|
||||
|
||||
> .normal-text {
|
||||
@apply text-sm leading-6 font-mono text-gray-400;
|
||||
}
|
||||
|
||||
> .btn {
|
||||
@apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-4 text-gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .shortcuts-container {
|
||||
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
|
||||
|
||||
> .shortcut-container {
|
||||
@apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700;
|
||||
|
||||
&:hover {
|
||||
> .btns-container {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .shortcut-text-container {
|
||||
@apply !text-green-600;
|
||||
}
|
||||
}
|
||||
|
||||
> .shortcut-text-container {
|
||||
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200;
|
||||
|
||||
> .icon-text {
|
||||
@apply block w-4 shrink-0;
|
||||
}
|
||||
|
||||
> .shortcut-text {
|
||||
@apply truncate;
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex-row justify-end items-center hidden shrink-0;
|
||||
|
||||
> .action-btn {
|
||||
@apply flex flex-row justify-center items-center;
|
||||
|
||||
&.toggle-btn {
|
||||
@apply text-gray-600 dark:text-gray-400;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& + .action-btns-wrapper {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .action-btns-wrapper {
|
||||
@apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
|
||||
|
||||
> .action-btns-container {
|
||||
@apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
> .btn {
|
||||
@apply w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800;
|
||||
|
||||
&.delete-btn {
|
||||
@apply text-orange-600;
|
||||
|
||||
&.final-confirm {
|
||||
@apply font-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
.tags-wrapper {
|
||||
@apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;
|
||||
|
||||
> .tags-container {
|
||||
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
|
||||
|
||||
.subtags-container {
|
||||
@apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
|
||||
width: calc(100% - 18px);
|
||||
min-width: 80px;
|
||||
|
||||
> .tag-item-container {
|
||||
@apply first:mt-0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-item-container {
|
||||
@apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;
|
||||
|
||||
&.active {
|
||||
> .tag-text-container {
|
||||
@apply !text-green-600;
|
||||
}
|
||||
}
|
||||
|
||||
> .tag-text-container {
|
||||
@apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
|
||||
max-width: calc(100% - 24px);
|
||||
|
||||
> .icon-text {
|
||||
@apply block w-4 shrink-0;
|
||||
}
|
||||
|
||||
> .tag-text {
|
||||
@apply truncate;
|
||||
}
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@apply flex flex-row justify-end items-center;
|
||||
|
||||
> .action-btn {
|
||||
@apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-5 h-5 opacity-80 dark:text-gray-400;
|
||||
}
|
||||
|
||||
&.shown {
|
||||
@apply rotate-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .tip-text {
|
||||
@apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 px-4 py-1 leading-6 rounded text-sm text-gray-400 font-mono;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue