← 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/less/views/list.less

  • 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/less/views/list.less
 
1
/*
 
2
 * # Semantic List - Flat
 
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
 * Released: April 26 2014
 
11
 */
 
12
 
 
13
/*******************************
 
14
            List
 
15
*******************************/
 
16
 
 
17
ul.ui.list,
 
18
ol.ui.list,
 
19
.ui.list {
 
20
  list-style-type: none;
 
21
  margin: 1em 0em;
 
22
  padding: 0em;
 
23
}
 
24
ul.ui.list ul,
 
25
ol.ui.list ol,
 
26
.ui.list .list {
 
27
  margin: 0em;
 
28
  padding: 0.5em 0em 0.5em 1em;
 
29
}
 
30
 
 
31
ul.ui.list:first-child,
 
32
ol.ui.list:first-child,
 
33
.ui.list:first-child {
 
34
  margin-top: 0em;
 
35
}
 
36
 
 
37
ul.ui.list:last-child,
 
38
ol.ui.list:last-child,
 
39
.ui.list:last-child {
 
40
  margin-bottom: 0em;
 
41
}
 
42
 
 
43
 
 
44
/*******************************
 
45
            Content
 
46
*******************************/
 
47
 
 
48
/* List Item */
 
49
ul.ui.list li,
 
50
ol.ui.list li,
 
51
.ui.list .item {
 
52
  display: list-item;
 
53
  list-style-type: none;
 
54
  list-style-position: inside;
 
55
 
 
56
  padding: 0.3em 0em;
 
57
  line-height: 1.2em;
 
58
}
 
59
 
 
60
.ui.list .item:after {
 
61
  content: '';
 
62
  display: block;
 
63
  height: 0;
 
64
  clear: both;
 
65
  visibility: hidden;
 
66
}
 
67
 
 
68
/* Sub-List */
 
69
.ui.list .list {
 
70
  clear: both;
 
71
}
 
72
 
 
73
/* Icon */
 
74
.ui.list .item > .icon {
 
75
  display: block;
 
76
  float: left;
 
77
  margin: 0em 1em 0em 0em;
 
78
  padding: 0.1em 0em 0em 0em;
 
79
}
 
80
.ui.list .item > .icon:only-child {
 
81
  display: inline-block;
 
82
}
 
83
.ui.horizontal.list .item > .icon {
 
84
  margin: 0em;
 
85
  padding: 0em 0.25em 0em 0em;
 
86
}
 
87
.ui.horizontal.list .item > .icon,
 
88
.ui.horizontal.list .item > .icon + .content {
 
89
  float: none;
 
90
  display: inline-block;
 
91
}
 
92
 
 
93
/* Image */
 
94
.ui.list .item > img {
 
95
  display: block;
 
96
  float: left;
 
97
  margin-right: 1em;
 
98
  vertical-align: middle;
 
99
}
 
100
 
 
101
/* Content */
 
102
.ui.list .item > .content {
 
103
  display: inline-block;
 
104
  vertical-align: middle;
 
105
  line-height: 1.2em;
 
106
}
 
107
.ui.list .item > .icon + .content {
 
108
  display: table-cell;
 
109
  vertical-align: top;
 
110
}
 
111
 
 
112
/* Link */
 
113
.ui.list a {
 
114
  cursor: pointer;
 
115
}
 
116
.ui.list a .icon {
 
117
  color: rgba(0, 0, 0, 0.6);
 
118
 
 
119
  -webkit-transition: color 0.2s ease;
 
120
  -moz-transition: color 0.2s ease;
 
121
  transition: color 0.2s ease;
 
122
}
 
123
 
 
124
/* Header */
 
125
.ui.list .header {
 
126
  font-weight: bold;
 
127
}
 
128
.ui.list .description {
 
129
  color: rgba(0, 0, 0, 0.5);
 
130
}
 
131
 
 
132
/* Floated Content */
 
133
.ui.list .item > .left.floated {
 
134
  margin-right: 1em;
 
135
  float: left;
 
136
}
 
137
.ui.list .item > .right.floated {
 
138
  margin-left: 1em;
 
139
  float: right;
 
140
}
 
141
 
 
142
 
 
143
 
 
144
/*******************************
 
145
            Types
 
146
*******************************/
 
147
 
 
148
/*-------------------
 
149
      Horizontal
 
150
--------------------*/
 
