Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
tables.less 4.94 KiB
1 
//
2 
// Tables
3 
// --------------------------------------------------
4
5
6 
table {
7 
  max-width: 100%;
8 
  background-color: @table-background;
9 
  border-collapse: collapse;
10 
  border-spacing: 0;
11 
}
12
13
14
15 
// BASELINE STYLES
16 
// ---------------
17
18 
.table {
19 
  width: 100%;
20 
  margin-bottom: @line-height-base;
21 
  // Cells
22 
  th,
23 
  td {
24 
    padding: 8px;
25 
    line-height: @line-height-base;
26 
    text-align: left;
27 
    vertical-align: top;
28 
    border-top: 1px solid @table-border;
29 
  }
30 
  th {
31 
    font-weight: bold;
32 
  }
33 
  // Bottom align for column headings
34 
  thead th {
35 
    vertical-align: bottom;
36 
  }
37 
  // Remove top border from thead by default
38 
  caption + thead tr:first-child th,
39 
  caption + thead tr:first-child td,
40 
  colgroup + thead tr:first-child th,
41 
  colgroup + thead tr:first-child td,
42 
  thead:first-child tr:first-child th,
43 
  thead:first-child tr:first-child td {
44 
    border-top: 0;
45 
  }
46 
  // Account for multiple tbody instances
47 
  tbody + tbody {
48 
    border-top: 2px solid @table-border;
49 
  }
50 
}
51
52
53
54 
// CONDENSED TABLE W/ HALF PADDING
55 
// -------------------------------
56
57 
.table-condensed {
58 
  th,
59 
  td {
60 
    padding: 4px 5px;
61 
  }
62 
}
63
64
65
66 
// BORDERED VERSION
67 
// ----------------
68
69 
.table-bordered {
70 
  border: 1px solid @table-border;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
border-collapse: separate; // Done so we can round those corners! border-left: 0; border-radius: @border-radius-base; th, td { border-left: 1px solid @table-border; } // Prevent a double border caption + thead tr:first-child th, caption + tbody tr:first-child th, caption + tbody tr:first-child td, colgroup + thead tr:first-child th, colgroup + tbody tr:first-child th, colgroup + tbody tr:first-child td, thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td { border-top: 0; } // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { .border-top-left-radius(@border-radius-base); } thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child { .border-top-right-radius(@border-radius-base); } // For first th or td in the last row in the last thead or tbody thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child, tfoot:last-child tr:last-child td:first-child { .border-bottom-left-radius(@border-radius-base); } thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child, tfoot:last-child tr:last-child td:last-child { .border-bottom-right-radius(@border-radius-base); } // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot tfoot + tbody:last-child tr:last-child td:first-child { .border-bottom-left-radius(0); } tfoot + tbody:last-child tr:last-child td:last-child { .border-bottom-right-radius(0); } // Special fixes to round the left border on the first td/th caption + thead tr:first-child th:first-child, caption + tbody tr:first-child td:first-child, colgroup + thead tr:first-child th:first-child, colgroup + tbody tr:first-child td:first-child { .border-top-left-radius(@border-radius-base); } caption + thead tr:first-child th:last-child, caption + tbody tr:first-child td:last-child, colgroup + thead tr:first-child th:last-child, colgroup + tbody tr:first-child td:last-child { .border-top-right-radius(@border-radius-base); } } // ZEBRA-STRIPING // --------------
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
// Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { tbody { tr:nth-child(odd) td, tr:nth-child(odd) th { background-color: @table-background-accent; } } } // HOVER EFFECT // ------------ // Placed here since it has to come after the potential zebra striping .table-hover { tbody { tr:hover td, tr:hover th { background-color: @table-background-hover; } } } // TABLE CELL SIZING // ----------------- // Reset default grid behavior table td[class*="span"], table th[class*="span"] { display: table-cell; float: none; // undo default grid column styles margin-left: 0; // undo default grid column styles } // TABLE BACKGROUNDS // ----------------- // Exact selectors below required to override .table-striped .table tbody tr { &.success td { background-color: @state-success-background; } &.error td { background-color: @state-error-background; } &.warning td { background-color: @state-warning-background; } &.info td { background-color: @state-info-background; } } // Hover states for .table-hover .table-hover tbody tr { &.success:hover td { background-color: darken(@state-success-background, 5%); } &.error:hover td { background-color: darken(@state-error-background, 5%); } &.warning:hover td { background-color: darken(@state-warning-background, 5%); } &.info:hover td { background-color: darken(@state-info-background, 5%); }
211212
}