diff --git a/client/core/src/components/snackbar/snackbar.js b/client/core/src/components/snackbar/snackbar.js index cf1418903..4106ffedd 100644 --- a/client/core/src/components/snackbar/snackbar.js +++ b/client/core/src/components/snackbar/snackbar.js @@ -66,7 +66,7 @@ export default class Controller extends Component { let shape = this.createShape(data); setTimeout(() => - this.hide(shape), data.timeout || 6000); + this.hide(shape), data.timeout || 3000); setTimeout(() => shape.classList.add('shown'), 30); diff --git a/client/core/src/components/snackbar/style.scss b/client/core/src/components/snackbar/style.scss index b8f863b79..5f14df76c 100644 --- a/client/core/src/components/snackbar/style.scss +++ b/client/core/src/components/snackbar/style.scss @@ -1,31 +1,32 @@ @import "colors"; vn-snackbar #shapes { - position: fixed; - bottom: 0; - right: 15px; - width: 20em; max-height: 20.625em; + margin-left: -12.5em; + position: fixed; z-index: 100; + width: 25em; + left: 50%; + bottom: 0 } vn-snackbar .shape { - box-sizing: border-box; background-color: rgba(1, 1, 1, 0.8); + box-shadow: 0 0 .4em rgba(1,1,1,.4); + transition: transform 300ms ease-in-out; + transform: translateY(20em); + box-sizing: border-box; + border-radius: .2em; + margin-bottom: 15px; color: white; padding: 1em; - border-radius: .2em; - box-shadow: 0 0 .4em rgba(1,1,1,.4); - margin-bottom: 15px; - transform: translateX(20em); - transition: transform 300ms ease-in-out; - + &.text { text-align: center } &.shown { - transform: translateX(0); + transform: translateY(0); } &.success { @@ -46,15 +47,15 @@ vn-snackbar .shape { } & > button { - cursor: pointer; - float: right; - text-transform: uppercase; - border: none; background-color: transparent; - font-weight: bold; - color: $main-01; - padding: .5em; - margin: -.5em; + text-transform: uppercase; margin-left: .5em; + font-weight: bold; + cursor: pointer; + color: $main-01; + float: right; + border: none; + padding: .5em; + margin: -.5em } } \ No newline at end of file