src/scss/snackbar.scss
/**
* http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs
*/
.mdc-Snackbar {
position: fixed;
z-index: 500;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
@include xlarge {
left: $navigation-width;
}
}
.mdc-Snackbar.fade-enter {
transform: translate3d(0, 48px, 0);
}
.mdc-Snackbar.fade-enter.fade-enter-active {
transform: translate3d(0, 0, 0);
transition: transform 500ms ease-in-out;
}
.mdc-Snackbar.fade-exit {
transform: translate3d(0, 0, 0);
}
.mdc-Snackbar.fade-exit.fade-exit-active {
transform: translate3d(0, 48px, 0);
transition: transform 500ms ease-in-out;
}
.mdc-Snackbar-background {
background-color: #323232;
min-width: 100%;
height: 48px;
display: flex;
align-items: center;
padding-left: 24px;
padding-right: 24px;
pointer-events: initial;
@include medium {
border-radius: 2px;
min-width: 288px;
max-width: 658px;
}
}
/**
* Start opacity animation slightly after translate animation.
* Also make it shorter so they both end at the same time.
* When exiting start immediately.
*/
.mdc-Snackbar-content {
min-width: 100%;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
will-change: opacity;
}
.mdc-Snackbar.fade-enter .mdc-Snackbar-content {
opacity: 0;
}
.mdc-Snackbar.fade-exit .mdc-Snackbar-content {
opacity: 1;
}
.mdc-Snackbar.fade-enter.fade-enter-active .mdc-Snackbar-content {
opacity: 1;
transition: 350ms opacity 150ms ease-in-out;
}
.mdc-Snackbar.fade-exit.fade-exit-active .mdc-Snackbar-content {
opacity: 0;
// attention: no delay
transition: 350ms opacity ease-in-out;
}
.mdc-Snackbar-text {
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**
* Color is blue 400.
* http://www.google.com/design/spec/style/color.html#color-color-palette
* The darkest blue that is possible with dark background
*/
.mdc-Snackbar-action {
text-transform: uppercase;
background: none;
border: none;
margin: 0 0 0 24px;
padding: 0;
color: #42a5f5;
outline: none;
}