commonroutesApp/www/lib/angular-material/modules/closure/toast/toast.css
www/lib/angular-material/modules/closure/toast/toast.cssRaw
1/*!
2 * Angular Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.1.1
6 */
7.md-toast-text {
8 padding: 0 6px; }
9
10md-toast {
11 position: absolute;
12 z-index: 105;
13 box-sizing: border-box;
14 cursor: default;
15 overflow: hidden;
16 padding: 8px;
17 opacity: 1;
18 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
19 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
20 /* Transition differently when swiping */
21 /*
22 * When the toast doesn't take up the whole screen,
23 * make it rotate when the user swipes it away
24 */ }
25 md-toast .md-toast-content {
26 display: -webkit-box;
27 display: -webkit-flex;
28 display: flex;
29 direction: row;
30 -webkit-box-align: center;
31 -webkit-align-items: center;
32 align-items: center;
33 max-height: 168px;
34 max-width: 100%;
35 min-height: 48px;
36 padding: 0 18px;
37 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
38 border-radius: 2px;
39 font-size: 14px;
40 overflow: hidden;
41 -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg);
42 transform: translate3d(0, 0, 0) rotateZ(0deg);
43 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
44 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
45 -webkit-box-pack: start;
46 -webkit-justify-content: flex-start;
47 justify-content: flex-start; }
48 md-toast .md-toast-content::before {
49 content: '';
50 min-height: 48px;
51 visibility: hidden;
52 display: inline-block; }
53 [dir=rtl] md-toast .md-toast-content {
54 -webkit-box-pack: end;
55 -webkit-justify-content: flex-end;
56 justify-content: flex-end; }
57 md-toast .md-toast-content span {
58 -webkit-box-flex: 1;
59 -webkit-flex: 1 1 0%;
60 flex: 1 1 0%;
61 box-sizing: border-box;
62 min-width: 0; }
63 md-toast.md-capsule {
64 border-radius: 24px; }
65 md-toast.md-capsule .md-toast-content {
66 border-radius: 24px; }
67 md-toast.ng-leave-active .md-toast-content {
68 -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
69 transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
70 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 {
71 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
72 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
73 md-toast.ng-enter {
74 opacity: 0; }
75 md-toast.ng-enter .md-toast-content {
76 -webkit-transform: translate3d(0, 100%, 0);
77 transform: translate3d(0, 100%, 0); }
78 md-toast.ng-enter.md-top .md-toast-content {
79 -webkit-transform: translate3d(0, -100%, 0);
80 transform: translate3d(0, -100%, 0); }
81 md-toast.ng-enter.ng-enter-active {
82 opacity: 1; }
83 md-toast.ng-enter.ng-enter-active .md-toast-content {
84 -webkit-transform: translate3d(0, 0, 0);
85 transform: translate3d(0, 0, 0); }
86 md-toast.ng-leave.ng-leave-active .md-toast-content {
87 opacity: 0;
88 -webkit-transform: translate3d(0, 100%, 0);
89 transform: translate3d(0, 100%, 0); }
90 md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content {
91 -webkit-transform: translate3d(0, -50%, 0);
92 transform: translate3d(0, -50%, 0); }
93 md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content {
94 -webkit-transform: translate3d(0, 50%, 0);
95 transform: translate3d(0, 50%, 0); }
96 md-toast.ng-leave.ng-leave-active.md-top .md-toast-content {
97 -webkit-transform: translate3d(0, -100%, 0);
98 transform: translate3d(0, -100%, 0); }
99 md-toast .md-action {
100 line-height: 19px;
101 margin-left: 24px;
102 margin-right: 0;
103 cursor: pointer;
104 text-transform: uppercase;
105 float: right; }
106 md-toast .md-button {
107 min-width: 0;
108 margin-right: 0;
109 margin-left: 12px; }
110 [dir=rtl] md-toast .md-button {
111 margin-right: 12px; }
112 [dir=rtl] md-toast .md-button {
113 margin-left: 0; }
114
115@media (max-width: 959px) {
116 md-toast {
117 left: 0;
118 right: 0;
119 width: 100%;
120 max-width: 100%;
121 min-width: 0;
122 border-radius: 0;
123 bottom: 0;
124 padding: 0; }
125 md-toast.ng-leave.ng-leave-active.md-swipeup .md-toast-content {
126 -webkit-transform: translate3d(0, -50%, 0);
127 transform: translate3d(0, -50%, 0); }
128 md-toast.ng-leave.ng-leave-active.md-swipedown .md-toast-content {
129 -webkit-transform: translate3d(0, 50%, 0);
130 transform: translate3d(0, 50%, 0); } }
131
132@media (min-width: 960px) {
133 md-toast {
134 min-width: 304px;
135 /*
136 * When the toast doesn't take up the whole screen,
137 * make it rotate when the user swipes it away
138 */ }
139 md-toast.md-bottom {
140 bottom: 0; }
141 md-toast.md-left {
142 left: 0; }
143 md-toast.md-right {
144 right: 0; }
145 md-toast.md-top {
146 top: 0; }
147 md-toast._md-start {
148 left: 0; }
149 [dir=rtl] md-toast._md-start {
150 left: auto;
151 right: 0; }
152 md-toast._md-end {
153 right: 0; }
154 [dir=rtl] md-toast._md-end {
155 right: auto;
156 left: 0; }
157 md-toast.ng-leave.ng-leave-active.md-swipeleft .md-toast-content {
158 -webkit-transform: translate3d(-50%, 0, 0);
159 transform: translate3d(-50%, 0, 0); }
160 md-toast.ng-leave.ng-leave-active.md-swiperight .md-toast-content {
161 -webkit-transform: translate3d(50%, 0, 0);
162 transform: translate3d(50%, 0, 0); } }
163
164@media (min-width: 1920px) {
165 md-toast .md-toast-content {
166 max-width: 568px; } }
167
168@media screen and (-ms-high-contrast: active) {
169 md-toast {
170 border: 1px solid #fff; } }
171
172.md-toast-animating {
173 overflow: hidden !important; }