Chris@0
|
1 /**
|
Chris@0
|
2 * @file
|
Chris@0
|
3 * Seven styles for Tables.
|
Chris@0
|
4 */
|
Chris@0
|
5
|
Chris@0
|
6 table {
|
Chris@0
|
7 width: 100%;
|
Chris@0
|
8 margin: 0 0 10px;
|
Chris@0
|
9 }
|
Chris@0
|
10 caption {
|
Chris@0
|
11 text-align: left; /* LTR */
|
Chris@0
|
12 }
|
Chris@0
|
13 [dir="rtl"] caption {
|
Chris@0
|
14 text-align: right;
|
Chris@0
|
15 }
|
Chris@0
|
16 th {
|
Chris@18
|
17 padding: 10px 12px;
|
Chris@0
|
18 text-align: left; /* LTR */
|
Chris@0
|
19 }
|
Chris@0
|
20 [dir="rtl"] th {
|
Chris@0
|
21 text-align: right;
|
Chris@0
|
22 }
|
Chris@0
|
23 thead th {
|
Chris@18
|
24 text-transform: uppercase;
|
Chris@18
|
25 color: #333;
|
Chris@0
|
26 border: solid #bfbfba;
|
Chris@0
|
27 border-width: 1px 0;
|
Chris@18
|
28 background: #f5f5f2;
|
Chris@0
|
29 }
|
Chris@0
|
30 tr {
|
Chris@18
|
31 padding: 0.1em 0.6em;
|
Chris@0
|
32 border-bottom: 1px solid #e6e4df;
|
Chris@0
|
33 }
|
Chris@0
|
34 thead > tr {
|
Chris@0
|
35 border-bottom: 1px solid #000;
|
Chris@0
|
36 }
|
Chris@0
|
37 tbody tr:hover,
|
Chris@0
|
38 tbody tr:focus {
|
Chris@0
|
39 background: #f7fcff;
|
Chris@0
|
40 }
|
Chris@0
|
41 /* See colors.css */
|
Chris@0
|
42 tbody tr.color-warning:hover,
|
Chris@0
|
43 tbody tr.color-warning:focus {
|
Chris@0
|
44 background: #fdf8ed;
|
Chris@0
|
45 }
|
Chris@0
|
46 tbody tr.color-error:hover,
|
Chris@0
|
47 tbody tr.color-error:focus {
|
Chris@0
|
48 background: #fcf4f2;
|
Chris@0
|
49 }
|
Chris@0
|
50
|
Chris@0
|
51 table.no-highlight tr.selected td {
|
Chris@0
|
52 background: transparent;
|
Chris@0
|
53 }
|
Chris@0
|
54
|
Chris@0
|
55 td,
|
Chris@0
|
56 th {
|
Chris@0
|
57 vertical-align: middle;
|
Chris@0
|
58 }
|
Chris@0
|
59 td {
|
Chris@0
|
60 padding: 10px 12px;
|
Chris@0
|
61 text-align: left; /* LTR */
|
Chris@0
|
62 }
|
Chris@0
|
63 [dir="rtl"] td {
|
Chris@0
|
64 text-align: right;
|
Chris@0
|
65 }
|
Chris@0
|
66 th > a {
|
Chris@0
|
67 position: relative;
|
Chris@0
|
68 display: block;
|
Chris@0
|
69 }
|
Chris@0
|
70
|
Chris@0
|
71 /* 1. Must match negative bottom padding of the parent <th> */
|
Chris@0
|
72 th > a:after {
|
Chris@0
|
73 position: absolute;
|
Chris@0
|
74 top: 0;
|
Chris@18
|
75 right: 0;
|
Chris@0
|
76 bottom: -10px; /* 1. */
|
Chris@0
|
77 left: 0;
|
Chris@18
|
78 display: block;
|
Chris@18
|
79 content: "";
|
Chris@0
|
80 -webkit-transition: all 0.1s;
|
Chris@0
|
81 transition: all 0.1s;
|
Chris@18
|
82 border-bottom: 2px solid transparent;
|
Chris@0
|
83 }
|
Chris@0
|
84 th.is-active > a {
|
Chris@0
|
85 color: #004875;
|
Chris@0
|
86 }
|
Chris@0
|
87 th.is-active img {
|
Chris@0
|
88 position: absolute;
|
Chris@18
|
89 top: 50%;
|
Chris@0
|
90 right: 0; /* LTR */
|
Chris@0
|
91 }
|
Chris@0
|
92 [dir="rtl"] th.is-active img {
|
Chris@0
|
93 right: auto;
|
Chris@0
|
94 left: 0;
|
Chris@0
|
95 }
|
Chris@0
|
96 th.is-active > a:after {
|
Chris@0
|
97 border-bottom-color: #004875;
|
Chris@0
|
98 }
|
Chris@0
|
99 th > a:hover,
|
Chris@0
|
100 th > a:focus,
|
Chris@0
|
101 th.is-active > a:hover,
|
Chris@0
|
102 th.is-active > a:focus {
|
Chris@18
|
103 text-decoration: none;
|
Chris@0
|
104 color: #008ee6;
|
Chris@0
|
105 }
|
Chris@0
|
106 th > a:hover:after,
|
Chris@0
|
107 th > a:focus:after,
|
Chris@0
|
108 th.is-active > a:hover:after,
|
Chris@0
|
109 th.is-active > a:focus:after {
|
Chris@0
|
110 border-bottom-color: #008ee6;
|
Chris@0
|
111 }
|
Chris@0
|
112 td .item-list ul {
|
Chris@0
|
113 margin: 0;
|
Chris@0
|
114 }
|
Chris@0
|
115 /* This is required to win over specificity of [dir="rtl"] .item-list ul */
|
Chris@0
|
116 [dir="rtl"] td .item-list ul {
|
Chris@0
|
117 margin: 0;
|
Chris@0
|
118 }
|
Chris@0
|
119 td.is-active {
|
Chris@0
|
120 background: none;
|
Chris@0
|
121 }
|
Chris@0
|
122
|
Chris@0
|
123 /* Force browsers to calculate the width of a 'select all' <th> element. */
|
Chris@0
|
124 th.select-all {
|
Chris@0
|
125 width: 1px;
|
Chris@0
|
126 }
|
Chris@0
|
127
|
Chris@0
|
128 /**
|
Chris@0
|
129 * Captions.
|
Chris@0
|
130 */
|
Chris@0
|
131 .caption {
|
Chris@0
|
132 margin-bottom: 1.2em;
|
Chris@0
|
133 }
|
Chris@0
|
134
|
Chris@0
|
135 /**
|
Chris@0
|
136 * Responsive tables.
|
Chris@0
|
137 */
|
Chris@0
|
138 @media screen and (max-width: 37.5em) { /* 600px */
|
Chris@0
|
139 th.priority-low,
|
Chris@0
|
140 td.priority-low,
|
Chris@0
|
141 th.priority-medium,
|
Chris@0
|
142 td.priority-medium {
|
Chris@0
|
143 display: none;
|
Chris@0
|
144 }
|
Chris@0
|
145 }
|
Chris@14
|
146
|
Chris@0
|
147 @media screen and (max-width: 60em) { /* 920px */
|
Chris@0
|
148 th.priority-low,
|
Chris@0
|
149 td.priority-low {
|
Chris@0
|
150 display: none;
|
Chris@0
|
151 }
|
Chris@0
|
152 }
|