blob: 7e0dc36af7761b22bbc6a9f81799b068b7c383b7 [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}
20.demo-avatar {
21 width: 48px;
22 height: 48px;
23 border-radius: 24px;
24}
25.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
26 color: rgba(0, 0, 0, 0.54);
27}
28.mdl-layout__drawer .avatar {
29 margin-bottom: 16px;
30}
31.demo-drawer {
32 border: none;
33}
34/* iOS Safari specific workaround */
35.demo-drawer .mdl-menu__container {
36 z-index: -1;
37}
38.demo-drawer .demo-navigation {
39 z-index: -2;
40}
41/* END iOS Safari specific workaround */
42.demo-drawer .mdl-menu .mdl-menu__item {
43 display: -webkit-flex;
44 display: -ms-flexbox;
45 display: flex;
46 -webkit-align-items: center;
47 -ms-flex-align: center;
48 align-items: center;
49}
50.demo-drawer-header {
51 box-sizing: border-box;
52 display: -webkit-flex;
53 display: -ms-flexbox;
54 display: flex;
55 -webkit-flex-direction: column;
56 -ms-flex-direction: column;
57 flex-direction: column;
58 -webkit-justify-content: flex-end;
59 -ms-flex-pack: end;
60 justify-content: flex-end;
61 padding: 16px;
62 height: 151px;
63}
64.demo-avatar-dropdown {
65 display: -webkit-flex;
66 display: -ms-flexbox;
67 display: flex;
68 position: relative;
69 -webkit-flex-direction: row;
70 -ms-flex-direction: row;
71 flex-direction: row;
72 -webkit-align-items: center;
73 -ms-flex-align: center;
74 align-items: center;
75 width: 100%;
76}
77
78.demo-navigation {
79 -webkit-flex-grow: 1;
80 -ms-flex-positive: 1;
81 flex-grow: 1;
82}
83.demo-layout .demo-navigation .mdl-navigation__link {
84 display: -webkit-flex !important;
85 display: -ms-flexbox !important;
86 display: flex !important;
87 -webkit-flex-direction: row;
88 -ms-flex-direction: row;
89 flex-direction: row;
90 -webkit-align-items: center;
91 -ms-flex-align: center;
92 align-items: center;
93 color: rgba(255, 255, 255, 0.56);
94 font-weight: 500;
95}
96.demo-layout .demo-navigation .mdl-navigation__link:hover {
97 background-color: #00BCD4;
98 color: #37474F;
99}
100.demo-navigation .mdl-navigation__link .material-icons {
101 font-size: 24px;
102 color: rgba(255, 255, 255, 0.56);
103 margin-right: 32px;
104}
105
106.demo-content {
107 max-width: 1080px;
108}
109
110.demo-charts {
111 -webkit-align-items: center;
112 -ms-flex-align: center;
113 align-items: center;
114}
115.demo-chart:nth-child(1) {
116 color: #ACEC00;
117}
118.demo-chart:nth-child(2) {
119 color: #00BBD6;
120}
121.demo-chart:nth-child(3) {
122 color: #BA65C9;
123}
124.demo-chart:nth-child(4) {
125 color: #EF3C79;
126}
127.demo-graphs {
128 padding: 16px 32px;
129 display: -webkit-flex;
130 display: -ms-flexbox;
131 display: flex;
132 -webkit-flex-direction: column;
133 -ms-flex-direction: column;
134 flex-direction: column;
135 -webkit-align-items: stretch;
136 -ms-flex-align: stretch;
137 align-items: stretch;
138}
139/* TODO: Find a proper solution to have the graphs
140 * not float around outside their container in IE10/11.
141 * Using a browserhacks.com solution for now.
142 */
143_:-ms-input-placeholder, :root .demo-graphs {
144 min-height: 664px;
145}
146_:-ms-input-placeholder, :root .demo-graph {
147 max-height: 300px;
148}
149/* TODO end */
150.demo-graph:nth-child(1) {
151 color: #00b9d8;
152}
153.demo-graph:nth-child(2) {
154 color: #d9006e;
155}
156
157.demo-cards {
158 -webkit-align-items: flex-start;
159 -ms-flex-align: start;
160 align-items: flex-start;
161 -webkit-align-content: flex-start;
162 -ms-flex-line-pack: start;
163 align-content: flex-start;
164}
165.demo-cards .demo-separator {
166 height: 32px;
167}
168.demo-cards .mdl-card__title.mdl-card__title {
169 color: white;
170 font-size: 24px;
171 font-weight: 400;
172}
173.demo-cards ul {
174 padding: 0;
175}
176.demo-cards h3 {
177 font-size: 1em;
178}
179.demo-updates .mdl-card__title {
180 min-height: 200px;
181 background-image: url('images/dog.png');
182 background-position: 90% 100%;
183 background-repeat: no-repeat;
184}
185.demo-cards .mdl-card__actions a {
186 color: #00BCD4;
187 text-decoration: none;
188}
189
190.demo-options h3 {
191 margin: 0;
192}
193.demo-options .mdl-checkbox__box-outline {
194 border-color: rgba(255, 255, 255, 0.89);
195}
196.demo-options ul {
197 margin: 0;
198 list-style-type: none;
199}
200.demo-options li {
201 margin: 4px 0;
202}
203.demo-options .material-icons {
204 color: rgba(255, 255, 255, 0.89);
205}
206.demo-options .mdl-card__actions {
207 height: 64px;
208 display: -webkit-flex;
209 display: -ms-flexbox;
210 display: flex;
211 box-sizing: border-box;
212 -webkit-align-items: center;
213 -ms-flex-align: center;
214 align-items: center;
215}