docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add fade out animation for copy container id feedback 

Signed-off-by: Clement Ho <ClemMakesApps@gmail.com>
This commit is contained in:
Clement Ho 2016-06-01 10:06:09 -05:00
parent 458c3d687b
commit 1b68613b5a
2 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ContainerSettingsGeneral.react.js
View File

@ -72,7 +72,7 @@ var ContainerSettingsGeneral = React.createClass({
_this.setState({ _this.setState({
copiedId: false copiedId: false
}); });
}, 3000); }, 5000);
}, },
handleSaveContainerName: function () { handleSaveContainerName: function () {
@ -189,7 +189,7 @@ var ContainerSettingsGeneral = React.createClass({
if (this.state.copiedId) { if (this.state.copiedId) {
clipboardStatus = ( clipboardStatus = (
<p><strong>Copied to Clipboard</strong></p> <p className="fadeOut"><strong>Copied to Clipboard</strong></p>
); );
} }

9
styles/container-settings.less
View File

@ -83,6 +83,15 @@
.disabled { .disabled {
border-bottom: none; border-bottom: none;
} }
.fadeOut {
animation: fade-out 5s ease-in-out forwards;
}
@keyframes fade-out {
0% { opacity: 0; }
10% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
p { p {
font-weight: 300; font-weight: 300;
margin-top: 5px; margin-top: 5px;