|
160 | 160 | width: 100%; |
161 | 161 | height: calc(100% - 80px); |
162 | 162 | padding: 15px; |
163 | | - overflow: auto; |
| 163 | + /* overflow: auto; */ |
164 | 164 | } |
165 | 165 | .vp-popup-content { |
166 | 166 | min-height: calc(100% - 30px); |
|
284 | 284 | padding: 1px 8px 0 5px; |
285 | 285 | } |
286 | 286 | /* checkbox */ |
287 | | -.vp-popup-frame input[type=checkbox]:not(.vp-checkbox), |
| 287 | +.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle), |
288 | 288 | .vp-popup-frame input[type=radio]:not(.vp-radio) { |
289 | 289 | position: absolute; |
290 | 290 | width: 1px; |
|
295 | 295 | clip: rect(0, 0, 0, 0); |
296 | 296 | border: 0; |
297 | 297 | } |
298 | | -.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label, |
| 298 | +.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + label, |
299 | 299 | .vp-popup-frame input[type=radio]:not(.vp-radio) + label, |
300 | | -.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span, |
| 300 | +.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + span, |
301 | 301 | .vp-popup-frame label input[type=radio]:not(.vp-radio) + span { |
302 | 302 | display: inline-block; |
303 | 303 | position: relative; |
|
307 | 307 | line-height: 15px; |
308 | 308 | vertical-align: middle; |
309 | 309 | } |
310 | | -.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label, |
| 310 | +.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + label, |
311 | 311 | .vp-popup-frame input[type=radio]:not(.vp-radio):disabled + label, |
312 | | -.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span, |
| 312 | +.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + span, |
313 | 313 | .vp-popup-frame label input[type=radio]:not(.vp-radio):disabled + span { |
314 | 314 | color: var(--vp-gray-color); |
315 | 315 | } |
316 | | -.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label::before, |
317 | | -.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span::before { |
| 316 | +.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + label::before, |
| 317 | +.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + span::before { |
318 | 318 | content: ''; |
319 | 319 | position: absolute; |
320 | 320 | left: 0; |
|
328 | 328 | border: none; |
329 | 329 | box-sizing: border-box; |
330 | 330 | } |
331 | | -.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):checked + label::before, |
332 | | -.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):checked + span::before { |
| 331 | +.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked + label::before, |
| 332 | +.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked + span::before { |
333 | 333 | content: ''; |
334 | 334 | position: absolute; |
335 | 335 | left: 0; |
|
342 | 342 | border: none; |
343 | 343 | box-sizing: border-box; |
344 | 344 | } |
345 | | -.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label::before, |
346 | | -.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span::before { |
| 345 | +.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + label::before, |
| 346 | +.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + span::before { |
347 | 347 | content: ''; |
348 | 348 | position: absolute; |
349 | 349 | left: 0; |
|
449 | 449 | .vp-popup-frame select::-ms-expand { |
450 | 450 | display: none; |
451 | 451 | } |
| 452 | +/* toggle slider: <label><input class="vp-toggle" type="checkbox"/><span></span></label> */ |
| 453 | +.vp-popup-frame input.vp-toggle { |
| 454 | + opacity: 0; |
| 455 | + width: 0; |
| 456 | + height: 0; |
| 457 | +} |
| 458 | + |
| 459 | +.vp-popup-frame input.vp-toggle + span { |
| 460 | + position: relative; |
| 461 | + cursor: pointer; |
| 462 | + display: inline-block; |
| 463 | + width: 27px; |
| 464 | + height: 15px; |
| 465 | + top: 0; |
| 466 | + left: 0; |
| 467 | + right: 0; |
| 468 | + bottom: 0; |
| 469 | + border-radius: 34px; |
| 470 | + background-color: #ccc; |
| 471 | + -webkit-transition: .4s; |
| 472 | + transition: .4s; |
| 473 | +} |
| 474 | + |
| 475 | +.vp-popup-frame input[type=checkbox].vp-toggle + span:before { |
| 476 | + position: absolute; |
| 477 | + content: ""; |
| 478 | + height: 12px; |
| 479 | + width: 12px; |
| 480 | + left: 2px; |
| 481 | + bottom: 1.1px; |
| 482 | + border-radius: 50%; |
| 483 | + background: none; |
| 484 | + background-color: white; |
| 485 | + -webkit-transition: .4s; |
| 486 | + transition: .4s; |
| 487 | +} |
| 488 | + |
| 489 | +.vp-popup-frame input.vp-toggle:checked + span { |
| 490 | + background-color: #2196F3; |
| 491 | +} |
| 492 | + |
| 493 | +.vp-popup-frame input.vp-toggle:focus + span { |
| 494 | + box-shadow: 0 0 1px #2196F3; |
| 495 | +} |
| 496 | + |
| 497 | +.vp-popup-frame input.vp-toggle:checked + span:before { |
| 498 | + -webkit-transform: translateX(12px); |
| 499 | + -ms-transform: translateX(12px); |
| 500 | + transform: translateX(12px); |
| 501 | +} |
452 | 502 | /* Big Selector */ |
453 | 503 | .vp-popup-frame .vp-big-select { |
454 | 504 | border: 2px solid #FFCF73; |
|
0 commit comments