style.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .mt-range {
  2. position: relative;
  3. display: -webkit-box;
  4. display: -ms-flexbox;
  5. display: flex;
  6. height: 30px;
  7. line-height: 30px
  8. }
  9. .mt-range > * {
  10. display: -ms-flexbox;
  11. display: flex;
  12. display: -webkit-box
  13. }
  14. .mt-range *[slot=start] {
  15. margin-right: 5px
  16. }
  17. .mt-range *[slot=end] {
  18. margin-left: 5px
  19. }
  20. .mt-range-content {
  21. position: relative;
  22. -webkit-box-flex: 1;
  23. -ms-flex: 1;
  24. flex: 1;
  25. margin-right: 30px
  26. }
  27. .mt-range-runway {
  28. position: absolute;
  29. top: 50%;
  30. -webkit-transform: translateY(-50%);
  31. transform: translateY(-50%);
  32. left: 0;
  33. right: -30px;
  34. border-top-color: #a9acb1;
  35. border-top-style: solid
  36. }
  37. .mt-range-thumb {
  38. background-color: #fff;
  39. position: absolute;
  40. left: 0;
  41. top: 0;
  42. width: 30px;
  43. height: 30px;
  44. border-radius: 100%;
  45. cursor: move;
  46. box-shadow: 0 1px 3px rgba(0,0,0,.4)
  47. }
  48. .mt-range-progress {
  49. position: absolute;
  50. display: block;
  51. background-color: #26a2ff;
  52. top: 50%;
  53. -webkit-transform: translateY(-50%);
  54. transform: translateY(-50%);
  55. width: 0
  56. }
  57. .mt-range--disabled {
  58. opacity: 0.5
  59. }