/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.0.6 */ md-toast { position: absolute; z-index: 105; box-sizing: border-box; cursor: default; overflow: hidden; padding: 8px; opacity: 1; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition differently when swiping */ /* * When the toast doesn't take up the whole screen, * make it rotate when the user swipes it away */ } md-toast .md-toast-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 0; max-height: 168px; max-width: 100%; min-height: 48px; padding-left: 24px; padding-right: 24px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); border-radius: 2px; font-size: 14px; overflow: hidden; -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg); transform: translate3d(0, 0, 0) rotateZ(0deg); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } md-toast.md-capsule { border-radius: 24px; } md-toast.md-capsule .md-toast-content { border-radius: 24px; } md-toast.ng-leave-active .md-toast-content { transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); } md-toast.md-swipeleft .md-toast-content, md-toast.md-swiperight .md-toast-content, md-toast.md-swipeup .md-toast-content, md-toast.md-swipedown .md-toast-content { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } md-toast.ng-enter { opacity: 0; } md-toast.ng-enter .md-toast-content { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } md-toast.ng-enter.md-top .md-toast-content { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } md-toast.ng-enter.ng-enter-active { opacity: 1; } md-toast.ng-enter.ng-enter-active .md-toast-content { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } md-toast.ng-leave.ng-leave-active .md-toast-content { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } md-toast.ng-leave.ng-leave-active.md-top .md-toast-content { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } md-toast .md-action { line-height: 19px; margin-left: 24px; margin-right: 0; cursor: pointer; text-transform: uppercase; float: right; } md-toast .md-action.md-button { min-width: 0; } @media (max-width: 959px) { md-toast { left: 0; right: 0; width: 100%; max-width: 100%; min-width: 0; border-radius: 0; bottom: 0; } md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } } @media (min-width: 960px) { md-toast { min-width: 304px; /* * When the toast doesn't take up the whole screen, * make it rotate when the user swipes it away */ } md-toast.md-bottom { bottom: 0; } md-toast.md-left { left: 0; } md-toast.md-right { right: 0; } md-toast.md-top { top: 0; } md-toast.ng-leave.ng-leave-active.md-swipeleft .md-toast-content { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } md-toast.ng-leave.ng-leave-active.md-swiperight .md-toast-content { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @media (min-width: 1920px) { md-toast .md-toast-content { max-width: 568px; } } @media screen and (-ms-high-contrast: active) { md-toast { border: 1px solid #fff; } } .md-toast-animating { overflow: hidden !important; }