Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / less / tables.less @ cf4c546f

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
}