151
 
 
152
.ui.horizontal.list {
 
153
  display: inline-block;
 
154
  font-size: 0em;
 
155
}
 
156
.ui.horizontal.list > .item {
 
157
  display: inline-block;
 
158
  margin-left: 1em;
 
159
  font-size: 1rem;
 
160
}
 
161
.ui.horizontal.list > .item:first-child {
 
162
  margin-left: 0em;
 
163
}
 
164
.ui.horizontal.list .list {
 
165
  padding-left: 0em;
 
166
  padding-bottom: 0em;
 
167
}
 
168
 
 
169
 
 
170
/*******************************
 
171
             States
 
172
*******************************/
 
173
 
 
174
/*-------------------
 
175
        Hover
 
176
--------------------*/
 
177
 
 
178
.ui.list a:hover .icon {
 
179
  color: rgba(0, 0, 0, 0.8);
 
180
}
 
181
 
 
182
 
 
183
 
 
184
/*******************************
 
185
           Variations
 
186
*******************************/
 
187
 
 
188
/*-------------------
 
189
       Inverted
 
190
--------------------*/
 
191
 
 
192
.ui.inverted.list a .icon {
 
193
  color: rgba(255, 255, 255, 0.6);
 
194
}
 
195
.ui.inverted.list .description {
 
196
  color: rgba(255, 255, 255, 0.8);
 
197
}
 
198
.ui.inverted.link.list .item {
 
199
  color: rgba(255, 255, 255, 0.4);
 
200
}
 
201
 
 
202
/*-------------------
 
203
       Link
 
204
--------------------*/
 
205
 
 
206
.ui.link.list .item {
 
207
  color: rgba(0, 0, 0, 0.3);
 
208
}
 
209
.ui.link.list a.item,
 
210
.ui.link.list .item a {
 
211
  color: rgba(0, 0, 0, 0.5);
 
212
}
 
213
.ui.link.list a.item:hover,
 
214
.ui.link.list .item a:hover {
 
215
  color: rgba(0, 0, 0, 0.8);
 
216
}
 
217
.ui.link.list a.item:active,
 
218
.ui.link.list .item a:active {
 
219
  color: rgba(0, 0, 0, 0.8);
 
220
}
 
221
.ui.link.list a.active.item,
 
222
.ui.link.list .active.item a {
 
223
  color: rgba(0, 0, 0, 0.8);
 
224
}
 
225
 
 
226
/* Inverted */
 
227
.ui.inverted.link.list a.item,
 
228
.ui.inverted.link.list .item a {
 
229
  color: rgba(255, 255, 255, 0.6);
 
230
}
 
231
.ui.inverted.link.list a.item:hover,
 
232
.ui.inverted.link.list .item a:hover {
 
233
  color: rgba(255, 255, 255, 0.8);
 
234
}
 
235
.ui.inverted.link.list a.item:active,
 
236
.ui.inverted.link.list .item a:active {
 
237
  color: rgba(255, 255, 255, 0.9);
 
238
}
 
239
.ui.inverted.link.list a.active.item,
 
240
.ui.inverted.link.list .active.item a {
 
241
  color: rgba(255, 255, 255, 0.8);
 
242
}
 
243
 
 
244
/*-------------------
 
245
      Selection
 
246
--------------------*/
 
247
 
 
248
.ui.selection.list .item {
 
249
  cursor: pointer;
 
250
  color: rgba(0, 0, 0, 0.4);
 
251
  padding: 0.5em;
 
252
 
 
253
  -webkit-transition:
 
254
    0.2s color ease,
 
255
    0.2s padding-left ease,
 
256
    0.2s background-color ease
 
257
  ;
 
258
 
 
259
     -moz-transition:
 
260
    0.2s color ease,
 
261
    0.2s padding-left ease,
 
262
    0.2s background-color ease
 
263
  ;
 
264
 
 
265
          transition:
 
266
    0.2s color ease,
 
267
    0.2s padding-left ease,
 
268
    0.2s background-color ease
 
269
  ;
 
270
}
 
271
.ui.selection.list .item:hover {
 
272
  background-color: rgba(0, 0, 0, 0.02);
 
273
  color: rgba(0, 0, 0, 0.7);
 
274
}
 
275
.ui.selection.list .item:active {
 
276
  background-color: rgba(0, 0, 0, 0.05);
 
277
  color: rgba(0, 0, 0, 0.7);
 
278
}
 
