ion-rangeslider.css 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149
  1. @charset "UTF-8";
  2. /**
  3. Ion.RangeSlider, 2.3.0
  4. © Denis Ineshin, 2010 - 2018, IonDen.com
  5. Build date: 2018-12-11 23:23:51
  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. body {
  818. font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;
  819. font-size: 0.8125rem;
  820. letter-spacing: 0.1px; }
  821. .page-content {
  822. color: #666666; }
  823. h1, h2, h3, h4, h5, h6 {
  824. line-height: 1.3;
  825. font-weight: 400; }
  826. strong {
  827. font-weight: 500; }
  828. h1 small,
  829. h2 small,
  830. h3 small,
  831. h4 small,
  832. h5 small,
  833. h6 small,
  834. .h1 small,
  835. .h2 small,
  836. .h3 small,
  837. .h4 small,
  838. .h5 small,
  839. .h6 small {
  840. font-weight: 300;
  841. display: block;
  842. font-size: 0.9375rem;
  843. line-height: 1.5;
  844. margin: 2px 0 1.5rem; }
  845. h2 small,
  846. h3 small,
  847. .h2 small,
  848. .h3 small {
  849. font-size: 0.9375rem; }
  850. h4 small,
  851. .h4 small {
  852. font-size: 0.875rem; }
  853. h5 small,
  854. h6 small,
  855. .h5 small,
  856. .h6 small {
  857. font-size: 0.8125rem; }
  858. /* contrast text */
  859. .text-contrast {
  860. color: #333333; }
  861. /* text-gradient */
  862. .text-gradient {
  863. background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #6e4e9e), color-stop(50%, #62468d), color-stop(75%, #0c7cd5), to(#0960a5));
  864. background: linear-gradient(180deg, #6e4e9e 25%, #62468d 50%, #0c7cd5 75%, #0960a5 100%);
  865. color: #886ab5;
  866. background-clip: text;
  867. text-fill-color: transparent;
  868. -webkit-background-clip: text;
  869. -webkit-text-fill-color: transparent;
  870. text-shadow: none; }
  871. /* looking for font size? Check _helpers.scss */
  872. /* PLACEHOLDER
  873. =============================================
  874. EXAMPLE:
  875. %bg-image {
  876. width: 100%;
  877. background-position: center center;
  878. background-size: cover;
  879. background-repeat: no-repeat;
  880. }
  881. .image-one {
  882. @extend %bg-image;
  883. background-image:url(/img/image-one.jpg");
  884. }
  885. RESULT:
  886. .image-one, .image-two {
  887. width: 100%;
  888. background-position: center center;
  889. background-size: cover;
  890. background-repeat: no-repeat;
  891. }
  892. */
  893. /*
  894. %shadow-hover {
  895. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.24);
  896. transition: all 0.2s ease-in-out;
  897. &:hover {
  898. box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 -1px 6px rgba(0,0,0,0.23);
  899. }
  900. }
  901. */
  902. /*%fixed-header-shadow {
  903. @include box-shadow(0 2px 2px -1px rgba(0,0,0,.1));
  904. }*/
  905. /* %selected-dot {
  906. &:before {
  907. content: " ";
  908. display: block;
  909. border-radius: 50%;
  910. background: inherit;
  911. background-image: none;
  912. border: 2px solid rgba(0,0,0,0.2);
  913. position: absolute;
  914. top: 15px;
  915. left: 15px;
  916. height: 20px;
  917. width: 20px;
  918. }
  919. &:after {
  920. content: " ";
  921. height: inherit;
  922. width: inherit;
  923. border: 5px solid rgba(0,0,0,0.1);
  924. position: absolute;
  925. left: 0;
  926. top: 0;
  927. border-radius: 50%;
  928. }
  929. }*/
  930. /* patterns */
  931. .irs--flat .irs-bar,
  932. .irs--flat .irs-from,
  933. .irs--flat .irs-to,
  934. .irs--flat .irs-single,
  935. .irs--flat .irs-handle > i:first-child {
  936. background-color: #886ab5; }
  937. .irs--flat .irs-from,
  938. .irs--flat .irs-to,
  939. .irs--flat .irs-single {
  940. font-size: 12px; }
  941. .irs--flat .irs-from:before,
  942. .irs--flat .irs-to:before,
  943. .irs--flat .irs-single:before {
  944. border-top-color: #886ab5; }
  945. .irs--flat .irs-handle.state_hover > i:first-child,
  946. .irs--flat .irs-handle:hover > i:first-child {
  947. background-color: #7a59ad; }
  948. .irs--big .irs-bar {
  949. background-color: #a38cc6;
  950. border-color: #886ab5;
  951. background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #a38cc6), to(#886ab5));
  952. background: linear-gradient(to bottom, #ffffff 0%, #a38cc6 30%, #886ab5 100%); }
  953. .irs--big .irs-from,
  954. .irs--big .irs-to,
  955. .irs--big .irs-single {
  956. background: #886ab5; }
  957. .irs--modern .irs-bar {
  958. background: #1ab3a3;
  959. background: -webkit-gradient(linear, left top, left bottom, from(#21dfcb), to(#1ab3a3));
  960. background: linear-gradient(to bottom, #21dfcb 0%, #1ab3a3 100%); }
  961. .irs--modern .irs-from,
  962. .irs--modern .irs-to,
  963. .irs--modern .irs-single {
  964. background-color: #1dc9b7; }
  965. .irs--modern .irs-from:before,
  966. .irs--modern .irs-to:before,
  967. .irs--modern .irs-single:before {
  968. border-top-color: #1dc9b7; }
  969. .irs--modern .irs-handle > i:nth-child(1) {
  970. width: 8px;
  971. height: 8px; }
  972. .irs--sharp .irs-bar,
  973. .irs--sharp .irs-handle,
  974. .irs--sharp .irs-from,
  975. .irs--sharp .irs-to,
  976. .irs--sharp .irs-single {
  977. background-color: #fd3995; }
  978. .irs--sharp .irs-handle > i:first-child,
  979. .irs--sharp .irs-from:before,
  980. .irs--sharp .irs-to:before,
  981. .irs--sharp .irs-single:before {
  982. border-top-color: #fd3995; }
  983. .irs--sharp .irs-min,
  984. .irs--sharp .irs-max {
  985. background-color: #e7026e; }
  986. .irs--round .irs-handle {
  987. border-color: #2196F3; }
  988. .irs--round .irs-bar,
  989. .irs--round .irs-from,
  990. .irs--round .irs-to,
  991. .irs--round .irs-single {
  992. background-color: #2196F3; }
  993. .irs--round .irs-from:before,
  994. .irs--round .irs-to:before,
  995. .irs--round .irs-single:before {
  996. border-top-color: #2196F3; }
  997. /*# sourceMappingURL=ion-rangeslider.css.map */