/
memo.less
121 lines (94 loc) · 3.14 KB
/
memo.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
.memo-wrapper {
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-600 hover:border-gray-200 dark:hover:border-zinc-600;
&.pinned {
@apply border-gray-200 border-2 dark:border-zinc-600;
}
&.archived {
@apply border-gray-200 dark:border-zinc-600;
}
> .corner-container {
@apply absolute top-0 right-0 z-1;
&::after {
@apply rounded-tr-md absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600;
content: "";
border-width: 6px;
}
}
> .memo-top-wrapper {
@apply flex flex-row justify-between items-center w-full h-6 mb-1;
> .status-text-container {
@apply flex flex-row justify-start items-center;
> .time-text {
@apply text-xs text-gray-400;
font-size: 13px;
}
> .status-text {
@apply text-xs cursor-pointer ml-2 rounded border px-1;
&.public {
@apply border-green-600 text-green-600;
}
&.protected {
@apply border-gray-400 text-gray-400;
}
}
}
> .time-text {
@apply text-xs text-gray-400 cursor-pointer;
}
> .btns-container {
@apply flex flex-row justify-end items-center relative flex-shrink-0;
> .more-action-btns-wrapper {
@apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
> .more-action-btns-container {
@apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .btns-container {
@apply w-full flex flex-row justify-around items-center border-b border-gray-100 dark:border-zinc-600 p-1 mb-1;
> .btn {
@apply relative w-6 h-6 p-1 text-gray-600 dark:text-gray-300 cursor-pointer select-none;
&:hover > .tip-text {
@apply block;
}
> .icon-img {
@apply w-5 h-auto;
}
> .tip-text {
@apply hidden absolute top-0 p-1 px-2 rounded text-xs leading-6 -mt-9 bg-black text-white shadow opacity-70;
}
}
}
> .btn {
@apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer dark:text-gray-300;
&.archive-btn {
@apply text-orange-600;
}
}
}
}
.btn {
@apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;
&.more-action-btn {
@apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
> .icon-img {
@apply w-4 h-auto dark:text-gray-300;
}
&:hover {
& + .more-action-btns-wrapper {
display: flex;
}
}
}
}
}
}
> .memo-content-wrapper {
> .memo-content-text {
.tag-span {
@apply cursor-pointer hover:opacity-80;
}
.img {
@apply max-w-xs;
}
}
}
}