Include a modal--fade by default to the output

drublic · Jan 6, 2015 · 4a61c95 · 4a61c95
1 parent 585aa36
commit 4a61c95
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## HEAD
+* Include a modal--fade by default to the output
 * Bugfix: Use jQuery to subscribe to events to prevent errors with trigger
 * Update word break property of modal content
 * Fix bug on IE11 with close button and overlay of modal

diff --git a/_modal-element.scss b/_modal-element.scss
@@ -5,3 +5,8 @@
 	@extend %modal;
 	@extend %modal-theme;
 }
+
+.modal--fade {
+	@extend %modal--transition-fade;
+	@extend %modal-theme;
+}
diff --git a/build/modal.css b/build/modal.css
@@ -20,7 +20,7 @@ html {
     height: 100%;
     overflow: hidden; }
 
-.modal--show {
+.modal--fade, .modal--show {
   -webkit-transform: translate(0, 100%);
   -moz-transform: translate(0, 100%);
   -o-transform: translate(0, 100%);
@@ -39,7 +39,7 @@ html {
   overflow: hidden;
   opacity: 0;
   display: none\9; }
-  .modal--show:target, .is-active.modal--show {
+  .modal--fade:target, .modal--show:target, .is-active.modal--fade, .is-active.modal--show {
     -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
     -o-transform: translate(0, 0);
@@ -48,13 +48,13 @@ html {
     width: auto;
     height: auto;
     opacity: 1; }
-  .is-active.modal--show {
+  .is-active.modal--fade, .is-active.modal--show {
     display: block\9;
     height: 100% \9;
     width: 100% \9; }
-  .modal--show:target, .is-active.modal--show {
+  .modal--fade:target, .modal--show:target, .is-active.modal--fade, .is-active.modal--show {
     display: block\9; }
-  .modal--show .modal-inner {
+  .modal--fade .modal-inner, .modal--show .modal-inner {
     position: absolute;
     top: 60px;
     left: 50%;
@@ -63,68 +63,70 @@ html {
     width: 650px;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch; }
-    .modal--show .modal-inner > img,
+    .modal--fade .modal-inner > img, .modal--show .modal-inner > img,
+    .modal--fade .modal-inner > video,
     .modal--show .modal-inner > video,
+    .modal--fade .modal-inner > iframe,
     .modal--show .modal-inner > iframe {
       width: 100%;
       height: auto;
       min-height: 300px; }
-    .modal--show .modal-inner > img {
+    .modal--fade .modal-inner > img, .modal--show .modal-inner > img {
       width: auto;
       max-width: 100%; }
-    .modal--show .modal-inner iframe {
+    .modal--fade .modal-inner iframe, .modal--show .modal-inner iframe {
       display: block;
       width: 100%;
       border: 0; }
-  .modal--show .modal-content {
+  .modal--fade .modal-content, .modal--show .modal-content {
     position: relative;
     max-height: 400px;
     max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch; }
-    .modal--show .modal-content > * {
+    .modal--fade .modal-content > *, .modal--show .modal-content > * {
       max-width: 100%; }
-  .modal--show footer {
+  .modal--fade footer, .modal--show footer {
     border-top: 1px solid white;
     padding: 0 1.2em 18px;
     background: #f0f0f0;
     border-radius: 2px; }
-  .modal--show .modal-close {
+  .modal--fade .modal-close, .modal--show .modal-close {
     display: block;
     height: 1px;
     clip: rect(0 0 0 0);
     margin: -1px;
     overflow: hidden; }
-    .modal--show .modal-close:focus:after {
+    .modal--fade .modal-close:focus:after, .modal--show .modal-close:focus:after {
       outline: 1px dotted;
       outline: -webkit-focus-ring-color auto 5px; }
-    .modal--show .modal-close:before {
+    .modal--fade .modal-close:before, .modal--show .modal-close:before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 10; }
-    .modal--show .modal-close:after {
+    .modal--fade .modal-close:after, .modal--show .modal-close:after {
       content: '\00d7';
       position: absolute;
       top: 35px;
       right: 50%;
       z-index: 20;
       margin-right: -325px; }
   @media screen and (max-width: 690px) {
-    .modal--show .modal-inner {
+    .modal--fade .modal-inner, .modal--show .modal-inner {
       width: auto;
       left: 20px;
       right: 20px;
       margin-left: 0; }
-    .modal--show .modal-close:after {
+    .modal--fade .modal-close:after, .modal--show .modal-close:after {
       margin-right: 0 !important;
       right: 20px; } }
   @media screen and (max-width: 30em) {
-    .modal--show {
+    .modal--fade, .modal--show {
       -webkit-transform: translate(0, 400px);
       -webkit-transform: translate3d(0, 100%, 0);
       transform: translate3d(0, 100%, 0);
@@ -136,10 +138,10 @@ html {
       display: block;
       right: auto;
       bottom: auto; }
-      .modal--show:target, .is-active.modal--show {
+      .modal--fade:target, .modal--show:target, .is-active.modal--fade, .is-active.modal--show {
         width: 100%;
         height: 100%; }
-      .modal--show .modal-inner {
+      .modal--fade .modal-inner, .modal--show .modal-inner {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
@@ -148,59 +150,59 @@ html {
         right: 0;
         height: 100%;
         overflow: auto; }
-      .modal--show .modal-content {
+      .modal--fade .modal-content, .modal--show .modal-content {
         max-height: none;
         -ms-word-break: break-all;
         word-break: break-all;
         word-break: break-word;
         -webkit-hyphens: auto;
         -moz-hyphens: auto;
         hyphens: auto; }
-      .modal--show .modal-close {
+      .modal--fade .modal-close, .modal--show .modal-close {
         right: auto; }
-        .modal--show .modal-close:before {
+        .modal--fade .modal-close:before, .modal--show .modal-close:before {
           content: '';
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 20; }
-        .modal--show .modal-close:after {
+        .modal--fade .modal-close:after, .modal--show .modal-close:after {
           top: 5px !important;
           right: 5px;
           left: auto;
           margin-left: 0; } }
   @media screen and (max-height: 46em) and (min-width: 30em) {
-    .modal--show .modal-content {
+    .modal--fade .modal-content, .modal--show .modal-content {
       max-height: 340px;
       max-height: 50vh; } }
   @media screen and (max-height: 36em) and (min-width: 30em) {
-    .modal--show .modal-content {
+    .modal--fade .modal-content, .modal--show .modal-content {
       max-height: 265px;
       max-height: 40vh; } }
-  .is-stacked.modal--show {
+  .is-stacked.modal--fade, .is-stacked.modal--show {
     -webkit-transform: translate(0, 0) scale(1, 1);
     -moz-transform: translate(0, 0) scale(1, 1);
     -o-transform: translate(0, 0) scale(1, 1);
     -ms-transform: translate(0, 0) scale(1, 1);
     transform: translate(0, 0) scale(1, 1);
     opacity: 1; }
-    .is-stacked.modal--show .modal-inner {
+    .is-stacked.modal--fade .modal-inner, .is-stacked.modal--show .modal-inner {
       -webkit-animation: scaleDown .7s ease both;
       -moz-animation: scaleDown .7s ease both;
       animation: scaleDown .7s ease both; }
-    .is-stacked.modal--show .modal-close {
+    .is-stacked.modal--fade .modal-close, .is-stacked.modal--show .modal-close {
       opacity: 0; }
     @media screen and (max-width: 30em) {
-      .is-stacked.modal--show {
+      .is-stacked.modal--fade, .is-stacked.modal--show {
         -webkit-animation: scaleDown .7s ease both;
         -moz-animation: scaleDown .7s ease both;
         animation: scaleDown .7s ease both; }
-        .is-stacked.modal--show .modal-inner {
+        .is-stacked.modal--fade .modal-inner, .is-stacked.modal--show .modal-inner {
           -webkit-animation: none;
           -moz-animation: none;
           animation: none; }
-        .is-stacked.modal--show .modal-close {
+        .is-stacked.modal--fade .modal-close, .is-stacked.modal--show .modal-close {
           opacity: 1; } }
 
 /**
@@ -218,6 +220,10 @@ html {
  * }
  *
  */
+@media screen and (min-width: 30em) {
+  .modal--fade {
+    transition: opacity 0.4s; } }
+
 /**
  * CSS Modal Themes
  * http://drublic.github.com/css-modal
@@ -227,35 +233,35 @@ html {
 /*
  * Global Theme Styles
  */
-.modal--show {
+.modal--fade, .modal--show {
   color: #222;
   line-height: 1.3; }
-  .modal--show .modal-inner {
+  .modal--fade .modal-inner, .modal--show .modal-inner {
     border-radius: 2px;
     background: #fff;
     -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
     max-width: 100%;
     -webkit-transition: max-width 0.25s linear, margin-left 0.125s linear;
     transition: max-width 0.25s linear, margin-left 0.125s linear; }
-  .modal--show header {
+  .modal--fade header, .modal--show header {
     border-bottom: 1px solid #ddd;
     padding: 0 1.2em; }
-    .modal--show header > h2 {
+    .modal--fade header > h2, .modal--show header > h2 {
       margin: 0.5em 0; }
-  .modal--show .modal-content {
+  .modal--fade .modal-content, .modal--show .modal-content {
     border-bottom: 1px solid #ddd;
     padding: 15px 1.2em; }
-  .modal--show footer {
+  .modal--fade footer, .modal--show footer {
     border-top: 1px solid white;
     padding: 0 1.2em 18px;
     background: #f0f0f0;
     border-radius: 2px; }
-  .modal--show .modal-close {
+  .modal--fade .modal-close, .modal--show .modal-close {
     text-indent: -100px; }
-    .modal--show .modal-close:before {
+    .modal--fade .modal-close:before, .modal--show .modal-close:before {
       background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAEUlEQVQoz2NgeEYAjioYSQoAzOTmAXhPhyoAAAAASUVORK5CYII="); }
-    .modal--show .modal-close:after {
+    .modal--fade .modal-close:after, .modal--show .modal-close:after {
       content: '\00d7';
       background: #fff;
       border-radius: 2px;
@@ -264,18 +270,18 @@ html {
       text-decoration: none;
       text-indent: 0; }
   @media screen and (max-width: 30em) {
-    .modal--show .modal-close:before {
+    .modal--fade .modal-close:before, .modal--show .modal-close:before {
       background: #27aae2;
       height: 3em;
       -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }
-    .modal--show .modal-inner {
+    .modal--fade .modal-inner, .modal--show .modal-inner {
       padding-top: 3em;
       -webkit-box-shadow: none;
       box-shadow: none; }
-    .modal--show .modal-close {
+    .modal--fade .modal-close, .modal--show .modal-close {
       text-decoration: none; }
-      .modal--show .modal-close:after {
+      .modal--fade .modal-close:after, .modal--show .modal-close:after {
         content: attr(data-close);
         font-size: 1em;
         padding: 0.5em 1em; } }