|
|
/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.1.1 */ .md-toast-text { padding: 0 6px; }
md-toast { position: absolute; z-index: 105; box-sizing: border-box; cursor: default; overflow: hidden; padding: 8px; opacity: 1; -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 */ /* * 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-box; display: -webkit-flex; display: flex; direction: row; -webkit-box-align: center; -webkit-align-items: center; align-items: center; max-height: 168px; max-width: 100%; min-height: 48px; padding: 0 18px; 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); -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); -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } md-toast .md-toast-content::before { content: ''; min-height: 48px; visibility: hidden; display: inline-block; } [dir=rtl] md-toast .md-toast-content { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } md-toast .md-toast-content span { -webkit-box-flex: 1; -webkit-flex: 1 1 0%; flex: 1 1 0%; box-sizing: border-box; min-width: 0; } 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 { -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-content, md-toast.md-swiperight .md-toast-content, md-toast.md-swipeup .md-toast-content, md-toast.md-swipedown .md-toast-content { -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 { 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-button { min-width: 0; margin-right: 0; margin-left: 12px; } [dir=rtl] md-toast .md-button { margin-right: 12px; } [dir=rtl] md-toast .md-button { margin-left: 0; }
@media (max-width: 959px) { md-toast { left: 0; right: 0; width: 100%; max-width: 100%; min-width: 0; border-radius: 0; bottom: 0; padding: 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._md-start { left: 0; } [dir=rtl] md-toast._md-start { left: auto; right: 0; } md-toast._md-end { right: 0; } [dir=rtl] md-toast._md-end { right: auto; left: 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; }
|