root / snf-astakos-app / astakos / im / static / im / less / tables.less @ 320d484c
History | View | Annotate | Download (4.8 kB)
1 | 13858d75 | Kostas Papadimitriou | /* |
---|---|---|---|
2 | 13858d75 | Kostas Papadimitriou | * Tables.less |
3 | 13858d75 | Kostas Papadimitriou | * Tables for, you guessed it, tabular data |
4 | 13858d75 | Kostas Papadimitriou | * ---------------------------------------- */ |
5 | 13858d75 | Kostas Papadimitriou | |
6 | 13858d75 | Kostas Papadimitriou | |
7 | 13858d75 | Kostas Papadimitriou | // BASELINE STYLES |
8 | 13858d75 | Kostas Papadimitriou | // --------------- |
9 | 13858d75 | Kostas Papadimitriou | |
10 | 13858d75 | Kostas Papadimitriou | table { |
11 | 13858d75 | Kostas Papadimitriou | width: 100%; |
12 | 13858d75 | Kostas Papadimitriou | margin-bottom: @baseline; |
13 | 13858d75 | Kostas Papadimitriou | padding: 0; |
14 | 13858d75 | Kostas Papadimitriou | font-size: @basefont; |
15 | 13858d75 | Kostas Papadimitriou | border-collapse: collapse; |
16 | 13858d75 | Kostas Papadimitriou | th, |
17 | 13858d75 | Kostas Papadimitriou | td { |
18 | 13858d75 | Kostas Papadimitriou | padding: 10px 10px 9px; |
19 | 13858d75 | Kostas Papadimitriou | line-height: @baseline; |
20 | 13858d75 | Kostas Papadimitriou | text-align: left; |
21 | 13858d75 | Kostas Papadimitriou | } |
22 | 13858d75 | Kostas Papadimitriou | th { |
23 | 13858d75 | Kostas Papadimitriou | padding-top: 9px; |
24 | 13858d75 | Kostas Papadimitriou | font-weight: bold; |
25 | 13858d75 | Kostas Papadimitriou | vertical-align: middle; |
26 | 13858d75 | Kostas Papadimitriou | } |
27 | 13858d75 | Kostas Papadimitriou | td { |
28 | 13858d75 | Kostas Papadimitriou | vertical-align: top; |
29 | 13858d75 | Kostas Papadimitriou | border-top: 1px solid #ddd; |
30 | 13858d75 | Kostas Papadimitriou | } |
31 | 13858d75 | Kostas Papadimitriou | // When scoped to row, fix th in tbody |
32 | 13858d75 | Kostas Papadimitriou | tbody th { |
33 | 13858d75 | Kostas Papadimitriou | border-top: 1px solid #ddd; |
34 | 13858d75 | Kostas Papadimitriou | vertical-align: top; |
35 | 13858d75 | Kostas Papadimitriou | } |
36 | 13858d75 | Kostas Papadimitriou | } |
37 | 13858d75 | Kostas Papadimitriou | |
38 | 13858d75 | Kostas Papadimitriou | |
39 | 13858d75 | Kostas Papadimitriou | // CONDENSED VERSION |
40 | 13858d75 | Kostas Papadimitriou | // ----------------- |
41 | 13858d75 | Kostas Papadimitriou | .condensed-table { |
42 | 13858d75 | Kostas Papadimitriou | th, |
43 | 13858d75 | Kostas Papadimitriou | td { |
44 | 13858d75 | Kostas Papadimitriou | padding: 5px 5px 4px; |
45 | 13858d75 | Kostas Papadimitriou | } |
46 | 13858d75 | Kostas Papadimitriou | } |
47 | 13858d75 | Kostas Papadimitriou | |
48 | 13858d75 | Kostas Papadimitriou | |
49 | 13858d75 | Kostas Papadimitriou | // BORDERED VERSION |
50 | 13858d75 | Kostas Papadimitriou | // ---------------- |
51 | 13858d75 | Kostas Papadimitriou | |
52 | 13858d75 | Kostas Papadimitriou | .bordered-table { |
53 | 13858d75 | Kostas Papadimitriou | border: 1px solid #ddd; |
54 | 13858d75 | Kostas Papadimitriou | border-collapse: separate; // Done so we can round those corners! |
55 | 13858d75 | Kostas Papadimitriou | *border-collapse: collapse; /* IE7, collapse table to remove spacing */ |
56 | 13858d75 | Kostas Papadimitriou | .border-radius(4px); |
57 | 13858d75 | Kostas Papadimitriou | th + th, |
58 | 13858d75 | Kostas Papadimitriou | td + td, |
59 | 13858d75 | Kostas Papadimitriou | th + td { |
60 | 13858d75 | Kostas Papadimitriou | border-left: 1px solid #ddd; |
61 | 13858d75 | Kostas Papadimitriou | } |
62 | 13858d75 | Kostas Papadimitriou | thead tr:first-child th:first-child, |
63 | 13858d75 | Kostas Papadimitriou | tbody tr:first-child td:first-child { |
64 | 13858d75 | Kostas Papadimitriou | .border-radius(4px 0 0 0); |
65 | 13858d75 | Kostas Papadimitriou | } |
66 | 13858d75 | Kostas Papadimitriou | thead tr:first-child th:last-child, |
67 | 13858d75 | Kostas Papadimitriou | tbody tr:first-child td:last-child { |
68 | 13858d75 | Kostas Papadimitriou | .border-radius(0 4px 0 0); |
69 | 13858d75 | Kostas Papadimitriou | } |
70 | 13858d75 | Kostas Papadimitriou | tbody tr:last-child td:first-child { |
71 | 13858d75 | Kostas Papadimitriou | .border-radius(0 0 0 4px); |
72 | 13858d75 | Kostas Papadimitriou | } |
73 | 13858d75 | Kostas Papadimitriou | tbody tr:last-child td:last-child { |
74 | 13858d75 | Kostas Papadimitriou | .border-radius(0 0 4px 0); |
75 | 13858d75 | Kostas Papadimitriou | } |
76 | 13858d75 | Kostas Papadimitriou | } |
77 | 13858d75 | Kostas Papadimitriou | |
78 | 13858d75 | Kostas Papadimitriou | |
79 | 13858d75 | Kostas Papadimitriou | // TABLE CELL SIZES |
80 | 13858d75 | Kostas Papadimitriou | // ---------------- |
81 | 13858d75 | Kostas Papadimitriou | |
82 | 13858d75 | Kostas Papadimitriou | // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border |
83 | 13858d75 | Kostas Papadimitriou | .tableColumns(@columnSpan: 1) { |
84 | 13858d75 | Kostas Papadimitriou | width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); |
85 | 13858d75 | Kostas Papadimitriou | } |
86 | 13858d75 | Kostas Papadimitriou | table { |
87 | 13858d75 | Kostas Papadimitriou | // Default columns |
88 | 13858d75 | Kostas Papadimitriou | .span1 { .tableColumns(1); } |
89 | 13858d75 | Kostas Papadimitriou | .span2 { .tableColumns(2); } |
90 | 13858d75 | Kostas Papadimitriou | .span3 { .tableColumns(3); } |
91 | 13858d75 | Kostas Papadimitriou | .span4 { .tableColumns(4); } |
92 | 13858d75 | Kostas Papadimitriou | .span5 { .tableColumns(5); } |
93 | 13858d75 | Kostas Papadimitriou | .span6 { .tableColumns(6); } |
94 | 13858d75 | Kostas Papadimitriou | .span7 { .tableColumns(7); } |
95 | 13858d75 | Kostas Papadimitriou | .span8 { .tableColumns(8); } |
96 | 13858d75 | Kostas Papadimitriou | .span9 { .tableColumns(9); } |
97 | 13858d75 | Kostas Papadimitriou | .span10 { .tableColumns(10); } |
98 | 13858d75 | Kostas Papadimitriou | .span11 { .tableColumns(11); } |
99 | 13858d75 | Kostas Papadimitriou | .span12 { .tableColumns(12); } |
100 | 13858d75 | Kostas Papadimitriou | .span13 { .tableColumns(13); } |
101 | 13858d75 | Kostas Papadimitriou | .span14 { .tableColumns(14); } |
102 | 13858d75 | Kostas Papadimitriou | .span15 { .tableColumns(15); } |
103 | 13858d75 | Kostas Papadimitriou | .span16 { .tableColumns(16); } |
104 | 13858d75 | Kostas Papadimitriou | } |
105 | 13858d75 | Kostas Papadimitriou | |
106 | 13858d75 | Kostas Papadimitriou | |
107 | 13858d75 | Kostas Papadimitriou | // ZEBRA-STRIPING |
108 | 13858d75 | Kostas Papadimitriou | // -------------- |
109 | 13858d75 | Kostas Papadimitriou | |
110 | 13858d75 | Kostas Papadimitriou | // Default zebra-stripe styles (alternating gray and transparent backgrounds) |
111 | 13858d75 | Kostas Papadimitriou | .zebra-striped { |
112 | 13858d75 | Kostas Papadimitriou | tbody { |
113 | 13858d75 | Kostas Papadimitriou | tr:nth-child(odd) td, |
114 | 13858d75 | Kostas Papadimitriou | tr:nth-child(odd) th { |
115 | 13858d75 | Kostas Papadimitriou | background-color: #f9f9f9; |
116 | 13858d75 | Kostas Papadimitriou | } |
117 | 13858d75 | Kostas Papadimitriou | tr:hover td, |
118 | 13858d75 | Kostas Papadimitriou | tr:hover th { |
119 | 13858d75 | Kostas Papadimitriou | background-color: #f5f5f5; |
120 | 13858d75 | Kostas Papadimitriou | } |
121 | 13858d75 | Kostas Papadimitriou | } |
122 | 13858d75 | Kostas Papadimitriou | } |
123 | 13858d75 | Kostas Papadimitriou | |
124 | 13858d75 | Kostas Papadimitriou | table { |
125 | 13858d75 | Kostas Papadimitriou | // Tablesorting styles w/ jQuery plugin |
126 | 13858d75 | Kostas Papadimitriou | .header { |
127 | 13858d75 | Kostas Papadimitriou | cursor: pointer; |
128 | 13858d75 | Kostas Papadimitriou | &:after { |
129 | 13858d75 | Kostas Papadimitriou | content: ""; |
130 | 13858d75 | Kostas Papadimitriou | float: right; |
131 | 13858d75 | Kostas Papadimitriou | margin-top: 7px; |
132 | 13858d75 | Kostas Papadimitriou | border-width: 0 4px 4px; |
133 | 13858d75 | Kostas Papadimitriou | border-style: solid; |
134 | 13858d75 | Kostas Papadimitriou | border-color: #000 transparent; |
135 | 13858d75 | Kostas Papadimitriou | visibility: hidden; |
136 | 13858d75 | Kostas Papadimitriou | } |
137 | 13858d75 | Kostas Papadimitriou | } |
138 | 13858d75 | Kostas Papadimitriou | // Style the sorted column headers (THs) |
139 | 13858d75 | Kostas Papadimitriou | .headerSortUp, |
140 | 13858d75 | Kostas Papadimitriou | .headerSortDown { |
141 | 13858d75 | Kostas Papadimitriou | background-color: rgba(141,192,219,.25); |
142 | 13858d75 | Kostas Papadimitriou | text-shadow: 0 1px 1px rgba(255,255,255,.75); |
143 | 13858d75 | Kostas Papadimitriou | } |
144 | 13858d75 | Kostas Papadimitriou | // Style the ascending (reverse alphabetical) column header |
145 | 13858d75 | Kostas Papadimitriou | .header:hover { |
146 | 13858d75 | Kostas Papadimitriou | &:after { |
147 | 13858d75 | Kostas Papadimitriou | visibility:visible; |
148 | 13858d75 | Kostas Papadimitriou | } |
149 | 13858d75 | Kostas Papadimitriou | } |
150 | 13858d75 | Kostas Papadimitriou | // Style the descending (alphabetical) column header |
151 | 13858d75 | Kostas Papadimitriou | .headerSortDown, |
152 | 13858d75 | Kostas Papadimitriou | .headerSortDown:hover { |
153 | 13858d75 | Kostas Papadimitriou | &:after { |
154 | 13858d75 | Kostas Papadimitriou | visibility:visible; |
155 | 13858d75 | Kostas Papadimitriou | .opacity(60); |
156 | 13858d75 | Kostas Papadimitriou | } |
157 | 13858d75 | Kostas Papadimitriou | } |
158 | 13858d75 | Kostas Papadimitriou | // Style the ascending (reverse alphabetical) column header |
159 | 13858d75 | Kostas Papadimitriou | .headerSortUp { |
160 | 13858d75 | Kostas Papadimitriou | &:after { |
161 | 13858d75 | Kostas Papadimitriou | border-bottom: none; |
162 | 13858d75 | Kostas Papadimitriou | border-left: 4px solid transparent; |
163 | 13858d75 | Kostas Papadimitriou | border-right: 4px solid transparent; |
164 | 13858d75 | Kostas Papadimitriou | border-top: 4px solid #000; |
165 | 13858d75 | Kostas Papadimitriou | visibility:visible; |
166 | 13858d75 | Kostas Papadimitriou | .box-shadow(none); //can't add boxshadow to downward facing arrow :( |
167 | 13858d75 | Kostas Papadimitriou | .opacity(60); |
168 | 13858d75 | Kostas Papadimitriou | } |
169 | 13858d75 | Kostas Papadimitriou | } |
170 | 13858d75 | Kostas Papadimitriou | // Blue Table Headings |
171 | 13858d75 | Kostas Papadimitriou | .blue { |
172 | 13858d75 | Kostas Papadimitriou | color: @blue; |
173 | 13858d75 | Kostas Papadimitriou | border-bottom-color: @blue; |
174 | 13858d75 | Kostas Papadimitriou | } |
175 | 13858d75 | Kostas Papadimitriou | .headerSortUp.blue, |
176 | 13858d75 | Kostas Papadimitriou | .headerSortDown.blue { |
177 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@blue, 40%); |
178 | 13858d75 | Kostas Papadimitriou | } |
179 | 13858d75 | Kostas Papadimitriou | // Green Table Headings |
180 | 13858d75 | Kostas Papadimitriou | .green { |
181 | 13858d75 | Kostas Papadimitriou | color: @green; |
182 | 13858d75 | Kostas Papadimitriou | border-bottom-color: @green; |
183 | 13858d75 | Kostas Papadimitriou | } |
184 | 13858d75 | Kostas Papadimitriou | .headerSortUp.green, |
185 | 13858d75 | Kostas Papadimitriou | .headerSortDown.green { |
186 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@green, 40%); |
187 | 13858d75 | Kostas Papadimitriou | } |
188 | 13858d75 | Kostas Papadimitriou | // Red Table Headings |
189 | 13858d75 | Kostas Papadimitriou | .red { |
190 | 13858d75 | Kostas Papadimitriou | color: @red; |
191 | 13858d75 | Kostas Papadimitriou | border-bottom-color: @red; |
192 | 13858d75 | Kostas Papadimitriou | } |
193 | 13858d75 | Kostas Papadimitriou | .headerSortUp.red, |
194 | 13858d75 | Kostas Papadimitriou | .headerSortDown.red { |
195 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@red, 50%); |
196 | 13858d75 | Kostas Papadimitriou | } |
197 | 13858d75 | Kostas Papadimitriou | // Yellow Table Headings |
198 | 13858d75 | Kostas Papadimitriou | .yellow { |
199 | 13858d75 | Kostas Papadimitriou | color: @yellow; |
200 | 13858d75 | Kostas Papadimitriou | border-bottom-color: @yellow; |
201 | 13858d75 | Kostas Papadimitriou | } |
202 | 13858d75 | Kostas Papadimitriou | .headerSortUp.yellow, |
203 | 13858d75 | Kostas Papadimitriou | .headerSortDown.yellow { |
204 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@yellow, 40%); |
205 | 13858d75 | Kostas Papadimitriou | } |
206 | 13858d75 | Kostas Papadimitriou | // Orange Table Headings |
207 | 13858d75 | Kostas Papadimitriou | .orange { |
208 | 13858d75 | Kostas Papadimitriou | color: @orange; |
209 | 13858d75 | Kostas Papadimitriou | border-bottom-color: @orange; |
210 | 13858d75 | Kostas Papadimitriou | } |
211 | 13858d75 | Kostas Papadimitriou | .headerSortUp.orange, |
212 | 13858d75 | Kostas Papadimitriou | .headerSortDown.orange { |
213 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@orange, 40%); |
214 | 13858d75 | Kostas Papadimitriou | } |
215 | 13858d75 | Kostas Papadimitriou | // Purple Table Headings |
216 | 13858d75 | Kostas Papadimitriou | .purple { |
217 | 13858d75 | Kostas Papadimitriou | color: @purple; |
218 | 13858d75 | Kostas Papadimitriou | border-bottom-color: @purple; |
219 | 13858d75 | Kostas Papadimitriou | } |
220 | 13858d75 | Kostas Papadimitriou | .headerSortUp.purple, |
221 | 13858d75 | Kostas Papadimitriou | .headerSortDown.purple { |
222 | 13858d75 | Kostas Papadimitriou | background-color: lighten(@purple, 40%); |
223 | 13858d75 | Kostas Papadimitriou | } |
224 | 13858d75 | Kostas Papadimitriou | } |