ion.rangeSlider.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675
  1. /**
  2. Ion.RangeSlider, 2.3.0
  3. © Denis Ineshin, 2010 - 2018, IonDen.com
  4. Build date: 2018-12-11 23:23:51
  5. */
  6. .irs {
  7. position: relative;
  8. display: block;
  9. -webkit-touch-callout: none;
  10. -webkit-user-select: none;
  11. -khtml-user-select: none;
  12. -moz-user-select: none;
  13. -ms-user-select: none;
  14. user-select: none;
  15. font-size: 12px;
  16. font-family: Arial, sans-serif;
  17. }
  18. .irs-line {
  19. position: relative;
  20. display: block;
  21. overflow: hidden;
  22. outline: none !important;
  23. }
  24. .irs-bar {
  25. position: absolute;
  26. display: block;
  27. left: 0;
  28. width: 0;
  29. }
  30. .irs-shadow {
  31. position: absolute;
  32. display: none;
  33. left: 0;
  34. width: 0;
  35. }
  36. .irs-handle {
  37. position: absolute;
  38. display: block;
  39. box-sizing: border-box;
  40. cursor: default;
  41. z-index: 1;
  42. }
  43. .irs-handle.type_last {
  44. z-index: 2;
  45. }
  46. .irs-min,
  47. .irs-max {
  48. position: absolute;
  49. display: block;
  50. cursor: default;
  51. }
  52. .irs-min {
  53. left: 0;
  54. }
  55. .irs-max {
  56. right: 0;
  57. }
  58. .irs-from,
  59. .irs-to,
  60. .irs-single {
  61. position: absolute;
  62. display: block;
  63. top: 0;
  64. left: 0;
  65. cursor: default;
  66. white-space: nowrap;
  67. }
  68. .irs-grid {
  69. position: absolute;
  70. display: none;
  71. bottom: 0;
  72. left: 0;
  73. width: 100%;
  74. height: 20px;
  75. }
  76. .irs-with-grid .irs-grid {
  77. display: block;
  78. }
  79. .irs-grid-pol {
  80. position: absolute;
  81. top: 0;
  82. left: 0;
  83. width: 1px;
  84. height: 8px;
  85. background: #000;
  86. }
  87. .irs-grid-pol.small {
  88. height: 4px;
  89. }
  90. .irs-grid-text {
  91. position: absolute;
  92. bottom: 0;
  93. left: 0;
  94. white-space: nowrap;
  95. text-align: center;
  96. font-size: 9px;
  97. line-height: 9px;
  98. padding: 0 3px;
  99. color: #000;
  100. }
  101. .irs-disable-mask {
  102. position: absolute;
  103. display: block;
  104. top: 0;
  105. left: -1%;
  106. width: 102%;
  107. height: 100%;
  108. cursor: default;
  109. background: rgba(0, 0, 0, 0);
  110. z-index: 2;
  111. }
  112. .lt-ie9 .irs-disable-mask {
  113. background: #000;
  114. filter: alpha(opacity=0);
  115. cursor: not-allowed;
  116. }
  117. .irs-disabled {
  118. opacity: 0.4;
  119. }
  120. .irs-hidden-input {
  121. position: absolute !important;
  122. display: block !important;
  123. top: 0 !important;
  124. left: 0 !important;
  125. width: 0 !important;
  126. height: 0 !important;
  127. font-size: 0 !important;
  128. line-height: 0 !important;
  129. padding: 0 !important;
  130. margin: 0 !important;
  131. overflow: hidden;
  132. outline: none !important;
  133. z-index: -9999 !important;
  134. background: none !important;
  135. border-style: solid !important;
  136. border-color: transparent !important;
  137. }
  138. .irs--flat {
  139. height: 40px;
  140. }
  141. .irs--flat.irs-with-grid {
  142. height: 60px;
  143. }
  144. .irs--flat .irs-line {
  145. top: 25px;
  146. height: 12px;
  147. background-color: #e1e4e9;
  148. border-radius: 4px;
  149. }
  150. .irs--flat .irs-bar {
  151. top: 25px;
  152. height: 12px;
  153. background-color: #ed5565;
  154. }
  155. .irs--flat .irs-bar--single {
  156. border-radius: 4px 0 0 4px;
  157. }
  158. .irs--flat .irs-shadow {
  159. height: 1px;
  160. bottom: 16px;
  161. background-color: #e1e4e9;
  162. }
  163. .irs--flat .irs-handle {
  164. top: 22px;
  165. width: 16px;
  166. height: 18px;
  167. background-color: transparent;
  168. }
  169. .irs--flat .irs-handle > i:first-child {
  170. position: absolute;
  171. display: block;
  172. top: 0;
  173. left: 50%;
  174. width: 2px;
  175. height: 100%;
  176. margin-left: -1px;
  177. background-color: #da4453;
  178. }
  179. .irs--flat .irs-handle.state_hover > i:first-child,
  180. .irs--flat .irs-handle:hover > i:first-child {
  181. background-color: #a43540;
  182. }
  183. .irs--flat .irs-min,
  184. .irs--flat .irs-max {
  185. top: 0;
  186. padding: 1px 3px;
  187. color: #999;
  188. font-size: 10px;
  189. line-height: 1.333;
  190. text-shadow: none;
  191. background-color: #e1e4e9;
  192. border-radius: 4px;
  193. }
  194. .irs--flat .irs-from,
  195. .irs--flat .irs-to,
  196. .irs--flat .irs-single {
  197. color: white;
  198. font-size: 10px;
  199. line-height: 1.333;
  200. text-shadow: none;
  201. padding: 1px 5px;
  202. background-color: #ed5565;
  203. border-radius: 4px;
  204. }
  205. .irs--flat .irs-from:before,
  206. .irs--flat .irs-to:before,
  207. .irs--flat .irs-single:before {
  208. position: absolute;
  209. display: block;
  210. content: "";
  211. bottom: -6px;
  212. left: 50%;
  213. width: 0;
  214. height: 0;
  215. margin-left: -3px;
  216. overflow: hidden;
  217. border: 3px solid transparent;
  218. border-top-color: #ed5565;
  219. }
  220. .irs--flat .irs-grid-pol {
  221. background-color: #e1e4e9;
  222. }
  223. .irs--flat .irs-grid-text {
  224. color: #999;
  225. }
  226. .irs--big {
  227. height: 55px;
  228. }
  229. .irs--big.irs-with-grid {
  230. height: 70px;
  231. }
  232. .irs--big .irs-line {
  233. top: 33px;
  234. height: 12px;
  235. background-color: white;
  236. background: linear-gradient(to bottom, #ddd -50%, white 150%);
  237. border: 1px solid #ccc;
  238. border-radius: 12px;
  239. }
  240. .irs--big .irs-bar {
  241. top: 33px;
  242. height: 12px;
  243. background-color: #92bce0;
  244. border: 1px solid #428bca;
  245. background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
  246. box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
  247. }
  248. .irs--big .irs-bar--single {
  249. border-radius: 12px 0 0 12px;
  250. }
  251. .irs--big .irs-shadow {
  252. height: 1px;
  253. bottom: 16px;
  254. background-color: rgba(66, 139, 202, 0.5);
  255. }
  256. .irs--big .irs-handle {
  257. top: 25px;
  258. width: 30px;
  259. height: 30px;
  260. border: 1px solid rgba(0, 0, 0, 0.3);
  261. background-color: #cbcfd5;
  262. background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
  263. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
  264. border-radius: 30px;
  265. }
  266. .irs--big .irs-handle.state_hover,
  267. .irs--big .irs-handle:hover {
  268. border-color: rgba(0, 0, 0, 0.45);
  269. background-color: #939ba7;
  270. background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
  271. }
  272. .irs--big .irs-min,
  273. .irs--big .irs-max {
  274. top: 0;
  275. padding: 1px 5px;
  276. color: white;
  277. text-shadow: none;
  278. background-color: #9f9f9f;
  279. border-radius: 3px;
  280. }
  281. .irs--big .irs-from,
  282. .irs--big .irs-to,
  283. .irs--big .irs-single {
  284. color: white;
  285. text-shadow: none;
  286. padding: 1px 5px;
  287. background-color: #428bca;
  288. background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
  289. border-radius: 3px;
  290. }
  291. .irs--big .irs-grid-pol {
  292. background-color: #428bca;
  293. }
  294. .irs--big .irs-grid-text {
  295. color: #428bca;
  296. }
  297. .irs--modern {
  298. height: 55px;
  299. }
  300. .irs--modern.irs-with-grid {
  301. height: 55px;
  302. }
  303. .irs--modern .irs-line {
  304. top: 25px;
  305. height: 5px;
  306. background-color: #d1d6e0;
  307. background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
  308. border: 1px solid #a3adc1;
  309. border-bottom-width: 0;
  310. border-radius: 5px;
  311. }
  312. .irs--modern .irs-bar {
  313. top: 25px;
  314. height: 5px;
  315. background: #20b426;
  316. background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
  317. }
  318. .irs--modern .irs-bar--single {
  319. border-radius: 5px 0 0 5px;
  320. }
  321. .irs--modern .irs-shadow {
  322. height: 1px;
  323. bottom: 21px;
  324. background-color: rgba(209, 214, 224, 0.5);
  325. }
  326. .irs--modern .irs-handle {
  327. top: 37px;
  328. width: 12px;
  329. height: 13px;
  330. border: 1px solid #a3adc1;
  331. border-top-width: 0;
  332. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  333. border-radius: 0 0 3px 3px;
  334. }
  335. .irs--modern .irs-handle > i:nth-child(1) {
  336. position: absolute;
  337. display: block;
  338. top: -4px;
  339. left: 1px;
  340. width: 6px;
  341. height: 6px;
  342. border: 1px solid #a3adc1;
  343. background: white;
  344. transform: rotate(45deg);
  345. }
  346. .irs--modern .irs-handle > i:nth-child(2) {
  347. position: absolute;
  348. display: block;
  349. box-sizing: border-box;
  350. top: 0;
  351. left: 0;
  352. width: 10px;
  353. height: 12px;
  354. background: #e9e6e6;
  355. background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
  356. border-radius: 0 0 3px 3px;
  357. }
  358. .irs--modern .irs-handle > i:nth-child(3) {
  359. position: absolute;
  360. display: block;
  361. box-sizing: border-box;
  362. top: 3px;
  363. left: 3px;
  364. width: 4px;
  365. height: 5px;
  366. border-left: 1px solid #a3adc1;
  367. border-right: 1px solid #a3adc1;
  368. }
  369. .irs--modern .irs-handle.state_hover,
  370. .irs--modern .irs-handle:hover {
  371. border-color: #7685a2;
  372. background: #c3c7cd;
  373. background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
  374. }
  375. .irs--modern .irs-handle.state_hover > i:nth-child(1),
  376. .irs--modern .irs-handle:hover > i:nth-child(1) {
  377. border-color: #7685a2;
  378. }
  379. .irs--modern .irs-handle.state_hover > i:nth-child(3),
  380. .irs--modern .irs-handle:hover > i:nth-child(3) {
  381. border-color: #48536a;
  382. }
  383. .irs--modern .irs-min,
  384. .irs--modern .irs-max {
  385. top: 0;
  386. font-size: 10px;
  387. line-height: 1.333;
  388. text-shadow: none;
  389. padding: 1px 5px;
  390. color: white;
  391. background-color: #d1d6e0;
  392. border-radius: 5px;
  393. }
  394. .irs--modern .irs-from,
  395. .irs--modern .irs-to,
  396. .irs--modern .irs-single {
  397. font-size: 10px;
  398. line-height: 1.333;
  399. text-shadow: none;
  400. padding: 1px 5px;
  401. background-color: #20b426;
  402. color: white;
  403. border-radius: 5px;
  404. }
  405. .irs--modern .irs-from:before,
  406. .irs--modern .irs-to:before,
  407. .irs--modern .irs-single:before {
  408. position: absolute;
  409. display: block;
  410. content: "";
  411. bottom: -6px;
  412. left: 50%;
  413. width: 0;
  414. height: 0;
  415. margin-left: -3px;
  416. overflow: hidden;
  417. border: 3px solid transparent;
  418. border-top-color: #20b426;
  419. }
  420. .irs--modern .irs-grid {
  421. height: 25px;
  422. }
  423. .irs--modern .irs-grid-pol {
  424. background-color: #dedede;
  425. }
  426. .irs--modern .irs-grid-text {
  427. color: silver;
  428. font-size: 13px;
  429. }
  430. .irs--sharp {
  431. height: 50px;
  432. font-size: 12px;
  433. line-height: 1;
  434. }
  435. .irs--sharp.irs-with-grid {
  436. height: 57px;
  437. }
  438. .irs--sharp .irs-line {
  439. top: 30px;
  440. height: 2px;
  441. background-color: black;
  442. border-radius: 2px;
  443. }
  444. .irs--sharp .irs-bar {
  445. top: 30px;
  446. height: 2px;
  447. background-color: #ee22fa;
  448. }
  449. .irs--sharp .irs-bar--single {
  450. border-radius: 2px 0 0 2px;
  451. }
  452. .irs--sharp .irs-shadow {
  453. height: 1px;
  454. bottom: 21px;
  455. background-color: rgba(0, 0, 0, 0.5);
  456. }
  457. .irs--sharp .irs-handle {
  458. top: 25px;
  459. width: 10px;
  460. height: 10px;
  461. background-color: #a804b2;
  462. }
  463. .irs--sharp .irs-handle > i:first-child {
  464. position: absolute;
  465. display: block;
  466. top: 100%;
  467. left: 0;
  468. width: 0;
  469. height: 0;
  470. border: 5px solid transparent;
  471. border-top-color: #a804b2;
  472. }
  473. .irs--sharp .irs-handle.state_hover,
  474. .irs--sharp .irs-handle:hover {
  475. background-color: black;
  476. }
  477. .irs--sharp .irs-handle.state_hover > i:first-child,
  478. .irs--sharp .irs-handle:hover > i:first-child {
  479. border-top-color: black;
  480. }
  481. .irs--sharp .irs-min,
  482. .irs--sharp .irs-max {
  483. color: white;
  484. font-size: 14px;
  485. line-height: 1;
  486. top: 0;
  487. padding: 3px 4px;
  488. opacity: 0.4;
  489. background-color: #a804b2;
  490. border-radius: 2px;
  491. }
  492. .irs--sharp .irs-from,
  493. .irs--sharp .irs-to,
  494. .irs--sharp .irs-single {
  495. font-size: 14px;
  496. line-height: 1;
  497. text-shadow: none;
  498. padding: 3px 4px;
  499. background-color: #a804b2;
  500. color: white;
  501. border-radius: 2px;
  502. }
  503. .irs--sharp .irs-from:before,
  504. .irs--sharp .irs-to:before,
  505. .irs--sharp .irs-single:before {
  506. position: absolute;
  507. display: block;
  508. content: "";
  509. bottom: -6px;
  510. left: 50%;
  511. width: 0;
  512. height: 0;
  513. margin-left: -3px;
  514. overflow: hidden;
  515. border: 3px solid transparent;
  516. border-top-color: #a804b2;
  517. }
  518. .irs--sharp .irs-grid {
  519. height: 25px;
  520. }
  521. .irs--sharp .irs-grid-pol {
  522. background-color: #dedede;
  523. }
  524. .irs--sharp .irs-grid-text {
  525. color: silver;
  526. font-size: 13px;
  527. }
  528. .irs--round {
  529. height: 50px;
  530. }
  531. .irs--round.irs-with-grid {
  532. height: 65px;
  533. }
  534. .irs--round .irs-line {
  535. top: 36px;
  536. height: 4px;
  537. background-color: #dee4ec;
  538. border-radius: 4px;
  539. }
  540. .irs--round .irs-bar {
  541. top: 36px;
  542. height: 4px;
  543. background-color: #006cfa;
  544. }
  545. .irs--round .irs-bar--single {
  546. border-radius: 4px 0 0 4px;
  547. }
  548. .irs--round .irs-shadow {
  549. height: 4px;
  550. bottom: 21px;
  551. background-color: rgba(222, 228, 236, 0.5);
  552. }
  553. .irs--round .irs-handle {
  554. top: 26px;
  555. width: 24px;
  556. height: 24px;
  557. border: 4px solid #006cfa;
  558. background-color: white;
  559. border-radius: 24px;
  560. box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
  561. }
  562. .irs--round .irs-handle.state_hover,
  563. .irs--round .irs-handle:hover {
  564. background-color: #f0f6ff;
  565. }
  566. .irs--round .irs-min,
  567. .irs--round .irs-max {
  568. color: #333;
  569. font-size: 14px;
  570. line-height: 1;
  571. top: 0;
  572. padding: 3px 5px;
  573. background-color: rgba(0, 0, 0, 0.1);
  574. border-radius: 4px;
  575. }
  576. .irs--round .irs-from,
  577. .irs--round .irs-to,
  578. .irs--round .irs-single {
  579. font-size: 14px;
  580. line-height: 1;
  581. text-shadow: none;
  582. padding: 3px 5px;
  583. background-color: #006cfa;
  584. color: white;
  585. border-radius: 4px;
  586. }
  587. .irs--round .irs-from:before,
  588. .irs--round .irs-to:before,
  589. .irs--round .irs-single:before {
  590. position: absolute;
  591. display: block;
  592. content: "";
  593. bottom: -6px;
  594. left: 50%;
  595. width: 0;
  596. height: 0;
  597. margin-left: -3px;
  598. overflow: hidden;
  599. border: 3px solid transparent;
  600. border-top-color: #006cfa;
  601. }
  602. .irs--round .irs-grid {
  603. height: 25px;
  604. }
  605. .irs--round .irs-grid-pol {
  606. background-color: #dedede;
  607. }
  608. .irs--round .irs-grid-text {
  609. color: silver;
  610. font-size: 13px;
  611. }
  612. .irs--square {
  613. height: 50px;
  614. }
  615. .irs--square.irs-with-grid {
  616. height: 60px;
  617. }
  618. .irs--square .irs-line {
  619. top: 31px;
  620. height: 4px;
  621. background-color: #dedede;
  622. }
  623. .irs--square .irs-bar {
  624. top: 31px;
  625. height: 4px;
  626. background-color: black;
  627. }
  628. .irs--square .irs-shadow {
  629. height: 2px;
  630. bottom: 21px;
  631. background-color: #dedede;
  632. }
  633. .irs--square .irs-handle {
  634. top: 25px;
  635. width: 16px;
  636. height: 16px;
  637. border: 3px solid black;
  638. background-color: white;
  639. -webkit-transform: rotate(45deg);
  640. -ms-transform: rotate(45deg);
  641. transform: rotate(45deg);
  642. }
  643. .irs--square .irs-handle.state_hover,
  644. .irs--square .irs-handle:hover {
  645. background-color: #f0f6ff;
  646. }
  647. .irs--square .irs-min,
  648. .irs--square .irs-max {
  649. color: #333;
  650. font-size: 14px;
  651. line-height: 1;
  652. top: 0;
  653. padding: 3px 5px;
  654. background-color: rgba(0, 0, 0, 0.1);
  655. }
  656. .irs--square .irs-from,
  657. .irs--square .irs-to,
  658. .irs--square .irs-single {
  659. font-size: 14px;
  660. line-height: 1;
  661. text-shadow: none;
  662. padding: 3px 5px;
  663. background-color: black;
  664. color: white;
  665. }
  666. .irs--square .irs-grid {
  667. height: 25px;
  668. }
  669. .irs--square .irs-grid-pol {
  670. background-color: #dedede;
  671. }
  672. .irs--square .irs-grid-text {
  673. color: silver;
  674. font-size: 11px;
  675. }