1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @-webkit-keyframes mdc-ripple-fg-radius-in {
|
9 | from {
|
10 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
11 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
12 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
13 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
14 | }
|
15 | to {
|
16 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
17 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
18 | }
|
19 | }
|
20 | @keyframes mdc-ripple-fg-radius-in {
|
21 | from {
|
22 | -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
23 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
24 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
25 | transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
|
26 | }
|
27 | to {
|
28 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
29 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
30 | }
|
31 | }
|
32 | @-webkit-keyframes mdc-ripple-fg-opacity-in {
|
33 | from {
|
34 | -webkit-animation-timing-function: linear;
|
35 | animation-timing-function: linear;
|
36 | opacity: 0;
|
37 | }
|
38 | to {
|
39 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
40 | }
|
41 | }
|
42 | @keyframes mdc-ripple-fg-opacity-in {
|
43 | from {
|
44 | -webkit-animation-timing-function: linear;
|
45 | animation-timing-function: linear;
|
46 | opacity: 0;
|
47 | }
|
48 | to {
|
49 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
50 | }
|
51 | }
|
52 | @-webkit-keyframes mdc-ripple-fg-opacity-out {
|
53 | from {
|
54 | -webkit-animation-timing-function: linear;
|
55 | animation-timing-function: linear;
|
56 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
57 | }
|
58 | to {
|
59 | opacity: 0;
|
60 | }
|
61 | }
|
62 | @keyframes mdc-ripple-fg-opacity-out {
|
63 | from {
|
64 | -webkit-animation-timing-function: linear;
|
65 | animation-timing-function: linear;
|
66 | opacity: var(--mdc-ripple-fg-opacity, 0);
|
67 | }
|
68 | to {
|
69 | opacity: 0;
|
70 | }
|
71 | }
|
72 | .mdc-ripple-surface--test-edge-var-bug {
|
73 | --mdc-ripple-surface-test-edge-var: 1px solid #000;
|
74 | visibility: hidden;
|
75 | }
|
76 | .mdc-ripple-surface--test-edge-var-bug::before {
|
77 | border: var(--mdc-ripple-surface-test-edge-var);
|
78 | }
|
79 |
|
80 | .mdc-tab {
|
81 | font-family: Roboto, sans-serif;
|
82 | -moz-osx-font-smoothing: grayscale;
|
83 | -webkit-font-smoothing: antialiased;
|
84 | font-size: 0.875rem;
|
85 | line-height: 2.25rem;
|
86 | font-weight: 500;
|
87 | letter-spacing: 0.0892857143em;
|
88 | text-decoration: none;
|
89 | text-transform: uppercase;
|
90 | color: rgba(0, 0, 0, 0.54);
|
91 |
|
92 | color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
|
93 | --mdc-ripple-fg-size: 0;
|
94 | --mdc-ripple-left: 0;
|
95 | --mdc-ripple-top: 0;
|
96 | --mdc-ripple-fg-scale: 1;
|
97 | --mdc-ripple-fg-translate-end: 0;
|
98 | --mdc-ripple-fg-translate-start: 0;
|
99 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
100 | display: table-cell;
|
101 | position: relative;
|
102 | box-sizing: border-box;
|
103 | min-width: 160px;
|
104 | min-height: 48px;
|
105 | padding: 0 24px;
|
106 | text-align: center;
|
107 | text-decoration: none;
|
108 | white-space: nowrap;
|
109 | cursor: pointer;
|
110 | overflow: hidden;
|
111 | vertical-align: middle;
|
112 | }
|
113 | .mdc-tab .mdc-tab__icon {
|
114 | color: rgba(0, 0, 0, 0.54);
|
115 |
|
116 | color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
|
117 | }
|
118 | .mdc-tab::before, .mdc-tab::after {
|
119 | position: absolute;
|
120 | border-radius: 50%;
|
121 | opacity: 0;
|
122 | pointer-events: none;
|
123 | content: "";
|
124 | }
|
125 | .mdc-tab::before {
|
126 | transition: opacity 15ms linear, background-color 15ms linear;
|
127 | z-index: 1;
|
128 | }
|
129 | .mdc-tab.mdc-ripple-upgraded::before {
|
130 | -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
|
131 | transform: scale(var(--mdc-ripple-fg-scale, 1));
|
132 | }
|
133 | .mdc-tab.mdc-ripple-upgraded::after {
|
134 | top: 0;
|
135 |
|
136 | left: 0;
|
137 | -webkit-transform: scale(0);
|
138 | transform: scale(0);
|
139 | -webkit-transform-origin: center center;
|
140 | transform-origin: center center;
|
141 | }
|
142 | .mdc-tab.mdc-ripple-upgraded--unbounded::after {
|
143 | top: var(--mdc-ripple-top, 0);
|
144 |
|
145 | left: var(--mdc-ripple-left, 0);
|
146 | }
|
147 | .mdc-tab.mdc-ripple-upgraded--foreground-activation::after {
|
148 | -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
149 | animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
|
150 | }
|
151 | .mdc-tab.mdc-ripple-upgraded--foreground-deactivation::after {
|
152 | -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
|
153 | animation: mdc-ripple-fg-opacity-out 150ms;
|
154 | -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
155 | transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
|
156 | }
|
157 | .mdc-tab::before, .mdc-tab::after {
|
158 | background-color: #000;
|
159 | }
|
160 | .mdc-tab:hover::before {
|
161 | opacity: 0.04;
|
162 | }
|
163 | .mdc-tab:not(.mdc-ripple-upgraded):focus::before, .mdc-tab.mdc-ripple-upgraded--background-focused::before {
|
164 | transition-duration: 75ms;
|
165 | opacity: 0.12;
|
166 | }
|
167 | .mdc-tab:not(.mdc-ripple-upgraded)::after {
|
168 | transition: opacity 150ms linear;
|
169 | }
|
170 | .mdc-tab:not(.mdc-ripple-upgraded):active::after {
|
171 | transition-duration: 75ms;
|
172 | opacity: 0.12;
|
173 | }
|
174 | .mdc-tab.mdc-ripple-upgraded {
|
175 | --mdc-ripple-fg-opacity: 0.12;
|
176 | }
|
177 | .mdc-tab::before, .mdc-tab::after {
|
178 | top: calc(50% - 100%);
|
179 |
|
180 | left: calc(50% - 100%);
|
181 | width: 200%;
|
182 | height: 200%;
|
183 | }
|
184 | .mdc-tab.mdc-ripple-upgraded::after {
|
185 | width: var(--mdc-ripple-fg-size, 100%);
|
186 | height: var(--mdc-ripple-fg-size, 100%);
|
187 | }
|
188 | .mdc-tab:hover {
|
189 | color: rgba(0, 0, 0, 0.87);
|
190 |
|
191 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
192 | }
|
193 | .mdc-tab:hover .mdc-tab__icon {
|
194 | color: rgba(0, 0, 0, 0.87);
|
195 |
|
196 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
197 | }
|
198 | .mdc-tab:focus {
|
199 | outline: none;
|
200 | }
|
201 | @media screen and (max-width: 600px) {
|
202 | .mdc-tab {
|
203 | min-width: 72px;
|
204 | padding: 0 12px;
|
205 | }
|
206 | }
|
207 | .mdc-tab__icon {
|
208 | display: block;
|
209 | margin: 0 auto;
|
210 | width: 24px;
|
211 | height: 24px;
|
212 | }
|
213 | .mdc-tab-bar--icons-with-text .mdc-tab__icon {
|
214 | margin-top: 4px;
|
215 | }
|
216 | .mdc-tab__icon-text {
|
217 | display: block;
|
218 | margin: 0 auto;
|
219 | }
|
220 | .mdc-tab__icon + .mdc-tab__icon-text {
|
221 | padding-top: 6px;
|
222 | }
|
223 |
|
224 | .mdc-tab--active {
|
225 | color: rgba(0, 0, 0, 0.87);
|
226 |
|
227 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
228 | }
|
229 | .mdc-tab--active .mdc-tab__icon {
|
230 | color: rgba(0, 0, 0, 0.87);
|
231 |
|
232 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
233 | }
|
234 | .mdc-tab--active::before {
|
235 | bottom: 0;
|
236 | }
|
237 |
|
238 | .mdc-tab__indicator {
|
239 | background-color: rgba(0, 0, 0, 0.87);
|
240 |
|
241 | background-color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
|
242 | position: absolute;
|
243 | bottom: 0;
|
244 | height: 2px;
|
245 | visibility: hidden;
|
246 | left: 2px;
|
247 | width: calc(100% - 4px);
|
248 | }
|
249 |
|
250 | .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab--active .mdc-tab__indicator,
|
251 | .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab:hover .mdc-tab__indicator,
|
252 | .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab:active .mdc-tab__indicator {
|
253 | visibility: visible;
|
254 | }
|
255 | .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab:not(.mdc-tab--active):hover .mdc-tab__indicator {
|
256 | opacity: 0.38;
|
257 | }
|
258 | .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab--active,
|
259 | .mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab:not(.mdc-tab--active):active .mdc-tab__indicator {
|
260 | opacity: 0.87;
|
261 | }
|
262 |
|
263 | .mdc-tab-bar__indicator,
|
264 | .mdc-tab__indicator {
|
265 | background-color: rgba(0, 0, 0, 0.87);
|
266 |
|
267 | background-color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
268 | }
|
269 |
|
270 | .mdc-tab-bar {
|
271 | display: table;
|
272 | position: relative;
|
273 | height: 48px;
|
274 | margin: 0 auto;
|
275 | text-transform: uppercase;
|
276 | }
|
277 |
|
278 | .mdc-tab-bar__indicator {
|
279 | background-color: rgba(0, 0, 0, 0.87);
|
280 |
|
281 | background-color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
|
282 | position: absolute;
|
283 | bottom: 0;
|
284 | height: 2px;
|
285 | visibility: hidden;
|
286 | left: 0;
|
287 | width: 100%;
|
288 | -webkit-transform-origin: left top;
|
289 | transform-origin: left top;
|
290 | transition: -webkit-transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
291 | transition: transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
292 | transition: transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
293 | will-change: transform;
|
294 | }
|
295 |
|
296 | .mdc-tab-bar--icons-with-text {
|
297 | height: 72px;
|
298 | }
|
299 |
|
300 | .mdc-tab-bar-scroller {
|
301 | display: flex;
|
302 | align-items: center;
|
303 | box-sizing: border-box;
|
304 | width: 100%;
|
305 | background-color: inherit;
|
306 | overflow: hidden;
|
307 | }
|
308 | .mdc-tab-bar-scroller__scroll-frame {
|
309 | display: flex;
|
310 | position: relative;
|
311 | flex: 1;
|
312 | justify-content: flex-start;
|
313 | overflow: hidden;
|
314 | }
|
315 | .mdc-tab-bar-scroller__scroll-frame__tabs {
|
316 | transition: -webkit-transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
317 | transition: transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
318 | transition: transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 240ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
319 | will-change: transform;
|
320 | }
|
321 | .mdc-tab-bar-scroller__indicator {
|
322 | color: rgba(0, 0, 0, 0.54);
|
323 |
|
324 | color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
|
325 | display: flex;
|
326 | align-items: center;
|
327 | justify-content: center;
|
328 | width: 48px;
|
329 | cursor: pointer;
|
330 | visibility: hidden;
|
331 | }
|
332 | .mdc-tab-bar-scroller__indicator:hover {
|
333 | color: rgba(0, 0, 0, 0.87);
|
334 |
|
335 | color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
336 | }
|
337 | .mdc-tab-bar-scroller__indicator__inner {
|
338 | color: inherit;
|
339 | text-decoration: inherit;
|
340 | cursor: inherit;
|
341 | }
|
342 | .mdc-tab-bar-scroller__indicator__inner:focus {
|
343 | outline-color: inherit;
|
344 | }
|
345 | .mdc-tab-bar-scroller[dir=rtl] .mdc-tab-bar-scroller__indicator__inner, [dir=rtl] .mdc-tab-bar-scroller .mdc-tab-bar-scroller__indicator__inner {
|
346 | -webkit-transform: rotate(180deg);
|
347 | transform: rotate(180deg);
|
348 | }
|
349 |
|
350 | .mdc-tab-bar-scroller__indicator__inner:hover {
|
351 | color: inherit;
|
352 | }
|
353 | .mdc-tab-bar-scroller__indicator--enabled {
|
354 | visibility: visible;
|
355 | }
|
356 |
|
\ | No newline at end of file |