Commit | Line | Data |
---|---|---|
d8475f48 | 1 | .sortableList:not(.tabularList) { |
c5168804 AE |
2 | list-style: decimal outside; |
3 | margin-left: 20px; | |
8dff7d38 AE |
4 | |
5 | .sortableList { | |
6 | margin-left: 30px; | |
7 | } | |
c5168804 AE |
8 | } |
9 | ||
10 | .sortableNode { | |
cd7f7291 | 11 | cursor: move; |
8a52619a | 12 | |
c5168804 | 13 | &:not(:last-child) { |
1a75e228 | 14 | border-bottom: 1px solid var(--wcfContentBorderInner); |
c5168804 | 15 | } |
8a52619a | 16 | |
c5168804 AE |
17 | > .sortableList { |
18 | //padding-left: 20px; | |
8a52619a | 19 | |
c5168804 | 20 | &:not(:empty) { |
1a75e228 | 21 | border-top: 1px solid var(--wcfContentBorderInner); |
c5168804 AE |
22 | } |
23 | } | |
24 | } | |
25 | ||
26 | .sortableNodeLabel { | |
27 | align-items: center; | |
c5168804 | 28 | padding: 10px; |
8a52619a | 29 | |
c5168804 AE |
30 | /* `display:flex` acts weird inside lists with a visible list-style */ |
31 | display: inline-flex; | |
32 | width: 100%; | |
8a52619a | 33 | |
c5168804 | 34 | &:hover { |
1a75e228 | 35 | background-color: var(--wcfTabularBoxBackgroundActive); |
c5168804 | 36 | } |
8a52619a | 37 | |
7d54b63d AE |
38 | &:not(.sortableNodeStaticItem) { |
39 | cursor: move; | |
40 | } | |
8a52619a | 41 | |
c5168804 AE |
42 | > .icon, |
43 | > a { | |
c5168804 AE |
44 | margin-right: 5px; |
45 | } | |
8a52619a | 46 | |
62f45dca AE |
47 | > .icon { |
48 | flex: 0 0 auto; | |
49 | } | |
8a52619a | 50 | |
62f45dca AE |
51 | > a { |
52 | flex: 0 1 auto; | |
53 | overflow: hidden; | |
54 | text-overflow: ellipsis; | |
55 | white-space: nowrap; | |
56 | } | |
8a52619a | 57 | |
c5168804 AE |
58 | > .statusDisplay { |
59 | align-items: center; | |
60 | display: flex; | |
62f45dca | 61 | flex: 1 0 auto; |
c5168804 | 62 | justify-content: flex-end; |
8a52619a | 63 | |
c5168804 | 64 | > a, |
afd474ba | 65 | > button, |
c5168804 | 66 | > span { |
c5168804 AE |
67 | flex: 0 0 auto; |
68 | margin-left: 5px; | |
69 | } | |
afd474ba AE |
70 | |
71 | fa-icon { | |
1a75e228 | 72 | color: var(--wcfContentText); |
afd474ba | 73 | } |
c5dd767e | 74 | } |
c5168804 AE |
75 | } |
76 | ||
77 | .sortablePlaceholder { | |
1a75e228 AE |
78 | background-color: var(--wcfStatusWarningBackground); |
79 | border: 1px solid var(--wcfStatusWarningBorder); | |
80 | color: var(--wcfStatusWarningText); | |
c5168804 | 81 | padding: 10px; |
8a52619a | 82 | |
c5168804 | 83 | &.sortableInvalidTarget { |
1a75e228 AE |
84 | background-color: var(--wcfStatusErrorBackground); |
85 | border-color: var(--wcfStatusErrorBorder); | |
86 | color: var(--wcfStatusErrorText); | |
c5168804 AE |
87 | } |
88 | } | |
62f45dca AE |
89 | |
90 | @include screen-xs { | |
91 | .sortableNodeHandle { | |
92 | display: none; | |
93 | } | |
94 | } | |
95 | @include screen-lg { | |
96 | .sortableNodeHandle { | |
97 | display: none; | |
98 | } | |
99 | } |