1 | @import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
2 | @import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | .u-transfer {
|
12 | position: relative;
|
13 | line-height: 1.5;
|
14 |
|
15 | &-list {
|
16 | position: relative;
|
17 | font-size: 12px;
|
18 | border: 1px solid $transfer-border-gap-color;
|
19 | display: inline-block;
|
20 | border-radius: $border-radius-base;
|
21 | vertical-align: middle;
|
22 | position: relative;
|
23 | width: 180px;
|
24 | height: 200px;
|
25 | padding-top: 33px;
|
26 | &.u-transfer-list-draggable:first-child{
|
27 | margin-right: 16px;
|
28 | }
|
29 |
|
30 | &-with-footer {
|
31 | padding-bottom: 33px;
|
32 | }
|
33 |
|
34 | &-search {
|
35 | &-action {
|
36 | color: #505F79;
|
37 | position: absolute;
|
38 | top: 2px;
|
39 | right: 2px;
|
40 | width: 26px;
|
41 | height: 26px;
|
42 | line-height: 26px;
|
43 | text-align: center;
|
44 | font-size: 16px;
|
45 | text-decoration: none;
|
46 | .uf {
|
47 | transition: all .3s;
|
48 | font-size: 16px;
|
49 | color: #505F79;
|
50 | &:hover {
|
51 | color: rgba(0,0,0,.43);
|
52 | }
|
53 | }
|
54 | }
|
55 | }
|
56 |
|
57 | &-header {
|
58 | padding: 7px 15px;
|
59 | border-radius: $border-radius-base $border-radius 0 0;
|
60 | background: #fff;
|
61 | color: $font-color-base;
|
62 | border-bottom: 1px solid #e9e9e9;
|
63 | overflow: hidden;
|
64 | position: absolute;
|
65 | top: 0;
|
66 | left: 0;
|
67 | width: 100%;
|
68 | .u-checkbox{
|
69 | margin-right:0;
|
70 | }
|
71 | &-title {
|
72 | position: absolute;
|
73 | right: 15px;
|
74 | }
|
75 | }
|
76 |
|
77 | &-body {
|
78 | font-size: 12px;
|
79 | position: relative;
|
80 | height: 100%;
|
81 |
|
82 | &-search-wrapper {
|
83 | position: absolute;
|
84 | top: 0;
|
85 | left: 0;
|
86 | padding: 4px;
|
87 | width: 100%;
|
88 | }
|
89 | }
|
90 |
|
91 | &-body-with-search {
|
92 | padding-top: 34px;
|
93 | }
|
94 |
|
95 | &-content {
|
96 | height: 100%;
|
97 | overflow: auto;
|
98 | margin: 0;
|
99 | padding: 0;
|
100 | &.delbtn-backdrop{
|
101 | background: #505F79;
|
102 | opacity: 0.65;
|
103 | &.uf-del{
|
104 | color: #fff;
|
105 | }
|
106 | }
|
107 | &-item {
|
108 | position: relative;
|
109 | overflow: visible;
|
110 | white-space: nowrap;
|
111 | text-overflow: ellipsis;
|
112 | padding: 7px 15px;
|
113 | min-height: 32px;
|
114 | transition: all 0.3s ease;
|
115 | color: $font-color-base;
|
116 | .u-checkbox{
|
117 | margin-right:0;
|
118 | }
|
119 | .multi-drag-count {
|
120 | position: absolute;
|
121 | right: -11px;
|
122 | top: -8px;
|
123 | z-index: 999;
|
124 | width: 26px;
|
125 | height: 26px;
|
126 | line-height: 26px;
|
127 | border-radius: 99px;
|
128 | text-align: center;
|
129 | background: #FFD700;
|
130 | color: #999;
|
131 | }
|
132 | }
|
133 | &-item:not(&-item-disabled):hover {
|
134 | cursor: pointer;
|
135 | background-color: $hover-bg-color-base;
|
136 | }
|
137 |
|
138 | &-item-selected{
|
139 | background: $selected-bg-color-base;
|
140 | &:not(&-item-disabled):hover{
|
141 | background: $selected-bg-color-base;
|
142 | }
|
143 | }
|
144 |
|
145 | &-item-disabled {
|
146 | cursor: not-allowed;
|
147 | color: $disabled-color-base;
|
148 | }
|
149 |
|
150 | &-item-highlight-enter {
|
151 | animation: transferHighlightIn 1s ease;
|
152 | transition: none;
|
153 | }
|
154 | }
|
155 | &-delete-selected{
|
156 | display: none;
|
157 | width: 100%;
|
158 | height: 100%;
|
159 | background: rgba(52, 69, 99, 0.2);
|
160 | position: absolute;
|
161 | left: 0;
|
162 | top: 0;
|
163 | color: #fff;
|
164 | &.show{
|
165 | display: block;
|
166 | }
|
167 | .u-transfer-list-del-btn{
|
168 | width:78px;
|
169 | height:78px;
|
170 | position: absolute;
|
171 | left: 50%;
|
172 | top: 50%;
|
173 | margin-top: -39px;
|
174 | margin-left: -39px;
|
175 | padding: 13px;
|
176 | background:rgba(94,108,132,1);
|
177 | border-radius:$border-radius-base;
|
178 | text-align: center;
|
179 | vertical-align: middle;
|
180 | span{
|
181 | display: block;
|
182 | }
|
183 | }
|
184 | }
|
185 |
|
186 | &-body-not-found {
|
187 | padding-top: 0;
|
188 | color: #ccc;
|
189 | text-align: center;
|
190 | display: none;
|
191 | position: absolute;
|
192 | top: 50%;
|
193 | width: 100%;
|
194 | margin-top: -10px;
|
195 | &.show{
|
196 | display: block;
|
197 | }
|
198 | }
|
199 |
|
200 | &-content:empty + &-body-not-found {
|
201 | display: block;
|
202 | }
|
203 |
|
204 | &-footer {
|
205 | border-top: 1px solid #e9e9e9;
|
206 | border-radius: 0 0 $select-border-radius $select-border-radius;
|
207 | position: absolute;
|
208 | bottom: 0;
|
209 | left: 0;
|
210 | width: 100%;
|
211 | }
|
212 | }
|
213 |
|
214 | &-operation {
|
215 | display: inline-block;
|
216 | overflow: hidden;
|
217 | margin: 0 8px;
|
218 | vertical-align: middle;
|
219 |
|
220 | button {
|
221 | display: block;
|
222 |
|
223 | &:first-child {
|
224 | margin-bottom: 4px;
|
225 | }
|
226 |
|
227 | .uf {
|
228 | font-size: 12px;
|
229 | }
|
230 | }
|
231 | }
|
232 |
|
233 | .u-checkbox+span, .u-checkbox-wrapper+span {
|
234 | padding-left: 8px;
|
235 | padding-right: 8px;
|
236 | }
|
237 |
|
238 |
|
239 |
|
240 |
|
241 | .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
|
242 | color: #fff;
|
243 | content: "\e6ce";
|
244 | line-height: 18px;
|
245 | font-size: 14px;
|
246 | }
|
247 |
|
248 | .u-checkbox .u-checkbox-label:before, .u-checkbox .u-checkbox-label:after{
|
249 | top: 0;
|
250 | }
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 | .u-button.disabled, .u-button[disabled]:hover {
|
257 | background: #fff;
|
258 | color:#9a9898;
|
259 | border-color: rgb(224,224,224);
|
260 | }
|
261 | }
|
262 |
|
263 | .u-transfer-operation .u-button-sm {
|
264 | padding: 0;
|
265 | font-size: 1.2rem;
|
266 | border: 1px solid;
|
267 | color: rgb(109, 107, 107);
|
268 | min-width: 3rem;
|
269 | }
|
270 |
|
271 | .u-transfer-operation .u-button-sm{
|
272 | background: $checkbox-color;
|
273 | color: #fff;
|
274 | border-color: $checkbox-color;
|
275 | }
|
276 | .u-transfer-operation .u-button-sm:hover{
|
277 | background: $checkbox-color;
|
278 | border-color: $checkbox-color;
|
279 | }
|
280 |
|
281 |
|
282 |
|
283 | .u-transfer-operation .u-button-sm[disabled]{
|
284 | background: #fff;
|
285 | color:#9a9898;
|
286 | border-color: rgb(224,224,224);
|
287 | }
|
288 |
|
289 |
|
290 |
|
291 |
|
292 | .u-transfer-list-search {
|
293 | font-size: 1.2rem;
|
294 | border-color: $transfer-border-gap-color;
|
295 | height: 26px;
|
296 | }
|
297 |
|
298 | @keyframes transferHighlightIn {
|
299 | 0% {
|
300 | background: $selected-bg-color-base;
|
301 | }
|
302 | 100% {
|
303 | background: transparent;
|
304 | }
|
305 | }
|