| /*! |
| * Angular Material Design |
| * https://github.com/angular/material |
| * @license MIT |
| * v1.0.1 |
| */ |
| 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; } |