← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/better-basic-reconciler-status

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/uncompressed/collections/table.css

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • mto: (132.2.1 reconciler) (145.1.1 trunk)
  • mto: This revision was merged to the branch mainline in revision 156.
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/uncompressed/collections/table.css
 
1
/*
 
2
 * # Semantic - Table
 
3
 * http://github.com/jlukic/semantic-ui/
 
4
 *
 
5
 *
 
6
 * Copyright 2014 Contributors
 
7
 * Released under the MIT license
 
8
 * http://opensource.org/licenses/MIT
 
9
 *
 
10
 */
 
11
/*******************************
 
12
             Table
 
13
*******************************/
 
14
/* Prototype */
 
15
.ui.table {
 
16
  width: 100%;
 
17
  border-collapse: collapse;
 
18
}
 
19
/* Table Content */
 
20
.ui.table th,
 
21
.ui.table tr,
 
22
.ui.table td {
 
23
  border-collapse: collapse;
 
24
  -webkit-box-sizing: border-box;
 
25
  -moz-box-sizing: border-box;
 
26
  -ms-box-sizing: border-box;
 
27
  box-sizing: border-box;
 
28
  -webkit-transition: all 0.1s ease-out;
 
29
  -moz-transition: all 0.1s ease-out;
 
30
  transition: all 0.1s ease-out;
 
31
}
 
32
/* Headers */
 
33
.ui.table thead {
 
34
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
 
35
}
 
36
.ui.table tfoot th {
 
37
  background-color: rgba(0, 0, 0, 0.03);
 
38
}
 
39
.ui.table th {
 
40
  cursor: auto;
 
41
  background-color: rgba(0, 0, 0, 0.05);
 
42
  text-align: left;
 
43
  color: rgba(0, 0, 0, 0.8);
 
44
  padding: 0.5em 0.7em;
 
45
  vertical-align: middle;
 
46
}
 
47
.ui.table thead th:first-child {
 
48
  border-radius: 5px 0px 0px 0px;
 
49
}
 
50
.ui.table thead th:last-child {
 
51
  border-radius: 0px 5px 0px 0px;
 
52
}
 
53
.ui.table tfoot th:first-child {
 
54
  border-radius: 0px 0px 0px 5px;
 
55
}
 
56
.ui.table tfoot th:last-child {
 
57
  border-radius: 0px 0px 5px 0px;
 
58
}
 
59
.ui.table tfoot th:only-child {
 
60
  border-radius: 0px 0px 5px 5px;
 
61
}
 
62
/* Table Cells */
 
63
.ui.table td {
 
64
  padding: 0.40em 0.7em;
 
65
  vertical-align: middle;
 
66
}
 
67
/* Footer */
 
68
.ui.table tfoot {
 
69
  border-top: 1px solid rgba(0, 0, 0, 0.03);
 
70
}
 
71
.ui.table tfoot th {
 
72
  font-weight: normal;
 
73
  font-style: italic;
 
74
}
 
75
/* Table Striping */
 
76
.ui.table tbody tr:nth-child(2n) {
 
77
  background-color: rgba(0, 0, 50, 0.02);
 
78
}
 
79
/* Icons */
 
80
.ui.table > .icon {
 
81
  vertical-align: baseline;
 
82
}
 
83
.ui.table > .icon:only-child {
 
84
  margin: 0em;
 
85
}
 
86
/* Table Segment */
 
87
.ui.table.segment:after {
 
88
  display: none;
 
89
}
 
90
.ui.table.segment.stacked:after {
 
91
  display: block;
 
92
}
 
93
/* Responsive */
 
94
@media only screen and (max-width: 768px) {
 
95
  .ui.table {
 
96
    display: block;
 
97
    padding: 0em;
 
98
  }
 
99
  .ui.table thead,
 
100
  .ui.table tfoot {
 
101
    display: none;
 
102
  }
 
103
  .ui.table tbody {
 
104
    display: block;
 
105
  }
 
106
  .ui.table tr {
 
107
    display: block;
 
108
  }
 
109
  .ui.table tr > td {
 
110
    width: 100% !important;
 
111
    display: block;
 
112
    border: none !important;
 
113
    padding: 0.25em 0.75em;
 
114
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
 
115
            box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important;
 
116
  }
 
117
  .ui.table td:first-child {
 
118
    font-weight: bold;
 
119
    padding-top: 1em;
 
120
  }
 
121
  .ui.table td:last-child {
 
122
    -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
 
123
            box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important;
 
124
    padding-bottom: 1em;
 
125
  }
 
126
  /* Clear BG Colors */
 
127
  .ui.table tr > td.warning,
 
128
  .ui.table tr > td.error,
 
129
  .ui.table tr > td.active,
 
130
  .ui.table tr > td.positive,
 
131
  .ui.table tr > td.negative {
 
132
    background-color: transparent !important;
 
133
  }
 
134
}
 
