Sin descripción

pum-site-rtl.css 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  1. /* Animations */
  2. /*!******************************************************************************
  3. * Copyright (c) 2019, Code Atlantic LLC
  4. ******************************************************************************/
  5. @keyframes rotate-forever {
  6. 0% {
  7. transform: rotate(0deg);
  8. }
  9. 100% {
  10. transform: rotate(-360deg);
  11. }
  12. }
  13. @keyframes spinner-loader {
  14. 0% {
  15. transform: rotate(0deg);
  16. }
  17. 100% {
  18. transform: rotate(-360deg);
  19. }
  20. }
  21. /* Popup Core Styles */
  22. /* Reset Overlay, Container, Title, Content(div) & Close button */
  23. .pum-overlay,
  24. .pum-container,
  25. .pum-title,
  26. .pum-content,
  27. .pum-content + .pum-close,
  28. .pum-content + .pum-close:hover,
  29. .pum-content + .pum-close:focus,
  30. .pum-content + .pum-close:active {
  31. background: none;
  32. border: none;
  33. bottom: auto;
  34. clear: none;
  35. cursor: default;
  36. /* didn't really know what the default for display should be*/
  37. /*display:inline;*/
  38. float: none;
  39. font-family: inherit;
  40. font-size: medium;
  41. font-style: normal;
  42. font-weight: normal;
  43. height: auto;
  44. right: auto;
  45. letter-spacing: normal;
  46. line-height: normal;
  47. max-height: none;
  48. max-width: none;
  49. min-height: 0;
  50. min-width: 0;
  51. overflow: visible;
  52. position: static;
  53. left: auto;
  54. text-align: right;
  55. text-decoration: none;
  56. text-indent: 0;
  57. text-transform: none;
  58. top: auto;
  59. visibility: visible;
  60. white-space: normal;
  61. width: auto;
  62. z-index: auto;
  63. }
  64. .pum-title,
  65. .pum-content {
  66. position: relative;
  67. z-index: 1;
  68. }
  69. .pum-overlay {
  70. position: fixed;
  71. height: 100%;
  72. width: 100%;
  73. top: 0;
  74. right: 0;
  75. left: 0;
  76. bottom: 0;
  77. z-index: 1999999999;
  78. overflow: auto;
  79. overflow: initial;
  80. display: none;
  81. transition: all 0.15s ease-in-out;
  82. /**
  83. * Use border-box for all popup content. Providing more precise sizing.
  84. */
  85. }
  86. .pum-overlay.pum-preview, .pum-overlay.pum-form-submission-detected {
  87. display: block;
  88. }
  89. .pum-overlay, .pum-overlay:before, .pum-overlay:after,
  90. .pum-overlay *,
  91. .pum-overlay *:before,
  92. .pum-overlay *:after {
  93. /* Safari/Chrome, other WebKit */
  94. /* Firefox, other Gecko */
  95. box-sizing: border-box;
  96. }
  97. .pum-container {
  98. top: 100px;
  99. position: absolute;
  100. margin-bottom: 3em;
  101. z-index: 1999999999;
  102. }
  103. .pum-container.pum-responsive {
  104. right: 50%;
  105. margin-right: -47.5%;
  106. width: 95%;
  107. height: auto;
  108. overflow: visible;
  109. }
  110. .pum-container.pum-responsive img {
  111. max-width: 100%;
  112. height: auto;
  113. }
  114. @media only screen and (min-width: 1024px) {
  115. .pum-container.pum-responsive.pum-responsive-nano {
  116. margin-right: -5%;
  117. width: 10%;
  118. }
  119. .pum-container.pum-responsive.pum-responsive-micro {
  120. margin-right: -10%;
  121. width: 20%;
  122. }
  123. .pum-container.pum-responsive.pum-responsive-tiny {
  124. margin-right: -15%;
  125. width: 30%;
  126. }
  127. .pum-container.pum-responsive.pum-responsive-small {
  128. margin-right: -20%;
  129. width: 40%;
  130. }
  131. .pum-container.pum-responsive.pum-responsive-medium {
  132. margin-right: -30%;
  133. width: 60%;
  134. }
  135. .pum-container.pum-responsive.pum-responsive-normal {
  136. margin-right: -30%;
  137. width: 70%;
  138. }
  139. .pum-container.pum-responsive.pum-responsive-large {
  140. margin-right: -35%;
  141. width: 80%;
  142. }
  143. .pum-container.pum-responsive.pum-responsive-xlarge {
  144. margin-right: -47.5%;
  145. width: 95%;
  146. }
  147. .pum-container.pum-responsive.pum-position-fixed {
  148. position: fixed;
  149. }
  150. }
  151. @media only screen and (max-width: 1024px) {
  152. .pum-container.pum-responsive.pum-position-fixed {
  153. position: absolute;
  154. }
  155. }
  156. .pum-container.custom-position {
  157. right: auto;
  158. top: auto;
  159. margin-right: inherit;
  160. }
  161. .pum-container .pum-title {
  162. margin-bottom: 0.5em;
  163. }
  164. .pum-container .pum-content:focus {
  165. outline: none;
  166. }
  167. .pum-container .pum-content > :first-child {
  168. margin-top: 0;
  169. }
  170. .pum-container .pum-content > :last-child {
  171. margin-bottom: 0;
  172. }
  173. .pum-container .pum-content + .pum-close {
  174. text-decoration: none;
  175. text-align: center;
  176. line-height: 1;
  177. position: absolute;
  178. cursor: pointer;
  179. min-width: 1em;
  180. z-index: 2;
  181. background-color: transparent;
  182. }
  183. .pum-container .pum-content + .pum-close > span {
  184. position: relative;
  185. z-index: 1;
  186. }
  187. .pum-container.pum-scrollable .pum-content {
  188. overflow: auto;
  189. overflow-y: scroll;
  190. max-height: 95%;
  191. }
  192. .pum-overlay.pum-overlay-disabled {
  193. visibility: hidden;
  194. }
  195. .pum-overlay.pum-overlay-disabled::-webkit-scrollbar {
  196. display: block;
  197. }
  198. .pum-overlay.pum-overlay-disabled .pum-container {
  199. visibility: visible;
  200. }
  201. .pum-overlay.pum-click-to-close {
  202. /* Hack for iOS devices so they properly treat it as a clickable element */
  203. cursor: pointer;
  204. }
  205. html.pum-open.pum-open-overlay {
  206. overflow: hidden;
  207. }
  208. html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
  209. overflow: hidden;
  210. }
  211. html.pum-open.pum-open-overlay.pum-open-fixed .pum-container {
  212. position: fixed;
  213. }
  214. html.pum-open.pum-open-overlay.pum-open-scrollable body > *[aria-hidden] {
  215. padding-left: 15px;
  216. }
  217. html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
  218. overflow-y: scroll;
  219. -webkit-overflow-scrolling: touch;
  220. }
  221. html.pum-open.pum-open-overlay-disabled.pum-open-fixed .pum-container {
  222. position: fixed;
  223. }
  224. html.pum-open.pum-open-overlay-disabled.pum-open-scrollable .pum-overlay.pum-active {
  225. position: static;
  226. height: auto;
  227. width: auto;
  228. }
  229. /* PM Forms */
  230. /*!******************************************************************************
  231. * Copyright (c) 2019, Code Atlantic LLC
  232. ******************************************************************************/
  233. .pum-form {
  234. margin: 0 auto 16px;
  235. }
  236. .pum-form--loading {
  237. opacity: 0.5;
  238. }
  239. .pum-form__field {
  240. margin-bottom: 1em;
  241. }
  242. .pum-form__field label {
  243. font-weight: bold;
  244. }
  245. .pum-form__field select,
  246. .pum-form__field input[type='date'] {
  247. margin: 0 auto;
  248. font-size: 18px;
  249. line-height: 26px;
  250. text-align: center;
  251. padding: 3px;
  252. vertical-align: middle;
  253. }
  254. .pum-form__field select {
  255. padding: 5px 3px;
  256. }
  257. .pum-form__loader {
  258. font-size: 2em;
  259. animation-duration: 0.75s;
  260. animation-iteration-count: infinite;
  261. animation-name: rotate-forever;
  262. animation-timing-function: linear;
  263. height: 0.75em;
  264. width: 0.75em;
  265. border: 0.25em solid rgba(0, 0, 0, 0.5);
  266. border-left-color: transparent;
  267. border-radius: 50%;
  268. display: inline-block;
  269. }
  270. .pum-form__submit {
  271. position: relative;
  272. }
  273. .pum-form__submit .pum-form__loader {
  274. margin-right: 0.5em;
  275. border: 0.25em solid rgba(255, 255, 255, 0.5);
  276. border-left-color: transparent;
  277. }
  278. .pum-form__messages {
  279. display: none;
  280. border: 1px solid rgba(0, 0, 0, 0.25);
  281. margin-bottom: 0.5em;
  282. padding: 1em;
  283. position: relative;
  284. }
  285. .pum-form__message {
  286. margin-bottom: 0.5em;
  287. }
  288. .pum-form__message:last-child {
  289. margin-bottom: 0;
  290. }
  291. .pum-form__message--error {
  292. color: red !important;
  293. border-color: red;
  294. }
  295. .pum-form__message--success {
  296. color: green !important;
  297. border-color: green;
  298. }
  299. .pum-form--loading {
  300. opacity: 0.5;
  301. }
  302. /*!******************************************************************************
  303. * Copyright (c) 2019, Code Atlantic LLC
  304. ******************************************************************************/
  305. .pum-alignment-left {
  306. text-align: right;
  307. }
  308. .pum-alignment-center {
  309. text-align: center;
  310. }
  311. .pum-alignment-right {
  312. text-align: left;
  313. }
  314. /*
  315. * Form Alignments
  316. */
  317. .pum-form--alignment-left {
  318. text-align: right;
  319. }
  320. .pum-form--alignment-center {
  321. text-align: center;
  322. }
  323. .pum-form--alignment-right {
  324. text-align: left;
  325. }
  326. /*!******************************************************************************
  327. * Copyright (c) 2019, Code Atlantic LLC
  328. ******************************************************************************/
  329. .pum-form--layout-standard .pum-form__field > label {
  330. margin-bottom: 0.25em;
  331. display: block;
  332. }
  333. /*!******************************************************************************
  334. * Copyright (c) 2019, Code Atlantic LLC
  335. ******************************************************************************/
  336. .pum-form--layout-inline .pum-form__field {
  337. display: inline-block;
  338. }
  339. /*!******************************************************************************
  340. * Copyright (c) 2019, Code Atlantic LLC
  341. ******************************************************************************/
  342. .pum-form--layout-block .pum-form__field,
  343. .pum-form--layout-block div,
  344. .pum-form--layout-block input,
  345. .pum-form--layout-block button {
  346. display: block;
  347. width: 100%;
  348. }
  349. /*
  350. * Form Styles
  351. */
  352. /*!******************************************************************************
  353. * Copyright (c) 2019, Code Atlantic LLC
  354. ******************************************************************************/
  355. .pum-form--style-default label {
  356. font-size: 14px;
  357. font-weight: bold;
  358. }
  359. .pum-form--style-default input[type='text'],
  360. .pum-form--style-default input[type='email'] {
  361. background-color: #f8f7f7;
  362. margin-bottom: 5px;
  363. font-size: 14px;
  364. padding: 10px 8px;
  365. }
  366. .pum-form--style-default button {
  367. font-size: 18px;
  368. margin: 10px 0 0;
  369. padding: 10px 5px;
  370. cursor: pointer;
  371. }
  372. /*!******************************************************************************
  373. * Copyright (c) 2019, Code Atlantic LLC
  374. ******************************************************************************/
  375. .pum-sub-form {
  376. /* :not(:required) hides this rule from IE9 and below */
  377. }
  378. .pum-sub-form .pum-sub-form-loading {
  379. opacity: 0.5;
  380. }
  381. .pum-sub-form p.pum-newsletter-error-msg {
  382. margin: 0;
  383. }
  384. .pum-sub-form .spinner-loader {
  385. left: 50%;
  386. position: absolute;
  387. bottom: 40%;
  388. }
  389. .pum-sub-form .spinner-loader:not(:required) {
  390. animation: spinner-loader 1500ms infinite linear;
  391. border-radius: 0.5em;
  392. box-shadow: rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0;
  393. display: inline-block;
  394. font-size: 10px;
  395. width: 1em;
  396. height: 1em;
  397. margin: 1.5em;
  398. overflow: hidden;
  399. text-indent: 100%;
  400. }
  401. /*!******************************************************************************
  402. * Copyright (c) 2019, Code Atlantic LLC
  403. ******************************************************************************/
  404. .pum-form__field--consent {
  405. text-align: right;
  406. }
  407. .pum-form__field--consent.pum-form__field--checkbox label {
  408. display: inline-block;
  409. vertical-align: middle;
  410. }
  411. .pum-form__field--consent.pum-form__field--checkbox label input {
  412. display: inline-block;
  413. width: inherit;
  414. margin: 0;
  415. vertical-align: middle;
  416. }
  417. .pum-form__field--consent.pum-form__field--radio .pum-form__consent-radios.pum-form__consent-radios--inline label {
  418. display: inline-block;
  419. vertical-align: middle;
  420. }
  421. .pum-form__field--consent.pum-form__field--radio .pum-form__consent-radios.pum-form__consent-radios--inline label input {
  422. display: inline-block;
  423. width: inherit;
  424. margin: 0;
  425. vertical-align: middle;
  426. }
  427. .pum-form__field--consent.pum-form__field--radio .pum-form__consent-radios.pum-form__consent-radios--inline label + label {
  428. margin-right: 1em;
  429. }
  430. .pum-form__field--consent.pum-form__field--radio .pum-form__consent-radios.pum-form__consent-radios--stacked label {
  431. display: block;
  432. vertical-align: middle;
  433. }
  434. .pum-form__field--consent.pum-form__field--radio .pum-form__consent-radios.pum-form__consent-radios--stacked label input {
  435. display: inline-block;
  436. width: inherit;
  437. margin: 0;
  438. vertical-align: middle;
  439. }
  440. /* 3rd Party Plugin Compatibility Fixes */
  441. /** Backward Compatibility */
  442. .popmake-close {
  443. cursor: pointer;
  444. }
  445. /* Formidable forms fix */
  446. .pum-container iframe.formidable {
  447. width: 100%;
  448. overflow: visible;
  449. }
  450. body div#ui-datepicker-div[style] {
  451. z-index: 9999999999 !important;
  452. }
  453. /* NF DatePicker Fix */
  454. .pika-single {
  455. z-index: 9999999999 !important;
  456. }
  457. /*# sourceMappingURL=pum-site-rtl.css.map */