|
410 | 410 |
|
411 | 411 | /* .pages */ |
412 | 412 | .pages { |
413 | | - background: $tc-gray-neutral-light; |
414 | | - min-height: 70px; |
415 | | - border-bottom-left-radius: 4px; |
416 | | - border-bottom-right-radius: 4px; |
417 | | - .right-page { |
| 413 | + background: $tc-gray-neutral-light; |
| 414 | + min-height: 70px; |
| 415 | + border-bottom-left-radius: 4px; |
| 416 | + border-bottom-right-radius: 4px; |
| 417 | + .right-page { |
| 418 | + background: $tc-white; |
| 419 | + border: 1px solid $tc-gray-30; |
| 420 | + border-radius: 2px; |
| 421 | + height: 30px; |
| 422 | + margin: 20px 20px 0 0; |
| 423 | + float: right; |
| 424 | + display: flex; |
| 425 | + ul { |
| 426 | + display: flex; |
| 427 | + } |
| 428 | + ul, |
| 429 | + li, |
| 430 | + .btn-prev, |
| 431 | + .btn-next { |
| 432 | + text-align: center; |
| 433 | + // float: left; |
| 434 | + } |
| 435 | + li { |
| 436 | + border-right: 1px solid $tc-gray-30; |
| 437 | + position: relative; |
| 438 | + &.active a { |
| 439 | + background: $tc-gray-20; |
| 440 | + box-shadow: inset -1px 1px 2px 0px rgba(71,71,79,0.20); |
| 441 | + } |
| 442 | + .down-layer { |
418 | 443 | background: $tc-white; |
419 | | - border: 1px solid $tc-gray-30; |
420 | | - border-radius: 2px; |
421 | | - height: 30px; |
422 | | - margin: 20px 20px 0 0; |
423 | | - float: right; |
424 | | - ul, |
425 | | - li, |
426 | | - .btn-prev, |
427 | | - .btn-next { |
428 | | - text-align: center; |
429 | | - float: left; |
| 444 | + border-radius: 5px; |
| 445 | + text-align: left; |
| 446 | + min-width: 140px; |
| 447 | + min-height: 55px; |
| 448 | + margin-bottom: 15px; |
| 449 | + position: absolute; |
| 450 | + top: 40px; |
| 451 | + left: 50%; |
| 452 | + margin-left: -70px; |
| 453 | + box-shadow: 0 0 10px rgba(10, 10, 10, 0.2); |
| 454 | + z-index: 99; |
| 455 | + &::before { |
| 456 | + font-size: 0; |
| 457 | + line-height: 0; |
| 458 | + width: 0; |
| 459 | + height: 0; |
| 460 | + border-left: 7px solid transparent; |
| 461 | + border-right: 7px solid transparent; |
| 462 | + border-bottom: 7px solid #fff; |
| 463 | + content: ""; |
| 464 | + display: block; |
| 465 | + position: absolute; |
| 466 | + top: -7px; |
| 467 | + left: 50%; |
| 468 | + margin-left: -7px; |
430 | 469 | } |
431 | | - li { |
432 | | - border-right: 1px solid $tc-gray-30; |
433 | | - position: relative; |
434 | | - &.active a { |
435 | | - background: $tc-gray-20; |
436 | | - box-shadow: inset -1px 1px 2px 0px rgba(71,71,79,0.20); |
437 | | - } |
438 | | - .down-layer { |
439 | | - background: $tc-white; |
440 | | - border-radius: 5px; |
441 | | - text-align: left; |
442 | | - min-width: 140px; |
443 | | - min-height: 55px; |
444 | | - margin-bottom: 15px; |
445 | | - position: absolute; |
446 | | - top: 40px; |
447 | | - left: 50%; |
448 | | - margin-left: -70px; |
449 | | - box-shadow: 0 0 10px rgba(10, 10, 10, 0.2); |
450 | | - z-index: 99; |
451 | | - &::before { |
452 | | - font-size: 0; |
453 | | - line-height: 0; |
454 | | - width: 0; |
455 | | - height: 0; |
456 | | - border-left: 7px solid transparent; |
457 | | - border-right: 7px solid transparent; |
458 | | - border-bottom: 7px solid #fff; |
459 | | - content: ""; |
460 | | - display: block; |
461 | | - position: absolute; |
462 | | - top: -7px; |
463 | | - left: 50%; |
464 | | - margin-left: -7px; |
465 | | - } |
466 | | - .txt { |
467 | | - @include roboto; |
468 | | - font-size: $tc-label-md; |
469 | | - color: #394146; |
470 | | - line-height: $base-unit * 6; |
471 | | - padding: 13px 0 0 13px; |
472 | | - display: block; |
473 | | - float: left; |
474 | | - } |
475 | | - .inputs { |
476 | | - width: 34px; |
477 | | - height: 30px; |
478 | | - display: block; |
479 | | - margin: 13px 0 0 90px; |
480 | | - input { |
481 | | - @include roboto; |
482 | | - font-size: $tc-label-md; |
483 | | - color: #394146; |
484 | | - background: $tc-gray-neutral-light; |
485 | | - line-height: $base-unit * 4; |
486 | | - text-align: center; |
487 | | - height: 30px; |
488 | | - padding: 2px 0 0 0; |
489 | | - margin: 0; |
490 | | - } |
491 | | - } |
492 | | - } |
| 470 | + .txt { |
| 471 | + @include roboto; |
| 472 | + font-size: $tc-label-md; |
| 473 | + color: #394146; |
| 474 | + line-height: $base-unit * 6; |
| 475 | + padding: 13px 0 0 13px; |
| 476 | + display: block; |
| 477 | + float: left; |
493 | 478 | } |
494 | | - a { |
| 479 | + .inputs { |
| 480 | + width: 34px; |
| 481 | + height: 30px; |
| 482 | + display: block; |
| 483 | + margin: 13px 0 0 90px; |
| 484 | + input { |
495 | 485 | @include roboto; |
496 | 486 | font-size: $tc-label-md; |
497 | | - color: $tc-gray-80; |
498 | | - height: 28px; |
499 | | - min-width: 27px; |
500 | | - padding: 1px 8px; |
501 | | - line-height: $base-unit + 23; |
502 | | - display: block; |
503 | | - &.btn-prev { |
504 | | - border-right: 1px solid $tc-gray-30; |
505 | | - min-width: 70px; |
506 | | - padding-left: 24px; |
507 | | - position: relative; |
508 | | - &:before { |
509 | | - font-size: 0; |
510 | | - line-height: 0; |
511 | | - background: url("./images/arrow-left.svg") no-repeat 0 0; |
512 | | - width: 12px; |
513 | | - height: 12px; |
514 | | - content: ""; |
515 | | - display: block; |
516 | | - position: absolute; |
517 | | - top: 9px; |
518 | | - left: 12px; |
519 | | - } |
520 | | - } |
521 | | - &.btn-next { |
522 | | - min-width: 70px; |
523 | | - padding-right: 24px; |
524 | | - position: relative; |
525 | | - &:after { |
526 | | - font-size: 0; |
527 | | - line-height: 0; |
528 | | - background: url("./images/arrow-right.svg") no-repeat 0 0; |
529 | | - width: 12px; |
530 | | - height: 12px; |
531 | | - content: ""; |
532 | | - display: block; |
533 | | - position: absolute; |
534 | | - top: 9px; |
535 | | - right: 12px; |
536 | | - } |
537 | | - } |
| 487 | + color: #394146; |
| 488 | + background: $tc-gray-neutral-light; |
| 489 | + line-height: $base-unit * 4; |
| 490 | + text-align: center; |
| 491 | + height: 30px; |
| 492 | + padding: 2px 0 0 0; |
| 493 | + margin: 0; |
| 494 | + } |
538 | 495 | } |
| 496 | + } |
| 497 | + |
| 498 | + &.go-to-page-pill { |
| 499 | + .tooltip-target { |
| 500 | + min-width: 27px; |
| 501 | + height: 28px; |
| 502 | + } |
| 503 | + |
| 504 | + .go-to-page-tooltip { |
| 505 | + display: flex; |
| 506 | + align-items: center; |
| 507 | + @include tc-label-md; |
| 508 | + line-height: $base-unit * 6; |
| 509 | + |
| 510 | + input[type="number"] { |
| 511 | + width: 50px; |
| 512 | + height: $base-unit * 6; |
| 513 | + margin-bottom: 0px; |
| 514 | + margin-left: $base-unit * 2; |
| 515 | + } |
| 516 | + } |
| 517 | + } |
| 518 | + } |
| 519 | + a { |
| 520 | + @include roboto; |
| 521 | + font-size: $tc-label-md; |
| 522 | + color: $tc-gray-80; |
| 523 | + height: 28px; |
| 524 | + min-width: 27px; |
| 525 | + padding: 1px 8px; |
| 526 | + line-height: $base-unit + 23; |
| 527 | + display: block; |
| 528 | + &.btn-prev { |
| 529 | + border-right: 1px solid $tc-gray-30; |
| 530 | + min-width: 70px; |
| 531 | + padding-left: 24px; |
| 532 | + position: relative; |
| 533 | + &:before { |
| 534 | + font-size: 0; |
| 535 | + line-height: 0; |
| 536 | + background: url("./images/arrow-left.svg") no-repeat 0 0; |
| 537 | + width: 12px; |
| 538 | + height: 12px; |
| 539 | + content: ""; |
| 540 | + display: block; |
| 541 | + position: absolute; |
| 542 | + top: 9px; |
| 543 | + left: 12px; |
| 544 | + } |
| 545 | + } |
| 546 | + &.btn-next { |
| 547 | + min-width: 70px; |
| 548 | + padding-right: 24px; |
| 549 | + position: relative; |
| 550 | + &:after { |
| 551 | + font-size: 0; |
| 552 | + line-height: 0; |
| 553 | + background: url("./images/arrow-right.svg") no-repeat 0 0; |
| 554 | + width: 12px; |
| 555 | + height: 12px; |
| 556 | + content: ""; |
| 557 | + display: block; |
| 558 | + position: absolute; |
| 559 | + top: 9px; |
| 560 | + right: 12px; |
| 561 | + } |
| 562 | + } |
539 | 563 | } |
| 564 | + } |
540 | 565 | } |
541 | 566 |
|
542 | 567 |
|
|
0 commit comments