Merge pull request #59 from VodkaBears/v0.4.0

v0.4.0

CHANGELOG.md

@@ -1,3 +1,13 @@
+### 0.4.0
+This version has incompatible changes!
+
+* Changed CSS class names.
+* Shared overlay.
+* Changed visual styles.
+* Improved IE8 styles.
+* Updated dependencies.
+* Fixes.
+
 ### 0.3.0
 * Added font-size of inputs to prevent iOs zooming.
 * Convert image for IE8 to base64.

README.md

@@ -6,6 +6,9 @@ Remodal
 Flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking.
 
 #IMPORTANT!
+
+**v0.4.0 has incompatible changes.**
+
 If your page body requires `height: 100%`, your page will scroll to the top([#20](https://github.com/VodkaBears/Remodal/issues/20), [#21](https://github.com/VodkaBears/Remodal/issues/21)), because remodal sets `overflow: hidden` to the html and body to hide the scrollbar. There is no problem if your content doesn't overflow your full height body container, otherwise you should do something of this:
 * Try to set `min-height: 100%` instead of `height: 100%`. If it doesn't help, read next.
 * Set `html, body { overflow: auto !important; margin: 0; }`. Your page won't be locked and will be scrollable always.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "remodal",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "homepage": "http://vodkabears.github.io/remodal/",
   "authors": [
     "Ilya Makarov <[email protected]>"

dist/jquery.remodal.css

@@ -1,5 +1,5 @@
 /*
- *  Remodal - v0.3.0
+ *  Remodal - v0.4.0
  *  Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.
  *  http://vodkabears.github.io/remodal/
  *
@@ -14,8 +14,8 @@
 
 /* Hide scroll bar */
 
-html.remodal_lock,
-body.remodal_lock {
+html.remodal-is-locked,
+body.remodal-is-locked {
     overflow: hidden;
 }
 
@@ -26,9 +26,22 @@ body.remodal_lock {
     visibility: hidden;
 }
 
-/* Overlay necessary styles */
+/* Necessary styles of the overlay */
 
 .remodal-overlay {
+    position: fixed;
+    z-index: 9999;
+    top: -5000px;
+    right: -5000px;
+    bottom: -5000px;
+    left: -5000px;
+
+    display: none;
+}
+
+/* Necessary styles of the wrapper */
+
+.remodal-wrapper {
     position: fixed;
     z-index: 10000;
     top: 0;
@@ -44,7 +57,7 @@ body.remodal_lock {
     -webkit-overflow-scrolling: touch;
 }
 
-.remodal-overlay:after {
+.remodal-wrapper:after {
     display: inline-block;
 
     height: 100%;
@@ -55,19 +68,20 @@ body.remodal_lock {
 
 /* Fix iPad, iPhone glitches */
 
-.remodal-overlay {
-    -webkit-backface-visibility: hidden;
+.remodal-overlay,
+.remodal-wrapper {
+    -webkit-transform: translateZ(0px);
 }
 
-/* Modal dialog necessary styles */
+/* Necessary styles of the modal dialog */
 
 .remodal {
     position: relative;
 
     display: inline-block;
 }
 
-/* Remodal anti-zoom. Font-size should be >= 16px. */
+/* Anti-zoom. Font-size should be >= 16px. */
 
 .remodal select,
 .remodal textarea,
@@ -92,37 +106,37 @@ body.remodal_lock {
 /* Background for effects */
 
 .remodal-bg {
-    -webkit-transition: -webkit-filter 0.2s linear;
-    -moz-transition: -moz-filter 0.2s linear;
-    -o-transition: -o-filter 0.2s linear;
-    transition: filter 0.2s linear;
+    -webkit-transition: -webkit-filter 0.2s ease-out;
+    -moz-transition: -moz-filter 0.2s ease-out;
+    -o-transition: -o-filter 0.2s ease-out;
+    transition: filter 0.2s ease-out;
 }
 
-body.remodal_active .remodal-bg {
+body.remodal-is-active .remodal-bg {
     -webkit-filter: blur(3px);
     -ms-filter: blur(3px);
     filter: blur(3px);
     -moz-filter: blur(3px);
     -o-filter: blur(3px);
 }
 
-/* Overlay default theme styles */
+/* Default theme styles of the overlay */
 
 .remodal-overlay {
-    -webkit-transition: opacity 0.2s linear;
-    -moz-transition: opacity 0.2s linear;
-    -o-transition: opacity 0.2s linear;
-    transition: opacity 0.2s linear;
+    -webkit-transition: opacity 0.2s ease-out;
+    -moz-transition: opacity 0.2s ease-out;
+    -o-transition: opacity 0.2s ease-out;
+    transition: opacity 0.2s ease-out;
 
     opacity: 0;
     background: rgba(33, 36, 46, 0.95);
 }
 
-body.remodal_active .remodal-overlay {
+body.remodal-is-active .remodal-overlay {
     opacity: 1;
 }
 
-/* Modal dialog default theme styles */
+/* Default theme styles of the modal dialog */
 
 .remodal {
     font-size: 16px;
@@ -134,35 +148,36 @@ body.remodal_active .remodal-overlay {
     min-height: 100%;
     padding: 35px;
 
-    -webkit-transition: -webkit-transform 0.2s linear;
-    -moz-transition: -moz-transform 0.2s linear;
-    -o-transition: -o-transform 0.2s linear;
-    transition: transform 0.2s linear;
+    -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
+    -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out;
+    -o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-out;
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
     -webkit-transform: scale(0.95);
     -moz-transform: scale(0.95);
     -ms-transform: scale(0.95);
     -o-transform: scale(0.95);
     transform: scale(0.95);
 
+    opacity: 0;
     color: #182a3c;
     background: #f4f4f4;
     background-clip: padding-box;
-    -webkit-box-shadow: 0 0 8px #171a24;
-    box-shadow: 0 0 8px #171a24;
 }
 
-body.remodal_active .remodal {
+body.remodal-is-active .remodal {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
+
+    opacity: 1;
 }
 
-/* Modal dialog vertical align  */
+/* Vertical align of the modal dialog */
 
 .remodal,
-.remodal-overlay:after {
+.remodal-wrapper:after {
     vertical-align: middle;
 }
 
@@ -176,13 +191,12 @@ body.remodal_active .remodal {
     width: 28px;
     height: 28px;
 
-    -webkit-transition: background 0.2s linear;
-    -moz-transition: background 0.2s linear;
-    -o-transition: background 0.2s linear;
-    transition: background 0.2s linear;
+    -webkit-transition: background 0.2s ease-out;
+    -moz-transition: background 0.2s ease-out;
+    -o-transition: background 0.2s ease-out;
+    transition: background 0.2s ease-out;
     text-decoration: none;
 
-    border: 2px solid #3e5368;
     -webkit-border-radius: 50%;
     border-radius: 50%;
 }
@@ -196,10 +210,10 @@ body.remodal_active .remodal {
 
     content: "×";
     cursor: pointer;
-    -webkit-transition: all 0.2s linear;
-    -moz-transition: all 0.2s linear;
-    -o-transition: all 0.2s linear;
-    transition: all 0.2s linear;
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
     text-decoration: none;
 
     color: #3e5368;
@@ -228,15 +242,15 @@ body.remodal_active .remodal {
     padding: 9px 0;
 
     cursor: pointer;
-    -webkit-transition: all 0.2s linear;
-    -moz-transition: all 0.2s linear;
-    -o-transition: all 0.2s linear;
-    transition: all 0.2s linear;
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
     text-align: center;
     text-decoration: none;
 
-    -webkit-border-radius: 50px;
-    border-radius: 50px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
     background-clip: padding-box;
 }
 
@@ -281,19 +295,28 @@ body.remodal_active .remodal {
 /* IE8
    ========================================================================== */
 
-html.lt-ie9,
-html.lt-ie9 body {
-    overflow: auto !important;
+.lt-ie9 .remodal-overlay {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E);
+}
 
-    min-height: 100%;
-    margin: 0;
+.lt-ie9 .remodal {
+    width: 700px;
+    min-height: 0;
+    margin: 20px auto;
 }
 
-.lt-ie9 .remodal-overlay {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///8AAABVwtN+AAAAAnRSTlMAuyogpzwAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGHRFWHRDcmVhdGlvbiBUaW1lADA2LzEwLzIwMTSCx1nsAAAAD0lEQVQImWP4//8DAxUxACnDOpkfX95WAAAAAElFTkSuQmCC);
+.lt-ie9 .remodal-close:after {
+    margin: auto;
+
+    text-align: center;
 }
 
-.lt-ie9 .remodal {
-    width: 500px;
-    min-height: auto;
+.lt-ie9 .remodal-close:hover,
+.lt-ie9 .remodal-close:active {
+    background: transparent;
+}
+
+.lt-ie9 .remodal-close:hover.remodal-close:after,
+.lt-ie9 .remodal-close:active.remodal-close:after {
+    color: #3e5368;
 }