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.

309 lines
5.6 KiB

  1. /* Functional styling;
  2. * These styles are required for noUiSlider to function.
  3. * You don't need to change these rules to apply your design.
  4. */
  5. .noUi-target,
  6. .noUi-target * {
  7. -webkit-touch-callout: none;
  8. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  9. -webkit-user-select: none;
  10. -ms-touch-action: none;
  11. touch-action: none;
  12. -ms-user-select: none;
  13. -moz-user-select: none;
  14. user-select: none;
  15. -moz-box-sizing: border-box;
  16. box-sizing: border-box;
  17. }
  18. .noUi-target {
  19. position: relative;
  20. }
  21. .noUi-base,
  22. .noUi-connects {
  23. width: 100%;
  24. height: 100%;
  25. position: relative;
  26. z-index: 1;
  27. }
  28. /* Wrapper for all connect elements.
  29. */
  30. .noUi-connects {
  31. overflow: hidden;
  32. z-index: 0;
  33. }
  34. .noUi-connect,
  35. .noUi-origin {
  36. will-change: transform;
  37. position: absolute;
  38. z-index: 1;
  39. top: 0;
  40. right: 0;
  41. -ms-transform-origin: 0 0;
  42. -webkit-transform-origin: 0 0;
  43. -webkit-transform-style: preserve-3d;
  44. transform-origin: 0 0;
  45. transform-style: flat;
  46. }
  47. .noUi-connect {
  48. height: 100%;
  49. width: 100%;
  50. }
  51. .noUi-origin {
  52. height: 10%;
  53. width: 10%;
  54. }
  55. /* Offset direction
  56. */
  57. .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  58. left: 0;
  59. right: auto;
  60. }
  61. /* Give origins 0 height/width so they don't interfere with clicking the
  62. * connect elements.
  63. */
  64. .noUi-vertical .noUi-origin {
  65. width: 0;
  66. }
  67. .noUi-horizontal .noUi-origin {
  68. height: 0;
  69. }
  70. .noUi-handle {
  71. -webkit-backface-visibility: hidden;
  72. backface-visibility: hidden;
  73. position: absolute;
  74. }
  75. .noUi-touch-area {
  76. height: 100%;
  77. width: 100%;
  78. }
  79. .noUi-state-tap .noUi-connect,
  80. .noUi-state-tap .noUi-origin {
  81. -webkit-transition: transform 0.3s;
  82. transition: transform 0.3s;
  83. }
  84. .noUi-state-drag * {
  85. cursor: inherit !important;
  86. }
  87. /* Slider size and handle placement;
  88. */
  89. .noUi-horizontal {
  90. height: 18px;
  91. }
  92. .noUi-horizontal .noUi-handle {
  93. width: 34px;
  94. height: 28px;
  95. right: -17px;
  96. top: -6px;
  97. }
  98. .noUi-vertical {
  99. width: 18px;
  100. }
  101. .noUi-vertical .noUi-handle {
  102. width: 28px;
  103. height: 34px;
  104. right: -6px;
  105. top: -17px;
  106. }
  107. .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  108. left: -17px;
  109. right: auto;
  110. }
  111. /* Styling;
  112. * Giving the connect element a border radius causes issues with using transform: scale
  113. */
  114. .noUi-target {
  115. background: #FAFAFA;
  116. border-radius: 4px;
  117. border: 1px solid #D3D3D3;
  118. box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
  119. }
  120. .noUi-connects {
  121. border-radius: 3px;
  122. }
  123. .noUi-connect {
  124. background: #3FB8AF;
  125. }
  126. /* Handles and cursors;
  127. */
  128. .noUi-draggable {
  129. cursor: ew-resize;
  130. }
  131. .noUi-vertical .noUi-draggable {
  132. cursor: ns-resize;
  133. }
  134. .noUi-handle {
  135. border: 1px solid #D9D9D9;
  136. border-radius: 3px;
  137. background: #FFF;
  138. cursor: default;
  139. box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
  140. }
  141. .noUi-active {
  142. box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
  143. }
  144. /* Handle stripes;
  145. */
  146. .noUi-handle:before,
  147. .noUi-handle:after {
  148. content: "";
  149. display: block;
  150. position: absolute;
  151. height: 14px;
  152. width: 1px;
  153. background: #E8E7E6;
  154. left: 14px;
  155. top: 6px;
  156. }
  157. .noUi-handle:after {
  158. left: 17px;
  159. }
  160. .noUi-vertical .noUi-handle:before,
  161. .noUi-vertical .noUi-handle:after {
  162. width: 14px;
  163. height: 1px;
  164. left: 6px;
  165. top: 14px;
  166. }
  167. .noUi-vertical .noUi-handle:after {
  168. top: 17px;
  169. }
  170. /* Disabled state;
  171. */
  172. [disabled] .noUi-connect {
  173. background: #B8B8B8;
  174. }
  175. [disabled].noUi-target,
  176. [disabled].noUi-handle,
  177. [disabled] .noUi-handle {
  178. cursor: not-allowed;
  179. }
  180. /* Base;
  181. *
  182. */
  183. .noUi-pips,
  184. .noUi-pips * {
  185. -moz-box-sizing: border-box;
  186. box-sizing: border-box;
  187. }
  188. .noUi-pips {
  189. position: absolute;
  190. color: #999;
  191. }
  192. /* Values;
  193. *
  194. */
  195. .noUi-value {
  196. position: absolute;
  197. white-space: nowrap;
  198. text-align: center;
  199. }
  200. .noUi-value-sub {
  201. color: #ccc;
  202. font-size: 10px;
  203. }
  204. /* Markings;
  205. *
  206. */
  207. .noUi-marker {
  208. position: absolute;
  209. background: #CCC;
  210. }
  211. .noUi-marker-sub {
  212. background: #AAA;
  213. }
  214. .noUi-marker-large {
  215. background: #AAA;
  216. }
  217. /* Horizontal layout;
  218. *
  219. */
  220. .noUi-pips-horizontal {
  221. padding: 10px 0;
  222. height: 80px;
  223. top: 100%;
  224. left: 0;
  225. width: 100%;
  226. }
  227. .noUi-value-horizontal {
  228. -webkit-transform: translate(-50%, 50%);
  229. transform: translate(-50%, 50%);
  230. }
  231. .noUi-rtl .noUi-value-horizontal {
  232. -webkit-transform: translate(50%, 50%);
  233. transform: translate(50%, 50%);
  234. }
  235. .noUi-marker-horizontal.noUi-marker {
  236. margin-left: -1px;
  237. width: 2px;
  238. height: 5px;
  239. }
  240. .noUi-marker-horizontal.noUi-marker-sub {
  241. height: 10px;
  242. }
  243. .noUi-marker-horizontal.noUi-marker-large {
  244. height: 15px;
  245. }
  246. /* Vertical layout;
  247. *
  248. */
  249. .noUi-pips-vertical {
  250. padding: 0 10px;
  251. height: 100%;
  252. top: 0;
  253. left: 100%;
  254. }
  255. .noUi-value-vertical {
  256. -webkit-transform: translate(0, -50%);
  257. transform: translate(0, -50%);
  258. padding-left: 25px;
  259. }
  260. .noUi-rtl .noUi-value-vertical {
  261. -webkit-transform: translate(0, 50%);
  262. transform: translate(0, 50%);
  263. }
  264. .noUi-marker-vertical.noUi-marker {
  265. width: 5px;
  266. height: 2px;
  267. margin-top: -1px;
  268. }
  269. .noUi-marker-vertical.noUi-marker-sub {
  270. width: 10px;
  271. }
  272. .noUi-marker-vertical.noUi-marker-large {
  273. width: 15px;
  274. }
  275. .noUi-tooltip {
  276. display: block;
  277. position: absolute;
  278. border: 1px solid #D9D9D9;
  279. border-radius: 3px;
  280. background: #fff;
  281. color: #000;
  282. padding: 5px;
  283. text-align: center;
  284. white-space: nowrap;
  285. }
  286. .noUi-horizontal .noUi-tooltip {
  287. -webkit-transform: translate(-50%, 0);
  288. transform: translate(-50%, 0);
  289. left: 50%;
  290. bottom: 120%;
  291. }
  292. .noUi-vertical .noUi-tooltip {
  293. -webkit-transform: translate(0, -50%);
  294. transform: translate(0, -50%);
  295. top: 50%;
  296. right: 120%;
  297. }
  298. .noUi-horizontal .noUi-origin > .noUi-tooltip {
  299. -webkit-transform: translate(50%, 0);
  300. transform: translate(50%, 0);
  301. left: auto;
  302. bottom: 10px;
  303. }
  304. .noUi-vertical .noUi-origin > .noUi-tooltip {
  305. -webkit-transform: translate(0, -18px);
  306. transform: translate(0, -18px);
  307. top: auto;
  308. right: 28px;
  309. }