You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

257 lines
5.3 KiB

  1. .rc-slider {
  2. position: relative;
  3. height: 14px;
  4. padding: 5px 0;
  5. width: 100%;
  6. border-radius: 6px;
  7. -ms-touch-action: none;
  8. touch-action: none;
  9. box-sizing: border-box;
  10. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  11. }
  12. .rc-slider * {
  13. box-sizing: border-box;
  14. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  15. }
  16. .rc-slider-rail {
  17. position: absolute;
  18. width: 100%;
  19. background-color: #e9e9e9;
  20. height: 4px;
  21. border-radius: 6px;
  22. }
  23. .rc-slider-track {
  24. position: absolute;
  25. left: 0;
  26. height: 4px;
  27. border-radius: 6px;
  28. background-color: #abe2fb;
  29. }
  30. .rc-slider-handle {
  31. position: absolute;
  32. width: 14px;
  33. height: 14px;
  34. cursor: pointer;
  35. cursor: -webkit-grab;
  36. margin-top: -5px;
  37. cursor: grab;
  38. border-radius: 50%;
  39. border: solid 2px #96dbfa;
  40. background-color: #fff;
  41. -ms-touch-action: pan-x;
  42. touch-action: pan-x;
  43. }
  44. .rc-slider-handle:focus {
  45. border-color: #57c5f7;
  46. box-shadow: 0 0 0 5px #96dbfa;
  47. outline: none;
  48. }
  49. .rc-slider-handle-click-focused:focus {
  50. border-color: #96dbfa;
  51. box-shadow: unset;
  52. }
  53. .rc-slider-handle:hover {
  54. border-color: #57c5f7;
  55. }
  56. .rc-slider-handle:active {
  57. border-color: #57c5f7;
  58. box-shadow: 0 0 5px #57c5f7;
  59. cursor: -webkit-grabbing;
  60. cursor: grabbing;
  61. }
  62. .rc-slider-mark {
  63. position: absolute;
  64. top: 18px;
  65. left: 0;
  66. width: 100%;
  67. font-size: 12px;
  68. }
  69. .rc-slider-mark-text {
  70. position: absolute;
  71. display: inline-block;
  72. vertical-align: middle;
  73. text-align: center;
  74. cursor: pointer;
  75. color: #999;
  76. }
  77. .rc-slider-mark-text-active {
  78. color: #666;
  79. }
  80. .rc-slider-step {
  81. position: absolute;
  82. width: 100%;
  83. height: 4px;
  84. background: transparent;
  85. }
  86. .rc-slider-dot {
  87. position: absolute;
  88. bottom: -2px;
  89. margin-left: -4px;
  90. width: 8px;
  91. height: 8px;
  92. border: 2px solid #e9e9e9;
  93. background-color: #fff;
  94. cursor: pointer;
  95. border-radius: 50%;
  96. vertical-align: middle;
  97. }
  98. .rc-slider-dot-active {
  99. border-color: #96dbfa;
  100. }
  101. .rc-slider-dot-reverse {
  102. margin-left: 0;
  103. margin-right: -4px;
  104. }
  105. .rc-slider-disabled {
  106. background-color: #e9e9e9;
  107. }
  108. .rc-slider-disabled .rc-slider-track {
  109. background-color: #ccc;
  110. }
  111. .rc-slider-disabled .rc-slider-handle,
  112. .rc-slider-disabled .rc-slider-dot {
  113. border-color: #ccc;
  114. box-shadow: none;
  115. background-color: #fff;
  116. cursor: not-allowed;
  117. }
  118. .rc-slider-disabled .rc-slider-mark-text,
  119. .rc-slider-disabled .rc-slider-dot {
  120. cursor: not-allowed !important;
  121. }
  122. .rc-slider-vertical {
  123. width: 14px;
  124. height: 100%;
  125. padding: 0 5px;
  126. }
  127. .rc-slider-vertical .rc-slider-rail {
  128. height: 100%;
  129. width: 4px;
  130. }
  131. .rc-slider-vertical .rc-slider-track {
  132. left: 5px;
  133. bottom: 0;
  134. width: 4px;
  135. }
  136. .rc-slider-vertical .rc-slider-handle {
  137. margin-left: -5px;
  138. -ms-touch-action: pan-y;
  139. touch-action: pan-y;
  140. }
  141. .rc-slider-vertical .rc-slider-mark {
  142. top: 0;
  143. left: 18px;
  144. height: 100%;
  145. }
  146. .rc-slider-vertical .rc-slider-step {
  147. height: 100%;
  148. width: 4px;
  149. }
  150. .rc-slider-vertical .rc-slider-dot {
  151. left: 2px;
  152. margin-bottom: -4px;
  153. }
  154. .rc-slider-vertical .rc-slider-dot:first-child {
  155. margin-bottom: -4px;
  156. }
  157. .rc-slider-vertical .rc-slider-dot:last-child {
  158. margin-bottom: -4px;
  159. }
  160. .rc-slider-tooltip-zoom-down-enter,
  161. .rc-slider-tooltip-zoom-down-appear {
  162. animation-duration: .3s;
  163. animation-fill-mode: both;
  164. display: block !important;
  165. animation-play-state: paused;
  166. }
  167. .rc-slider-tooltip-zoom-down-leave {
  168. animation-duration: .3s;
  169. animation-fill-mode: both;
  170. display: block !important;
  171. animation-play-state: paused;
  172. }
  173. .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
  174. .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  175. animation-name: rcSliderTooltipZoomDownIn;
  176. animation-play-state: running;
  177. }
  178. .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  179. animation-name: rcSliderTooltipZoomDownOut;
  180. animation-play-state: running;
  181. }
  182. .rc-slider-tooltip-zoom-down-enter,
  183. .rc-slider-tooltip-zoom-down-appear {
  184. transform: scale(0, 0);
  185. animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  186. }
  187. .rc-slider-tooltip-zoom-down-leave {
  188. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  189. }
  190. @keyframes rcSliderTooltipZoomDownIn {
  191. 0% {
  192. opacity: 0;
  193. transform-origin: 50% 100%;
  194. transform: scale(0, 0);
  195. }
  196. 100% {
  197. transform-origin: 50% 100%;
  198. transform: scale(1, 1);
  199. }
  200. }
  201. @keyframes rcSliderTooltipZoomDownOut {
  202. 0% {
  203. transform-origin: 50% 100%;
  204. transform: scale(1, 1);
  205. }
  206. 100% {
  207. opacity: 0;
  208. transform-origin: 50% 100%;
  209. transform: scale(0, 0);
  210. }
  211. }
  212. .rc-slider-tooltip {
  213. position: absolute;
  214. left: -9999px;
  215. top: -9999px;
  216. visibility: visible;
  217. box-sizing: border-box;
  218. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  219. }
  220. .rc-slider-tooltip * {
  221. box-sizing: border-box;
  222. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  223. }
  224. .rc-slider-tooltip-hidden {
  225. display: none;
  226. }
  227. .rc-slider-tooltip-placement-top {
  228. padding: 4px 0 8px 0;
  229. }
  230. .rc-slider-tooltip-inner {
  231. padding: 6px 2px;
  232. min-width: 24px;
  233. height: 24px;
  234. font-size: 12px;
  235. line-height: 1;
  236. color: #fff;
  237. text-align: center;
  238. text-decoration: none;
  239. background-color: #6c6c6c;
  240. border-radius: 6px;
  241. box-shadow: 0 0 4px #d9d9d9;
  242. }
  243. .rc-slider-tooltip-arrow {
  244. position: absolute;
  245. width: 0;
  246. height: 0;
  247. border-color: transparent;
  248. border-style: solid;
  249. }
  250. .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  251. bottom: 4px;
  252. left: 50%;
  253. margin-left: -4px;
  254. border-width: 4px 4px 0;
  255. border-top-color: #6c6c6c;
  256. }