UNPKG

11.4 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-toolbar {
9 background-color: #6200ee;
10 /* @alternate */
11 background-color: var(--mdc-theme-primary, #6200ee);
12 color: white;
13 display: flex;
14 position: relative;
15 flex-direction: column;
16 justify-content: space-between;
17 box-sizing: border-box;
18 width: 100%;
19}
20.mdc-toolbar .mdc-toolbar__icon {
21 color: white;
22}
23.mdc-toolbar .mdc-toolbar__icon::before, .mdc-toolbar .mdc-toolbar__icon::after {
24 background-color: white;
25}
26.mdc-toolbar .mdc-toolbar__icon:hover::before {
27 opacity: 0.08;
28}
29.mdc-toolbar .mdc-toolbar__icon:not(.mdc-ripple-upgraded):focus::before, .mdc-toolbar .mdc-toolbar__icon.mdc-ripple-upgraded--background-focused::before {
30 transition-duration: 75ms;
31 opacity: 0.24;
32}
33.mdc-toolbar .mdc-toolbar__icon:not(.mdc-ripple-upgraded)::after {
34 transition: opacity 150ms linear;
35}
36.mdc-toolbar .mdc-toolbar__icon:not(.mdc-ripple-upgraded):active::after {
37 transition-duration: 75ms;
38 opacity: 0.24;
39}
40.mdc-toolbar .mdc-toolbar__icon.mdc-ripple-upgraded {
41 --mdc-ripple-fg-opacity: 0.24;
42}
43.mdc-toolbar__row {
44 display: flex;
45 position: relative;
46 align-items: center;
47 box-sizing: border-box;
48 width: 100%;
49 height: auto;
50 min-height: 64px;
51}
52@media (max-width: 959px) and (orientation: landscape) {
53 .mdc-toolbar__row {
54 min-height: 48px;
55 }
56}
57@media (max-width: 599px) {
58 .mdc-toolbar__row {
59 min-height: 56px;
60 }
61}
62.mdc-toolbar__section {
63 display: inline-flex;
64 flex: 1;
65 align-items: start;
66 justify-content: center;
67 box-sizing: border-box;
68 min-width: 0;
69 height: 100%;
70 padding: 8px;
71 z-index: 1;
72}
73@media (max-width: 959px) and (orientation: landscape) {
74 .mdc-toolbar__section {
75 padding: 0;
76 }
77}
78@media (max-width: 599px) {
79 .mdc-toolbar__section {
80 padding: 4px 0;
81 }
82}
83.mdc-toolbar__section--align-start {
84 /* @noflip */
85 padding-left: 12px;
86 /* @noflip */
87 padding-right: 0;
88 justify-content: flex-start;
89 order: -1;
90}
91[dir=rtl] .mdc-toolbar__section--align-start, .mdc-toolbar__section--align-start[dir=rtl] {
92 /* @noflip */
93 padding-left: 0;
94 /* @noflip */
95 padding-right: 12px;
96}
97@media (max-width: 959px) and (orientation: landscape) {
98 .mdc-toolbar__section--align-start {
99 /* @noflip */
100 padding-left: 4px;
101 /* @noflip */
102 padding-right: 0;
103 }
104 [dir=rtl] .mdc-toolbar__section--align-start, .mdc-toolbar__section--align-start[dir=rtl] {
105 /* @noflip */
106 padding-left: 0;
107 /* @noflip */
108 padding-right: 4px;
109 }
110}
111@media (max-width: 599px) {
112 .mdc-toolbar__section--align-start {
113 /* @noflip */
114 padding-left: 4px;
115 /* @noflip */
116 padding-right: 0;
117 }
118 [dir=rtl] .mdc-toolbar__section--align-start, .mdc-toolbar__section--align-start[dir=rtl] {
119 /* @noflip */
120 padding-left: 0;
121 /* @noflip */
122 padding-right: 4px;
123 }
124}
125.mdc-toolbar__section--align-end {
126 /* @noflip */
127 padding-left: 0;
128 /* @noflip */
129 padding-right: 12px;
130 justify-content: flex-end;
131 order: 1;
132}
133[dir=rtl] .mdc-toolbar__section--align-end, .mdc-toolbar__section--align-end[dir=rtl] {
134 /* @noflip */
135 padding-left: 12px;
136 /* @noflip */
137 padding-right: 0;
138}
139@media (max-width: 959px) and (orientation: landscape) {
140 .mdc-toolbar__section--align-end {
141 /* @noflip */
142 padding-left: 0;
143 /* @noflip */
144 padding-right: 4px;
145 }
146 [dir=rtl] .mdc-toolbar__section--align-end, .mdc-toolbar__section--align-end[dir=rtl] {
147 /* @noflip */
148 padding-left: 4px;
149 /* @noflip */
150 padding-right: 0;
151 }
152}
153@media (max-width: 599px) {
154 .mdc-toolbar__section--align-end {
155 /* @noflip */
156 padding-left: 0;
157 /* @noflip */
158 padding-right: 4px;
159 }
160 [dir=rtl] .mdc-toolbar__section--align-end, .mdc-toolbar__section--align-end[dir=rtl] {
161 /* @noflip */
162 padding-left: 4px;
163 /* @noflip */
164 padding-right: 0;
165 }
166}
167.mdc-toolbar__title {
168 font-family: Roboto, sans-serif;
169 -moz-osx-font-smoothing: grayscale;
170 -webkit-font-smoothing: antialiased;
171 font-size: 1.25rem;
172 line-height: 2rem;
173 font-weight: 500;
174 letter-spacing: 0.0125em;
175 text-decoration: inherit;
176 text-transform: inherit;
177 text-overflow: ellipsis;
178 white-space: nowrap;
179 overflow: hidden;
180 /* @noflip */
181 margin-left: 24px;
182 /* @noflip */
183 margin-right: 0;
184 align-self: center;
185 padding: 12px 0;
186 line-height: 1.5rem;
187 z-index: 1;
188}
189[dir=rtl] .mdc-toolbar__title, .mdc-toolbar__title[dir=rtl] {
190 /* @noflip */
191 margin-left: 0;
192 /* @noflip */
193 margin-right: 24px;
194}
195.mdc-toolbar__icon, .mdc-toolbar__menu-icon {
196 --mdc-ripple-fg-size: 0;
197 --mdc-ripple-left: 0;
198 --mdc-ripple-top: 0;
199 --mdc-ripple-fg-scale: 1;
200 --mdc-ripple-fg-translate-end: 0;
201 --mdc-ripple-fg-translate-start: 0;
202 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
203 display: flex;
204 position: relative;
205 align-items: start;
206 justify-content: center;
207 box-sizing: border-box;
208 width: 48px;
209 height: 48px;
210 padding: 12px;
211 border: none;
212 outline: none;
213 background-color: transparent;
214 fill: currentColor;
215 color: inherit;
216 text-decoration: none;
217 cursor: pointer;
218}
219.mdc-toolbar__icon::before, .mdc-toolbar__icon::after, .mdc-toolbar__menu-icon::before, .mdc-toolbar__menu-icon::after {
220 position: absolute;
221 border-radius: 50%;
222 opacity: 0;
223 pointer-events: none;
224 content: "";
225}
226.mdc-toolbar__icon::before, .mdc-toolbar__menu-icon::before {
227 transition: opacity 15ms linear, background-color 15ms linear;
228 z-index: 1;
229}
230.mdc-toolbar__icon.mdc-ripple-upgraded::before, .mdc-toolbar__menu-icon.mdc-ripple-upgraded::before {
231 -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
232 transform: scale(var(--mdc-ripple-fg-scale, 1));
233}
234.mdc-toolbar__icon.mdc-ripple-upgraded::after, .mdc-toolbar__menu-icon.mdc-ripple-upgraded::after {
235 top: 0;
236 /* @noflip */
237 left: 0;
238 -webkit-transform: scale(0);
239 transform: scale(0);
240 -webkit-transform-origin: center center;
241 transform-origin: center center;
242}
243.mdc-toolbar__icon.mdc-ripple-upgraded--unbounded::after, .mdc-toolbar__menu-icon.mdc-ripple-upgraded--unbounded::after {
244 top: var(--mdc-ripple-top, 0);
245 /* @noflip */
246 left: var(--mdc-ripple-left, 0);
247}
248.mdc-toolbar__icon.mdc-ripple-upgraded--foreground-activation::after, .mdc-toolbar__menu-icon.mdc-ripple-upgraded--foreground-activation::after {
249 -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
250 animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
251}
252.mdc-toolbar__icon.mdc-ripple-upgraded--foreground-deactivation::after, .mdc-toolbar__menu-icon.mdc-ripple-upgraded--foreground-deactivation::after {
253 -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
254 animation: mdc-ripple-fg-opacity-out 150ms;
255 -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
256 transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
257}
258.mdc-toolbar__icon::before, .mdc-toolbar__icon::after, .mdc-toolbar__menu-icon::before, .mdc-toolbar__menu-icon::after {
259 top: calc(50% - 50%);
260 /* @noflip */
261 left: calc(50% - 50%);
262 width: 100%;
263 height: 100%;
264}
265.mdc-toolbar__icon.mdc-ripple-upgraded::before, .mdc-toolbar__icon.mdc-ripple-upgraded::after, .mdc-toolbar__menu-icon.mdc-ripple-upgraded::before, .mdc-toolbar__menu-icon.mdc-ripple-upgraded::after {
266 top: var(--mdc-ripple-top, calc(50% - 50%));
267 /* @noflip */
268 left: var(--mdc-ripple-left, calc(50% - 50%));
269 width: var(--mdc-ripple-fg-size, 100%);
270 height: var(--mdc-ripple-fg-size, 100%);
271}
272.mdc-toolbar__icon.mdc-ripple-upgraded::after, .mdc-toolbar__menu-icon.mdc-ripple-upgraded::after {
273 width: var(--mdc-ripple-fg-size, 100%);
274 height: var(--mdc-ripple-fg-size, 100%);
275}
276
277.mdc-toolbar__menu-icon + .mdc-toolbar__title {
278 /* @noflip */
279 margin-left: 8px;
280 /* @noflip */
281 margin-right: 0;
282}
283[dir=rtl] .mdc-toolbar__menu-icon + .mdc-toolbar__title, .mdc-toolbar__menu-icon + .mdc-toolbar__title[dir=rtl] {
284 /* @noflip */
285 margin-left: 0;
286 /* @noflip */
287 margin-right: 8px;
288}
289
290@media (max-width: 599px) {
291 .mdc-toolbar__title {
292 /* @noflip */
293 margin-left: 16px;
294 /* @noflip */
295 margin-right: 0;
296 }
297 [dir=rtl] .mdc-toolbar__title, .mdc-toolbar__title[dir=rtl] {
298 /* @noflip */
299 margin-left: 0;
300 /* @noflip */
301 margin-right: 16px;
302 }
303}
304.mdc-toolbar--fixed {
305 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
306 position: fixed;
307 top: 0;
308 left: 0;
309 z-index: 4;
310}
311
312.mdc-toolbar--flexible {
313 --mdc-toolbar-ratio-to-extend-flexible: 4;
314}
315.mdc-toolbar--flexible .mdc-toolbar__row:first-child {
316 height: 256px;
317 height: calc( 64px * var(--mdc-toolbar-ratio-to-extend-flexible, 4) );
318}
319@media (max-width: 599px) {
320 .mdc-toolbar--flexible .mdc-toolbar__row:first-child {
321 height: 224px;
322 height: calc( 56px * var(--mdc-toolbar-ratio-to-extend-flexible, 4) );
323 }
324}
325.mdc-toolbar--flexible .mdc-toolbar__row:first-child::after {
326 position: absolute;
327 content: "";
328}
329.mdc-toolbar--flexible-default-behavior .mdc-toolbar__title {
330 font-family: Roboto, sans-serif;
331 -moz-osx-font-smoothing: grayscale;
332 -webkit-font-smoothing: antialiased;
333 font-size: 1.25rem;
334 line-height: 2rem;
335 font-weight: 500;
336 letter-spacing: 0.0125em;
337 text-decoration: inherit;
338 text-transform: inherit;
339 align-self: flex-end;
340 line-height: 1.5rem;
341}
342.mdc-toolbar--flexible-default-behavior .mdc-toolbar__row:first-child::after {
343 top: 0;
344 left: 0;
345 width: 100%;
346 height: 100%;
347 transition: opacity 0.2s ease;
348 opacity: 1;
349}
350.mdc-toolbar--flexible-default-behavior.mdc-toolbar--flexible-space-minimized .mdc-toolbar__row:first-child::after {
351 opacity: 0;
352}
353.mdc-toolbar--flexible-default-behavior.mdc-toolbar--flexible-space-minimized .mdc-toolbar__title {
354 font-weight: 500;
355}
356
357.mdc-toolbar--waterfall.mdc-toolbar--fixed {
358 box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
359 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
360 will-change: box-shadow;
361}
362.mdc-toolbar--waterfall.mdc-toolbar--fixed.mdc-toolbar--flexible-space-minimized {
363 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
364}
365.mdc-toolbar--waterfall.mdc-toolbar--fixed.mdc-toolbar--fixed-lastrow-only.mdc-toolbar--flexible-space-minimized {
366 box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
367}
368.mdc-toolbar--waterfall.mdc-toolbar--fixed.mdc-toolbar--fixed-lastrow-only.mdc-toolbar--fixed-at-last-row {
369 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
370}
371
372.mdc-toolbar-fixed-adjust {
373 padding-top: 64px;
374}
375@media (max-width: 959px) and (max-height: 599px) {
376 .mdc-toolbar-fixed-adjust {
377 padding-top: 48px;
378 }
379}
380@media (max-width: 599px) {
381 .mdc-toolbar-fixed-adjust {
382 padding-top: 56px;
383 }
384}
385
386.mdc-toolbar__section--shrink-to-fit {
387 flex: none;
388}
389/*# sourceMappingURL=mdc.toolbar.css.map*/
\No newline at end of file