OLD | NEW |
---|---|
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
4 */ | 4 */ |
5 | 5 |
6 html { | 6 html { |
7 margin: 0; | 7 margin: 0; |
8 padding: 0; | 8 padding: 0; |
9 } | 9 } |
10 | 10 |
11 body { | 11 body { |
12 margin: 0; | 12 margin: 0; |
13 padding: 0; | 13 padding: 0; |
14 } | 14 } |
15 | 15 |
16 | |
17 /* Header bar */ | |
18 | |
16 header { | 19 header { |
17 background-color: blue; | 20 align-items: center; |
18 padding: 2px; | 21 background-color: rgb(33, 150, 243); |
22 display: flex; | |
23 flex-direction: row; | |
24 font-size: 20pt; | |
25 height: 56px; | |
26 justify-content: flex-start; | |
27 padding: 0 16px; | |
19 } | 28 } |
20 | 29 |
21 header * { | 30 .title { |
22 color: white; | 31 color: white; |
32 display: inline-block; | |
33 margin-left: 8px; | |
34 } | |
35 | |
36 | |
37 /* Device table */ | |
38 | |
39 .table { | |
dpapad
2016/10/21 22:46:21
Why use a .table CSS class, when you can use the t
mbrunson
2016/10/24 17:15:08
Done.
| |
40 border: 1px solid #ccc; | |
41 border-collapse: collapse; | |
42 margin: 0; | |
43 padding: 0; | |
44 width: 100%; | |
45 } | |
46 | |
47 .table tr { | |
48 border: 1px solid #ddd; | |
49 padding: 5px; | |
50 } | |
51 | |
52 .table th, | |
53 .table td { | |
54 padding: 10px; | |
55 text-align: center; | |
56 } | |
57 | |
58 .table th { | |
59 font-size: 14px; | |
60 letter-spacing: 1px; | |
61 text-transform: uppercase; | |
62 } | |
63 | |
64 @media screen and (max-width: 600px) { | |
65 .table { | |
66 border: 0; | |
67 } | |
68 .table thead { | |
69 display: none; | |
70 } | |
71 .table tr { | |
72 border-bottom: 2px solid #ddd; | |
73 display: block; | |
74 } | |
75 .table td { | |
76 border-bottom: 1px dotted #ccc; | |
77 display: block; | |
78 font-size: 13px; | |
79 text-align: right; | |
80 } | |
81 .table td:last-child { | |
82 border-bottom: 0; | |
83 } | |
84 .table td::before { | |
85 content: attr(data-label); | |
86 float: left; | |
87 font-weight: bold; | |
88 text-transform: uppercase; | |
89 } | |
90 } | |
91 | |
92 /* Device Row */ | |
93 .table .removed { | |
94 background-color: #BDBDBD; | |
23 } | 95 } |
OLD | NEW |