asRange.css 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .rangeUi {
  2. position: relative;
  3. cursor: pointer; }
  4. .rangeUi-bar {
  5. height: 4px;
  6. background-color: #f3f7f9; }
  7. .rangeUi-pointer {
  8. position: absolute;
  9. top: -3px;
  10. left: 60%;
  11. z-index: 2;
  12. box-sizing: border-box;
  13. width: 10px;
  14. height: 10px;
  15. background-color: #fff;
  16. border: 1px solid #e4eaec;
  17. border-radius: 50%;
  18. -webkit-transform: translate(-50%, 0%);
  19. transform: translate(-50%, 0%); }
  20. .rangeUi-pointer:focus {
  21. outline: 0;
  22. outline: none; }
  23. .rangeUi-tip {
  24. position: absolute;
  25. top: -30px;
  26. left: 50%;
  27. display: block;
  28. padding: 2px 4px 1px;
  29. margin: 0 auto;
  30. font-size: 11px;
  31. line-height: 1.5em;
  32. color: #fff;
  33. text-align: center;
  34. background-color: #526069;
  35. border: 1px solid #526069;
  36. border-radius: 2px;
  37. -webkit-transform: translate(-50%, 0);
  38. transform: translate(-50%, 0); }
  39. .rangeUi-tip:before {
  40. position: absolute;
  41. bottom: -3px;
  42. left: 50%;
  43. display: inline-block;
  44. width: 6px;
  45. height: 6px;
  46. margin-left: -3px;
  47. content: "";
  48. background-color: #526069;
  49. -webkit-transform: rotate(-45deg);
  50. transform: rotate(-45deg); }
  51. .rangeUi-selected {
  52. position: absolute;
  53. top: 0;
  54. width: 60%;
  55. height: 4px;
  56. overflow: hidden;
  57. background-color: #3e8ef7; }
  58. .rangeUi-scale {
  59. height: 30px; }
  60. .rangeUi-scale-lines, .rangeUi-scale-values {
  61. position: relative;
  62. padding: 0;
  63. margin: 0;
  64. vertical-align: middle;
  65. list-style: none; }
  66. .rangeUi-scale-lines li, .rangeUi-scale-values li {
  67. position: absolute;
  68. top: 0;
  69. float: left; }
  70. .rangeUi-scale-lines {
  71. top: 6px; }
  72. .rangeUi-scale-lines li {
  73. position: absolute;
  74. top: 0;
  75. width: 1px;
  76. height: 4px;
  77. background-color: #e4eaec; }
  78. .rangeUi-scale-inlineGrid {
  79. height: 10px !important; }
  80. .rangeUi-scale-values {
  81. top: 13px;
  82. margin-left: 1px; }
  83. .rangeUi-scale-values span {
  84. margin-left: -50%;
  85. font-size: 14px;
  86. color: #76838f; }