ion.rangeSlider.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /* Ion.RangeSlider
  2. // css version 1.8.5
  3. // by Denis Ineshin | ionden.com
  4. // ===================================================================================================================*/
  5. /* =====================================================================================================================
  6. // RangeSlider */
  7. .irs {
  8. position: relative; display: block;
  9. }
  10. .irs-line {
  11. position: relative; display: block;
  12. overflow: hidden;
  13. }
  14. .irs-line-left, .irs-line-mid, .irs-line-right {
  15. position: absolute; display: block;
  16. top: 0;
  17. }
  18. .irs-line-left {
  19. left: 0; width: 10%;
  20. }
  21. .irs-line-mid {
  22. left: 10%; width: 80%;
  23. }
  24. .irs-line-right {
  25. right: 0; width: 10%;
  26. }
  27. .irs-diapason {
  28. position: absolute; display: block;
  29. left: 0; width: 100%;
  30. }
  31. .irs-slider {
  32. position: absolute; display: block;
  33. cursor: default;
  34. z-index: 1;
  35. }
  36. .irs-slider.single {
  37. left: 10px;
  38. }
  39. .irs-slider.single:before {
  40. position: absolute; display: block; content: "";
  41. top: -30%; left: -30%;
  42. width: 160%; height: 160%;
  43. background: rgba(0,0,0,0.0);
  44. }
  45. .irs-slider.from {
  46. left: 100px;
  47. }
  48. .irs-slider.from:before {
  49. position: absolute; display: block; content: "";
  50. top: -30%; left: -30%;
  51. width: 130%; height: 160%;
  52. background: rgba(0,0,0,0.0);
  53. }
  54. .irs-slider.to {
  55. left: 300px;
  56. }
  57. .irs-slider.to:before {
  58. position: absolute; display: block; content: "";
  59. top: -30%; left: 0;
  60. width: 130%; height: 160%;
  61. background: rgba(0,0,0,0.0);
  62. }
  63. .irs-slider.last {
  64. z-index: 2;
  65. }
  66. .irs-min {
  67. position: absolute; display: block;
  68. left: 0;
  69. cursor: default;
  70. }
  71. .irs-max {
  72. position: absolute; display: block;
  73. right: 0;
  74. cursor: default;
  75. }
  76. .irs-from, .irs-to, .irs-single {
  77. position: absolute; display: block;
  78. top: 0; left: 0;
  79. cursor: default;
  80. white-space: nowrap;
  81. }
  82. .irs-grid {
  83. position: absolute; display: none;
  84. bottom: 0; left: 0;
  85. width: 100%; height: 20px;
  86. }
  87. .irs-with-grid .irs-grid {
  88. display: block;
  89. }
  90. .irs-grid-pol {
  91. position: absolute;
  92. top: 0; left: 0;
  93. width: 1px; height: 8px;
  94. background: #000;
  95. }
  96. .irs-grid-pol.small {
  97. height: 4px;
  98. }
  99. .irs-grid-text {
  100. position: absolute;
  101. bottom: 0; left: 0;
  102. width: 100px;
  103. white-space: nowrap;
  104. text-align: center;
  105. font-size: 9px; line-height: 9px;
  106. color: #000;
  107. }
  108. .irs-disable-mask {
  109. position: absolute; display: block;
  110. top: 0; left: 0;
  111. width: 100%; height: 100%;
  112. cursor: default;
  113. background: rgba(0,0,0,0.0);
  114. z-index: 2;
  115. }
  116. .irs-disabled {
  117. opacity: 0.4;
  118. }