ion-rangeslider.css 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150
  1. @charset "UTF-8";
  2. /**
  3. Ion.RangeSlider, 2.3.1
  4. © Denis Ineshin, 2010 - 2019, IonDen.com
  5. Build date: 2019-12-19 16:51:02
  6. */
  7. @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
  8. .irs {
  9. position: relative;
  10. display: block;
  11. -webkit-touch-callout: none;
  12. -webkit-user-select: none;
  13. -moz-user-select: none;
  14. -ms-user-select: none;
  15. user-select: none;
  16. font-size: 12px;
  17. font-family: Arial, sans-serif; }
  18. .irs-line {
  19. position: relative;
  20. display: block;
  21. overflow: hidden;
  22. outline: none !important; }
  23. .irs-bar {
  24. position: absolute;
  25. display: block;
  26. left: 0;
  27. width: 0; }
  28. .irs-shadow {
  29. position: absolute;
  30. display: none;
  31. left: 0;
  32. width: 0; }
  33. .irs-handle {
  34. position: absolute;
  35. display: block;
  36. -webkit-box-sizing: border-box;
  37. box-sizing: border-box;
  38. cursor: default;
  39. z-index: 1; }
  40. .irs-handle.type_last {
  41. z-index: 2; }
  42. .irs-min,
  43. .irs-max {
  44. position: absolute;
  45. display: block;
  46. cursor: default; }
  47. .irs-min {
  48. left: 0; }
  49. .irs-max {
  50. right: 0; }
  51. .irs-from,
  52. .irs-to,
  53. .irs-single {
  54. position: absolute;
  55. display: block;
  56. top: 0;
  57. left: 0;
  58. cursor: default;
  59. white-space: nowrap; }
  60. .irs-grid {
  61. position: absolute;
  62. display: none;
  63. bottom: 0;
  64. left: 0;
  65. width: 100%;
  66. height: 20px; }
  67. .irs-with-grid .irs-grid {
  68. display: block; }
  69. .irs-grid-pol {
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. width: 1px;
  74. height: 8px;
  75. background: #000; }
  76. .irs-grid-pol.small {
  77. height: 4px; }
  78. .irs-grid-text {
  79. position: absolute;
  80. bottom: 0;
  81. left: 0;
  82. white-space: nowrap;
  83. text-align: center;
  84. font-size: 9px;
  85. line-height: 9px;
  86. padding: 0 3px;
  87. color: #000; }
  88. .irs-disable-mask {
  89. position: absolute;
  90. display: block;
  91. top: 0;
  92. left: -1%;
  93. width: 102%;
  94. height: 100%;
  95. cursor: default;
  96. background: rgba(0, 0, 0, 0);
  97. z-index: 2; }
  98. .lt-ie9 .irs-disable-mask {
  99. background: #000;
  100. filter: alpha(opacity=0);
  101. cursor: not-allowed; }
  102. .irs-disabled {
  103. opacity: 0.4; }
  104. .irs-hidden-input {
  105. position: absolute !important;
  106. display: block !important;
  107. top: 0 !important;
  108. left: 0 !important;
  109. width: 0 !important;
  110. height: 0 !important;
  111. font-size: 0 !important;
  112. line-height: 0 !important;
  113. padding: 0 !important;
  114. margin: 0 !important;
  115. overflow: hidden;
  116. outline: none !important;
  117. z-index: -9999 !important;
  118. background: none !important;
  119. border-style: solid !important;
  120. border-color: transparent !important; }
  121. .irs--flat {
  122. height: 40px; }
  123. .irs--flat.irs-with-grid {
  124. height: 60px; }
  125. .irs--flat .irs-line {
  126. top: 25px;
  127. height: 12px;
  128. background-color: #e1e4e9;
  129. border-radius: 4px; }
  130. .irs--flat .irs-bar {
  131. top: 25px;
  132. height: 12px;
  133. background-color: #ed5565; }
  134. .irs--flat .irs-bar--single {
  135. border-radius: 4px 0 0 4px; }
  136. .irs--flat .irs-shadow {
  137. height: 1px;
  138. bottom: 16px;
  139. background-color: #e1e4e9; }
  140. .irs--flat .irs-handle {
  141. top: 22px;
  142. width: 16px;
  143. height: 18px;
  144. background-color: transparent; }
  145. .irs--flat .irs-handle > i:first-child {
  146. position: absolute;
  147. display: block;
  148. top: 0;
  149. left: 50%;
  150. width: 2px;
  151. height: 100%;
  152. margin-left: -1px;
  153. background-color: #da4453; }
  154. .irs--flat .irs-handle.state_hover > i:first-child,
  155. .irs--flat .irs-handle:hover > i:first-child {
  156. background-color: #a43540; }
  157. .irs--flat .irs-min,
  158. .irs--flat .irs-max {
  159. top: 0;
  160. padding: 1px 3px;
  161. color: #999;
  162. font-size: 10px;
  163. line-height: 1.333;
  164. text-shadow: none;
  165. background-color: #e1e4e9;
  166. border-radius: 4px; }
  167. .irs--flat .irs-from,
  168. .irs--flat .irs-to,
  169. .irs--flat .irs-single {
  170. color: white;
  171. font-size: 10px;
  172. line-height: 1.333;
  173. text-shadow: none;
  174. padding: 1px 5px;
  175. background-color: #ed5565;
  176. border-radius: 4px; }
  177. .irs--flat .irs-from:before,
  178. .irs--flat .irs-to:before,
  179. .irs--flat .irs-single:before {
  180. position: absolute;
  181. display: block;
  182. content: "";
  183. bottom: -6px;
  184. left: 50%;
  185. width: 0;
  186. height: 0;
  187. margin-left: -3px;
  188. overflow: hidden;
  189. border: 3px solid transparent;
  190. border-top-color: #ed5565; }
  191. .irs--flat .irs-grid-pol {
  192. background-color: #e1e4e9; }
  193. .irs--flat .irs-grid-text {
  194. color: #999; }
  195. .irs--big {
  196. height: 55px; }
  197. .irs--big.irs-with-grid {
  198. height: 70px; }
  199. .irs--big .irs-line {
  200. top: 33px;
  201. height: 12px;
  202. background-color: white;
  203. background: -webkit-gradient(linear, left top, left bottom, color-stop(-50%, #ddd), color-stop(150%, white));
  204. background: linear-gradient(to bottom, #ddd -50%, white 150%);
  205. border: 1px solid #ccc;
  206. border-radius: 12px; }
  207. .irs--big .irs-bar {
  208. top: 33px;
  209. height: 12px;
  210. background-color: #92bce0;
  211. border: 1px solid #428bca;
  212. background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #428bca), to(#b9d4ec));
  213. background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
  214. -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
  215. box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5); }
  216. .irs--big .irs-bar--single {
  217. border-radius: 12px 0 0 12px; }
  218. .irs--big .irs-shadow {
  219. height: 1px;
  220. bottom: 16px;
  221. background-color: rgba(66, 139, 202, 0.5); }
  222. .irs--big .irs-handle {
  223. top: 25px;
  224. width: 30px;
  225. height: 30px;
  226. border: 1px solid rgba(0, 0, 0, 0.3);
  227. background-color: #cbcfd5;
  228. background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(30%, #B4B9BE), to(white));
  229. background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
  230. -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
  231. box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
  232. border-radius: 30px; }
  233. .irs--big .irs-handle.state_hover,
  234. .irs--big .irs-handle:hover {
  235. border-color: rgba(0, 0, 0, 0.45);
  236. background-color: #939ba7;
  237. background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(30%, #919BA5), to(white));
  238. background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%); }
  239. .irs--big .irs-min,
  240. .irs--big .irs-max {
  241. top: 0;
  242. padding: 1px 5px;
  243. color: white;
  244. text-shadow: none;
  245. background-color: #9f9f9f;
  246. border-radius: 3px; }
  247. .irs--big .irs-from,
  248. .irs--big .irs-to,
  249. .irs--big .irs-single {
  250. color: white;
  251. text-shadow: none;
  252. padding: 1px 5px;
  253. background-color: #428bca;
  254. background: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
  255. background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
  256. border-radius: 3px; }
  257. .irs--big .irs-grid-pol {
  258. background-color: #428bca; }
  259. .irs--big .irs-grid-text {
  260. color: #428bca; }
  261. .irs--modern {
  262. height: 55px; }
  263. .irs--modern.irs-with-grid {
  264. height: 55px; }
  265. .irs--modern .irs-line {
  266. top: 25px;
  267. height: 5px;
  268. background-color: #d1d6e0;
  269. background: -webkit-gradient(linear, left top, left bottom, from(#e0e4ea), to(#d1d6e0));
  270. background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
  271. border: 1px solid #a3adc1;
  272. border-bottom-width: 0;
  273. border-radius: 5px; }
  274. .irs--modern .irs-bar {
  275. top: 25px;
  276. height: 5px;
  277. background: #20b426;
  278. background: -webkit-gradient(linear, left top, left bottom, from(#20b426), to(#18891d));
  279. background: linear-gradient(to bottom, #20b426 0%, #18891d 100%); }
  280. .irs--modern .irs-bar--single {
  281. border-radius: 5px 0 0 5px; }
  282. .irs--modern .irs-shadow {
  283. height: 1px;
  284. bottom: 21px;
  285. background-color: rgba(209, 214, 224, 0.5); }
  286. .irs--modern .irs-handle {
  287. top: 37px;
  288. width: 12px;
  289. height: 13px;
  290. border: 1px solid #a3adc1;
  291. border-top-width: 0;
  292. -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  293. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  294. border-radius: 0 0 3px 3px; }
  295. .irs--modern .irs-handle > i:nth-child(1) {
  296. position: absolute;
  297. display: block;
  298. top: -4px;
  299. left: 1px;
  300. width: 6px;
  301. height: 6px;
  302. border: 1px solid #a3adc1;
  303. background: white;
  304. -webkit-transform: rotate(45deg);
  305. transform: rotate(45deg); }
  306. .irs--modern .irs-handle > i:nth-child(2) {
  307. position: absolute;
  308. display: block;
  309. -webkit-box-sizing: border-box;
  310. box-sizing: border-box;
  311. top: 0;
  312. left: 0;
  313. width: 10px;
  314. height: 12px;
  315. background: #e9e6e6;
  316. background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e9e6e6));
  317. background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
  318. border-radius: 0 0 3px 3px; }
  319. .irs--modern .irs-handle > i:nth-child(3) {
  320. position: absolute;
  321. display: block;
  322. -webkit-box-sizing: border-box;
  323. box-sizing: border-box;
  324. top: 3px;
  325. left: 3px;
  326. width: 4px;
  327. height: 5px;
  328. border-left: 1px solid #a3adc1;
  329. border-right: 1px solid #a3adc1; }
  330. .irs--modern .irs-handle.state_hover,
  331. .irs--modern .irs-handle:hover {
  332. border-color: #7685a2;
  333. background: #c3c7cd;
  334. background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #919ba5), to(#ffffff));
  335. background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%); }
  336. .irs--modern .irs-handle.state_hover > i:nth-child(1),
  337. .irs--modern .irs-handle:hover > i:nth-child(1) {
  338. border-color: #7685a2; }
  339. .irs--modern .irs-handle.state_hover > i:nth-child(3),
  340. .irs--modern .irs-handle:hover > i:nth-child(3) {
  341. border-color: #48536a; }
  342. .irs--modern .irs-min,
  343. .irs--modern .irs-max {
  344. top: 0;
  345. font-size: 10px;
  346. line-height: 1.333;
  347. text-shadow: none;
  348. padding: 1px 5px;
  349. color: white;
  350. background-color: #d1d6e0;
  351. border-radius: 5px; }
  352. .irs--modern .irs-from,
  353. .irs--modern .irs-to,
  354. .irs--modern .irs-single {
  355. font-size: 10px;
  356. line-height: 1.333;
  357. text-shadow: none;
  358. padding: 1px 5px;
  359. background-color: #20b426;
  360. color: white;
  361. border-radius: 5px; }
  362. .irs--modern .irs-from:before,
  363. .irs--modern .irs-to:before,
  364. .irs--modern .irs-single:before {
  365. position: absolute;
  366. display: block;
  367. content: "";
  368. bottom: -6px;
  369. left: 50%;
  370. width: 0;
  371. height: 0;
  372. margin-left: -3px;
  373. overflow: hidden;
  374. border: 3px solid transparent;
  375. border-top-color: #20b426; }
  376. .irs--modern .irs-grid {
  377. height: 25px; }
  378. .irs--modern .irs-grid-pol {
  379. background-color: #dedede; }
  380. .irs--modern .irs-grid-text {
  381. color: silver;
  382. font-size: 13px; }
  383. .irs--sharp {
  384. height: 50px;
  385. font-size: 12px;
  386. line-height: 1; }
  387. .irs--sharp.irs-with-grid {
  388. height: 57px; }
  389. .irs--sharp .irs-line {
  390. top: 30px;
  391. height: 2px;
  392. background-color: black;
  393. border-radius: 2px; }
  394. .irs--sharp .irs-bar {
  395. top: 30px;
  396. height: 2px;
  397. background-color: #ee22fa; }
  398. .irs--sharp .irs-bar--single {
  399. border-radius: 2px 0 0 2px; }
  400. .irs--sharp .irs-shadow {
  401. height: 1px;
  402. bottom: 21px;
  403. background-color: rgba(0, 0, 0, 0.5); }
  404. .irs--sharp .irs-handle {
  405. top: 25px;
  406. width: 10px;
  407. height: 10px;
  408. background-color: #a804b2; }
  409. .irs--sharp .irs-handle > i:first-child {
  410. position: absolute;
  411. display: block;
  412. top: 100%;
  413. left: 0;
  414. width: 0;
  415. height: 0;
  416. border: 5px solid transparent;
  417. border-top-color: #a804b2; }
  418. .irs--sharp .irs-handle.state_hover,
  419. .irs--sharp .irs-handle:hover {
  420. background-color: black; }
  421. .irs--sharp .irs-handle.state_hover > i:first-child,
  422. .irs--sharp .irs-handle:hover > i:first-child {
  423. border-top-color: black; }
  424. .irs--sharp .irs-min,
  425. .irs--sharp .irs-max {
  426. color: white;
  427. font-size: 14px;
  428. line-height: 1;
  429. top: 0;
  430. padding: 3px 4px;
  431. opacity: 0.4;
  432. background-color: #a804b2;
  433. border-radius: 2px; }
  434. .irs--sharp .irs-from,
  435. .irs--sharp .irs-to,
  436. .irs--sharp .irs-single {
  437. font-size: 14px;
  438. line-height: 1;
  439. text-shadow: none;
  440. padding: 3px 4px;
  441. background-color: #a804b2;
  442. color: white;
  443. border-radius: 2px; }
  444. .irs--sharp .irs-from:before,
  445. .irs--sharp .irs-to:before,
  446. .irs--sharp .irs-single:before {
  447. position: absolute;
  448. display: block;
  449. content: "";
  450. bottom: -6px;
  451. left: 50%;
  452. width: 0;
  453. height: 0;
  454. margin-left: -3px;
  455. overflow: hidden;
  456. border: 3px solid transparent;
  457. border-top-color: #a804b2; }
  458. .irs--sharp .irs-grid {
  459. height: 25px; }
  460. .irs--sharp .irs-grid-pol {
  461. background-color: #dedede; }
  462. .irs--sharp .irs-grid-text {
  463. color: silver;
  464. font-size: 13px; }
  465. .irs--round {
  466. height: 50px; }
  467. .irs--round.irs-with-grid {
  468. height: 65px; }
  469. .irs--round .irs-line {
  470. top: 36px;
  471. height: 4px;
  472. background-color: #dee4ec;
  473. border-radius: 4px; }
  474. .irs--round .irs-bar {
  475. top: 36px;
  476. height: 4px;
  477. background-color: #006cfa; }
  478. .irs--round .irs-bar--single {
  479. border-radius: 4px 0 0 4px; }
  480. .irs--round .irs-shadow {
  481. height: 4px;
  482. bottom: 21px;
  483. background-color: rgba(222, 228, 236, 0.5); }
  484. .irs--round .irs-handle {
  485. top: 26px;
  486. width: 24px;
  487. height: 24px;
  488. border: 4px solid #006cfa;
  489. background-color: white;
  490. border-radius: 24px;
  491. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
  492. box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3); }
  493. .irs--round .irs-handle.state_hover,
  494. .irs--round .irs-handle:hover {
  495. background-color: #f0f6ff; }
  496. .irs--round .irs-min,
  497. .irs--round .irs-max {
  498. color: #333;
  499. font-size: 14px;
  500. line-height: 1;
  501. top: 0;
  502. padding: 3px 5px;
  503. background-color: rgba(0, 0, 0, 0.1);
  504. border-radius: 4px; }
  505. .irs--round .irs-from,
  506. .irs--round .irs-to,
  507. .irs--round .irs-single {
  508. font-size: 14px;
  509. line-height: 1;
  510. text-shadow: none;
  511. padding: 3px 5px;
  512. background-color: #006cfa;
  513. color: white;
  514. border-radius: 4px; }
  515. .irs--round .irs-from:before,
  516. .irs--round .irs-to:before,
  517. .irs--round .irs-single:before {
  518. position: absolute;
  519. display: block;
  520. content: "";
  521. bottom: -6px;
  522. left: 50%;
  523. width: 0;
  524. height: 0;
  525. margin-left: -3px;
  526. overflow: hidden;
  527. border: 3px solid transparent;
  528. border-top-color: #006cfa; }
  529. .irs--round .irs-grid {
  530. height: 25px; }
  531. .irs--round .irs-grid-pol {
  532. background-color: #dedede; }
  533. .irs--round .irs-grid-text {
  534. color: silver;
  535. font-size: 13px; }
  536. .irs--square {
  537. height: 50px; }
  538. .irs--square.irs-with-grid {
  539. height: 60px; }
  540. .irs--square .irs-line {
  541. top: 31px;
  542. height: 4px;
  543. background-color: #dedede; }
  544. .irs--square .irs-bar {
  545. top: 31px;
  546. height: 4px;
  547. background-color: black; }
  548. .irs--square .irs-shadow {
  549. height: 2px;
  550. bottom: 21px;
  551. background-color: #dedede; }
  552. .irs--square .irs-handle {
  553. top: 25px;
  554. width: 16px;
  555. height: 16px;
  556. border: 3px solid black;
  557. background-color: white;
  558. -webkit-transform: rotate(45deg);
  559. transform: rotate(45deg); }
  560. .irs--square .irs-handle.state_hover,
  561. .irs--square .irs-handle:hover {
  562. background-color: #f0f6ff; }
  563. .irs--square .irs-min,
  564. .irs--square .irs-max {
  565. color: #333;
  566. font-size: 14px;
  567. line-height: 1;
  568. top: 0;
  569. padding: 3px 5px;
  570. background-color: rgba(0, 0, 0, 0.1); }
  571. .irs--square .irs-from,
  572. .irs--square .irs-to,
  573. .irs--square .irs-single {
  574. font-size: 14px;
  575. line-height: 1;
  576. text-shadow: none;
  577. padding: 3px 5px;
  578. background-color: black;
  579. color: white; }
  580. .irs--square .irs-grid {
  581. height: 25px; }
  582. .irs--square .irs-grid-pol {
  583. background-color: #dedede; }
  584. .irs--square .irs-grid-text {
  585. color: silver;
  586. font-size: 11px; }
  587. /* #BOOTSTRAP AND MIXINS - Base Unmodified Bootstrap file with theme mixins
  588. ========================================================================== */
  589. /*---------------------------------------------------
  590. SASS ELements (based on LESS Elements 0.9 http://lesselements.com)
  591. -------------------------------- -------------------
  592. LESS ELEMENTS made by Dmitry Fadeyev (http://fadeyev.net)
  593. SASS port by Samuel Beek (http://samuelbeek.com)
  594. ---------------------------------------------------*/
  595. /*------------------------
  596. Usage
  597. h1 {
  598. font-size: rem(32);
  599. }
  600. OR:
  601. h1 {
  602. font-size: rem(32px);
  603. }
  604. ------------------------*/
  605. /*------------------------
  606. FADE IN
  607. e.g. @include fadeIn( 2s );
  608. ------------------------*/
  609. /*------------------------
  610. mixin that calculates if text needs to be light or dark
  611. depending on the background color passed.
  612. From this W3C document: http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast
  613. usage:
  614. @include text-contrast($bgcolor)
  615. Color brightness is determined by the following formula:
  616. ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
  617. ------------------------*/
  618. /*------------------------
  619. color factory
  620. eg: @include paint($blue-grey-50, bg-blue-grey-50);
  621. ------------------------*/
  622. /* backface visibility */
  623. /* generate theme button */
  624. /* #BASE - Base Variable file along with font library, and colors.
  625. ========================================================================== */
  626. /* THEME COLORs
  627. ========================================================================== */
  628. /* Looks good on chrome default color profile */
  629. /* looks good in sRGB but washed up on chrome default
  630. $color-primary: #826bb0;
  631. $color-success: #31cb55;
  632. $color-info: #5e93ec;
  633. $color-warning: #eec559;
  634. $color-danger: #dc4b92;
  635. $color-fusion: darken(desaturate(adjust-hue($color-primary, 5), 80%), 25%); */
  636. /* Color Polarity
  637. ========================================================================== */
  638. /* PAINTBUCKET MIXER
  639. ========================================================================== */
  640. /* the grays */
  641. /* the sapphires */
  642. /* the emeralds */
  643. /* the amethyths */
  644. /* the topaz */
  645. /* the rubies */
  646. /* the graphites */
  647. /* Define universal border difition (div outlines, etc)
  648. ========================================================================== */
  649. /* MOBILE BREAKPOINT & GUTTERS (contains some bootstrap responsive overrides)
  650. ========================================================================== */
  651. /* define when mobile menu activates, here we are declearing (lg) so it targets the one after it */
  652. /* bootstrap reference xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px*/
  653. /* global var used for spacing*/
  654. /* Uniform Padding variable */
  655. /* Heads up! This is a global scoped variable - changing may impact the whole template */
  656. /* BOOTSTRAP OVERRIDES (bootstrap variables)
  657. ========================================================================== */
  658. /* usage: theme-colors("primary"); */
  659. /* forms */
  660. /*$input-height: calc(2.25rem + 1px); //I had to add this because the input gruops was having improper height for some reason... */
  661. /* links */
  662. /* checkbox */
  663. /*$custom-file-height-inner: calc(2.25rem - 1px);*/
  664. /* not part of bootstrap variable */
  665. /* custom checkbox */
  666. /* custom range */
  667. /* select */
  668. /* badge */
  669. /* cards */
  670. /*border radius*/
  671. /* alert */
  672. /* toast */
  673. /* breadcrumb */
  674. /* input button */
  675. /* nav link */
  676. /* nav, tabs, pills */
  677. /* tables */
  678. /* dropdowns */
  679. /* dropdowns sizes */
  680. /* popovers */
  681. /* tooltips */
  682. /* modal */
  683. /* reference guide
  684. http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/
  685. 8px = 0.5rem
  686. 9px = 0.5625rem
  687. 10px = 0.625rem
  688. 11px = 0.6875rem
  689. 12px = 0.75rem
  690. 13px = 0.8125rem
  691. 14px = 0.875rem
  692. 15px = 0.9375rem
  693. 16px = 1rem (base)
  694. 17px = 1.0625rem
  695. 18px = 1.125rem
  696. 19px = 1.1875rem
  697. 20px = 1.25rem
  698. 21px = 1.3125rem
  699. 22px = 1.375rem
  700. 24px = 1.5rem
  701. 25px = 1.5625rem
  702. 26px = 1.625rem
  703. 28px = 1.75rem
  704. 30px = 1.875rem
  705. 32px = 2rem
  706. 34px = 2.125rem
  707. 36px = 2.25rem
  708. 38px = 2.375rem
  709. 40px = 2.5rem
  710. */
  711. /* Fonts */
  712. /* carousel */
  713. /* BASE VARS
  714. ========================================================================== */
  715. /* font vars below will auto change to rem values using function rem($value)*/
  716. /* 11px */
  717. /* 12px */
  718. /* 12.5px */
  719. /* 14px */
  720. /* 15px */
  721. /* 16px */
  722. /* 28px */
  723. /* Font Family
  724. ========================================================================== */
  725. /*hint: you can also try the font called 'Poppins' by replacing the font 'Roboto' */
  726. /* ANIMATIONS
  727. ========================================================================== */
  728. /* this addresses all animation related to nav hide to nav minify */
  729. /* Z-INDEX declearation
  730. ========================================================================== */
  731. /* we adjust bootstrap z-index to be higher than our higest z-index*/
  732. /* CUSTOM ICON PREFIX
  733. ========================================================================== */
  734. /* PRINT CSS (landscape or portrait)
  735. ========================================================================== */
  736. /* landscape or portrait */
  737. /* auto, letter */
  738. /* Common Element Variables
  739. ========================================================================== */
  740. /* Z-index decleartion "birds eye view"
  741. ========================================================================== */
  742. /* Components
  743. ========================================================================== */
  744. /* PAGE HEADER STUFF
  745. ========================================================================== */
  746. /* colors */
  747. /* height */
  748. /* logo */
  749. /* try not to go beywond the width of $main_nav_width value */
  750. /* you may need to change this depending on your logo design */
  751. /* adjust this as you see fit : left, right, center */
  752. /* icon font size (not button) */
  753. /* search input box */
  754. /* suggestion: #ccced0*/
  755. /* btn */
  756. /* dropdown: app list */
  757. /* badge */
  758. /* COMPONENTS & MODS */
  759. /* NAVIGATION STUFF
  760. Guide:
  761. aside.page-sidebar ($nav-width, $nav-background)
  762. .page-logo
  763. .primary-nav
  764. .info-card
  765. ul.nav-menu
  766. li
  767. a (parent level-0..., $nav-link-color, $nav-link-hover-color, $nav-link-hover-bg-color, $nav-link-hover-left-border-color)
  768. icon
  769. span
  770. collapse-sign
  771. ul.nav-menu-sub-one
  772. li
  773. a ($nav-level-1... $nav-sub-link-height)
  774. span
  775. collapse-sign
  776. ul.nav-menu-sub-two
  777. li
  778. a ($nav-level-2... $nav-sub-link-height)
  779. span
  780. p.nav-title ($nav-title-*...)
  781. ========================================================================== */
  782. /* main navigation */
  783. /* left panel */
  784. /* nav parent level-0 */
  785. /* nav icon sizes */
  786. /* badge default */
  787. /* all child */
  788. /* nav title */
  789. /* nav Minify */
  790. /* when the menu pops on hover */
  791. /* navigation Width */
  792. /* partial visibility of the menu */
  793. /* top navigation */
  794. /* nav Info Card (appears below the logo) */
  795. /* width is auto */
  796. /* nav DL labels for all child */
  797. /* will be pulled to left as a negative value */
  798. /* MISC Settings
  799. ========================================================================== */
  800. /* List Table */
  801. /* PAGE SETTINGS
  802. ========================================================================== */
  803. /* PAGE BREADCRUMB
  804. ========================================================================== */
  805. /* PAGE COMPONENT PANELS
  806. ========================================================================== */
  807. /* PAGE COMPONENT PROGRESSBARS
  808. ========================================================================== */
  809. /* PAGE COMPONENT MESSENGER
  810. ========================================================================== */
  811. /* FOOTER
  812. ========================================================================== */
  813. /* GLOBALS
  814. ========================================================================== */
  815. /* ACCESSIBILITIES */
  816. /* SHORTCUT BUTTON (appears on bottom right of the page) */
  817. /* GULP WARNINGS */
  818. body {
  819. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;
  820. font-size: 0.8125rem;
  821. letter-spacing: 0.1px; }
  822. .page-content {
  823. color: #666666; }
  824. h1, h2, h3, h4, h5, h6 {
  825. line-height: 1.3;
  826. font-weight: 400; }
  827. strong {
  828. font-weight: 500; }
  829. h1 small,
  830. h2 small,
  831. h3 small,
  832. h4 small,
  833. h5 small,
  834. h6 small,
  835. .h1 small,
  836. .h2 small,
  837. .h3 small,
  838. .h4 small,
  839. .h5 small,
  840. .h6 small {
  841. font-weight: 300;
  842. display: block;
  843. font-size: 0.9375rem;
  844. line-height: 1.5;
  845. margin: 2px 0 1.5rem; }
  846. h2 small,
  847. h3 small,
  848. .h2 small,
  849. .h3 small {
  850. font-size: 0.9375rem; }
  851. h4 small,
  852. .h4 small {
  853. font-size: 0.875rem; }
  854. h5 small,
  855. h6 small,
  856. .h5 small,
  857. .h6 small {
  858. font-size: 0.8125rem; }
  859. /* contrast text */
  860. .text-contrast {
  861. color: #333333; }
  862. /* text-gradient */
  863. .text-gradient {
  864. background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #6e4e9e), color-stop(50%, #62468d), color-stop(75%, #0c7cd5), to(#0960a5));
  865. background: linear-gradient(180deg, #6e4e9e 25%, #62468d 50%, #0c7cd5 75%, #0960a5 100%);
  866. color: #886ab5;
  867. background-clip: text;
  868. text-fill-color: transparent;
  869. -webkit-background-clip: text;
  870. -webkit-text-fill-color: transparent;
  871. text-shadow: none; }
  872. /* looking for font size? Check _helpers.scss */
  873. /* PLACEHOLDER
  874. =============================================
  875. EXAMPLE:
  876. %bg-image {
  877. width: 100%;
  878. background-position: center center;
  879. background-size: cover;
  880. background-repeat: no-repeat;
  881. }
  882. .image-one {
  883. @extend %bg-image;
  884. background-image:url(/img/image-one.jpg");
  885. }
  886. RESULT:
  887. .image-one, .image-two {
  888. width: 100%;
  889. background-position: center center;
  890. background-size: cover;
  891. background-repeat: no-repeat;
  892. }
  893. */
  894. /*
  895. %shadow-hover {
  896. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.24);
  897. transition: all 0.2s ease-in-out;
  898. &:hover {
  899. box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 -1px 6px rgba(0,0,0,0.23);
  900. }
  901. }
  902. */
  903. /*%fixed-header-shadow {
  904. @include box-shadow(0 2px 2px -1px rgba(0,0,0,.1));
  905. }*/
  906. /* %selected-dot {
  907. &:before {
  908. content: " ";
  909. display: block;
  910. border-radius: 50%;
  911. background: inherit;
  912. background-image: none;
  913. border: 2px solid rgba(0,0,0,0.2);
  914. position: absolute;
  915. top: 15px;
  916. left: 15px;
  917. height: 20px;
  918. width: 20px;
  919. }
  920. &:after {
  921. content: " ";
  922. height: inherit;
  923. width: inherit;
  924. border: 5px solid rgba(0,0,0,0.1);
  925. position: absolute;
  926. left: 0;
  927. top: 0;
  928. border-radius: 50%;
  929. }
  930. }*/
  931. /* patterns */
  932. .irs--flat .irs-bar,
  933. .irs--flat .irs-from,
  934. .irs--flat .irs-to,
  935. .irs--flat .irs-single,
  936. .irs--flat .irs-handle > i:first-child {
  937. background-color: #886ab5; }
  938. .irs--flat .irs-from,
  939. .irs--flat .irs-to,
  940. .irs--flat .irs-single {
  941. font-size: 12px; }
  942. .irs--flat .irs-from:before,
  943. .irs--flat .irs-to:before,
  944. .irs--flat .irs-single:before {
  945. border-top-color: #886ab5; }
  946. .irs--flat .irs-handle.state_hover > i:first-child,
  947. .irs--flat .irs-handle:hover > i:first-child {
  948. background-color: #7a59ad; }
  949. .irs--big .irs-bar {
  950. background-color: #a38cc6;
  951. border-color: #886ab5;
  952. background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #a38cc6), to(#886ab5));
  953. background: linear-gradient(to bottom, #ffffff 0%, #a38cc6 30%, #886ab5 100%); }
  954. .irs--big .irs-from,
  955. .irs--big .irs-to,
  956. .irs--big .irs-single {
  957. background: #886ab5; }
  958. .irs--modern .irs-bar {
  959. background: #1ab3a3;
  960. background: -webkit-gradient(linear, left top, left bottom, from(#21dfcb), to(#1ab3a3));
  961. background: linear-gradient(to bottom, #21dfcb 0%, #1ab3a3 100%); }
  962. .irs--modern .irs-from,
  963. .irs--modern .irs-to,
  964. .irs--modern .irs-single {
  965. background-color: #1dc9b7; }
  966. .irs--modern .irs-from:before,
  967. .irs--modern .irs-to:before,
  968. .irs--modern .irs-single:before {
  969. border-top-color: #1dc9b7; }
  970. .irs--modern .irs-handle > i:nth-child(1) {
  971. width: 8px;
  972. height: 8px; }
  973. .irs--sharp .irs-bar,
  974. .irs--sharp .irs-handle,
  975. .irs--sharp .irs-from,
  976. .irs--sharp .irs-to,
  977. .irs--sharp .irs-single {
  978. background-color: #fd3995; }
  979. .irs--sharp .irs-handle > i:first-child,
  980. .irs--sharp .irs-from:before,
  981. .irs--sharp .irs-to:before,
  982. .irs--sharp .irs-single:before {
  983. border-top-color: #fd3995; }
  984. .irs--sharp .irs-min,
  985. .irs--sharp .irs-max {
  986. background-color: #e7026e; }
  987. .irs--round .irs-handle {
  988. border-color: #2196F3; }
  989. .irs--round .irs-bar,
  990. .irs--round .irs-from,
  991. .irs--round .irs-to,
  992. .irs--round .irs-single {
  993. background-color: #2196F3; }
  994. .irs--round .irs-from:before,
  995. .irs--round .irs-to:before,
  996. .irs--round .irs-single:before {
  997. border-top-color: #2196F3; }
  998. /*# sourceMappingURL=ion-rangeslider.css.map */