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.

58 lines
1.5 KiB

  1. .slider {
  2. min-height: 14px; }
  3. .slider:disabled, .slider.is-disabled {
  4. opacity: .6; }
  5. .slider:disabled .slider-track,
  6. .slider:disabled .slider-handle,
  7. .slider:disabled .slider-ticks, .slider.is-disabled .slider-track,
  8. .slider.is-disabled .slider-handle,
  9. .slider.is-disabled .slider-ticks {
  10. cursor: default; }
  11. .slider:disabled .slider-fill, .slider.is-disabled .slider-fill {
  12. background-color: rgba(17, 17, 19, 0.2); }
  13. .slider-track {
  14. cursor: pointer;
  15. position: relative;
  16. width: 100%;
  17. height: 4px;
  18. box-shadow: 0 1px 2px rgba(17, 17, 19, 0.2) inset;
  19. background-color: rgba(17, 17, 19, 0.1);
  20. border: 0 solid transparent;
  21. border-radius: 4px; }
  22. .slider-fill {
  23. position: absolute;
  24. height: 4px;
  25. background-color: rgba(21, 141, 247, 0.7);
  26. border-radius: 4px;
  27. box-shadow: 0 1px 2px rgba(17, 17, 19, 0.2) inset; }
  28. .slider-handle {
  29. cursor: pointer;
  30. position: absolute;
  31. z-index: 2;
  32. width: 14px;
  33. height: 14px;
  34. margin-top: -5px;
  35. background-color: #fff;
  36. box-shadow: 0 1px 3px #111113;
  37. border: 0 solid transparent;
  38. border-radius: 50%; }
  39. .slider-ticks {
  40. cursor: pointer;
  41. position: relative;
  42. z-index: 1;
  43. min-height: 10px;
  44. margin-bottom: .7rem; }
  45. .slider-ticks span {
  46. position: absolute;
  47. border-left: 1px solid rgba(17, 17, 19, 0.3);
  48. height: 6px;
  49. margin-top: 3px;
  50. padding-top: 6px;
  51. font-size: 10px;
  52. text-align: center;
  53. line-height: 1.3;
  54. color: rgba(17, 17, 19, 0.5); }