~caneypuggies/reformedchurcheslocator/couchapp-backbone

« back to all changes in this revision

Viewing changes to _attachments/js/vendor/bootstrap/less/tables.less

  • Committer: Tim Black
  • Date: 2013-09-16 22:50:16 UTC
  • Revision ID: tim@alwaysreformed.com-20130916225016-zk8jiba25z33ew7h
Versioned Bower vendor directory

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
//
 
2
// Tables
 
3
// --------------------------------------------------
 
4
 
 
5
 
 
6
table {
 
7
  max-width: 100%;
 
8
  background-color: @table-bg;
 
9
}
 
10
th {
 
11
  text-align: left;
 
12
}
 
13
 
 
14
 
 
15
// Baseline styles
 
16
 
 
17
.table {
 
18
  width: 100%;
 
19
  margin-bottom: @line-height-computed;
 
20
  // Cells
 
21
  thead,
 
22
  tbody,
 
23
  tfoot {
 
24
    > tr {
 
25
      > th,
 
26
      > td {
 
27
        padding: @table-cell-padding;
 
28
        line-height: @line-height-base;
 
29
        vertical-align: top;
 
30
        border-top: 1px solid @table-border-color;
 
31
      }
 
32
    }
 
33
  }
 
34
  // Bottom align for column headings
 
35
  thead > tr > th {
 
36
    vertical-align: bottom;
 
37
    border-bottom: 2px solid @table-border-color;
 
38
  }
 
39
  // Remove top border from thead by default
 
40
  caption + thead,
 
41
  colgroup + thead,
 
42
  thead:first-child {
 
43
    tr:first-child {
 
44
      th, td {
 
45
        border-top: 0;
 
46
      }
 
47
    }
 
48
  }
 
49
  // Account for multiple tbody instances
 
50
  tbody + tbody {
 
51
    border-top: 2px solid @table-border-color;
 
52
  }
 
53
 
 
54
  // Nesting
 
55
  .table {
 
56
    background-color: @body-bg;
 
57
  }
 
58
}
 
59
 
 
60
 
 
61
// Condensed table w/ half padding
 
62
 
 
63
.table-condensed {
 
64
  thead,
 
65
  tbody,
 
66
  tfoot {
 
67
    > tr {
 
68
      > th,
 
69
      > td {
 
70
        padding: @table-condensed-cell-padding;
 
71
      }
 
72
    }
 
73
  }
 
74
}
 
75
 
 
76
 
 
77
// Bordered version
 
78
//
 
79
// Add borders all around the table and between all the columns.
 
80
 
 
81
.table-bordered {
 
82
  border: 1px solid @table-border-color;
 
83
  > thead,
 
84
  > tbody,
 
85
  > tfoot {
 
86
    > tr {
 
87
      > th,
 
88
      > td {
 
89
        border: 1px solid @table-border-color;
 
90
      }
 
91
    }
 
92
  }
 
93
  > thead {
 
94
    > tr {
 
95
      > th,
 
96
      > td {
 
97
        border-bottom-width: 2px;
 
98
      }
 
99
    }
 
100
  }
 
101
}
 
102
 
 
103
 
 
104
// Zebra-striping
 
105
//
 
106
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
 
107
 
 
108
.table-striped {
 
109
  > tbody {
 
110
    > tr:nth-child(odd) {
 
111
      > td,
 
112
      > th {
 
113
        background-color: @table-bg-accent;
 
114
      }
 
115
    }
 
116
  }
 
117
}
 
118
 
 
119
 
 
120
// Hover effect
 
121
//
 
122
// Placed here since it has to come after the potential zebra striping
 
123
 
 
124
.table-hover {
 
125
  > tbody {
 
126
    > tr:hover {
 
127
      > td,
 
128
      > th {
 
129
        background-color: @table-bg-hover;
 
130
      }
 
131
    }
 
132
  }
 
133
}
 
134
 
 
135
 
 
136
// Table cell sizing
 
137
//
 
138
// Reset default table behavior
 
139
 
 
140
table col[class*="col-"] {
 
141
  float: none;
 
142
  display: table-column;
 
143
}
 
144
table {
 
145
  td,
 
146
  th {
 
147
    &[class*="col-"] {
 
148
      float: none;
 
149
      display: table-cell;
 
150
    }
 
151
  }
 
152
}
 
153
 
 
154
 
 
155
// Table backgrounds
 
156
//
 
157
// Exact selectors below required to override `.table-striped` and prevent
 
158
// inheritance to nested tables.
 
159
 
 
160
.table > thead > tr,
 
161
.table > tbody > tr,
 
162
.table > tfoot > tr {
 
163
  > td.active,
 
164
  > th.active,
 
165
  &.active > td,
 
166
  &.active > th  {
 
167
    background-color: @table-bg-active;
 
168
  }
 
169
}
 
170
 
 
171
// Generate the contextual variants
 
172
.table-row-variant(success; @state-success-bg; @state-success-border);
 
173
.table-row-variant(danger; @state-danger-bg; @state-danger-border);
 
174
.table-row-variant(warning; @state-warning-bg; @state-warning-border);
 
175
 
 
176
 
 
177
// Responsive tables
 
178
//
 
179
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
 
180
// by enabling horizontal scrolling. Only applies <768px. Everything above that
 
181
// will display normally.
 
182
 
 
183
@media (max-width: @screen-sm) {
 
184
  .table-responsive {
 
185
    width: 100%;
 
186
    margin-bottom: 15px;
 
187
    overflow-y: hidden;
 
188
    overflow-x: scroll;
 
189
    border: 1px solid @table-border-color;
 
190
 
 
191
    // Tighten up spacing and give a background color
 
192
    > .table {
 
193
      margin-bottom: 0;
 
194
      background-color: #fff;
 
195
 
 
196
      // Ensure the content doesn't wrap
 
197
      > thead,
 
198
      > tbody,
 
199
      > tfoot {
 
200
        > tr {
 
201
          > th,
 
202
          > td {
 
203
            white-space: nowrap;
 
204
          }
 
205
        }
 
206
      }
 
207
    }
 
208
 
 
209
    // Special overrides for the bordered tables
 
210
    > .table-bordered {
 
211
      border: 0;
 
212
 
 
213
      // Nuke the appropriate borders so that the parent can handle them
 
214
      > thead,
 
215
      > tbody,
 
216
      > tfoot {
 
217
        > tr {
 
218
          > th:first-child,
 
219
          > td:first-child {
 
220
            border-left: 0;
 
221
          }
 
222
          > th:last-child,
 
223
          > td:last-child {
 
224
            border-right: 0;
 
225
          }
 
226
        }
 
227
        > tr:last-child {
 
228
          > th,
 
229
          > td {
 
230
            border-bottom: 0;
 
231
          }
 
232
        }
 
233
      }
 
234
    }
 
235
  }
 
236
}