verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

Moved snackbar to center. Reduced snackbar timeout by 3sec. #573

This commit is contained in:
Joan Sanchez 2018-08-08 08:53:19 +02:00
parent 3fef95aeef
commit a1d3a1594e
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/core/src/components/snackbar/snackbar.js
View File

@ -66,7 +66,7 @@ export default class Controller extends Component {
let shape = this.createShape(data); let shape = this.createShape(data);
setTimeout(() => setTimeout(() =>
this.hide(shape), data.timeout || 6000); this.hide(shape), data.timeout || 3000);
setTimeout(() => setTimeout(() =>
shape.classList.add('shown'), 30); shape.classList.add('shown'), 30);

39
client/core/src/components/snackbar/style.scss
View File

@ -1,31 +1,32 @@
@import "colors"; @import "colors";
vn-snackbar #shapes { vn-snackbar #shapes {
position: fixed;
bottom: 0;
right: 15px;
width: 20em;
max-height: 20.625em; max-height: 20.625em;
margin-left: -12.5em;
position: fixed;
z-index: 100; z-index: 100;
width: 25em;
left: 50%;
bottom: 0
} }
vn-snackbar .shape { vn-snackbar .shape {
box-sizing: border-box;
background-color: rgba(1, 1, 1, 0.8); 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; color: white;
padding: 1em; 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 {
text-align: center text-align: center
} }
&.shown { &.shown {
transform: translateX(0); transform: translateY(0);
} }
&.success { &.success {
@ -46,15 +47,15 @@ vn-snackbar .shape {
} }
& > button { & > button {
cursor: pointer;
float: right;
text-transform: uppercase;
border: none;
background-color: transparent; background-color: transparent;
font-weight: bold; text-transform: uppercase;
color: $main-01;
padding: .5em;
margin: -.5em;
margin-left: .5em; margin-left: .5em;
font-weight: bold;
cursor: pointer;
color: $main-01;
float: right;
border: none;
padding: .5em;
margin: -.5em
} }
} }