Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
tables.less 3.45 KiB
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 
  border-collapse: separate;
15 
  font-size: @basefont;
16 
  border: 1px solid #ddd;
17 
  .border-radius(4px);
18 
  th, td {
19 
    padding: 10px 10px 9px;
20 
    line-height: @baseline;
21 
    text-align: left;
22 
  }
23 
  th {
24 
    padding-top: 9px;
25 
    font-weight: bold;
26 
    vertical-align: middle;
27 
    border-bottom: 1px solid #ddd;
28 
  }
29 
  td {
30 
    vertical-align: top;
31 
  }
32 
  th + th,
33 
  td + td {
34 
    border-left: 1px solid #ddd;
35 
  }
36 
  tr + tr td {
37 
    border-top: 1px solid #ddd;
38 
  }
39 
  tbody tr:first-child td:first-child {
40 
    .border-radius(4px 0 0 0);
41 
  }
42 
  tbody tr:first-child td:last-child {
43 
    .border-radius(0 4px 0 0);
44 
  }
45 
  tbody tr:last-child td:first-child {
46 
    .border-radius(0 0 0 4px);
47 
  }
48 
  tbody tr:last-child td:last-child {
49 
    .border-radius(0 0 4px 0);
50 
  }
51 
}
52
53
54 
// ZEBRA-STRIPING
55 
// --------------
56
57 
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
58 
.zebra-striped {
59 
  tbody {
60 
    tr:nth-child(odd) td {
61 
      background-color: #f9f9f9;
62 
    }
63 
    tr:hover td {
64 
      background-color: #f5f5f5;
65 
    }
66 
  }
67
68 
  // Tablesorting styles w/ jQuery plugin
69 
  .header {
70 
    cursor: pointer;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
&:after { content: ""; float: right; margin-top: 7px; border-width: 0 4px 4px; border-style: solid; border-color: #000 transparent; visibility: hidden; } } // Style the sorted column headers (THs) .headerSortUp, .headerSortDown { background-color: rgba(141,192,219,.25); text-shadow: 0 1px 1px rgba(255,255,255,.75); } // Style the ascending (reverse alphabetical) column header .header:hover { &:after { visibility:visible; } } // Style the descending (alphabetical) column header .headerSortDown, .headerSortDown:hover { &:after { visibility:visible; .opacity(60); } } // Style the ascending (reverse alphabetical) column header .headerSortUp { &:after { border-bottom: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; visibility:visible; .box-shadow(none); //can't add boxshadow to downward facing arrow :( .opacity(60); } } } table { // Blue Table Headings .blue { color: @blue; border-bottom-color: @blue; } .headerSortUp.blue, .headerSortDown.blue { background-color: lighten(@blue, 40%); } // Green Table Headings .green { color: @green; border-bottom-color: @green; } .headerSortUp.green, .headerSortDown.green { background-color: lighten(@green, 40%); } // Red Table Headings .red { color: @red; border-bottom-color: @red; } .headerSortUp.red, .headerSortDown.red {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
background-color: lighten(@red, 50%); } // Yellow Table Headings .yellow { color: @yellow; border-bottom-color: @yellow; } .headerSortUp.yellow, .headerSortDown.yellow { background-color: lighten(@yellow, 40%); } // Orange Table Headings .orange { color: @orange; border-bottom-color: @orange; } .headerSortUp.orange, .headerSortDown.orange { background-color: lighten(@orange, 40%); } // Purple Table Headings .purple { color: @purple; border-bottom-color: @purple; } .headerSortUp.purple, .headerSortDown.purple { background-color: lighten(@purple, 40%); } }