2 * Angular Material Design
3 * https://github.com/angular/material
7 /* mixin definition ; sets LTR and RTL within the same style call */
13 box-sizing: border-box;
14 -webkit-align-items: center;
15 -ms-flex-align: center;
20 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
29 -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg);
30 transform: translate3d(0, 0, 0) rotateZ(0deg);
31 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
32 /* Transition differently when swiping */ }
34 border-radius: 24px; }
35 md-toast.ng-leave-active {
36 transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
37 md-toast.md-swipeleft, md-toast.md-swiperight, md-toast.md-swipeup, md-toast.md-swipedown {
38 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
40 -webkit-transform: translate3d(0, 100%, 0);
41 transform: translate3d(0, 100%, 0);
43 md-toast.ng-enter.md-top {
44 -webkit-transform: translate3d(0, -100%, 0);
45 transform: translate3d(0, -100%, 0); }
46 md-toast.ng-enter.ng-enter-active {
47 -webkit-transform: translate3d(0, 0, 0);
48 transform: translate3d(0, 0, 0);
50 md-toast.ng-leave.ng-leave-active {
52 -webkit-transform: translate3d(0, 100%, 0);
53 transform: translate3d(0, 100%, 0); }
54 md-toast.ng-leave.ng-leave-active.md-top {
55 -webkit-transform: translate3d(0, -100%, 0);
56 transform: translate3d(0, -100%, 0); }
57 md-toast.ng-leave.ng-leave-active.md-swipeleft {
58 -webkit-transform: translate3d(-100%, 0%, 0);
59 transform: translate3d(-100%, 0%, 0); }
60 md-toast.ng-leave.ng-leave-active.md-swiperight {
61 -webkit-transform: translate3d(100%, 0%, 0);
62 transform: translate3d(100%, 0%, 0); }
67 text-transform: uppercase;
69 md-toast .md-action.md-button {
72 @media (max-width: 600px) {
85 @media (min-width: 600px) {
89 * When the toast doesn't take up the whole screen,
90 * make it rotate when the user swipes it away
100 md-toast.ng-leave.ng-leave-active.md-swipeleft {
101 -webkit-transform: translate3d(-100%, 25%, 0) rotateZ(-15deg);
102 transform: translate3d(-100%, 25%, 0) rotateZ(-15deg); }
103 md-toast.ng-leave.ng-leave-active.md-swiperight {
104 -webkit-transform: translate3d(100%, 25%, 0) rotateZ(15deg);
105 transform: translate3d(100%, 25%, 0) rotateZ(15deg); }
106 md-toast.ng-leave.ng-leave-active.md-top.md-swipeleft {
107 -webkit-transform: translate3d(-100%, 0, 0) rotateZ(-15deg);
108 transform: translate3d(-100%, 0, 0) rotateZ(-15deg); }
109 md-toast.ng-leave.ng-leave-active.md-top.md-swiperight {
110 -webkit-transform: translate3d(100%, 0, 0) rotateZ(15deg);
111 transform: translate3d(100%, 0, 0) rotateZ(15deg); } }
113 @media (min-width: 1200px) {
115 max-width: 568px; } }
117 @media screen and (-ms-high-contrast: active) {
119 border: 1px solid #fff; } }