135
/*******************************
 
136
             States
 
137
*******************************/
 
138
/*--------------
 
139
      Hover
 
140
---------------*/
 
141
/* Sortable */
 
142
.ui.sortable.table th.disabled:hover {
 
143
  cursor: auto;
 
144
  text-align: left;
 
145
  font-weight: bold;
 
146
  color: #333333;
 
147
  color: rgba(0, 0, 0, 0.8);
 
148
}
 
149
.ui.sortable.table thead th:hover {
 
150
  background-color: rgba(0, 0, 0, 0.13);
 
151
  color: rgba(0, 0, 0, 0.8);
 
152
}
 
153
/* Inverted Sortable */
 
154
.ui.inverted.sortable.table thead th:hover {
 
155
  background-color: rgba(255, 255, 255, 0.13);
 
156
  color: #ffffff;
 
157
}
 
158
/*--------------
 
159
    Positive
 
160
---------------*/
 
161
.ui.table tr.positive,
 
162
.ui.table td.positive {
 
163
  -webkit-box-shadow: 2px 0px 0px #119000 inset;
 
164
  box-shadow: 2px 0px 0px #119000 inset;
 
165
}
 
166
.ui.table tr.positive td,
 
167
.ui.table td.positive {
 
168
  background-color: #F2F8F0 !important;
 
169
  color: #119000 !important;
 
170
}
 
171
.ui.celled.table tr.positive:hover td,
 
172
.ui.celled.table tr:hover td.positive,
 
173
.ui.table tr.positive:hover td,
 
174
.ui.table td:hover.positive,
 
175
.ui.table th:hover.positive {
 
176
  background-color: #ECF5E9 !important;
 
177
  color: #119000 !important;
 
178
}
 
179
/*--------------
 
180
     Negative
 
181
---------------*/
 
182
.ui.table tr.negative,
 
183
.ui.table td.negative {
 
184
  -webkit-box-shadow: 2px 0px 0px #CD2929 inset;
 
185
  box-shadow: 2px 0px 0px #CD2929 inset;
 
186
}
 
187
.ui.table tr.negative td,
 
188
.ui.table td.negative {
 
189
  background-color: #F9F4F4;
 
190
  color: #CD2929 !important;
 
191
}
 
192
.ui.celled.table tr.negative:hover td,
 
193
.ui.celled.table tr:hover td.negative,
 
194
.ui.table tr.negative:hover td,
 
195
.ui.table td:hover.negative,
 
196
.ui.table th:hover.negative {
 
197
  background-color: #F2E8E8;
 
198
  color: #CD2929;
 
199
}
 
200
/*--------------
 
201
      Error
 
202
---------------*/
 
203
.ui.table tr.error,
 
204
.ui.table td.error {
 
205
  -webkit-box-shadow: 2px 0px 0px #CD2929 inset;
 
206
  box-shadow: 2px 0px 0px #CD2929 inset;
 
207
}
 
208
.ui.table tr.error td,
 
209
.ui.table td.error,
 
210
.ui.table th.error {
 
211
  background-color: #F9F4F4;
 
212
  color: #CD2929;
 
213
}
 
214
.ui.celled.table tr.error:hover td,
 
215
.ui.celled.table tr:hover td.error,
 
216
.ui.table tr.error:hover td,
 
217
.ui.table td:hover.error,
 
218
.ui.table th:hover.error {
 
219
  background-color: #F2E8E8;
 
220
  color: #CD2929;
 
221
}
 
222
/*--------------
 
223
     Warning
 
224
---------------*/
 
225
.ui.table tr.warning,
 
226
.ui.table td.warning {
 
227
  -webkit-box-shadow: 2px 0px 0px #7D6C00 inset;
 
228
  box-shadow: 2px 0px 0px #7D6C00 inset;
 
229
}
 
230
.ui.table tr.warning td,
 
231
.ui.table td.warning,
 
232
.ui.table th.warning {
 
233
  background-color: #FBF6E9;
 
234
  color: #7D6C00;
 
235
}
 
236
.ui.celled.table tr.warning:hover td,
 
237
.ui.celled.table tr:hover td.warning,
 
238
.ui.table tr.warning:hover td,
 
239
.ui.table td:hover.warning,
 
