Skip to content

Commit b4f31cb

Browse files
ArgoZhangArgoZhang
committed
style: 调整样式
1 parent ee236ac commit b4f31cb

File tree

1 file changed

+119
-72
lines changed

1 file changed

+119
-72
lines changed

‎src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss‎

Lines changed: 119 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.tree-view {
1+
.tree-view {
22
--bb-tree-padding: #{$bb-tree-padding};
33
--bb-tree-margin: #{$bb-tree-margin};
44
--bb-tree-padding-left: #{$bb-tree-padding-left};
@@ -14,7 +14,6 @@
1414
--bb-tree-disabled-opacity: #{$bb-tree-disabled-opacity};
1515
--bb-tree-search-height: #{$bb-tree-search-height};
1616
--bb-tree-item-bg-radius: var(--bs-border-radius);
17-
--bb-tree-drop-preview-color: #{$bb-primary-color};
1817
position: relative;
1918
height: 100%;
2019
display: flex;
@@ -58,29 +57,6 @@
5857
align-items: center;
5958
border-radius: var(--bs-border-radius);
6059
position: relative;
61-
62-
.tree-drop-zone {
63-
position: absolute;
64-
top: 4px;
65-
left: 20px;
66-
right: 0;
67-
bottom: -12px;
68-
pointer-events: all;
69-
background-color: transparent;
70-
display: grid;
71-
grid-template-rows: 1fr 16px;
72-
73-
.tree-drop-child-inside {
74-
grid-row: 1 / 2;
75-
//background-color: rgba(236, 209, 62, 0.5);
76-
}
77-
78-
.tree-drop-child-below {
79-
grid-row: 2 / 3;
80-
//background-color: rgba(94, 236, 62, 0.5);
81-
}
82-
83-
}
8460
}
8561

8662
.node-icon {
@@ -160,45 +136,28 @@
160136
white-space: nowrap;
161137
}
162138

163-
.tree-preview-child-last {
164-
position: absolute;
165-
top: -2px;
166-
left: -2px;
167-
right: -2px;
168-
bottom: -2px;
169-
border: 2px solid var(--bb-tree-drop-preview-color);
170-
border-radius: 6px;
171-
pointer-events: none;
172-
z-index: 1;
173-
background: transparent;
139+
&.disabled {
140+
opacity: var(--bb-tree-disabled-opacity);
174141
}
175142

176-
.tree-preview-child-first {
143+
.tree-node-toolbar-edit {
177144
position: absolute;
178-
bottom: -4px;
179-
height: 8px;
180-
left: 20px;
181145
right: 0;
146+
height: 100%;
182147
display: flex;
183-
flex-direction: row;
184148
align-items: center;
185-
pointer-events: none;
149+
}
186150

187-
.tree-preview-circle {
188-
width: 8px;
189-
height: 8px;
190-
border-radius: 50%;
191-
background-color: var(--bb-tree-drop-preview-color);
192-
}
151+
&:not(:hover) .tree-node-toolbar-edit {
152+
display: none;
153+
}
193154

194-
.tree-preview-line {
195-
flex: 1;
196-
height: 2px;
197-
background-color: var(--bb-tree-drop-preview-color);
198-
}
155+
&.drag-item {
156+
opacity: 0.5;
157+
background-color: #d4edff;
199158
}
200159

201-
.tree-preview-below {
160+
.tree-node-placeholder {
202161
position: absolute;
203162
bottom: -4px;
204163
height: 8px;
@@ -209,40 +168,32 @@
209168
align-items: center;
210169
pointer-events: none;
211170

212-
.tree-preview-circle {
171+
.tree-node-ph-circle {
213172
width: 8px;
214173
height: 8px;
215174
border-radius: 50%;
216175
background-color: var(--bb-tree-drop-preview-color);
217176
}
218177

219-
.tree-preview-line {
178+
.tree-node-ph-line {
220179
flex: 1;
180+
min-width: 0px;
181+
width: 1%;
221182
height: 2px;
222183
background-color: var(--bb-tree-drop-preview-color);
223184
}
224185
}
225-
226-
&.disabled {
227-
opacity: var(--bb-tree-disabled-opacity);
228-
}
229-
230-
.tree-node-toolbar-edit {
231-
position: absolute;
232-
right: 0;
233-
height: 100%;
234-
display: flex;
235-
align-items: center;
236-
}
237-
238-
&:not(:hover) .tree-node-toolbar-edit {
239-
display: none;
240-
}
241186
}
242187

243188
.tree-drop-pass {
244189
pointer-events: none;
245190
}
191+
192+
&.dragging {
193+
.tree-node:not(.drag-item) {
194+
pointer-events: none;
195+
}
196+
}
246197
}
247198

248199
.tree-view-edit-form {
@@ -260,3 +211,99 @@
260211
}
261212
}
262213
}
214+
215+
.tree-view {
216+
--bb-tree-drop-preview-color: #{$bb-primary-color};
217+
218+
.tree-drop-zone {
219+
position: absolute;
220+
top: 4px;
221+
left: 18px;
222+
right: 0;
223+
bottom: -5px;
224+
background-color: transparent;
225+
display: grid;
226+
grid-template-rows: 1fr 8px;
227+
background-color: #f2747440;
228+
pointer-events: all;
229+
230+
.tree-drop-child-inside {
231+
grid-row: 1 / 2;
232+
background-color: #aad4ff;
233+
234+
&.tree-drag-over {
235+
border: solid 1px var(--bb-tree-drop-preview-color);
236+
border-radius: var(--bs-border-radius);
237+
}
238+
}
239+
240+
.tree-drop-child-below {
241+
grid-row: 2 / 3;
242+
background-color: #f2747440;
243+
}
244+
}
245+
246+
247+
.tree-preview-child-last {
248+
position: absolute;
249+
top: -2px;
250+
left: -2px;
251+
right: -2px;
252+
bottom: -2px;
253+
border: 2px solid var(--bb-tree-drop-preview-color);
254+
border-radius: 6px;
255+
pointer-events: none;
256+
z-index: 1;
257+
background: transparent;
258+
}
259+
260+
.tree-preview-child-first {
261+
position: absolute;
262+
bottom: -4px;
263+
height: 8px;
264+
left: 20px;
265+
right: 0;
266+
display: flex;
267+
flex-direction: row;
268+
align-items: center;
269+
pointer-events: none;
270+
271+
.tree-preview-circle {
272+
width: 8px;
273+
height: 8px;
274+
border-radius: 50%;
275+
background-color: var(--bb-tree-drop-preview-color);
276+
}
277+
278+
.tree-preview-line {
279+
flex: 1;
280+
height: 2px;
281+
background-color: var(--bb-tree-drop-preview-color);
282+
}
283+
}
284+
285+
.tree-preview-below {
286+
position: absolute;
287+
bottom: -4px;
288+
height: 8px;
289+
left: 0;
290+
right: 0;
291+
display: flex;
292+
flex-direction: row;
293+
align-items: center;
294+
pointer-events: none;
295+
296+
.tree-preview-circle {
297+
width: 8px;
298+
height: 8px;
299+
border-radius: 50%;
300+
background-color: var(--bb-tree-drop-preview-color);
301+
}
302+
303+
.tree-preview-line {
304+
flex: 1;
305+
height: 2px;
306+
background-color: var(--bb-tree-drop-preview-color);
307+
}
308+
}
309+
}

0 commit comments

Comments
 (0)