pretty-checkbox.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959
  1. /**
  2. * pretty-checkbox.css
  3. *
  4. * A pure CSS library to beautify checkbox and radio buttons
  5. *
  6. * Source: https://github.com/lokesh-coder/pretty-checkbox
  7. * Demo: https://lokesh-coder.github.io/pretty-checkbox
  8. *
  9. * Copyright (c) 2017 Lokesh rajendran
  10. */
  11. .pretty * {
  12. box-sizing: border-box;
  13. }
  14. .pretty input:not([type='checkbox']):not([type='radio']) {
  15. display: none;
  16. }
  17. .pretty {
  18. position: relative;
  19. display: inline-block;
  20. margin-right: 1em;
  21. white-space: nowrap;
  22. line-height: 1;
  23. }
  24. .pretty input {
  25. position: absolute;
  26. left: 0;
  27. top: 0;
  28. min-width: 1em;
  29. width: 100%;
  30. height: 100%;
  31. z-index: 2;
  32. opacity: 0;
  33. margin: 0;
  34. padding: 0;
  35. cursor: pointer;
  36. }
  37. .pretty .state label {
  38. position: initial;
  39. display: inline-block;
  40. font-weight: normal;
  41. margin: 0;
  42. text-indent: 1.5em;
  43. min-width: calc(1em + 2px);
  44. }
  45. .pretty .state label:before,
  46. .pretty .state label:after {
  47. content: '';
  48. width: calc(1em + 2px);
  49. height: calc(1em + 2px);
  50. display: block;
  51. box-sizing: border-box;
  52. border-radius: 0;
  53. border: 1px solid transparent;
  54. z-index: 0;
  55. position: absolute;
  56. left: 0;
  57. top: calc((0% - (100% - 1em)) - 8%);
  58. background-color: transparent;
  59. }
  60. .pretty .state label:before {
  61. border-color: #bdc3c7;
  62. }
  63. .pretty .state.p-is-hover,
  64. .pretty .state.p-is-indeterminate {
  65. display: none;
  66. }
  67. @-webkit-keyframes zoom {
  68. 0% {
  69. opacity: 0;
  70. -webkit-transform: scale(0);
  71. transform: scale(0);
  72. }
  73. }
  74. @keyframes zoom {
  75. 0% {
  76. opacity: 0;
  77. -webkit-transform: scale(0);
  78. transform: scale(0);
  79. }
  80. }
  81. @-webkit-keyframes tada {
  82. 0% {
  83. -webkit-animation-timing-function: ease-in;
  84. animation-timing-function: ease-in;
  85. opacity: 0;
  86. -webkit-transform: scale(7);
  87. transform: scale(7);
  88. }
  89. 38% {
  90. -webkit-animation-timing-function: ease-out;
  91. animation-timing-function: ease-out;
  92. opacity: 1;
  93. -webkit-transform: scale(1);
  94. transform: scale(1);
  95. }
  96. 55% {
  97. -webkit-animation-timing-function: ease-in;
  98. animation-timing-function: ease-in;
  99. -webkit-transform: scale(1.5);
  100. transform: scale(1.5);
  101. }
  102. 72% {
  103. -webkit-animation-timing-function: ease-out;
  104. animation-timing-function: ease-out;
  105. -webkit-transform: scale(1);
  106. transform: scale(1);
  107. }
  108. 81% {
  109. -webkit-animation-timing-function: ease-in;
  110. animation-timing-function: ease-in;
  111. -webkit-transform: scale(1.24);
  112. transform: scale(1.24);
  113. }
  114. 89% {
  115. -webkit-animation-timing-function: ease-out;
  116. animation-timing-function: ease-out;
  117. -webkit-transform: scale(1);
  118. transform: scale(1);
  119. }
  120. 95% {
  121. -webkit-animation-timing-function: ease-in;
  122. animation-timing-function: ease-in;
  123. -webkit-transform: scale(1.04);
  124. transform: scale(1.04);
  125. }
  126. 100% {
  127. -webkit-animation-timing-function: ease-out;
  128. animation-timing-function: ease-out;
  129. -webkit-transform: scale(1);
  130. transform: scale(1);
  131. }
  132. }
  133. @keyframes tada {
  134. 0% {
  135. -webkit-animation-timing-function: ease-in;
  136. animation-timing-function: ease-in;
  137. opacity: 0;
  138. -webkit-transform: scale(7);
  139. transform: scale(7);
  140. }
  141. 38% {
  142. -webkit-animation-timing-function: ease-out;
  143. animation-timing-function: ease-out;
  144. opacity: 1;
  145. -webkit-transform: scale(1);
  146. transform: scale(1);
  147. }
  148. 55% {
  149. -webkit-animation-timing-function: ease-in;
  150. animation-timing-function: ease-in;
  151. -webkit-transform: scale(1.5);
  152. transform: scale(1.5);
  153. }
  154. 72% {
  155. -webkit-animation-timing-function: ease-out;
  156. animation-timing-function: ease-out;
  157. -webkit-transform: scale(1);
  158. transform: scale(1);
  159. }
  160. 81% {
  161. -webkit-animation-timing-function: ease-in;
  162. animation-timing-function: ease-in;
  163. -webkit-transform: scale(1.24);
  164. transform: scale(1.24);
  165. }
  166. 89% {
  167. -webkit-animation-timing-function: ease-out;
  168. animation-timing-function: ease-out;
  169. -webkit-transform: scale(1);
  170. transform: scale(1);
  171. }
  172. 95% {
  173. -webkit-animation-timing-function: ease-in;
  174. animation-timing-function: ease-in;
  175. -webkit-transform: scale(1.04);
  176. transform: scale(1.04);
  177. }
  178. 100% {
  179. -webkit-animation-timing-function: ease-out;
  180. animation-timing-function: ease-out;
  181. -webkit-transform: scale(1);
  182. transform: scale(1);
  183. }
  184. }
  185. @-webkit-keyframes jelly {
  186. 0% {
  187. -webkit-transform: scale3d(1, 1, 1);
  188. transform: scale3d(1, 1, 1);
  189. }
  190. 30% {
  191. -webkit-transform: scale3d(0.75, 1.25, 1);
  192. transform: scale3d(0.75, 1.25, 1);
  193. }
  194. 40% {
  195. -webkit-transform: scale3d(1.25, 0.75, 1);
  196. transform: scale3d(1.25, 0.75, 1);
  197. }
  198. 50% {
  199. -webkit-transform: scale3d(0.85, 1.15, 1);
  200. transform: scale3d(0.85, 1.15, 1);
  201. }
  202. 65% {
  203. -webkit-transform: scale3d(1.05, 0.95, 1);
  204. transform: scale3d(1.05, 0.95, 1);
  205. }
  206. 75% {
  207. -webkit-transform: scale3d(0.95, 1.05, 1);
  208. transform: scale3d(0.95, 1.05, 1);
  209. }
  210. 100% {
  211. -webkit-transform: scale3d(1, 1, 1);
  212. transform: scale3d(1, 1, 1);
  213. }
  214. }
  215. @keyframes jelly {
  216. 0% {
  217. -webkit-transform: scale3d(1, 1, 1);
  218. transform: scale3d(1, 1, 1);
  219. }
  220. 30% {
  221. -webkit-transform: scale3d(0.75, 1.25, 1);
  222. transform: scale3d(0.75, 1.25, 1);
  223. }
  224. 40% {
  225. -webkit-transform: scale3d(1.25, 0.75, 1);
  226. transform: scale3d(1.25, 0.75, 1);
  227. }
  228. 50% {
  229. -webkit-transform: scale3d(0.85, 1.15, 1);
  230. transform: scale3d(0.85, 1.15, 1);
  231. }
  232. 65% {
  233. -webkit-transform: scale3d(1.05, 0.95, 1);
  234. transform: scale3d(1.05, 0.95, 1);
  235. }
  236. 75% {
  237. -webkit-transform: scale3d(0.95, 1.05, 1);
  238. transform: scale3d(0.95, 1.05, 1);
  239. }
  240. 100% {
  241. -webkit-transform: scale3d(1, 1, 1);
  242. transform: scale3d(1, 1, 1);
  243. }
  244. }
  245. @-webkit-keyframes rotate {
  246. 0% {
  247. opacity: 0;
  248. -webkit-transform: translateZ(-200px) rotate(-45deg);
  249. transform: translateZ(-200px) rotate(-45deg);
  250. }
  251. 100% {
  252. opacity: 1;
  253. -webkit-transform: translateZ(0) rotate(0);
  254. transform: translateZ(0) rotate(0);
  255. }
  256. }
  257. @keyframes rotate {
  258. 0% {
  259. opacity: 0;
  260. -webkit-transform: translateZ(-200px) rotate(-45deg);
  261. transform: translateZ(-200px) rotate(-45deg);
  262. }
  263. 100% {
  264. opacity: 1;
  265. -webkit-transform: translateZ(0) rotate(0);
  266. transform: translateZ(0) rotate(0);
  267. }
  268. }
  269. @-webkit-keyframes pulse {
  270. 0% {
  271. box-shadow: 0px 0px 0px 0px #bdc3c7;
  272. }
  273. 100% {
  274. box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);
  275. }
  276. }
  277. @keyframes pulse {
  278. 0% {
  279. box-shadow: 0px 0px 0px 0px #bdc3c7;
  280. }
  281. 100% {
  282. box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);
  283. }
  284. }
  285. .pretty.p-default.p-fill .state label:after {
  286. -webkit-transform: scale(1);
  287. -ms-transform: scale(1);
  288. transform: scale(1);
  289. }
  290. .pretty.p-default .state label:after {
  291. -webkit-transform: scale(0.6);
  292. -ms-transform: scale(0.6);
  293. transform: scale(0.6);
  294. }
  295. .pretty.p-default input:checked ~ .state label:after {
  296. background-color: #bdc3c7 !important;
  297. }
  298. .pretty.p-default.p-thick .state label:before,
  299. .pretty.p-default.p-thick .state label:after {
  300. border-width: calc(1em / 7);
  301. }
  302. .pretty.p-default.p-thick .state label:after {
  303. -webkit-transform: scale(0.4) !important;
  304. -ms-transform: scale(0.4) !important;
  305. transform: scale(0.4) !important;
  306. }
  307. .pretty.p-icon .state .icon {
  308. position: absolute;
  309. font-size: 1em;
  310. width: calc(1em + 2px);
  311. height: calc(1em + 2px);
  312. left: 0;
  313. z-index: 1;
  314. text-align: center;
  315. line-height: normal;
  316. top: calc((0% - (100% - 1em)) - 8%);
  317. border: 1px solid transparent;
  318. opacity: 0;
  319. }
  320. .pretty.p-icon .state .icon:before {
  321. margin: 0;
  322. width: 100%;
  323. height: 100%;
  324. text-align: center;
  325. display: -webkit-box;
  326. display: -ms-flexbox;
  327. display: flex;
  328. -webkit-box-flex: 1;
  329. -ms-flex: 1;
  330. flex: 1;
  331. -webkit-box-pack: center;
  332. -ms-flex-pack: center;
  333. justify-content: center;
  334. -webkit-box-align: center;
  335. -ms-flex-align: center;
  336. align-items: center;
  337. line-height: 1;
  338. }
  339. .pretty.p-icon input:checked ~ .state .icon {
  340. opacity: 1;
  341. }
  342. .pretty.p-icon input:checked ~ .state label:before {
  343. border-color: #5a656b;
  344. }
  345. .pretty.p-svg .state .svg {
  346. position: absolute;
  347. font-size: 1em;
  348. width: calc(1em + 2px);
  349. height: calc(1em + 2px);
  350. left: 0;
  351. z-index: 1;
  352. text-align: center;
  353. line-height: normal;
  354. top: calc((0% - (100% - 1em)) - 8%);
  355. border: 1px solid transparent;
  356. opacity: 0;
  357. }
  358. .pretty.p-svg .state svg {
  359. margin: 0;
  360. width: 100%;
  361. height: 100%;
  362. text-align: center;
  363. display: -webkit-box;
  364. display: -ms-flexbox;
  365. display: flex;
  366. -webkit-box-flex: 1;
  367. -ms-flex: 1;
  368. flex: 1;
  369. -webkit-box-pack: center;
  370. -ms-flex-pack: center;
  371. justify-content: center;
  372. -webkit-box-align: center;
  373. -ms-flex-align: center;
  374. align-items: center;
  375. line-height: 1;
  376. }
  377. .pretty.p-svg input:checked ~ .state .svg {
  378. opacity: 1;
  379. }
  380. .pretty.p-image .state img {
  381. opacity: 0;
  382. position: absolute;
  383. width: calc(1em + 2px);
  384. height: calc(1em + 2px);
  385. top: 0;
  386. top: calc((0% - (100% - 1em)) - 8%);
  387. left: 0;
  388. z-index: 0;
  389. text-align: center;
  390. line-height: normal;
  391. -webkit-transform: scale(0.8);
  392. -ms-transform: scale(0.8);
  393. transform: scale(0.8);
  394. }
  395. .pretty.p-image input:checked ~ .state img {
  396. opacity: 1;
  397. }
  398. .pretty.p-switch input {
  399. min-width: 2em;
  400. }
  401. .pretty.p-switch .state {
  402. position: relative;
  403. }
  404. .pretty.p-switch .state:before {
  405. content: '';
  406. border: 1px solid #bdc3c7;
  407. border-radius: 60px;
  408. width: 2em;
  409. box-sizing: unset;
  410. height: calc(1em + 2px);
  411. position: absolute;
  412. top: 0;
  413. top: calc((0% - (100% - 1em)) - 16%);
  414. z-index: 0;
  415. transition: all 0.5s ease;
  416. }
  417. .pretty.p-switch .state label {
  418. text-indent: 2.5em;
  419. }
  420. .pretty.p-switch .state label:before,
  421. .pretty.p-switch .state label:after {
  422. transition: all 0.5s ease;
  423. border-radius: 100%;
  424. left: 0;
  425. border-color: transparent;
  426. -webkit-transform: scale(0.8);
  427. -ms-transform: scale(0.8);
  428. transform: scale(0.8);
  429. }
  430. .pretty.p-switch .state label:after {
  431. background-color: #bdc3c7 !important;
  432. }
  433. .pretty.p-switch input:checked ~ .state:before {
  434. border-color: #5a656b;
  435. }
  436. .pretty.p-switch input:checked ~ .state label:before {
  437. opacity: 0;
  438. }
  439. .pretty.p-switch input:checked ~ .state label:after {
  440. background-color: #5a656b !important;
  441. left: 1em;
  442. }
  443. .pretty.p-switch.p-fill input:checked ~ .state:before {
  444. border-color: #5a656b;
  445. background-color: #5a656b !important;
  446. }
  447. .pretty.p-switch.p-fill input:checked ~ .state label:before {
  448. opacity: 0;
  449. }
  450. .pretty.p-switch.p-fill input:checked ~ .state label:after {
  451. background-color: #fff !important;
  452. left: 1em;
  453. }
  454. .pretty.p-switch.p-slim .state:before {
  455. height: 0.1em;
  456. background: #bdc3c7 !important;
  457. top: calc(50% - 0.1em);
  458. }
  459. .pretty.p-switch.p-slim input:checked ~ .state:before {
  460. border-color: #5a656b;
  461. background-color: #5a656b !important;
  462. }
  463. .pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {
  464. display: none;
  465. }
  466. .pretty.p-has-hover input:hover ~ .state.p-is-hover {
  467. display: block;
  468. }
  469. .pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {
  470. display: block;
  471. }
  472. .pretty.p-has-focus input:focus ~ .state label:before {
  473. box-shadow: 0px 0px 3px 0px #bdc3c7;
  474. }
  475. .pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {
  476. display: none;
  477. }
  478. .pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {
  479. display: block;
  480. }
  481. .pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {
  482. display: block;
  483. opacity: 1;
  484. }
  485. .pretty.p-toggle .state.p-on {
  486. opacity: 0;
  487. display: none;
  488. }
  489. .pretty.p-toggle .state.p-off,
  490. .pretty.p-toggle .state .icon,
  491. .pretty.p-toggle .state .svg,
  492. .pretty.p-toggle .state img {
  493. opacity: 1;
  494. display: inherit;
  495. }
  496. .pretty.p-toggle .state.p-off .icon {
  497. color: #bdc3c7;
  498. }
  499. .pretty.p-toggle input:checked ~ .state.p-on {
  500. opacity: 1;
  501. display: inherit;
  502. }
  503. .pretty.p-toggle input:checked ~ .state.p-off {
  504. opacity: 0;
  505. display: none;
  506. }
  507. .pretty.p-plain input:checked ~ .state label:before,
  508. .pretty.p-plain.p-toggle .state label:before {
  509. content: none;
  510. }
  511. .pretty.p-plain.p-plain .icon {
  512. -webkit-transform: scale(1.1);
  513. -ms-transform: scale(1.1);
  514. transform: scale(1.1);
  515. }
  516. .pretty.p-round .state label:before,
  517. .pretty.p-round .state label:after {
  518. border-radius: 100%;
  519. }
  520. .pretty.p-round.p-icon .state .icon {
  521. border-radius: 100%;
  522. overflow: hidden;
  523. }
  524. .pretty.p-round.p-icon .state .icon:before {
  525. -webkit-transform: scale(0.8);
  526. -ms-transform: scale(0.8);
  527. transform: scale(0.8);
  528. }
  529. .pretty.p-curve .state label:before,
  530. .pretty.p-curve .state label:after {
  531. border-radius: 20%;
  532. }
  533. .pretty.p-smooth label:before,
  534. .pretty.p-smooth label:after,
  535. .pretty.p-smooth .icon,
  536. .pretty.p-smooth .svg {
  537. transition: all 0.5s ease;
  538. }
  539. .pretty.p-smooth input:checked + .state label:after {
  540. transition: all 0.3s ease;
  541. }
  542. .pretty.p-smooth input:checked + .state .icon,
  543. .pretty.p-smooth input:checked + .state .svg,
  544. .pretty.p-smooth input:checked + .state img {
  545. -webkit-animation: zoom 0.2s ease;
  546. animation: zoom 0.2s ease;
  547. }
  548. .pretty.p-smooth.p-default input:checked + .state label:after {
  549. -webkit-animation: zoom 0.2s ease;
  550. animation: zoom 0.2s ease;
  551. }
  552. .pretty.p-smooth.p-plain input:checked + .state label:before {
  553. content: '';
  554. -webkit-transform: scale(0);
  555. -ms-transform: scale(0);
  556. transform: scale(0);
  557. transition: all 0.5s ease;
  558. }
  559. .pretty.p-tada:not(.p-default) input:checked + .state .icon,
  560. .pretty.p-tada:not(.p-default) input:checked + .state .svg,
  561. .pretty.p-tada:not(.p-default) input:checked + .state img,
  562. .pretty.p-tada:not(.p-default) input:checked + .state label:before,
  563. .pretty.p-tada:not(.p-default) input:checked + .state label:after {
  564. -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  565. animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  566. opacity: 1;
  567. }
  568. .pretty.p-jelly:not(.p-default) input:checked + .state .icon,
  569. .pretty.p-jelly:not(.p-default) input:checked + .state .svg,
  570. .pretty.p-jelly:not(.p-default) input:checked + .state img,
  571. .pretty.p-jelly:not(.p-default) input:checked + .state label:before,
  572. .pretty.p-jelly:not(.p-default) input:checked + .state label:after {
  573. -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  574. animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  575. opacity: 1;
  576. }
  577. .pretty.p-jelly:not(.p-default) input:checked + .state label:before {
  578. border-color: transparent;
  579. }
  580. .pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,
  581. .pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,
  582. .pretty.p-rotate:not(.p-default) input:checked ~ .state img,
  583. .pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,
  584. .pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {
  585. -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  586. animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  587. opacity: 1;
  588. }
  589. .pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {
  590. border-color: transparent;
  591. }
  592. .pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {
  593. -webkit-animation: pulse 1s;
  594. animation: pulse 1s;
  595. }
  596. .pretty input[disabled] {
  597. cursor: not-allowed;
  598. display: none;
  599. }
  600. .pretty input[disabled] ~ * {
  601. opacity: .5;
  602. }
  603. .pretty.p-locked input {
  604. display: none;
  605. cursor: not-allowed;
  606. }
  607. .pretty input:checked ~ .state.p-primary label:after,
  608. .pretty.p-toggle .state.p-primary label:after {
  609. background-color: #428bca !important;
  610. }
  611. .pretty input:checked ~ .state.p-primary .icon,
  612. .pretty input:checked ~ .state.p-primary .svg,
  613. .pretty.p-toggle .state.p-primary .icon,
  614. .pretty.p-toggle .state.p-primary .svg {
  615. color: #fff;
  616. stroke: #fff;
  617. }
  618. .pretty input:checked ~ .state.p-primary-o label:before,
  619. .pretty.p-toggle .state.p-primary-o label:before {
  620. border-color: #428bca;
  621. }
  622. .pretty input:checked ~ .state.p-primary-o label:after,
  623. .pretty.p-toggle .state.p-primary-o label:after {
  624. background-color: transparent;
  625. }
  626. .pretty input:checked ~ .state.p-primary-o .icon,
  627. .pretty input:checked ~ .state.p-primary-o .svg,
  628. .pretty input:checked ~ .state.p-primary-o svg,
  629. .pretty.p-toggle .state.p-primary-o .icon,
  630. .pretty.p-toggle .state.p-primary-o .svg,
  631. .pretty.p-toggle .state.p-primary-o svg {
  632. color: #428bca;
  633. stroke: #428bca;
  634. }
  635. .pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {
  636. background-color: #428bca !important;
  637. }
  638. .pretty.p-switch input:checked ~ .state.p-primary:before {
  639. border-color: #428bca;
  640. }
  641. .pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {
  642. background-color: #428bca !important;
  643. }
  644. .pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {
  645. border-color: #245682;
  646. background-color: #245682 !important;
  647. }
  648. .pretty input:checked ~ .state.p-info label:after,
  649. .pretty.p-toggle .state.p-info label:after {
  650. background-color: #5bc0de !important;
  651. }
  652. .pretty input:checked ~ .state.p-info .icon,
  653. .pretty input:checked ~ .state.p-info .svg,
  654. .pretty.p-toggle .state.p-info .icon,
  655. .pretty.p-toggle .state.p-info .svg {
  656. color: #fff;
  657. stroke: #fff;
  658. }
  659. .pretty input:checked ~ .state.p-info-o label:before,
  660. .pretty.p-toggle .state.p-info-o label:before {
  661. border-color: #5bc0de;
  662. }
  663. .pretty input:checked ~ .state.p-info-o label:after,
  664. .pretty.p-toggle .state.p-info-o label:after {
  665. background-color: transparent;
  666. }
  667. .pretty input:checked ~ .state.p-info-o .icon,
  668. .pretty input:checked ~ .state.p-info-o .svg,
  669. .pretty input:checked ~ .state.p-info-o svg,
  670. .pretty.p-toggle .state.p-info-o .icon,
  671. .pretty.p-toggle .state.p-info-o .svg,
  672. .pretty.p-toggle .state.p-info-o svg {
  673. color: #5bc0de;
  674. stroke: #5bc0de;
  675. }
  676. .pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {
  677. background-color: #5bc0de !important;
  678. }
  679. .pretty.p-switch input:checked ~ .state.p-info:before {
  680. border-color: #5bc0de;
  681. }
  682. .pretty.p-switch.p-fill input:checked ~ .state.p-info:before {
  683. background-color: #5bc0de !important;
  684. }
  685. .pretty.p-switch.p-slim input:checked ~ .state.p-info:before {
  686. border-color: #2390b0;
  687. background-color: #2390b0 !important;
  688. }
  689. .pretty input:checked ~ .state.p-success label:after,
  690. .pretty.p-toggle .state.p-success label:after {
  691. background-color: #5cb85c !important;
  692. }
  693. .pretty input:checked ~ .state.p-success .icon,
  694. .pretty input:checked ~ .state.p-success .svg,
  695. .pretty.p-toggle .state.p-success .icon,
  696. .pretty.p-toggle .state.p-success .svg {
  697. color: #fff;
  698. stroke: #fff;
  699. }
  700. .pretty input:checked ~ .state.p-success-o label:before,
  701. .pretty.p-toggle .state.p-success-o label:before {
  702. border-color: #5cb85c;
  703. }
  704. .pretty input:checked ~ .state.p-success-o label:after,
  705. .pretty.p-toggle .state.p-success-o label:after {
  706. background-color: transparent;
  707. }
  708. .pretty input:checked ~ .state.p-success-o .icon,
  709. .pretty input:checked ~ .state.p-success-o .svg,
  710. .pretty input:checked ~ .state.p-success-o svg,
  711. .pretty.p-toggle .state.p-success-o .icon,
  712. .pretty.p-toggle .state.p-success-o .svg,
  713. .pretty.p-toggle .state.p-success-o svg {
  714. color: #5cb85c;
  715. stroke: #5cb85c;
  716. }
  717. .pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {
  718. background-color: #5cb85c !important;
  719. }
  720. .pretty.p-switch input:checked ~ .state.p-success:before {
  721. border-color: #5cb85c;
  722. }
  723. .pretty.p-switch.p-fill input:checked ~ .state.p-success:before {
  724. background-color: #5cb85c !important;
  725. }
  726. .pretty.p-switch.p-slim input:checked ~ .state.p-success:before {
  727. border-color: #357935;
  728. background-color: #357935 !important;
  729. }
  730. .pretty input:checked ~ .state.p-warning label:after,
  731. .pretty.p-toggle .state.p-warning label:after {
  732. background-color: #f0ad4e !important;
  733. }
  734. .pretty input:checked ~ .state.p-warning .icon,
  735. .pretty input:checked ~ .state.p-warning .svg,
  736. .pretty.p-toggle .state.p-warning .icon,
  737. .pretty.p-toggle .state.p-warning .svg {
  738. color: #fff;
  739. stroke: #fff;
  740. }
  741. .pretty input:checked ~ .state.p-warning-o label:before,
  742. .pretty.p-toggle .state.p-warning-o label:before {
  743. border-color: #f0ad4e;
  744. }
  745. .pretty input:checked ~ .state.p-warning-o label:after,
  746. .pretty.p-toggle .state.p-warning-o label:after {
  747. background-color: transparent;
  748. }
  749. .pretty input:checked ~ .state.p-warning-o .icon,
  750. .pretty input:checked ~ .state.p-warning-o .svg,
  751. .pretty input:checked ~ .state.p-warning-o svg,
  752. .pretty.p-toggle .state.p-warning-o .icon,
  753. .pretty.p-toggle .state.p-warning-o .svg,
  754. .pretty.p-toggle .state.p-warning-o svg {
  755. color: #f0ad4e;
  756. stroke: #f0ad4e;
  757. }
  758. .pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {
  759. background-color: #f0ad4e !important;
  760. }
  761. .pretty.p-switch input:checked ~ .state.p-warning:before {
  762. border-color: #f0ad4e;
  763. }
  764. .pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {
  765. background-color: #f0ad4e !important;
  766. }
  767. .pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {
  768. border-color: #c77c11;
  769. background-color: #c77c11 !important;
  770. }
  771. .pretty input:checked ~ .state.p-danger label:after,
  772. .pretty.p-toggle .state.p-danger label:after {
  773. background-color: #d9534f !important;
  774. }
  775. .pretty input:checked ~ .state.p-danger .icon,
  776. .pretty input:checked ~ .state.p-danger .svg,
  777. .pretty.p-toggle .state.p-danger .icon,
  778. .pretty.p-toggle .state.p-danger .svg {
  779. color: #fff;
  780. stroke: #fff;
  781. }
  782. .pretty input:checked ~ .state.p-danger-o label:before,
  783. .pretty.p-toggle .state.p-danger-o label:before {
  784. border-color: #d9534f;
  785. }
  786. .pretty input:checked ~ .state.p-danger-o label:after,
  787. .pretty.p-toggle .state.p-danger-o label:after {
  788. background-color: transparent;
  789. }
  790. .pretty input:checked ~ .state.p-danger-o .icon,
  791. .pretty input:checked ~ .state.p-danger-o .svg,
  792. .pretty input:checked ~ .state.p-danger-o svg,
  793. .pretty.p-toggle .state.p-danger-o .icon,
  794. .pretty.p-toggle .state.p-danger-o .svg,
  795. .pretty.p-toggle .state.p-danger-o svg {
  796. color: #d9534f;
  797. stroke: #d9534f;
  798. }
  799. .pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {
  800. background-color: #d9534f !important;
  801. }
  802. .pretty.p-switch input:checked ~ .state.p-danger:before {
  803. border-color: #d9534f;
  804. }
  805. .pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {
  806. background-color: #d9534f !important;
  807. }
  808. .pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {
  809. border-color: #a02622;
  810. background-color: #a02622 !important;
  811. }
  812. .pretty.p-bigger label:before,
  813. .pretty.p-bigger label:after,
  814. .pretty.p-bigger .icon,
  815. .pretty.p-bigger .svg,
  816. .pretty.p-bigger .img {
  817. font-size: 1.2em !important;
  818. top: calc((0% - (100% - 1em)) - 35%) !important;
  819. }
  820. .pretty.p-bigger label {
  821. text-indent: 1.7em;
  822. }
  823. @media print {
  824. .pretty .state:before,
  825. .pretty .state label:before,
  826. .pretty .state label:after,
  827. .pretty .state .icon {
  828. color-adjust: exact;
  829. /* stylelint-disable */
  830. -webkit-print-color-adjust: exact;
  831. print-color-adjust: exact;
  832. }
  833. }