fix(modal): cleanup, es6 adjustments, changed default modal animation…

… because it will rendered blurry on ios (caused by scale > 1).
BowlingX · Mar 6, 2016 · 6b47305 · 6b47305
1 parent 92ed7a8
commit 6b47305
Show file tree

Hide file tree

Showing 32 changed files with 371 additions and 354 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,7 +3,7 @@
 <head lang="en">
     <meta charset="UTF-8">
     <title>FlexCss – {{page.title}}</title>
-    <link rel="stylesheet" href="{{ site.baseurl }}/build/css/doc.min.css">
+    <link rel="stylesheet" href="{{ site.baseurl }}/build/css/doc.css">
     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,600,400' rel='stylesheet'
           type='text/css'>
     <meta name="viewport"
@@ -33,6 +33,7 @@
                 </a>
             </li>
             {% endfor %}
+            <li><a data-modal="impressum">Impressum</a></li>
         </ul>
         <ul>
             <li class="flex-align-center hide-small">
@@ -146,6 +147,7 @@ <h3>Impressum</h3>
         E-Mail: [email protected]</p>
 
     <p>
+    <div class="overflow">
 
     <h3>Haftungsausschluss</h3><strong>Haftung für Inhalte</strong><br><br>
     Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und
@@ -183,6 +185,7 @@ <h3>Haftungsausschluss</h3><strong>Haftung für Inhalte</strong><br><br>
     Hasselbach, <a href="http://www.kanzlei-hasselbach.de/rechtsanwalt-sorgerecht-koeln/">Kanzlei für Sorgerecht in
     Köln</a>
 
+
 </div>
 </body>
 </html>
diff --git a/assets/_settings.scss b/assets/_settings.scss
@@ -143,7 +143,7 @@ $subnavSlideBorder:$globalBorder !default;
 $modalAlertWidthDesktop: 320px !default;
 $modalWidthSmall: 360px !default;
 $modalAnimateName: bounceIn !default;
-$modalAnimateDuration: .6s !default;
+$modalAnimateDuration: .3s !default;
 $modalBackground: #fff !default;
 $modalBoxShadow: $globalBoxShadow !default;
 $minWidthModalDesktop: 640px !default;

diff --git a/assets/lib/_animate.scss b/assets/lib/_animate.scss
@@ -35,18 +35,13 @@
 */
 @include keyframes(bounceIn) {
 
-  0%, 40%, 100% {
+  0%, 100% {
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
 
   0% {
     opacity: 0;
-    transform: scale3d(.3, .3, .3);
-  }
-
-  40% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(.9, .9, .9);
   }
 
   100% {

diff --git a/assets/lib/_modal.scss b/assets/lib/_modal.scss
@@ -4,8 +4,6 @@
 
 // ios/webkit has problems with animations when this is prefixed and enabled
 .modal-container {
-  /* autoprefixer: off */
-  @include perspective();
   backface-visibility: hidden;
 }
 
@@ -46,26 +44,30 @@
   }
 
   &:after {
+    pointer-events:none;
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
-    will-change: opacity;
     background: rgba($backgroundDarkenerColor, $backgroundDarkenerFadeOpacity);
+    transition: opacity .5s ease;
+    backface-visibility: hidden;
   }
 
-  &.open {
+  &.backdrop {
     &:after {
-      @include animate(fadeIn);
+      opacity:1;
     }
   }
 }
 
 // The Modal itself
 .modal {
+  @include perspective();
+  backface-visibility: hidden;
   @include interface(text);
   width: 100%;
   position: relative;

diff --git a/build/css/base.css b/build/css/base.css
diff --git a/build/css/base.min.css b/build/css/base.min.css
diff --git a/build/css/doc.css b/build/css/doc.css
diff --git a/build/css/doc.min.css b/build/css/doc.min.css
diff --git a/build/css/tooltip.css b/build/css/tooltip.css
diff --git a/build/css/tooltip.min.css b/build/css/tooltip.min.css