279
.ui.selection.list .item.active {
 
280
  background-color: rgba(0, 0, 0, 0.04);
 
281
  color: rgba(0, 0, 0, 0.7);
 
282
}
 
283
 
 
284
.ui.animated.list .item {
 
285
  -webkit-transition:
 
286
    0.2s color ease,
 
287
    0.2s padding-left ease,
 
288
    0.2s background-color ease
 
289
  ;
 
290
     -moz-transition:
 
291
    0.2s color ease,
 
292
    0.2s padding-left ease,
 
293
    0.2s background-color ease
 
294
  ;
 
295
          transition:
 
296
    0.2s color ease,
 
297
    0.2s padding-left ease,
 
298
    0.2s background-color ease
 
299
  ;
 
300
}
 
301
.ui.animated.list:not(.horizontal) .item:hover {
 
302
  padding-left: 1em;
 
303
}
 
304
.ui.animated.list:not(.horizontal) .item:hover .item:hover {
 
305
  padding-left: 0.5em;
 
306
}
 
307
 
 
308
 
 
309
/* Inverted */
 
310
.ui.inverted.selection.list .item {
 
311
  color: rgba(255, 255, 255, 0.6);
 
312
}
 
313
.ui.inverted.selection.list .item:hover {
 
314
  background-color: rgba(255, 255, 255, 0.04);
 
315
  color: rgba(255, 255, 255, 0.8);
 
316
}
 
317
.ui.inverted.selection.list .item:active {
 
318
  background-color: rgba(255, 255, 255, 0.1);
 
319
  color: rgba(255, 255, 255, 0.7);
 
320
}
 
321
.ui.inverted.selection.list .item.active {
 
322
  background-color: rgba(255, 255, 255, 0.08);
 
323
  color: #FFFFFF;
 
324
}
 
325
 
 
326
 
 
327
 
 
328
/*-------------------
 
329
      Bulleted
 
330
--------------------*/
 
331
 
 
332
ul.ui.list,
 
333
.ui.bulleted.list {
 
334
  margin-left: 1.5em;
 
335
}
 
336
ul.ui.list li,
 
337
.ui.bulleted.list .item {
 
338
  position: relative;
 
339
}
 
340
ul.ui.list li:before,
 
341
.ui.bulleted.list .item:before {
 
342
  position: absolute;
 
343
  left: -1.5em;
 
344
  content: '•';
 
345
}
 
346
 
 
347
ul.ui.list ul,
 
348
.ui.bulleted.list .list {
 
349
  padding-left: 1.5em;
 
350
}
 
351
 
 
352
/* Horizontal Bulleted */
 
353
ul.ui.horizontal.bulleted.list,
 
354
.ui.horizontal.bulleted.list {
 
355
  margin-left: 0em;
 
356
}
 
357
ul.ui.horizontal.bulleted.list li,
 
358
.ui.horizontal.bulleted.list .item {
 
359
  margin-left: 1.5em;
 
360
}
 
361
ul.ui.horizontal.bulleted.list li:before,
 
362
.ui.horizontal.bulleted.list .item:before {
 
363
  left: -0.9em;
 
364
}
 
365
ul.ui.horizontal.bulleted.list li:first-child,
 
366
.ui.horizontal.bulleted.list .item:first-child {
 
367
  margin-left: 0em;
 
368
}
 
369
ul.ui.horizontal.bulleted.list li:first-child::before,
 
370
.ui.horizontal.bulleted.list .item:first-child::before {
 
371
  display: none;
 
372
}
 
373
 
 
374
/*-------------------
 
375
       Ordered
 
376
--------------------*/
 
377
 
 
378
ol.ui.list,
 
379
.ui.ordered.list {
 
380
  counter-reset: ordered;
 
381
  margin-left: 2em;
 
382
  list-style-type: none;
 
383
}
 
384
ol.ui.list li,
 
385
.ui.ordered.list .item {
 
386
  list-style-type: none;
 
387
  position: relative;
 
388
}
 
389
ol.ui.list li:before,
 
390
.ui.ordered.list .item:before {
 
391
  position: absolute;
 
392
  left: -2em;
 
393
 
 
394
  counter-increment: ordered;
 
395
  content: counters(ordered, ".");
 
396
 
 
397
  text-align: right;
 
398
  vertical-align: top;
 
399
  opacity: 0.75;
 
400
}
 
