Statistics
| Branch: | Tag: | Revision:

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

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
}