_remodal.scss 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. /*
  2. * Remodal - v0.2.0
  3. * Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.
  4. * http://vodkabears.github.io/remodal/
  5. *
  6. * Made by Ilya Makarov
  7. * Under MIT License
  8. */
  9. /* ==========================================================================
  10. Remodal necessary styles
  11. ========================================================================== */
  12. /* Hide scroll bar */
  13. html.remodal-is-locked {
  14. overflow: hidden;
  15. touch-action: none;
  16. }
  17. /* Anti FOUC */
  18. .remodal, [data-remodal-id] {
  19. display: none;
  20. }
  21. /* Overlay necessary styles */
  22. .remodal-overlay {
  23. position: fixed;
  24. z-index: 99999;
  25. top: -5000px;
  26. right: -5000px;
  27. bottom: -5000px;
  28. left: -5000px;
  29. display: none;
  30. }
  31. /* Necessary styles of the wrapper */
  32. .remodal-wrapper {
  33. position: fixed;
  34. z-index: 100000;
  35. top: 0;
  36. right: 0;
  37. bottom: 0;
  38. left: 0;
  39. display: none;
  40. overflow: auto;
  41. text-align: center;
  42. -webkit-overflow-scrolling: touch;
  43. &:after {
  44. display: inline-block;
  45. height: 100%;
  46. margin-left: -0.05em;
  47. content: '';
  48. }
  49. }
  50. /* Fix iPad, iPhone glitches */
  51. .remodal-overlay,
  52. .remodal-wrapper {
  53. backface-visibility: hidden;
  54. }
  55. /* Modal dialog necessary styles */
  56. .remodal {
  57. position: relative;
  58. outline: none;
  59. text-size-adjust: 100%;
  60. }
  61. .remodal-is-initialized {
  62. /* Disable Anti-FOUC */
  63. display: inline-block;
  64. }
  65. /* ==========================================================================
  66. Remodal's default mobile first theme
  67. ========================================================================== */
  68. /* Default theme styles for the background */
  69. .remodal-bg.remodal-is-opening,
  70. .remodal-bg.remodal-is-opened {
  71. @include filter(blur(3px));
  72. }
  73. /* Default theme styles of the overlay */
  74. .remodal-overlay {
  75. background: rgba(43, 46, 56, 0.9);
  76. }
  77. .remodal-overlay.remodal-is-opening,
  78. .remodal-overlay.remodal-is-closing {
  79. animation-duration: 0.3s;
  80. animation-fill-mode: forwards;
  81. }
  82. .remodal-overlay.remodal-is-opening {
  83. animation-name: remodal-overlay-opening-keyframes;
  84. }
  85. .remodal-overlay.remodal-is-closing {
  86. animation-name: remodal-overlay-closing-keyframes;
  87. }
  88. /* Default theme styles of the wrapper */
  89. .remodal-wrapper {
  90. padding: 10px 10px 0;
  91. }
  92. /* Default theme styles of the modal dialog */
  93. .remodal {
  94. box-sizing: border-box;
  95. width: 100%;
  96. margin-bottom: 10px;
  97. padding: 35px;
  98. transform: translate3d(0, 0, 0);
  99. }
  100. .remodal.remodal-is-opening,
  101. .remodal.remodal-is-closing {
  102. animation-duration: 0.3s;
  103. animation-fill-mode: forwards;
  104. }
  105. .remodal.remodal-is-opening {
  106. animation-name: remodal-opening-keyframes;
  107. }
  108. .remodal.remodal-is-closing {
  109. animation-name: remodal-closing-keyframes;
  110. }
  111. /* Vertical align of the modal dialog */
  112. .remodal,
  113. .remodal-wrapper:after {
  114. vertical-align: middle;
  115. }
  116. /* Close button */
  117. .remodal-close {
  118. position: absolute;
  119. top: 0;
  120. left: 0;
  121. display: block;
  122. overflow: visible;
  123. width: 35px;
  124. height: 35px;
  125. margin: 0;
  126. padding: 0;
  127. cursor: pointer;
  128. transition: color 0.2s;
  129. text-decoration: none;
  130. border: 0;
  131. outline: 0;
  132. background: transparent;
  133. }
  134. .remodal-close:before {
  135. font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  136. font-size: 25px;
  137. line-height: 35px;
  138. position: absolute;
  139. top: 0;
  140. left: 0;
  141. display: block;
  142. width: 35px;
  143. content: "\00d7";
  144. text-align: center;
  145. }
  146. /* Dialog buttons */
  147. /*.remodal-confirm,
  148. .remodal-cancel {
  149. font: inherit;
  150. display: inline-block;
  151. overflow: visible;
  152. min-width: 110px;
  153. margin: 0;
  154. padding: 12px 0;
  155. cursor: pointer;
  156. transition: background 0.2s;
  157. text-align: center;
  158. vertical-align: middle;
  159. text-decoration: none;
  160. border: 0;
  161. outline: 0;
  162. }
  163. .remodal-confirm {
  164. color: #fff;
  165. background: #81c784;
  166. }
  167. .remodal-confirm:hover,
  168. .remodal-confirm:focus {
  169. background: #66bb6a;
  170. }
  171. .remodal-cancel {
  172. color: #fff;
  173. background: #e57373;
  174. }
  175. .remodal-cancel:hover,
  176. .remodal-cancel:focus {
  177. background: #ef5350;
  178. }
  179. !* Remove inner padding and border in Firefox 4+ for the button tag. *!
  180. .remodal-confirm::-moz-focus-inner,
  181. .remodal-cancel::-moz-focus-inner,
  182. .remodal-close::-moz-focus-inner {
  183. padding: 0;
  184. border: 0;
  185. }*/
  186. /* Keyframes
  187. ========================================================================== */
  188. @keyframes remodal-opening-keyframes {
  189. from {
  190. transform: scale(1.05);
  191. opacity: 0;
  192. }
  193. to {
  194. transform: none;
  195. opacity: 1;
  196. }
  197. }
  198. @keyframes remodal-closing-keyframes {
  199. from {
  200. transform: scale(1);
  201. opacity: 1;
  202. }
  203. to {
  204. transform: scale(0.95);
  205. opacity: 0;
  206. }
  207. }
  208. @keyframes remodal-overlay-opening-keyframes {
  209. from {
  210. opacity: 0;
  211. }
  212. to {
  213. opacity: 1;
  214. }
  215. }
  216. @keyframes remodal-overlay-closing-keyframes {
  217. from {
  218. opacity: 1;
  219. }
  220. to {
  221. opacity: 0;
  222. }
  223. }
  224. /* Media queries
  225. ========================================================================== */
  226. @media only screen and (min-width: 641px) {
  227. .remodal {
  228. max-width: 700px;
  229. }
  230. }
  231. /* IE8
  232. ========================================================================== */
  233. .lt-ie9 .remodal-overlay {
  234. background: #2b2e38;
  235. }
  236. .lt-ie9 .remodal {
  237. width: 700px;
  238. }
  239. /********* GRAV CUSTOM ********/
  240. .remodal {
  241. padding: 35px 0 0;
  242. text-align: left;
  243. box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  244. border-radius: 3px;
  245. }
  246. .remodal ul li {
  247. margin-left: 27px;
  248. list-style-type: square;
  249. }