_remodal.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  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_lock, body.remodal_lock {
  14. overflow: hidden;
  15. }
  16. /* Anti FOUC */
  17. .remodal, [data-remodal-id] {
  18. visibility: hidden;
  19. }
  20. /* Overlay necessary styles */
  21. .remodal-overlay {
  22. position: fixed;
  23. top: 0;
  24. left: 0;
  25. right: 0;
  26. bottom: 0;
  27. z-index: 10000;
  28. display: none;
  29. overflow: auto;
  30. -webkit-overflow-scrolling: touch;
  31. text-align: center;
  32. &:after {
  33. display: inline-block;
  34. height: 100%;
  35. margin-left: -0.05em;
  36. content: '';
  37. }
  38. /* Fix iPad, iPhone glitches */
  39. > * {
  40. -webkit-transform: translateZ(0px);
  41. }
  42. }
  43. /* Modal dialog necessary styles */
  44. .remodal {
  45. position: relative;
  46. display: inline-block;
  47. text-align: left;
  48. }
  49. /* Background for effects */
  50. .remodal-bg {
  51. @include transition-property (filter);
  52. @include transition-duration(0.2s);
  53. @include transition-timing-function(linear);
  54. }
  55. // body.remodal_active .remodal-bg {
  56. // @include filter(blur(5px));
  57. // }
  58. /* Overlay default theme styles */
  59. .remodal-overlay {
  60. opacity: 0;
  61. background: rgba(33, 36, 46, 0.8);
  62. @include transition(opacity 0.2s linear);
  63. }
  64. body.remodal_active .remodal-overlay {
  65. opacity: 1;
  66. }
  67. /* Modal dialog default theme styles */
  68. .remodal {
  69. width: 100%;
  70. min-height: 100%;
  71. padding-top: 2rem;
  72. @include box-sizing(border-box);
  73. font-size: 16px;
  74. background: $content-bg;
  75. background-clip: padding-box;
  76. color: $content-fg;
  77. box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  78. @include transform(scale(0.95));
  79. @include transition-property (transform);
  80. @include transition-duration(0.2s);
  81. @include transition-timing-function(linear);
  82. }
  83. body.remodal_active .remodal {
  84. @include transform(scale(1));
  85. }
  86. /* Modal dialog vertical align */
  87. .remodal, .remodal-overlay:after {
  88. vertical-align: middle;
  89. }
  90. /* Close button */
  91. .remodal-close {
  92. position: absolute;
  93. top: 10px;
  94. right: 10px;
  95. color: $content-fg;
  96. text-decoration: none;
  97. text-align: center;
  98. @include transition(background 0.2s linear);
  99. }
  100. .remodal-close:after {
  101. display: block;
  102. font-family: FontAwesome;
  103. content: "\f00d";
  104. font-size: 28px;
  105. line-height: 28px;
  106. cursor: pointer;
  107. text-decoration: none;
  108. }
  109. .remodal-close:hover, .remodal-close:active {
  110. color: darken($content-fg, 20%);
  111. }
  112. /* Media queries
  113. ========================================================================== */
  114. @media only screen and (min-width: 40.063em) /* min-width 641px */ {
  115. .remodal {
  116. max-width: 700px;
  117. margin: 20px auto;
  118. min-height: 0;
  119. border-radius: 6px;
  120. }
  121. }