frontend.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
  1. /**
  2. * This file should contain frontend styles that
  3. * will be applied to all module instances.
  4. */
  5. .bb-box-input.input-small {
  6. width: 46px !important;
  7. }
  8. .fl-module .pp-dual-button-content.pp-dual-button-inner {
  9. display: inline-block;
  10. }
  11. .pp-dual-button-content .pp-dual-button {
  12. text-align: center;
  13. }
  14. .fl-module .pp-dual-button-content .pp-dual-button a.pp-button {
  15. overflow: hidden;
  16. }
  17. .fl-module .pp-dual-button-content .pp-dual-button-1 .pp-button {
  18. display: inline-block;
  19. vertical-align: middle;
  20. -webkit-transform: translateZ(0);
  21. transform: translateZ(0);
  22. -webkit-backface-visibility: hidden;
  23. backface-visibility: hidden;
  24. -moz-osx-font-smoothing: grayscale;
  25. position: relative;
  26. }
  27. .fl-module .pp-dual-button-content .pp-dual-button-1 .pp-button:before {
  28. position: absolute;
  29. z-index: -1;
  30. top: 0;
  31. left: 0;
  32. right: 0;
  33. bottom: 0;
  34. -webkit-transition-property: transform;
  35. -moz-transition-property: transform;
  36. -o-transition-property: transform;
  37. -ms-transition-property: transform;
  38. transition-property: transform;
  39. -webkit-transition-timing-function: ease-out;
  40. -moz-transition-timing-function: ease-out;
  41. -o-transition-timing-function: ease-out;
  42. -ms-transition-timing-function: ease-out;
  43. transition-timing-function: ease-out;
  44. }
  45. .fl-module .pp-dual-button-content .pp-dual-button-2 .pp-button {
  46. display: inline-block;
  47. vertical-align: middle;
  48. -webkit-transform: translateZ(0);
  49. transform: translateZ(0);
  50. -webkit-backface-visibility: hidden;
  51. backface-visibility: hidden;
  52. -moz-osx-font-smoothing: grayscale;
  53. position: relative;
  54. }
  55. .fl-module .pp-dual-button-content .pp-dual-button-2 .pp-button:before {
  56. position: absolute;
  57. z-index: -1;
  58. top: 0;
  59. left: 0;
  60. right: 0;
  61. bottom: 0;
  62. -webkit-transition-property: transform;
  63. -moz-transition-property: transform;
  64. -o-transition-property: transform;
  65. -ms-transition-property: transform;
  66. transition-property: transform;
  67. -webkit-transition-timing-function: ease-out;
  68. -moz-transition-timing-function: ease-out;
  69. -o-transition-timing-function: ease-out;
  70. -ms-transition-timing-function: ease-out;
  71. transition-timing-function: ease-out;
  72. }
  73. .fl-module .pp-dual-button-content .pp-divider {
  74. display: table;
  75. position: absolute;
  76. top: 50%;
  77. right: 0;
  78. -webkit-transform: translate(50%,-50%);
  79. -moz-transform: translate(50%,-50%);
  80. -o-transform: translate(50%,-50%);
  81. -ms-transform: translate(50%,-50%);
  82. transform: translate(50%,-50%);
  83. line-height: 0;
  84. text-align: center;
  85. -webkit-box-sizing: content-box;
  86. -moz-box-sizing: content-box;
  87. box-sizing: content-box;
  88. text-align: center;
  89. transition: border-color ease 500ms,background ease 500ms,color ease 500ms;
  90. z-index: 12;
  91. }
  92. .fl-module .pp-dual-button-content .pp-divider-inner {
  93. display: table-cell;
  94. line-height: 1;
  95. text-align: center;
  96. vertical-align: middle;
  97. }
  98. .fl-module .pp-dual-button-content .pp-custom-icon {
  99. display: inline-block;
  100. max-width: 100%;
  101. width: 1em;
  102. }
  103. .fl-module .pp-dual-button-content .pp-font-icon.dashicons,
  104. .fl-module .pp-dual-button-content .pp-font-icon.dashicons-before:before{
  105. font-size: inherit;
  106. height: auto;
  107. line-height: inherit;
  108. width: auto;
  109. }
  110. .pp-dual-button-content .pp-dual-button {
  111. float: left;
  112. position: relative;
  113. }
  114. .pp-button > span {
  115. height: auto;
  116. vertical-align: middle;
  117. }
  118. /* Hover effects */
  119. .pp-dual-button-content .pp-button-effect-fade .pp-button {
  120. transition: background-color, color;
  121. }
  122. .pp-dual-button-content .pp-button-effect-sweep_right .pp-button:before {
  123. content: "";
  124. -webkit-transform: scaleX(0);
  125. -moz-transform: scaleX(0);
  126. -o-transform: scaleX(0);
  127. -ms-transform: scaleX(0);
  128. transform: scaleX(0);
  129. -webkit-transform-origin: 0 50%;
  130. -moz-transform-origin: 0 50%;
  131. -o-transform-origin: 0 50%;
  132. -ms-transform-origin: 0 50%;
  133. transform-origin: 0 50%;
  134. }
  135. .pp-dual-button-content .pp-button-effect-sweep_right .pp-button:hover:before {
  136. -webkit-transform: scaleX(1);
  137. -moz-transform: scaleX(1);
  138. -o-transform: scaleX(1);
  139. -ms-transform: scaleX(1);
  140. transform: scaleX(1);
  141. }
  142. .pp-dual-button-content .pp-button-effect-sweep_left .pp-button:before {
  143. content: "";
  144. -webkit-transform: scaleX(0);
  145. -moz-transform: scaleX(0);
  146. -o-transform: scaleX(0);
  147. -ms-transform: scaleX(0);
  148. transform: scaleX(0);
  149. -webkit-transform-origin: 100% 50%;
  150. -moz-transform-origin: 100% 50%;
  151. -o-transform-origin: 100% 50%;
  152. -ms-transform-origin: 100% 50%;
  153. transform-origin: 100% 50%;
  154. }
  155. .pp-dual-button-content .pp-button-effect-sweep_left .pp-button:hover:before {
  156. -webkit-transform: scaleX(1);
  157. -moz-transform: scaleX(1);
  158. -o-transform: scaleX(1);
  159. -ms-transform: scaleX(1);
  160. transform: scaleX(1);
  161. }
  162. .pp-dual-button-content .pp-button-effect-sweep_bottom .pp-button:before {
  163. content: "";
  164. -webkit-transform: scaleY(0);
  165. -moz-transform: scaleY(0);
  166. -o-transform: scaleY(0);
  167. -ms-transform: scaleY(0);
  168. transform: scaleY(0);
  169. -webkit-transform-origin: 50% 0;
  170. -moz-transform-origin: 50% 0;
  171. -o-transform-origin: 50% 0;
  172. -ms-transform-origin: 50% 0;
  173. transform-origin: 50% 0;
  174. }
  175. .pp-dual-button-content .pp-button-effect-sweep_bottom .pp-button:hover:before {
  176. -webkit-transform: scaleY(1);
  177. -moz-transform: scaleY(1);
  178. -o-transform: scaleY(1);
  179. -ms-transform: scaleY(1);
  180. transform: scaleY(1);
  181. }
  182. .pp-dual-button-content .pp-button-effect-sweep_top .pp-button:before {
  183. content: "";
  184. -webkit-transform: scaleY(0);
  185. -moz-transform: scaleY(0);
  186. -o-transform: scaleY(0);
  187. -ms-transform: scaleY(0);
  188. transform: scaleY(0);
  189. -webkit-transform-origin: 50% 100%;
  190. -moz-transform-origin: 50% 100%;
  191. -o-transform-origin: 50% 100%;
  192. -ms-transform-origin: 50% 100%;
  193. transform-origin: 50% 100%;
  194. }
  195. .pp-dual-button-content .pp-button-effect-sweep_top .pp-button:hover:before {
  196. -webkit-transform: scaleY(1);
  197. -moz-transform: scaleY(1);
  198. -o-transform: scaleY(1);
  199. -ms-transform: scaleY(1);
  200. transform: scaleY(1);
  201. }
  202. .pp-dual-button-content .pp-button-effect-bounce_right .pp-button:before {
  203. content: "";
  204. -webkit-transform: scaleX(0);
  205. -moz-transform: scaleX(0);
  206. -o-transform: scaleX(0);
  207. -ms-transform: scaleX(0);
  208. transform: scaleX(0);
  209. -webkit-transform-origin: 0 50%;
  210. -moz-transform-origin: 0 50%;
  211. -o-transform-origin: 0 50%;
  212. -ms-transform-origin: 0 50%;
  213. transform-origin: 0 50%;
  214. }
  215. .pp-dual-button-content .pp-button-effect-bounce_right .pp-button:hover:before {
  216. -webkit-transform: scaleX(1);
  217. -moz-transform: scaleX(1);
  218. -o-transform: scaleX(1);
  219. -ms-transform: scaleX(1);
  220. transform: scaleX(1);
  221. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  222. }
  223. .pp-dual-button-content .pp-button-effect-bounce_left .pp-button:before {
  224. content: "";
  225. -webkit-transform: scaleX(0);
  226. -moz-transform: scaleX(0);
  227. -o-transform: scaleX(0);
  228. -ms-transform: scaleX(0);
  229. transform: scaleX(0);
  230. -webkit-transform-origin: 100% 50%;
  231. -moz-transform-origin: 100% 50%;
  232. -o-transform-origin: 100% 50%;
  233. -ms-transform-origin: 100% 50%;
  234. transform-origin: 100% 50%;
  235. }
  236. .pp-dual-button-content .pp-button-effect-bounce_left .pp-button:hover:before {
  237. -webkit-transform: scaleX(1);
  238. -moz-transform: scaleX(1);
  239. -o-transform: scaleX(1);
  240. -ms-transform: scaleX(1);
  241. transform: scaleX(1);
  242. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  243. }
  244. .pp-dual-button-content .pp-button-effect-bounce_bottom .pp-button:before {
  245. content: "";
  246. -webkit-transform: scaleY(0);
  247. -moz-transform: scaleY(0);
  248. -o-transform: scaleY(0);
  249. -ms-transform: scaleY(0);
  250. transform: scaleY(0);
  251. -webkit-transform-origin: 50% 0;
  252. -moz-transform-origin: 50% 0;
  253. -o-transform-origin: 50% 0;
  254. -ms-transform-origin: 50% 0;
  255. transform-origin: 50% 0;
  256. }
  257. .pp-dual-button-content .pp-button-effect-bounce_bottom .pp-button:hover:before {
  258. -webkit-transform: scaleY(1);
  259. -moz-transform: scaleY(1);
  260. -o-transform: scaleY(1);
  261. -ms-transform: scaleY(1);
  262. transform: scaleY(1);
  263. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  264. }
  265. .pp-dual-button-content .pp-button-effect-bounce_top .pp-button:before {
  266. content: "";
  267. -webkit-transform: scaleY(0);
  268. -moz-transform: scaleY(0);
  269. -o-transform: scaleY(0);
  270. -ms-transform: scaleY(0);
  271. transform: scaleY(0);
  272. -webkit-transform-origin: 50% 100%;
  273. -moz-transform-origin: 50% 100%;
  274. -o-transform-origin: 50% 100%;
  275. -ms-transform-origin: 50% 100%;
  276. transform-origin: 50% 100%;
  277. }
  278. .pp-dual-button-content .pp-button-effect-bounce_top .pp-button:hover:before {
  279. -webkit-transform: scaleY(1);
  280. -moz-transform: scaleY(1);
  281. -o-transform: scaleY(1);
  282. -ms-transform: scaleY(1);
  283. transform: scaleY(1);
  284. transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  285. }
  286. .pp-dual-button-content .pp-button-effect-radial_out .pp-button {
  287. overflow: hidden;
  288. }
  289. .pp-dual-button-content .pp-button-effect-radial_out .pp-button:before {
  290. content: "";
  291. border-radius: 100%;
  292. -webkit-transform: scale(0);
  293. -moz-transform: scale(0);
  294. -o-transform: scale(0);
  295. -ms-transform: scale(0);
  296. transform: scale(0);
  297. }
  298. .pp-dual-button-content .pp-button-effect-radial_out .pp-button:hover:before {
  299. -webkit-transform: scale(2);
  300. -moz-transform: scale(2);
  301. -o-transform: scale(2);
  302. -ms-transform: scale(2);
  303. transform: scale(2);
  304. }
  305. .pp-dual-button-content .pp-button-effect-radial_in .pp-button {
  306. overflow: hidden;
  307. }
  308. .pp-dual-button-content .pp-button-effect-radial_in .pp-button:before {
  309. content: "";
  310. border-radius: 100%;
  311. -webkit-transform: scale(2);
  312. -moz-transform: scale(2);
  313. -o-transform: scale(2);
  314. -ms-transform: scale(2);
  315. transform: scale(2);
  316. }
  317. .pp-dual-button-content .pp-button-effect-radial_in .pp-button:hover:before {
  318. -webkit-transform: scale(0);
  319. -moz-transform: scale(0);
  320. -o-transform: scale(0);
  321. -ms-transform: scale(0);
  322. transform: scale(0);
  323. }
  324. .pp-dual-button-content .pp-button-effect-rectangle_out .pp-button {
  325. overflow: hidden;
  326. }
  327. .pp-dual-button-content .pp-button-effect-rectangle_out .pp-button:before {
  328. content: "";
  329. -webkit-transform: scale(0);
  330. -moz-transform: scale(0);
  331. -o-transform: scale(0);
  332. -ms-transform: scale(0);
  333. transform: scale(0);
  334. }
  335. .pp-dual-button-content .pp-button-effect-rectangle_out .pp-button:hover:before {
  336. -webkit-transform: scale(1);
  337. -moz-transform: scale(1);
  338. -o-transform: scale(1);
  339. -ms-transform: scale(1);
  340. transform: scale(1);
  341. }
  342. .pp-dual-button-content .pp-button-effect-rectangle_in .pp-button {
  343. overflow: hidden;
  344. }
  345. .pp-dual-button-content .pp-button-effect-rectangle_in .pp-button:before {
  346. content: "";
  347. -webkit-transform: scale(1);
  348. -moz-transform: scale(1);
  349. -o-transform: scale(1);
  350. -ms-transform: scale(1);
  351. transform: scale(1);
  352. }
  353. .pp-dual-button-content .pp-button-effect-rectangle_in .pp-button:hover:before {
  354. -webkit-transform: scale(0);
  355. -moz-transform: scale(0);
  356. -o-transform: scale(0);
  357. -ms-transform: scale(0);
  358. transform: scale(0);
  359. }
  360. .pp-dual-button-content .pp-button-effect-shutter_in_horizontal .pp-button {
  361. overflow: hidden;
  362. }
  363. .pp-dual-button-content .pp-button-effect-shutter_in_horizontal .pp-button:before {
  364. content: "";
  365. -webkit-transform: scaleX(1);
  366. -moz-transform: scaleX(1);
  367. -o-transform: scaleX(1);
  368. -ms-transform: scaleX(1);
  369. transform: scaleX(1);
  370. -webkit-transform-origin: 50%;
  371. -moz-transform-origin: 50%;
  372. -o-transform-origin: 50%;
  373. -ms-transform-origin: 50%;
  374. transform-origin: 50%;
  375. }
  376. .pp-dual-button-content .pp-button-effect-shutter_in_horizontal .pp-button:hover:before {
  377. -webkit-transform: scaleX(0);
  378. -moz-transform: scaleX(0);
  379. -o-transform: scaleX(0);
  380. -ms-transform: scaleX(0);
  381. transform: scaleX(0);
  382. }
  383. .pp-dual-button-content .pp-button-effect-shutter_out_horizontal .pp-button {
  384. overflow: hidden;
  385. }
  386. .pp-dual-button-content .pp-button-effect-shutter_out_horizontal .pp-button:before {
  387. content: "";
  388. -webkit-transform: scaleX(0);
  389. -moz-transform: scaleX(0);
  390. -o-transform: scaleX(0);
  391. -ms-transform: scaleX(0);
  392. transform: scaleX(0);
  393. -webkit-transform-origin: 50%;
  394. -moz-transform-origin: 50%;
  395. -o-transform-origin: 50%;
  396. -ms-transform-origin: 50%;
  397. transform-origin: 50%;
  398. }
  399. .pp-dual-button-content .pp-button-effect-shutter_out_horizontal .pp-button:hover:before {
  400. -webkit-transform: scaleX(1);
  401. -moz-transform: scaleX(1);
  402. -o-transform: scaleX(1);
  403. -ms-transform: scaleX(1);
  404. transform: scaleX(1);
  405. }
  406. .pp-dual-button-content .pp-button-effect-shutter_in_vertical .pp-button {
  407. overflow: hidden;
  408. }
  409. .pp-dual-button-content .pp-button-effect-shutter_in_vertical .pp-button:before {
  410. content: "";
  411. -webkit-transform: scaleY(1);
  412. -moz-transform: scaleY(1);
  413. -o-transform: scaleY(1);
  414. -ms-transform: scaleY(1);
  415. transform: scaleY(1);
  416. -webkit-transform-origin: 50%;
  417. -moz-transform-origin: 50%;
  418. -o-transform-origin: 50%;
  419. -ms-transform-origin: 50%;
  420. transform-origin: 50%;
  421. }
  422. .pp-dual-button-content .pp-button-effect-shutter_in_vertical .pp-button:hover:before {
  423. -webkit-transform: scaleY(0);
  424. -moz-transform: scaleY(0);
  425. -o-transform: scaleY(0);
  426. -ms-transform: scaleY(0);
  427. transform: scaleY(0);
  428. }
  429. .pp-dual-button-content .pp-button-effect-shutter_out_vertical .pp-button {
  430. overflow: hidden;
  431. }
  432. .pp-dual-button-content .pp-button-effect-shutter_out_vertical .pp-button:before {
  433. content: "";
  434. -webkit-transform: scaleY(0);
  435. -moz-transform: scaleY(0);
  436. -o-transform: scaleY(0);
  437. -ms-transform: scaleY(0);
  438. transform: scaleY(0);
  439. -webkit-transform-origin: 50%;
  440. -moz-transform-origin: 50%;
  441. -o-transform-origin: 50%;
  442. -ms-transform-origin: 50%;
  443. transform-origin: 50%;
  444. }
  445. .pp-dual-button-content .pp-button-effect-shutter_out_vertical .pp-button:hover:before {
  446. -webkit-transform: scaleY(1);
  447. -moz-transform: scaleY(1);
  448. -o-transform: scaleY(1);
  449. -ms-transform: scaleY(1);
  450. transform: scaleY(1);
  451. }
  452. .pp-dual-button-content .pp-button-effect-shutter_out_diagonal .pp-button {
  453. overflow: hidden;
  454. }
  455. .pp-dual-button-content .pp-button-effect-shutter_out_diagonal .pp-button:after {
  456. content: "";
  457. position: absolute;
  458. left: 50%;
  459. top: 50%;
  460. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  461. -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  462. -o-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  463. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  464. transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  465. height: 0;
  466. width: 0;
  467. z-index: -1;
  468. }
  469. .pp-dual-button-content .pp-button-effect-shutter_out_diagonal .pp-button:hover:after {
  470. height: 4000%;
  471. width: 100%;
  472. }
  473. .pp-dual-button-content .pp-button-effect-shutter_in_diagonal .pp-button {
  474. overflow: hidden;
  475. }
  476. .pp-dual-button-content .pp-button-effect-shutter_in_diagonal .pp-button:after {
  477. content: "";
  478. position: absolute;
  479. left: 50%;
  480. top: 50%;
  481. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  482. -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  483. -o-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  484. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  485. transform: translateX(-50%) translateY(-50%) rotate(45deg) translateZ(0);
  486. height: 4000%;
  487. width: 100%;
  488. z-index: -1;
  489. }
  490. .pp-dual-button-content .pp-button-effect-shutter_in_diagonal .pp-button:hover:after {
  491. height: 4000%;
  492. width: 0;
  493. }