/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.9.8 */ /* mixin definition ; sets LTR and RTL within the same style call */ md-toast { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; box-sizing: border-box; -webkit-align-items: center; -ms-flex-align: center; align-items: center; 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; cursor: default; max-width: 100%; max-height: 40px; height: 24px; z-index: 90; opacity: 1; -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); /* Transition differently when swiping */ } md-toast.md-capsule { border-radius: 24px; } md-toast.ng-leave-active { transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); } md-toast.md-swipeleft, md-toast.md-swiperight, md-toast.md-swipeup, md-toast.md-swipedown { transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } md-toast.ng-enter { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0; } md-toast.ng-enter.md-top { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } md-toast.ng-enter.ng-enter-active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } md-toast.ng-leave.ng-leave-active { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } md-toast.ng-leave.ng-leave-active.md-top { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } md-toast.ng-leave.ng-leave-active.md-swipeleft { -webkit-transform: translate3d(-100%, 0%, 0); transform: translate3d(-100%, 0%, 0); } md-toast.ng-leave.ng-leave-active.md-swiperight { -webkit-transform: translate3d(100%, 0%, 0); transform: translate3d(100%, 0%, 0); } md-toast .md-action { line-height: 19px; margin-left: 24px; cursor: pointer; text-transform: uppercase; float: right; } md-toast .md-action.md-button { min-width: 0; } @media (max-width: 600px) { md-toast { left: 0; right: 0; width: 100%; max-width: 100%; min-width: 0; border-radius: 0; bottom: 0; } md-toast.md-top { bottom: auto; top: 0; } } @media (min-width: 600px) { md-toast { min-width: 288px; /* * When the toast doesn't take up the whole screen, * make it rotate when the user swipes it away */ } md-toast.md-bottom { bottom: 8px; } md-toast.md-left { left: 8px; } md-toast.md-right { right: 8px; } md-toast.md-top { top: 8px; } md-toast.ng-leave.ng-leave-active.md-swipeleft { -webkit-transform: translate3d(-100%, 25%, 0) rotateZ(-15deg); transform: translate3d(-100%, 25%, 0) rotateZ(-15deg); } md-toast.ng-leave.ng-leave-active.md-swiperight { -webkit-transform: translate3d(100%, 25%, 0) rotateZ(15deg); transform: translate3d(100%, 25%, 0) rotateZ(15deg); } md-toast.ng-leave.ng-leave-active.md-top.md-swipeleft { -webkit-transform: translate3d(-100%, 0, 0) rotateZ(-15deg); transform: translate3d(-100%, 0, 0) rotateZ(-15deg); } md-toast.ng-leave.ng-leave-active.md-top.md-swiperight { -webkit-transform: translate3d(100%, 0, 0) rotateZ(15deg); transform: translate3d(100%, 0, 0) rotateZ(15deg); } } @media (min-width: 1200px) { md-toast { max-width: 568px; } } @media screen and (-ms-high-contrast: active) { md-toast { border: 1px solid #fff; } }