401
 
 
402
ol.ui.list ol,
 
403
.ui.ordered.list .list {
 
404
  counter-reset: ordered;
 
405
  padding-left: 2.5em;
 
406
}
 
407
 
 
408
ol.ui.list ol li:before,
 
409
.ui.ordered.list .list .item:before {
 
410
  left: -2.5em;
 
411
}
 
412
 
 
413
/* Horizontal Ordered */
 
414
ol.ui.horizontal.list,
 
415
.ui.ordered.horizontal.list {
 
416
  margin-left: 0em;
 
417
}
 
418
ol.ui.horizontal.list li:before,
 
419
.ui.ordered.horizontal.list .item:before {
 
420
  position: static;
 
421
  left: 0em;
 
422
  margin: 0em 0.5em 0em 0em;
 
423
}
 
424
 
 
425
 
 
426
/*-------------------
 
427
       Divided
 
428
--------------------*/
 
429
 
 
430
.ui.divided.list > .item,
 
431
.ui.divided.list:not(.horizontal) > .list {
 
432
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
433
  padding-left: 0.5em;
 
434
  padding-right: 0.5em;
 
435
}
 
436
.ui.divided.list .item .menu .item {
 
437
  border-width: 0px;
 
438
}
 
439
.ui.divided.list .item:first-child {
 
440
  border-top-width: 0px;
 
441
}
 
442
 
 
443
/* Sub Menu */
 
444
.ui.divided.list:not(.horizontal) .list:not(.icon) {
 
445
  margin-left: -0.5em;
 
446
  margin-right: -0.5em;
 
447
}
 
448
.ui.divided.list:not(.horizontal) .list .item {
 
449
  padding-left: 1em;
 
450
  padding-right: 1em;
 
451
}
 
452
.ui.divided.list:not(.horizontal) .list .item:first-child {
 
453
  border-top-width: 1px;
 
454
}
 
455
 
 
456
/* Divided bulleted */
 
457
.ui.divided.bulleted.list {
 
458
  margin-left: 0em;
 
459
}
 
460
.ui.divided.bulleted.list .item {
 
461
  padding-left: 1.5em;
 
462
}
 
463
.ui.divided.bulleted.list .item:before {
 
464
  left: 0.5em;
 
465
}
 
466
 
 
467
/* Divided ordered */
 
468
.ui.divided.ordered.list {
 
469
  margin-left: 0em;
 
470
}
 
471
.ui.divided.ordered.list > .item {
 
472
  padding-left: 2em;
 
473
  padding-right: 2em;
 
474
}
 
475
.ui.divided.ordered.list > .item:before {
 
476
  left: 0.5em;
 
477
}
 
478
.ui.divided.ordered.list .item .list {
 
479
  margin-left: -2em;
 
480
  margin-right: -2em;
 
481
}
 
482
 
 
483
 
 
484
/* Divided horizontal */
 
485
.ui.divided.horizontal.list {
 
486
  margin-left: 0em;
 
487
}
 
488
.ui.divided.horizontal.list > .item {
 
489
  border-top: none;
 
490
  border-left: 1px solid rgba(0, 0, 0, 0.1);
 
491
  margin: 0em;
 
492
  padding-left: 0.75em;
 
493
  padding-right: 0.75em;
 
494
 
 
495
  line-height: 0.6em;
 
496
}
 
497
.ui.horizontal.divided.list > .item:first-child {
 
498
  border-left: none;
 
499
  padding-left: 0em;
 
500
}
 
501
 
 
502
/* Inverted */
 
503
.ui.divided.inverted.list > .item,
 
504
.ui.divided.inverted.list > .list {
 
505
  border-color: rgba(255, 255, 255, 0.2);
 
506
}
 
507
.ui.divided.inverted.horizontal.list .item {
 
508
  border-color: rgba(255, 255, 255, 0.2);
 
509
}
 
510
 
 
511
 
 
512
 
 
513
/*-------------------
 
514
        Celled
 
515
--------------------*/
 
516
 
 
517
.ui.celled.list > .item,
 
518
.ui.celled.list > .list {
 
519
  border-top: 1px solid rgba(0, 0, 0, 0.1);
 
520
  padding-left: 0.5em;
 
521
  padding-right: 0.5em;
 
522
}
 
523
.ui.celled.list > .item:last-child {
 
524
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
525
}
 
