diff --git a/src/ContainerListItem.react.js b/src/ContainerListItem.react.js index 9d35cb4f..2ed466bd 100644 --- a/src/ContainerListItem.react.js +++ b/src/ContainerListItem.react.js @@ -31,7 +31,7 @@ var ContainerListItem = React.createClass({ }); ContainerStore.remove(this.props.container.Name, () => { var containers = ContainerStore.sorted(); - if (containers.length === 0) { + if (containers.length === 1) { $(document.body).find('.new-container-item').parent().fadeIn(); } }); diff --git a/src/Setup.react.js b/src/Setup.react.js index f97495f3..23e7f1bb 100644 --- a/src/Setup.react.js +++ b/src/Setup.react.js @@ -52,7 +52,7 @@ var Setup = React.createClass({
- +
); @@ -87,7 +87,7 @@ var Setup = React.createClass({

Couldn't Install

Kitematic didn't receive the administrative privileges required to install or upgrade VirtualBox & Docker.

Please retry or download & install VirutalBox manually from the official Oracle website.

- +

diff --git a/styles/animation.less b/styles/animation.less index 641545c0..1fd7294b 100644 --- a/styles/animation.less +++ b/styles/animation.less @@ -34,3 +34,12 @@ -webkit-transform: translateY(20px); } } + +@-webkit-keyframes fadein { + from { + opacity:0; + } + to { + opacity:1; + } +} diff --git a/styles/header.less b/styles/header.less index 0a040fab..946c32a4 100644 --- a/styles/header.less +++ b/styles/header.less @@ -19,6 +19,7 @@ position: relative; top: 10px; left: 15px; + z-index: 1000; &:hover { .button-minimize.enabled { .at2x('minimize.png', 10px, 10px); diff --git a/styles/left-panel.less b/styles/left-panel.less index e4b7eba9..368f2d17 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -1,6 +1,7 @@ /* Sidebar */ .sidebar { + .fade-in(); padding-top: 28px; background-color: white; margin: 0; diff --git a/styles/mixins.less b/styles/mixins.less index 3ff7438f..f00cf975 100644 --- a/styles/mixins.less +++ b/styles/mixins.less @@ -28,3 +28,10 @@ position: relative; overflow: hidden; } + +.fade-in() { + opacity: 0; + -webkit-animation: fadein ease-in 1; + -webkit-animation-fill-mode: forwards; + -webkit-animation-duration: 0.3s; +} diff --git a/styles/right-panel.less b/styles/right-panel.less index aa5b1820..6be51d5b 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -1,4 +1,6 @@ .details { + .fade-in(); + -webkit-animation-delay: 0.3s; background-color: @color-background; margin: 0; padding: 0; diff --git a/styles/setup.less b/styles/setup.less index 35a5c7f6..761fe6b4 100644 --- a/styles/setup.less +++ b/styles/setup.less @@ -1,4 +1,5 @@ .setup { + .fade-in(); display: flex; height: 100%; width: 100%;