240
.ui.table th:hover.warning {
 
241
  background-color: #F3EDDC;
 
242
  color: #7D6C00;
 
243
}
 
244
/*--------------
 
245
     Active
 
246
---------------*/
 
247
.ui.table tr.active,
 
248
.ui.table td.active {
 
249
  -webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
 
250
  box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset;
 
251
}
 
252
.ui.table tr.active td,
 
253
.ui.table tr td.active {
 
254
  background-color: #E0E0E0;
 
255
  color: rgba(50, 50, 50, 0.9);
 
256
  /* border-color: rgba(0, 0, 0, 0.15) !important; */
 
257
}
 
258
/*--------------
 
259
     Disabled
 
260
---------------*/
 
261
.ui.table tr.disabled td,
 
262
.ui.table tr td.disabled,
 
263
.ui.table tr.disabled:hover td,
 
264
.ui.table tr:hover td.disabled {
 
265
  color: rgba(150, 150, 150, 0.3);
 
266
}
 
267
/*******************************
 
268
          Variations
 
269
*******************************/
 
270
/*--------------
 
271
  Column Count
 
272
---------------*/
 
273
.ui.column.table {
 
274
  table-layout: fixed;
 
275
}
 
276
.ui.two.column.table td {
 
277
  width: 50%;
 
278
}
 
279
.ui.three.column.table td {
 
280
  width: 33.3333%;
 
281
}
 
282
.ui.four.column.table td {
 
283
  width: 25%;
 
284
}
 
285
.ui.five.column.table td {
 
286
  width: 20%;
 
287
}
 
288
.ui.six.column.table td {
 
289
  width: 16.66667%;
 
290
}
 
291
.ui.seven.column.table td {
 
292
  width: 14.2857%;
 
293
}
 
294
.ui.eight.column.table td {
 
295
  width: 12.5%;
 
296
}
 
297
.ui.nine.column.table td {
 
298
  width: 11.1111%;
 
299
}
 
300
.ui.ten.column.table td {
 
301
  width: 10%;
 
302
}
 
303
.ui.eleven.column.table td {
 
304
  width: 9.0909%;
 
305
}
 
306
.ui.twelve.column.table td {
 
307
  width: 8.3333%;
 
308
}
 
309
.ui.thirteen.column.table td {
 
310
  width: 7.6923%;
 
311
}
 
312
.ui.fourteen.column.table td {
 
313
  width: 7.1428%;
 
314
}
 
315
.ui.fifteen.column.table td {
 
316
  width: 6.6666%;
 
317
}
 
318
.ui.sixteen.column.table td {
 
319
  width: 6.25%;
 
320
}
 
321
/* Column Width */
 
322
.ui.table th.one.wide,
 
323
.ui.table td.one.wide {
 
324
  width: 6.25%;
 
325
}
 
326
.ui.table th.two.wide,
 
327
.ui.table td.two.wide {
 
328
  width: 12.5%;
 
329
}
 
330
.ui.table th.three.wide,
 
331
.ui.table td.three.wide {
 
332
  width: 18.75%;
 
333
}
 
334
.ui.table th.four.wide,
 
335
.ui.table td.four.wide {
 
336
  width: 25%;
 
337
}
 
338
.ui.table th.five.wide,
 
339
.ui.table td.five.wide {
 
340
  width: 31.25%;
 
341
}
 
342
.ui.table th.six.wide,
 
343
.ui.table td.six.wide {
 
344
  width: 37.5%;
 
345
}
 
346
.ui.table th.seven.wide,
 
347
.ui.table td.seven.wide {
 
348
  width: 43.75%;
 
349
}
 
350
.ui.table th.eight.wide,
 
351
.ui.table td.eight.wide {
 
352
  width: 50%;
 
353
}
 
354
.ui.table th.nine.wide,
 
355
.ui.table td.nine.wide {
 
356
  width: 56.25%;
 
357
}
 
358
.ui.table th.ten.wide,
 
359
.ui.table td.ten.wide {
 
360
  width: 62.5%;
 
361
}
 
362
.ui.table th.eleven.wide,
 
363
.ui.table td.eleven.wide {
 
364
  width: 68.75%;
 
365
}
 
366
.ui.table th.twelve.wide,
 
367
.ui.table td.twelve.wide {
 
368
  width: 75%;
 
369
}
 
370
.ui.table th.thirteen.wide,
 
371
.ui.table td.thirteen.wide {
 
372
  width: 81.25%;
 
373
}
 
374
.ui.table th.fourteen.wide,
 
