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