diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-09-30 17:59:05 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-10-01 11:35:11 +0800 |
commit | f4fe9ff6c1ce2811fe9aa0272333b4732a6ebcdc (patch) | |
tree | 6bde54a5c2afe37fb4bea6a00b492e74a0720e16 /src/css | |
parent | 193ba872c455296bff55e5f6a7d6dbbbb85c265e (diff) |
refactor: move menu feature from editor to dumbymap
Diffstat (limited to 'src/css')
-rw-r--r-- | src/css/dumbymap.css | 69 | ||||
-rw-r--r-- | src/css/index.css | 67 |
2 files changed, 68 insertions, 68 deletions
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index f6275ab..822353f 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css | |||
@@ -226,7 +226,7 @@ root { | |||
226 | padding: 0; | 226 | padding: 0; |
227 | 227 | ||
228 | position: relative; | 228 | position: relative; |
229 | overflow-x: auto; | 229 | overflow: visible; |
230 | 230 | ||
231 | &::after { | 231 | &::after { |
232 | content: 'Layout: ' attr(data-layout); | 232 | content: 'Layout: ' attr(data-layout); |
@@ -609,3 +609,70 @@ root { | |||
609 | .bold-options { | 609 | .bold-options { |
610 | font-weight: bold; | 610 | font-weight: bold; |
611 | } | 611 | } |
612 | |||
613 | .menu { | ||
614 | display: none; | ||
615 | width: fit-content; | ||
616 | |||
617 | position: absolute; | ||
618 | z-index: 9999; | ||
619 | |||
620 | border: 2px solid gray; | ||
621 | border-radius: 6px; | ||
622 | |||
623 | background: white; | ||
624 | min-width: 10rem; | ||
625 | max-height: 40vh; | ||
626 | overflow-y: scroll; | ||
627 | } | ||
628 | |||
629 | .menu-item { | ||
630 | display: flex; | ||
631 | box-sizing: border-box; | ||
632 | justify-content: space-between; | ||
633 | padding: 0.5rem; | ||
634 | |||
635 | z-index: 9999; | ||
636 | |||
637 | border: 2px solid transparent; | ||
638 | border-radius: 5px; | ||
639 | |||
640 | cursor: pointer; | ||
641 | text-wrap: nowrap; | ||
642 | |||
643 | &:hover { | ||
644 | background: rgb(226 232 240); | ||
645 | } | ||
646 | |||
647 | .info { | ||
648 | padding-inline: 1em; | ||
649 | |||
650 | color: steelblue; | ||
651 | font-weight: bold; | ||
652 | } | ||
653 | } | ||
654 | |||
655 | .folder::after { | ||
656 | content: '⏵'; | ||
657 | } | ||
658 | |||
659 | .sub-menu { | ||
660 | overflow: scroll; | ||
661 | width: fit-content; | ||
662 | |||
663 | position: absolute; | ||
664 | z-index: 100; | ||
665 | |||
666 | border: 2px solid gray; | ||
667 | border-radius: 6px; | ||
668 | |||
669 | background: white; | ||
670 | min-width: 6rem; | ||
671 | max-height: 40vh; | ||
672 | |||
673 | .menu-item { | ||
674 | margin: 0 auto; | ||
675 | padding-inline: 0.5em; | ||
676 | min-width: 5em; | ||
677 | } | ||
678 | } | ||
diff --git a/src/css/index.css b/src/css/index.css index 069bf85..b13a45d 100644 --- a/src/css/index.css +++ b/src/css/index.css | |||
@@ -104,22 +104,6 @@ body { | |||
104 | } | 104 | } |
105 | } | 105 | } |
106 | 106 | ||
107 | #menu { | ||
108 | display: none; | ||
109 | width: fit-content; | ||
110 | |||
111 | position: absolute; | ||
112 | z-index: 9999; | ||
113 | |||
114 | border: 2px solid gray; | ||
115 | border-radius: 6px; | ||
116 | |||
117 | background: white; | ||
118 | min-width: 10rem; | ||
119 | max-height: 40vh; | ||
120 | overflow-y: scroll; | ||
121 | } | ||
122 | |||
123 | .container__suggestion { | 107 | .container__suggestion { |
124 | display: flex; | 108 | display: flex; |
125 | overflow: hidden; | 109 | overflow: hidden; |
@@ -161,54 +145,3 @@ body { | |||
161 | } | 145 | } |
162 | } | 146 | } |
163 | } | 147 | } |
164 | |||
165 | .menu-item { | ||
166 | display: flex; | ||
167 | box-sizing: border-box; | ||
168 | justify-content: space-between; | ||
169 | padding: 0.5rem; | ||
170 | |||
171 | z-index: 9999; | ||
172 | |||
173 | border: 2px solid transparent; | ||
174 | border-radius: 5px; | ||
175 | |||
176 | cursor: pointer; | ||
177 | text-wrap: nowrap; | ||
178 | |||
179 | &:hover { | ||
180 | background: rgb(226 232 240); | ||
181 | } | ||
182 | |||
183 | .info { | ||
184 | padding-inline: 1em; | ||
185 | |||
186 | color: steelblue; | ||
187 | font-weight: bold; | ||
188 | } | ||
189 | } | ||
190 | |||
191 | .folder::after { | ||
192 | content: '⏵'; | ||
193 | } | ||
194 | |||
195 | .sub-menu { | ||
196 | overflow: scroll; | ||
197 | width: fit-content; | ||
198 | |||
199 | position: absolute; | ||
200 | z-index: 100; | ||
201 | |||
202 | border: 2px solid gray; | ||
203 | border-radius: 6px; | ||
204 | |||
205 | background: white; | ||
206 | min-width: 6rem; | ||
207 | max-height: 40vh; | ||
208 | |||
209 | .menu-item { | ||
210 | margin: 0 auto; | ||
211 | padding-inline: 0.5em; | ||
212 | min-width: 5em; | ||
213 | } | ||
214 | } | ||