375
.ui.table td.fourteen.wide {
 
376
  width: 87.5%;
 
377
}
 
378
.ui.table th.fifteen.wide,
 
379
.ui.table td.fifteen.wide {
 
380
  width: 93.75%;
 
381
}
 
382
.ui.table th.sixteen.wide,
 
383
.ui.table td.sixteen.wide {
 
384
  width: 100%;
 
385
}
 
386
/*--------------
 
387
     Celled
 
388
---------------*/
 
389
.ui.celled.table {
 
390
  color: rgba(0, 0, 0, 0.8);
 
391
}
 
392
.ui.celled.table tbody tr,
 
393
.ui.celled.table tfoot tr {
 
394
  border: none;
 
395
}
 
396
.ui.celled.table th,
 
397
.ui.celled.table td {
 
398
  border: 1px solid rgba(0, 0, 0, 0.1);
 
399
}
 
400
/* Coupling with segment */
 
401
.ui.celled.table.segment th:first-child,
 
402
.ui.celled.table.segment td:first-child {
 
403
  border-left: none;
 
404
}
 
405
.ui.celled.table.segment th:last-child,
 
406
.ui.celled.table.segment td:last-child {
 
407
  border-right: none;
 
408
}
 
409
/*--------------
 
410
    Sortable
 
411
---------------*/
 
412
.ui.sortable.table thead th {
 
413
  cursor: pointer;
 
414
  white-space: nowrap;
 
415
}
 
416
.ui.sortable.table thead th.sorted,
 
417
.ui.sortable.table thead th.sorted:hover {
 
418
  -webkit-user-select: none;
 
419
  -moz-user-select: none;
 
420
  -ms-user-select: none;
 
421
  user-select: none;
 
422
}
 
423
.ui.sortable.table thead th:after {
 
424
  display: inline-block;
 
425
  content: '';
 
426
  width: 1em;
 
427
  opacity: 0.8;
 
428
  margin: 0em 0em 0em 0.5em;
 
429
  font-family: 'Icons';
 
430
  font-style: normal;
 
431
  font-weight: normal;
 
432
  text-decoration: inherit;
 
433
}
 
434
.ui.sortable.table thead th.ascending:after {
 
435
  content: '\25b4';
 
436
}
 
437
.ui.sortable.table thead th.descending:after {
 
438
  content: '\25be';
 
439
}
 
440
/*--------------
 
441
    Inverted
 
442
---------------*/
 
443
/* Text Color */
 
444
.ui.inverted.table td {
 
445
  color: rgba(255, 255, 255, 0.9);
 
446
}
 
447
.ui.inverted.table th {
 
448
  background-color: rgba(0, 0, 0, 0.15);
 
449
  color: rgba(255, 255, 255, 0.9);
 
450
}
 
451
/* Stripes */
 
452
.ui.inverted.table tbody tr:nth-child(2n) {
 
453
  background-color: rgba(255, 255, 255, 0.06);
 
454
}
 
455
/*--------------
 
456
   Definition
 
457
---------------*/
 
458
.ui.definition.table td:first-child {
 
459
  font-weight: bold;
 
460
}
 
461
/*--------------
 
462
   Collapsing
 
463
---------------*/
 
464
.ui.collapsing.table {
 
465
  width: auto;
 
466
}
 
467
/*--------------
 
468
      Basic
 
469
---------------*/
 
470
.ui.basic.table th {
 
471
  background-color: transparent;
 
472
  padding: 0.5em;
 
473
}
 
474
.ui.basic.table tbody tr {
 
475
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
 
476
}
 
477
.ui.basic.table td {
 
478
  padding: 0.8em 0.5em;
 
479
}
 
480
.ui.basic.table tbody tr:nth-child(2n) {
 
481
  background-color: transparent !important;
 
482
}
 
483
/*--------------
 
484
     Padded
 
485
---------------*/
 
486
.ui.padded.table th,
 
487
.ui.padded.table td {
 
488
  padding: 0.8em 1em;
 
489
}
 
490
.ui.compact.table th {
 
491
  padding: 0.3em 0.5em;
 
492
}
 
493
.ui.compact.table td {
 
494
  padding: 0.2em 0.5em;
 
495
}
 
496
/*--------------
 
497
      Sizes
 
498
---------------*/
 
499
/* Small */
 
500
.ui.small.table {
 
501
  font-size: 0.875em;
 
502
}
 
503
/* Standard */
 
504
.ui.table {
 
505
  font-size: 1em;
 
506
}
 
507
/* Large */
 
508
.ui.large.table {
 
509
  font-size: 1.1em;
 
510
}