blob: 5cbfd26797b0296510eecce7250aa16056b977dd [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
2 * Copyright 2015 Google Inc. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17html, body {
18 font-family: 'Roboto', 'Helvetica', sans-serif;
19 margin: 0;
20 padding: 0;
21}
22.mdl-demo .mdl-layout__header-row {
23 padding-left: 40px;
24}
25.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
26 font-size: inherit;
27}
28.mdl-demo .mdl-layout__tab-bar-button {
29 display: none;
30}
31.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {
32 display: none;
33}
34.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
35.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {
36 overflow: visible;
37}
38.mdl-demo .mdl-layout__tab-bar-container {
39 height: 64px;
40}
41.mdl-demo .mdl-layout__tab-bar {
42 padding: 0;
43 padding-left: 16px;
44 box-sizing: border-box;
45 height: 100%;
46 width: 100%;
47}
48.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {
49 height: 64px;
50 line-height: 64px;
51}
52.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {
53 background-color: white;
54 height: 4px;
55}
56.mdl-demo main > .mdl-layout__tab-panel {
57 padding: 8px;
58 padding-top: 48px;
59}
60.mdl-demo .mdl-card {
61 height: auto;
62 display: -webkit-flex;
63 display: -ms-flexbox;
64 display: flex;
65 -webkit-flex-direction: column;
66 -ms-flex-direction: column;
67 flex-direction: column;
68}
69.mdl-demo .mdl-card > * {
70 height: auto;
71}
72.mdl-demo .mdl-card .mdl-card__supporting-text {
73 margin: 40px;
74 -webkit-flex-grow: 1;
75 -ms-flex-positive: 1;
76 flex-grow: 1;
77 padding: 0;
78 color: inherit;
79 width: calc(100% - 80px);
80}
81.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {
82 margin-top: 0;
83 margin-bottom: 20px;
84}
85.mdl-demo .mdl-card__actions {
86 margin: 0;
87 padding: 4px 40px;
88 color: inherit;
89}
90.mdl-demo .mdl-card__actions a {
91 color: #00BCD4;
92 margin: 0;
93}
94.mdl-demo .mdl-card__actions a:hover,
95.mdl-demo .mdl-card__actions a:active {
96 color: inherit;
97 background-color: transparent;
98}
99.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {
100 border-top: 1px solid rgba(0, 0, 0, 0.12);
101}
102.mdl-demo #add {
103 position: absolute;
104 right: 40px;
105 top: 36px;
106 z-index: 999;
107}
108
109.mdl-demo .mdl-layout__content section:not(:last-of-type) {
110 position: relative;
111 margin-bottom: 48px;
112}
113.mdl-demo section.section--center {
114 max-width: 860px;
115}
116.mdl-demo #features section.section--center {
117 max-width: 620px;
118}
119.mdl-demo section > header{
120 display: -webkit-flex;
121 display: -ms-flexbox;
122 display: flex;
123 -webkit-align-items: center;
124 -ms-flex-align: center;
125 align-items: center;
126 -webkit-justify-content: center;
127 -ms-flex-pack: center;
128 justify-content: center;
129}
130.mdl-demo section > .section__play-btn {
131 min-height: 200px;
132}
133.mdl-demo section > header > .material-icons {
134 font-size: 3rem;
135}
136.mdl-demo section > button {
137 position: absolute;
138 z-index: 99;
139 top: 8px;
140 right: 8px;
141}
142.mdl-demo section .section__circle {
143 display: -webkit-flex;
144 display: -ms-flexbox;
145 display: flex;
146 -webkit-align-items: center;
147 -ms-flex-align: center;
148 align-items: center;
149 -webkit-justify-content: flex-start;
150 -ms-flex-pack: start;
151 justify-content: flex-start;
152 -webkit-flex-grow: 0;
153 -ms-flex-positive: 0;
154 flex-grow: 0;
155 -webkit-flex-shrink: 1;
156 -ms-flex-negative: 1;
157 flex-shrink: 1;
158}
159.mdl-demo section .section__text {
160 -webkit-flex-grow: 1;
161 -ms-flex-positive: 1;
162 flex-grow: 1;
163 -webkit-flex-shrink: 0;
164 -ms-flex-negative: 0;
165 flex-shrink: 0;
166 padding-top: 8px;
167}
168.mdl-demo section .section__text h5 {
169 font-size: inherit;
170 margin: 0;
171 margin-bottom: 0.5em;
172}
173.mdl-demo section .section__text a {
174 text-decoration: none;
175}
176.mdl-demo section .section__circle-container > .section__circle-container__circle {
177 width: 64px;
178 height: 64px;
179 border-radius: 32px;
180 margin: 8px 0;
181}
182.mdl-demo section.section--footer .section__circle--big {
183 width: 100px;
184 height: 100px;
185 border-radius: 50px;
186 margin: 8px 32px;
187}
188.mdl-demo .is-small-screen section.section--footer .section__circle--big {
189 width: 50px;
190 height: 50px;
191 border-radius: 25px;
192 margin: 8px 16px;
193}
194.mdl-demo section.section--footer {
195 padding: 64px 0;
196 margin: 0 -8px -8px -8px;
197}
198.mdl-demo section.section--center .section__text:not(:last-child) {
199 border-bottom: 1px solid rgba(0,0,0,.13);
200}
201.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {
202 margin-bottom: 24px;
203}
204.mdl-demo .mdl-layout__tab-panel:not(#overview) {
205 background-color: white;
206}
207.mdl-demo #features section {
208 margin-bottom: 72px;
209}
210.mdl-demo #features h4, #features h5 {
211 margin-bottom: 16px;
212}
213.mdl-demo .toc {
214 border-left: 4px solid #C1EEF4;
215 margin: 24px;
216 padding: 0;
217 padding-left: 8px;
218 display: -webkit-flex;
219 display: -ms-flexbox;
220 display: flex;
221 -webkit-flex-direction: column;
222 -ms-flex-direction: column;
223 flex-direction: column;
224}
225.mdl-demo .toc h4 {
226 font-size: 0.9rem;
227 margin-top: 0;
228}
229.mdl-demo .toc a {
230 color: #4DD0E1;
231 text-decoration: none;
232 font-size: 16px;
233 line-height: 28px;
234 display: block;
235}
236.mdl-demo .mdl-menu__container {
237 z-index: 99;
238}