/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.7.0-rc3 */ md-toast { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; box-sizing: border-box; -webkit-box-align: center; -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: 879px; 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); -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 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 { -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); 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 { -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 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; padding-left: 24px; cursor: pointer; text-transform: uppercase; float: right; } @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); } }