UNPKG

8.77 kBCSSView Raw
1/**
2 * @license
3 * Copyright Google LLC All Rights Reserved.
4 *
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
7 */
8.mdc-snackbar {
9 z-index: 8;
10 margin: 8px;
11 display: none;
12 position: fixed;
13 right: 0;
14 bottom: 0;
15 left: 0;
16 align-items: center;
17 justify-content: center;
18 box-sizing: border-box;
19 pointer-events: none;
20 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
21}
22
23.mdc-snackbar__surface {
24 background-color: #333333;
25}
26
27.mdc-snackbar__label {
28 color: rgba(255, 255, 255, 0.87);
29}
30
31.mdc-snackbar__surface {
32 min-width: 344px;
33}
34@media (max-width: 480px), (max-width: 344px) {
35 .mdc-snackbar__surface {
36 min-width: 100%;
37 }
38}
39
40.mdc-snackbar__surface {
41 max-width: 672px;
42}
43
44.mdc-snackbar__surface {
45 /* @alternate */
46 box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
47}
48
49.mdc-snackbar__surface {
50 border-radius: 4px;
51 /* @alternate */
52 border-radius: var(--mdc-shape-small, 4px);
53}
54
55.mdc-snackbar--opening,
56.mdc-snackbar--open,
57.mdc-snackbar--closing {
58 display: flex;
59}
60
61.mdc-snackbar--open .mdc-snackbar__label,
62.mdc-snackbar--open .mdc-snackbar__actions {
63 visibility: visible;
64}
65
66.mdc-snackbar--leading {
67 justify-content: flex-start;
68}
69
70.mdc-snackbar--stacked .mdc-snackbar__label {
71 /* @noflip */
72 /*rtl:ignore*/
73 padding-left: 16px;
74 /* @noflip */
75 /*rtl:ignore*/
76 padding-right: 8px;
77 padding-bottom: 12px;
78}
79[dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label, .mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl] {
80 /*rtl:begin:ignore*/
81 /* @noflip */
82 /*rtl:ignore*/
83 padding-left: 8px;
84 /* @noflip */
85 /*rtl:ignore*/
86 padding-right: 16px;
87 /*rtl:end:ignore*/
88}
89
90.mdc-snackbar--stacked .mdc-snackbar__surface {
91 flex-direction: column;
92 align-items: flex-start;
93}
94.mdc-snackbar--stacked .mdc-snackbar__actions {
95 align-self: flex-end;
96 margin-bottom: 8px;
97}
98
99.mdc-snackbar__surface {
100 /* @noflip */
101 /*rtl:ignore*/
102 padding-left: 0;
103 /* @noflip */
104 /*rtl:ignore*/
105 padding-right: 8px;
106 display: flex;
107 align-items: center;
108 justify-content: flex-start;
109 box-sizing: border-box;
110 -webkit-transform: scale(0.8);
111 transform: scale(0.8);
112 opacity: 0;
113}
114.mdc-snackbar__surface::before {
115 position: absolute;
116 box-sizing: border-box;
117 width: 100%;
118 height: 100%;
119 top: 0;
120 left: 0;
121 border: 1px solid transparent;
122 border-radius: inherit;
123 content: "";
124 pointer-events: none;
125}
126[dir=rtl] .mdc-snackbar__surface, .mdc-snackbar__surface[dir=rtl] {
127 /*rtl:begin:ignore*/
128 /* @noflip */
129 /*rtl:ignore*/
130 padding-left: 8px;
131 /* @noflip */
132 /*rtl:ignore*/
133 padding-right: 0;
134 /*rtl:end:ignore*/
135}
136
137.mdc-snackbar--open .mdc-snackbar__surface {
138 -webkit-transform: scale(1);
139 transform: scale(1);
140 opacity: 1;
141 pointer-events: auto;
142 transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
143 transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
144 transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
145}
146.mdc-snackbar--closing .mdc-snackbar__surface {
147 -webkit-transform: scale(1);
148 transform: scale(1);
149 transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
150}
151
152.mdc-snackbar__label {
153 -moz-osx-font-smoothing: grayscale;
154 -webkit-font-smoothing: antialiased;
155 font-family: Roboto, sans-serif;
156 /* @alternate */
157 font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
158 font-size: 0.875rem;
159 /* @alternate */
160 font-size: var(--mdc-typography-body2-font-size, 0.875rem);
161 line-height: 1.25rem;
162 /* @alternate */
163 line-height: var(--mdc-typography-body2-line-height, 1.25rem);
164 font-weight: 400;
165 /* @alternate */
166 font-weight: var(--mdc-typography-body2-font-weight, 400);
167 letter-spacing: 0.0178571429em;
168 /* @alternate */
169 letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
170 text-decoration: inherit;
171 /* @alternate */
172 -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
173 text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
174 text-transform: inherit;
175 /* @alternate */
176 text-transform: var(--mdc-typography-body2-text-transform, inherit);
177 /* @noflip */
178 /*rtl:ignore*/
179 padding-left: 16px;
180 /* @noflip */
181 /*rtl:ignore*/
182 padding-right: 8px;
183 width: 100%;
184 flex-grow: 1;
185 box-sizing: border-box;
186 margin: 0;
187 visibility: hidden;
188 padding-top: 14px;
189 padding-bottom: 14px;
190}
191[dir=rtl] .mdc-snackbar__label, .mdc-snackbar__label[dir=rtl] {
192 /*rtl:begin:ignore*/
193 /* @noflip */
194 /*rtl:ignore*/
195 padding-left: 8px;
196 /* @noflip */
197 /*rtl:ignore*/
198 padding-right: 16px;
199 /*rtl:end:ignore*/
200}
201
202.mdc-snackbar__label::before {
203 display: inline;
204 content: attr(data-mdc-snackbar-label-text);
205}
206
207.mdc-snackbar__actions {
208 display: flex;
209 flex-shrink: 0;
210 align-items: center;
211 box-sizing: border-box;
212 visibility: hidden;
213}
214
215.mdc-snackbar__action:not(:disabled) {
216 color: #bb86fc;
217}
218.mdc-snackbar__action::before, .mdc-snackbar__action::after {
219 background-color: #bb86fc;
220 /* @alternate */
221 background-color: var(--mdc-ripple-color, #bb86fc);
222}
223.mdc-snackbar__action:hover::before, .mdc-snackbar__action.mdc-ripple-surface--hover::before {
224 opacity: 0.08;
225 /* @alternate */
226 opacity: var(--mdc-ripple-hover-opacity, 0.08);
227}
228.mdc-snackbar__action.mdc-ripple-upgraded--background-focused::before, .mdc-snackbar__action:not(.mdc-ripple-upgraded):focus::before {
229 transition-duration: 75ms;
230 opacity: 0.24;
231 /* @alternate */
232 opacity: var(--mdc-ripple-focus-opacity, 0.24);
233}
234.mdc-snackbar__action:not(.mdc-ripple-upgraded)::after {
235 transition: opacity 150ms linear;
236}
237.mdc-snackbar__action:not(.mdc-ripple-upgraded):active::after {
238 transition-duration: 75ms;
239 opacity: 0.24;
240 /* @alternate */
241 opacity: var(--mdc-ripple-press-opacity, 0.24);
242}
243.mdc-snackbar__action.mdc-ripple-upgraded {
244 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
245}
246
247.mdc-snackbar__dismiss {
248 color: rgba(255, 255, 255, 0.87);
249}
250.mdc-snackbar__dismiss .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss .mdc-icon-button__ripple::after {
251 background-color: rgba(255, 255, 255, 0.87);
252 /* @alternate */
253 background-color: var(--mdc-ripple-color, rgba(255, 255, 255, 0.87));
254}
255.mdc-snackbar__dismiss:hover .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
256 opacity: 0.08;
257 /* @alternate */
258 opacity: var(--mdc-ripple-hover-opacity, 0.08);
259}
260.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
261 transition-duration: 75ms;
262 opacity: 0.24;
263 /* @alternate */
264 opacity: var(--mdc-ripple-focus-opacity, 0.24);
265}
266.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
267 transition: opacity 150ms linear;
268}
269.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
270 transition-duration: 75ms;
271 opacity: 0.24;
272 /* @alternate */
273 opacity: var(--mdc-ripple-press-opacity, 0.24);
274}
275.mdc-snackbar__dismiss.mdc-ripple-upgraded {
276 --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
277}
278
279.mdc-snackbar__dismiss.mdc-snackbar__dismiss {
280 width: 36px;
281 height: 36px;
282 padding: 6px;
283 font-size: 18px;
284}
285.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size {
286 width: 36px;
287 height: 36px;
288 padding: 6px;
289}
290.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size.mdc-icon-button--touch {
291 margin-top: 0px;
292 margin-bottom: 0px;
293 margin-right: 0px;
294 margin-left: 0px;
295}
296.mdc-snackbar__dismiss.mdc-snackbar__dismiss .mdc-icon-button__touch {
297 position: absolute;
298 top: 50%;
299 height: 36px;
300 /* @noflip */
301 /*rtl:ignore*/
302 left: 50%;
303 width: 36px;
304 -webkit-transform: translate(-50%, -50%);
305 transform: translate(-50%, -50%);
306}
307
308.mdc-snackbar__action + .mdc-snackbar__dismiss {
309 /* @noflip */
310 /*rtl:ignore*/
311 margin-left: 8px;
312 /* @noflip */
313 /*rtl:ignore*/
314 margin-right: 0;
315}
316[dir=rtl] .mdc-snackbar__action + .mdc-snackbar__dismiss, .mdc-snackbar__action + .mdc-snackbar__dismiss[dir=rtl] {
317 /*rtl:begin:ignore*/
318 /* @noflip */
319 /*rtl:ignore*/
320 margin-left: 0;
321 /* @noflip */
322 /*rtl:ignore*/
323 margin-right: 8px;
324 /*rtl:end:ignore*/
325}
326
327/*# sourceMappingURL=mdc.snackbar.css.map*/
\No newline at end of file