526
 
 
527
/* Sub Menu */
 
528
.ui.celled.list .item .list {
 
529
  margin-left: -0.5em;
 
530
  margin-right: -0.5em;
 
531
}
 
532
.ui.celled.list .item .list .item {
 
533
  border-width: 0px;
 
534
}
 
535
.ui.celled.list .list .item:first-child {
 
536
  border-top-width: 0px;
 
537
}
 
538
 
 
539
/* Celled Bulleted */
 
540
.ui.celled.bulleted.list {
 
541
  margin-left: 0em;
 
542
}
 
543
.ui.celled.bulleted.list > .item {
 
544
  padding-left: 1.5em;
 
545
}
 
546
.ui.celled.bulleted.list > .item:before {
 
547
  left: 0.5em;
 
548
}
 
549
 
 
550
/* Celled Ordered */
 
551
.ui.celled.ordered.list {
 
552
  margin-left: 0em;
 
553
}
 
554
.ui.celled.ordered.list .item {
 
555
  padding-left: 2em;
 
556
  padding-right: 2em;
 
557
}
 
558
.ui.celled.ordered.list .item:before {
 
559
  left: 0.5em;
 
560
}
 
561
.ui.celled.ordered.list .item .list {
 
562
  margin-left: -2em;
 
563
  margin-right: -2em;
 
564
}
 
565
 
 
566
/* Celled Horizontal */
 
567
.ui.horizontal.celled.list {
 
568
  margin-left: 0em;
 
569
}
 
570
.ui.horizontal.celled.list .item {
 
571
  border-top: none;
 
572
  border-left: 1px solid rgba(0, 0, 0, 0.1);
 
573
  margin: 0em;
 
574
  padding-left: 0.75em;
 
575
  padding-right: 0.75em;
 
576
 
 
577
  line-height: 0.6em;
 
578
}
 
579
.ui.horizontal.celled.list .item:last-child {
 
580
  border-bottom: none;
 
581
  border-right: 1px solid rgba(0, 0, 0, 0.1);
 
582
}
 
583
 
 
584
/* Inverted */
 
585
.ui.celled.inverted.list > .item,
 
586
.ui.celled.inverted.list > .list {
 
587
  border-color: rgba(255, 255, 255, 0.2);
 
588
}
 
589
.ui.celled.inverted.horizontal.list .item {
 
590
  border-color: rgba(255, 255, 255, 0.2);
 
591
}
 
592
 
 
593
 
 
594
 
 
595
/*-------------------
 
596
       Relaxed
 
597
--------------------*/
 
598
 
 
599
.ui.relaxed.list:not(.horizontal) .item {
 
600
  padding-top: 0.5em;
 
601
  padding-bottom: 0.5em;
 
602
}
 
603
.ui.relaxed.list .header {
 
604
  margin-bottom: 0.25em;
 
605
}
 
606
.ui.horizontal.relaxed.list .item {
 
607
  padding-left: 1.25em;
 
608
  padding-right: 1.25em;
 
609
}
 
610
 
 
611
.ui.very.relaxed.list:not(.horizontal) .item {
 
612
  padding-top: 1em;
 
613
  padding-bottom: 1em;
 
614
}
 
615
.ui.very.relaxed.list .header {
 
616
  margin-bottom: 0.5em;
 
617
}
 
618
.ui.horizontal.very.relaxed.list .item {
 
619
  padding-left: 2em;
 
620
  padding-right: 2em;
 
621
}
 
622
 
 
623
 
 
624
/*-------------------
 
625
      Sizes
 
626
--------------------*/
 
627
 
 
628
.ui.mini.list .item {
 
629
  font-size: 0.7rem;
 
630
}
 
631
.ui.tiny.list .item {
 
632
  font-size: 0.8125rem;
 
633
}
 
634
.ui.small.list .item {
 
635
  font-size: 0.875rem;
 
636
}
 
637
.ui.list .item {
 
638
  font-size: 1em;
 
639
}
 
640
.ui.large.list .item {
 
641
  font-size: 1.125rem;
 
642
}
 
643
.ui.big.list .item {
 
644
  font-size: 1.25rem;
 
645
}
 
646
.ui.huge.list .item {
 
647
  font-size: 1.375rem;
 
648
}
 
649
.ui.massive.list .item {
 
650
  font-size: 1.5rem;
 
651
}
 
 
b'\\ No newline at end of file'