angular-slider.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. slider {
  2. display: inline-block;
  3. position: relative;
  4. height: 8px;
  5. width: 100%;
  6. margin: 25px 5px 25px 5px;
  7. vertical-align: middle;
  8. }
  9. slider span {
  10. white-space: nowrap;
  11. position: absolute;
  12. display: inline-block;
  13. }
  14. slider span.base {
  15. width: 100%;
  16. height: 100%;
  17. padding: 0;
  18. }
  19. slider span.bar {
  20. height: 100%;
  21. z-index: 0;
  22. -webkit-border-radius: 1em/1em;
  23. border-radius: 1em/1em;
  24. background-color: #e4eaec;
  25. }
  26. slider span.bar.selection {
  27. width: 0%;
  28. z-index: 1;
  29. background-color: #00a8f3;
  30. -webkit-box-shadow: none;
  31. box-shadow: none;
  32. }
  33. slider span.pointer {
  34. cursor: pointer;
  35. width: 20px;
  36. height: 20px;
  37. top: -6px;
  38. background-color: #fff;
  39. border: 1px solid #dee5e7;
  40. z-index: 2;
  41. -webkit-border-radius: 1em/1em;
  42. border-radius: 1em/1em;
  43. }
  44. slider span.pointer:after {
  45. content: '';
  46. background-color: #dee5e7;
  47. width: 8px;
  48. height: 8px;
  49. position: absolute;
  50. top: 5px;
  51. left: 5px;
  52. -webkit-border-radius: 1em/1em;
  53. border-radius: 1em/1em;
  54. }
  55. slider span.pointer:hover:after {
  56. background-color: #000;
  57. }
  58. slider span.pointer.active:after {
  59. background-color: #00a8f3;
  60. }
  61. slider span.bubble {
  62. cursor: default;
  63. top: -22px;
  64. padding: 1px 3px 1px 3px;
  65. font-size: 0.7em;
  66. }
  67. slider span.bubble.selection {
  68. top: 15px;
  69. }
  70. slider span.bubble.limit {
  71. color: #808080;
  72. }