ionrangeslider.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. .irs {
  2. position: relative;
  3. display: block;
  4. -webkit-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. -webkit-touch-callout: none; }
  9. .irs-line {
  10. position: relative;
  11. display: block;
  12. overflow: hidden;
  13. outline: none !important; }
  14. .irs-line-left, .irs-line-mid, .irs-line-right {
  15. position: absolute;
  16. top: 0;
  17. display: block; }
  18. .irs-line-left {
  19. left: 0;
  20. width: 11%; }
  21. .irs-line-mid {
  22. left: 9%;
  23. width: 82%; }
  24. .irs-line-right {
  25. right: 0;
  26. width: 11%; }
  27. .irs-bar {
  28. position: absolute;
  29. left: 0;
  30. display: block;
  31. width: 0; }
  32. .irs-bar-edge {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. display: block; }
  37. .irs-shadow {
  38. position: absolute;
  39. left: 0;
  40. display: none;
  41. width: 0; }
  42. .irs-slider {
  43. position: absolute;
  44. z-index: 1;
  45. display: block;
  46. cursor: default; }
  47. .irs-slider.type_last {
  48. z-index: 2; }
  49. .irs-min {
  50. position: absolute;
  51. left: 0;
  52. display: block;
  53. cursor: default; }
  54. .irs-max {
  55. position: absolute;
  56. right: 0;
  57. display: block;
  58. cursor: default; }
  59. .irs-from, .irs-to, .irs-single {
  60. position: absolute;
  61. top: 0;
  62. left: 0;
  63. display: block;
  64. white-space: nowrap;
  65. cursor: default; }
  66. .irs-grid {
  67. position: absolute;
  68. bottom: 0;
  69. left: 0;
  70. display: none;
  71. width: 100%;
  72. height: 20px; }
  73. .irs-with-grid .irs-grid {
  74. display: block; }
  75. .irs-grid-pol {
  76. position: absolute;
  77. top: 0;
  78. left: 0;
  79. width: 1px;
  80. height: 8px;
  81. background: #000; }
  82. .irs-grid-pol.small {
  83. height: 4px; }
  84. .irs-grid-text {
  85. position: absolute;
  86. bottom: 0;
  87. left: 0;
  88. padding: 0 3px;
  89. font-size: 9px;
  90. line-height: 9px;
  91. color: #000;
  92. text-align: center;
  93. white-space: nowrap; }
  94. .irs-disable-mask {
  95. position: absolute;
  96. top: 0;
  97. left: -1%;
  98. z-index: 2;
  99. display: block;
  100. width: 102%;
  101. height: 100%;
  102. cursor: default;
  103. background: rgba(0, 0, 0, 0); }
  104. .lt-ie9 .irs-disable-mask {
  105. cursor: not-allowed;
  106. background: #000;
  107. filter: alpha(opacity=0); }
  108. .irs-disabled {
  109. opacity: .4; }
  110. .irs-hidden-input {
  111. position: absolute !important;
  112. top: 0 !important;
  113. left: 0 !important;
  114. z-index: -9999 !important;
  115. display: block !important;
  116. width: 0 !important;
  117. height: 0 !important;
  118. padding: 0 !important;
  119. margin: 0 !important;
  120. overflow: hidden;
  121. font-size: 0 !important;
  122. line-height: 0 !important;
  123. background: none !important;
  124. border-color: transparent !important;
  125. border-style: solid !important;
  126. outline: none !important; }
  127. .irs {
  128. height: 40px; }
  129. .irs-with-grid {
  130. height: 60px; }
  131. .irs-line {
  132. top: 25px;
  133. height: 12px; }
  134. .irs-line-left,
  135. .irs-line-mid,
  136. .irs-line-right {
  137. height: 12px;
  138. background-color: #e4eaec; }
  139. .irs-bar {
  140. top: 25px;
  141. height: 12px;
  142. background-color: #3e8ef7; }
  143. .irs-bar-edge {
  144. top: 25px;
  145. width: 9px;
  146. height: 12px;
  147. background-color: #3e8ef7; }
  148. .irs-shadow {
  149. top: 34px;
  150. height: 3px;
  151. background: #000;
  152. opacity: .25; }
  153. .lt-ie9 .irs-shadow {
  154. filter: alpha(opacity=25); }
  155. .irs-slider {
  156. top: 22px;
  157. width: 16px;
  158. height: 18px; }
  159. .irs-slider::after {
  160. content: "";
  161. position: absolute;
  162. height: 100%;
  163. width: 3px;
  164. top: 0;
  165. left: 50%;
  166. -webkit-transform: translateX(-50%);
  167. transform: translateX(-50%);
  168. background-color: #3e8ef7; }
  169. .irs-slider.state_hover, .irs-slider:hover {
  170. cursor: pointer; }
  171. .irs-slider.state_hover::after, .irs-slider:hover::after {
  172. background-color: #0b69e3; }
  173. .irs-min, .irs-max {
  174. top: 0;
  175. padding: 1px 3px;
  176. font-size: 10px;
  177. line-height: 1.333;
  178. color: #76838f;
  179. text-shadow: none;
  180. background: #e4eaec;
  181. border-radius: 4px; }
  182. .irs-from, .irs-to, .irs-single {
  183. padding: 1px 5px;
  184. font-size: 10px;
  185. line-height: 1.333;
  186. color: #fff;
  187. text-shadow: none;
  188. background: #3e8ef7;
  189. border-radius: 4px; }
  190. .irs-from:after, .irs-to:after, .irs-single:after {
  191. position: absolute;
  192. bottom: -6px;
  193. left: 50%;
  194. display: block;
  195. width: 0;
  196. height: 0;
  197. margin-left: -3px;
  198. overflow: hidden;
  199. content: "";
  200. border: 3px solid transparent;
  201. border-top-color: #3e8ef7; }
  202. .irs-grid-pol {
  203. background: #e4eaec; }
  204. .irs-grid-text {
  205. color: #76838f; }