tweak animation

dpresbit · Jul 26, 2016 · a6f57fc · a6f57fc
1 parent c1e12d6
commit a6f57fc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 43 deletions.
diff --git a/frontend/src/metabase/components/Modal.jsx b/frontend/src/metabase/components/Modal.jsx
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from "react";
 import ReactDOM from "react-dom";
+import cx from "classnames";
 
 import ReactCSSTransitionGroup from "react-addons-css-transition-group";
 
@@ -12,7 +13,7 @@ export default class Modal extends Component {
 
     static defaultProps = {
         className: "Modal",
-        backdropClassName: "Modal-backdrop flex justify-center align-center",
+        backdropClassName: "Modal-backdrop",
         isOpen: true
     };
 
@@ -47,18 +48,20 @@ export default class Modal extends Component {
     _modalComponent() {
         return (
             <OnClickOutsideWrapper handleDismissal={this.handleDismissal.bind(this)}>
-                <div className={this.props.className}>
+                <div className={cx(this.props.className, 'relative bordered bg-white rounded')}>
                     {this.props.children}
                 </div>
             </OnClickOutsideWrapper>
         );
     }
 
     _renderPopover() {
+        const { backdropClassName, isOpen, style } = this.props;
+        const backdropClassnames = 'flex justify-center align-center fixed top left bottom right';
         ReactDOM.render(
             <ReactCSSTransitionGroup transitionName="Modal" transitionAppear={true} transitionAppearTimeout={250} transitionEnterTimeout={250} transitionLeaveTimeout={250}>
-                { this.props.isOpen &&
-                    <div key="modal" className={this.props.backdropClassName} style={this.props.style}>
+                { isOpen &&
+                    <div key="modal" className={cx(backdropClassName, backdropClassnames)} style={style}>
                         {this._modalComponent()}
                     </div>
                 }

diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
@@ -1,50 +1,20 @@
-
 .Modal {
-  position: relative;
-
   margin: auto;
-
   width: 640px;
-
-  background-color: #fff;
-
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
   box-shadow: 0 0 6px rgba(0, 0, 0, .12);
-
-  /*outline: none;*/
-
   max-height: 90%;
   overflow-y: auto;
 }
 
-.Modal.Modal--small {
-  width: 480px;
-}
-
-.Modal.Modal--medium {
-  width: 65%;
-}
-
-.Modal.Modal--wide {
-  width: 85%;
-}
+.Modal.Modal--small   { width: 480px; } /* TODO - why is this one px? */
+.Modal.Modal--medium  { width: 65%; }
+.Modal.Modal--wide    { width: 85%; }
 
 .Modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background-color: rgba(255, 255, 255, 0.6);
 }
 
 .Modal-backdrop-dark {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     background-color: rgba(75, 75, 75, 0.7);
 }
 
@@ -64,36 +34,37 @@
 }
 
 .Modal-backdrop.Modal-leave {
-  transition: background-color 200ms ease-in-out;
+  transition: background-color 200ms ease-in-out 100ms;
   background-color: rgba(255, 255, 255, 0.6);
 }
 
 .Modal-backdrop.Modal-leave-active {
   background-color: rgba(255, 255, 255, 0.01);
 }
 
+
 /* modal */
 
 .Modal-backdrop.Modal-appear .Modal,
 .Modal-backdrop.Modal-enter .Modal {
-  transition: opacity 200ms linear, transform 200ms ease-in-out;
+  transition: opacity 200ms linear 100ms, transform 200ms ease-in-out 100ms;
   opacity: 0.01;
-  transform: translate(-50%, -55%);
+  transform: translate(0, 40px);
 }
 
 .Modal-backdrop.Modal-appear-active .Modal,
 .Modal-backdrop.Modal-enter-active .Modal {
   opacity: 1;
-  transform: translate(-50%, -50%);
+  transform: translate(0, 0);
 }
 
 .Modal-backdrop.Modal-leave .Modal {
   transition: opacity 200ms linear, transform 200ms ease-in-out;
   opacity: 1;
-  transform: translate(-50%, -50%);
+  transform: translate(0, 0);
 }
 
 .Modal-backdrop.Modal-leave-active .Modal {
   opacity: 0.01;
-  transform: translate(-50%, -55%);
+  transform: translate(0, -40px);
 }