← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/less/views/item.less

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • 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/item.less
 
1
/*
 
2
 * # Semantic Item View
 
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 17 2014
 
11
 */
 
12
 
 
13
 
 
14
/*******************************
 
15
            Standard
 
16
*******************************/
 
17
 
 
18
 
 
19
/*--------------
 
20
      Items
 
21
---------------*/
 
22
 
 
23
.ui.items {
 
24
  margin: 1em 0em 0em;
 
25
}
 
26
.ui.items:first-child {
 
27
  margin-top: 0em;
 
28
}
 
29
.ui.items:last-child {
 
30
  margin-bottom: -1em;
 
31
}
 
32
 
 
33
/* Force Clearing */
 
34
.ui.items:after {
 
35
  display: block;
 
36
  content: ' ';
 
37
  height: 0px;
 
38
  clear: both;
 
39
  overflow: hidden;
 
40
  visibility: hidden;
 
41
}
 
42
 
 
43
/*--------------
 
44
      Item
 
45
---------------*/
 
46
 
 
47
.ui.items > .row > .item,
 
48
.ui.items > .item {
 
49
  display: block;
 
50
  float: left;
 
51
  position: relative;
 
52
  top: 0px;
 
53
 
 
54
  width: 316px;
 
55
  min-height: 375px;
 
56
  margin: 0em 0.5em 2.5em;
 
57
  padding: 0em;
 
58
 
 
59
  background-color: #FFFFFF;
 
60
  line-height: 1.2;
 
61
  font-size: 1em;
 
62
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
63
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
64
 
 
65
  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
 
66
  border-radius: 0.33em;
 
67
 
 
68
  -webkit-transition: -webkit-box-shadow 0.2s ease;
 
69
  -moz-transition: box-shadow 0.2s ease;
 
70
  transition: box-shadow 0.2s ease;
 
71
 
 
72
  padding: 0.5em;
 
73
}
 
74
 
 
75
.ui.items a.item,
 
76
.ui.items .item a {
 
77
  cursor: pointer;
 
78
}
 
79
 
 
80
.ui.items .item,
 
81
.ui.items .item > .image,
 
82
.ui.items .item > .image .overlay,
 
83
.ui.items .item > .content,
 
84
.ui.items .item > .content > .meta,
 
85
.ui.items .item > .content > .extra {
 
86
  -webkit-box-sizing: border-box;
 
87
  -moz-box-sizing: border-box;
 
88
  -ms-box-sizing: border-box;
 
89
  box-sizing: border-box;
 
90
}
 
91
 
 
92
/*--------------
 
93
      Images
 
94
---------------*/
 
95
 
 
96
.ui.items .item > .image {
 
97
  display: block;
 
98
  position: relative;
 
99
  background-color: rgba(0, 0, 0, 0.05);
 
100
 
 
101
  -webkit-box-sizing: border-box;
 
102
  -moz-box-sizing: border-box;
 
103
  -ms-box-sizing: border-box;
 
104
  box-sizing: border-box;
 
105
  border-radius: 0.2em;
 
106
}
 
107
.ui.items .item > .image > img {
 
108
  display: block;
 
109
  width: 100%;
 
110
}
 
111
 
 
112
 
 
113
/*--------------
 
114
     Content
 
115
---------------*/
 
116
.ui.items .item > .content {
 
117
  padding: 0.75em 0.5em;
 
118
}
 
119
.ui.items .item > .content > .name {
 
120
  display: block;
 
121
 
 
122
  font-size: 1.25em;
 
123
  font-weight: bold;
 
124
  margin-bottom: 0.2em;
 
125
  color: rgba(0, 0, 0, 0.7);
 
126
}
 
127
.ui.items .item > .content > .description {
 
128
  clear: both;
 
129
  margin: 0em 0em;
 
130
  color: rgba(0, 0, 0, 0.45);
 
131
}
 
132
.ui.items .item > .content > .description p {
 
133
  margin: 0em 0em 0.2em;
 
134
}
 
135
.ui.items .item > .content > .description p:last-child {
 
136
  margin-bottom: 0em;
 
137
}
 
138
 
 
139
/*--------------
 
140
      Meta
 
141
---------------*/
 
142
 
 
143
.ui.items .item .meta {
 
144
  float: right;
 
145
  color: rgba(0, 0, 0, 0.35);
 
146
}
 
147
.ui.items .item > .content > .meta + .name {
 
148
  float: left;
 
149
}
 
150
 
 
151
 
 
152
/*--------------
 
153
     Labels
 
154
---------------*/
 
155
 
 
156
/*-----star----- */
 
157
 
 
158
/* hover */
 
159
.ui.items .item .star.label:hover::after {
 
160
  border-right-color: #F6EFC3;
 
161
}
 
162
.ui.items .item .star.label:hover::after {
 
163
  border-top-color: #F6EFC3;
 
164
}
 
165
.ui.items .item .star.label:hover .icon {
 
166
  color: #AC9400
 
167
}
 
168
 
 
169
/* active */
 
170
.ui.items .item .star.label.active::after {
 
171
  border-right-color: #F6EFC3;
 
172
}
 
173
.ui.items .item .star.label.active::after {
 
174
  border-top-color: #F6EFC3;
 
175
}
 
176
.ui.items .item .star.label.active .icon {
 
177
  color: #AC9400
 
178
}
 
179
 
 
180
/*-----like----- */
 
181
 
 
182
/* hover */
 
183
.ui.items .item .like.label:hover::after {
 
184
  border-right-color: #F5E1E2;
 
185
}
 
186
.ui.items .item .like.label.active::after {
 
187
  border-top-color: #F5E1E2;
 
188
}
 
189
.ui.items .item .like.label:hover .icon {
 
190
  color: #EF404A
 
191
}
 
192
/* active */
 
193
.ui.items .item .like.label.active::after {
 
194
  border-right-color: #F5E1E2;
 
195
}
 
196
.ui.items .item .like.label.active::after {
 
197
  border-top-color: #F5E1E2;
 
198
}
 
199
.ui.items .item .like.label.active .icon {
 
200
  color: #EF404A
 
201
}
 
202
 
 
203
 
 
204
 
 
205
/*--------------
 
206
      Extra
 
207
---------------*/
 
208
 
 
209
.ui.items .item .extra {
 
210
  position: absolute;
 
211
  width: 100%;
 
212
  padding: 0em 0.5em;
 
213
  bottom: -2em;
 
214
  left: 0em;
 
215
  height: 1.5em;
 
216
  color: rgba(0, 0, 0, 0.25);
 
217
 
 
218
  -webkit-transition: color 0.2s ease;
 
219
  -moz-transition: color 0.2s ease;
 
220
  transition: color 0.2s ease;
 
221
}
 
222
.ui.items .item .extra > img {
 
223
  display: inline-block;
 
224
  border-radius: 500px 500px 500px 500px;
 
225
  margin-right: 0.25em;
 
226
  vertical-align: middle;
 
227
  width: 2em;
 
228
}
 
229
.ui.items .item .extra .left {
 
230
  float: left;
 
231
}
 
232
.ui.items .item .extra .right {
 
233
  float: right;
 
234
}
 
235
 
 
236
 
 
237
/*******************************
 
238
           States
 
239
*******************************/
 
240
 
 
241
.ui.items .item:hover {
 
242
  cursor: pointer;
 
243
  z-index: 5;
 
244
 
 
245
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
 
246
 
 
247
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
 
248
}
 
249
.ui.items .item:hover .extra {
 
250
  color: rgba(0, 0, 0, 0.5);
 
251
}
 
252
 
 
253
.ui.items .item:nth-of-type(6n+1):hover {
 
254
  border-bottom-color: #6ECFF5 !important;
 
255
}
 
256
.ui.items .item:nth-of-type(6n+2):hover {
 
257
  border-bottom-color: #5C6166 !important;
 
258
}
 
259
.ui.items .item:nth-of-type(6n+3):hover {
 
260
  border-bottom-color: #A1CF64 !important;
 
261
}
 
262
.ui.items .item:nth-of-type(6n+4):hover {
 
263
  border-bottom-color: #D95C5C !important;
 
264
}
 
265
.ui.items .item:nth-of-type(6n+5):hover {
 
266
  border-bottom-color: #00B5AD !important;
 
267
}
 
268
.ui.items .item:nth-of-type(6n+6):hover {
 
269
  border-bottom-color: #564F8A !important;
 
270
}
 
271
 
 
272
 
 
273
/*******************************
 
274
           Variations
 
275
*******************************/
 
276
 
 
277
 
 
278
/*--------------
 
279
    Connected
 
280
---------------*/
 
281
 
 
282
.ui.connected.items {
 
283
  display: table;
 
284
  width: 100%;
 
285
  margin-left: 0em !important;
 
286
  margin-right: 0em !important;
 
287
}
 
288
.ui.connected.items > .row > .item,
 
289
.ui.connected.items > .item {
 
290
  float: none;
 
291
  display: table-cell;
 
292
  vertical-align: top;
 
293
  height: auto;
 
294
  border-radius: 0px;
 
295
  margin: 0em;
 
296
  width: 33.33%;
 
297
}
 
298
.ui.connected.items > .row {
 
299
  display: table;
 
300
  margin: 0.5em 0em;
 
301
}
 
302
.ui.connected.items > .row:first-child {
 
303
  margin-top: 0em;
 
304
}
 
305
 
 
306
/* Borders */
 
307
.ui.connected.items > .item,
 
308
.ui.connected.items > .row:last-child > .item {
 
309
  border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
 
310
}
 
311
.ui.connected.items > .row:last-child > .item:first-child,
 
312
.ui.connected.items > .item:first-child {
 
313
  border-radius: 0em 0em 0em 0.33em;
 
314
}
 
315
.ui.connected.items > .row:last-child > .item:last-child,
 
316
.ui.connected.items > .item:last-child {
 
317
  border-radius: 0em 0em 0.33em 0em;
 
318
}
 
319
 
 
320
 
 
321
/* Hover */
 
322
.ui.connected.items .item:hover {
 
323
  border-bottom-width: 0.2em;
 
324
}
 
325
 
 
326
 
 
327
/* Item Count */
 
328
.ui.one.connected.items > .row > .item,
 
329
.ui.one.connected.items > .item {
 
330
  width: 50%;
 
331
  padding-left: 2%;
 
332
  padding-right: 2%;
 
333
}
 
334
.ui.two.connected.items > .row > .item,
 
335
.ui.two.connected.items > .item {
 
336
  width: 50%;
 
337
  padding-left: 1%;
 
338
  padding-right: 1%;
 
339
}
 
340
.ui.three.connected.items > .row > .item,
 
341
.ui.three.connected.items > .item {
 
342
  width: 33.333%;
 
343
  padding-left: 1%;
 
344
  padding-right: 1%;
 
345
}
 
346
.ui.four.connected.items > .row > .item,
 
347
.ui.four.connected.items > .item {
 
348
  width: 25%;
 
349
  padding-left: 0.5%;
 
350
  padding-right: 0.5%;
 
351
}
 
352
.ui.five.connected.items > .row > .item,
 
353
.ui.five.connected.items > .item {
 
354
  width: 20%;
 
355
  padding-left: 0.5%;
 
356
  padding-right: 0.5%;
 
357
}
 
358
.ui.six.connected.items > .row > .item,
 
359
.ui.six.connected.items > .item {
 
360
  width: 16.66%;
 
361
  padding-left: 0.5%;
 
362
  padding-right: 0.5%;
 
363
}
 
364
.ui.seven.connected.items > .row > .item,
 
365
.ui.seven.connected.items > .item {
 
366
  width: 14.28%;
 
367
  padding-left: 0.5%;
 
368
  padding-right: 0.5%;
 
369
}
 
370
.ui.eight.connected.items > .row > .item,
 
371
.ui.eight.connected.items > .item {
 
372
  width: 12.5%;
 
373
  padding-left: 0.25%;
 
374
  padding-right: 0.25%;
 
375
}
 
376
.ui.nine.connected.items > .row > .item,
 
377
.ui.nine.connected.items > .item {
 
378
  width: 11.11%;
 
379
  padding-left: 0.25%;
 
380
  padding-right: 0.25%;
 
381
}
 
382
.ui.ten.connected.items > .row > .item,
 
383
.ui.ten.connected.items > .item {
 
384
  width: 10%;
 
385
  padding-left: 0.2%;
 
386
  padding-right: 0.2%;
 
387
}
 
388
.ui.eleven.connected.items > .row > .item,
 
389
.ui.eleven.connected.items > .item {
 
390
  width: 9.09%;
 
391
  padding-left: 0.2%;
 
392
  padding-right: 0.2%;
 
393
}
 
394
.ui.twelve.connected.items > .row > .item,
 
395
.ui.twelve.connected.items > .item {
 
396
  width: 8.3333%;
 
397
  padding-left: 0.1%;
 
398
  padding-right: 0.1%;
 
399
}
 
400
 
 
401
/*-------------------
 
402
      Responsive
 
403
--------------------*/
 
404
 
 
405
@media only screen and (max-width : 768px) {
 
406
  .ui.stackable.items {
 
407
    display: block !important;
 
408
  }
 
409
  .ui.stackable.items > .item,
 
410
  .ui.stackable.items > .row > .item {
 
411
    display: block !important;
 
412
    height: auto !important;
 
413
    width: 100% !important;
 
414
    padding: 0% !important;
 
415
  }
 
416
}
 
417
 
 
418
/*--------------------
 
419
      Horizontal
 
420
---------------------*/
 
421
.ui.horizontal.items > .item,
 
422
.ui.items > .horizontal.item {
 
423
  display: table;
 
424
}
 
425
 
 
426
.ui.horizontal.items > .item > .image,
 
427
.ui.items > .horizontal.item > .image {
 
428
  display: table-cell;
 
429
  width: 50%;
 
430
}
 
431
.ui.horizontal.items > .item > .image + .content,
 
432
.ui.items > .horizontal.item > .image + .content {
 
433
  width: 50%;
 
434
  display: table-cell;
 
435
}
 
436
.ui.horizontal.items > .item > .content,
 
437
.ui.items > .horizontal.item > .content {
 
438
  padding: 1% 1.7% 11% 3%;
 
439
  vertical-align: top;
 
440
}
 
441
 
 
442
.ui.horizontal.items > .item > .meta,
 
443
.ui.items > .horizontal.item > .meta {
 
444
  position: absolute;
 
445
  padding: 0%;
 
446
  bottom: 7%;
 
447
  left: 3%;
 
448
  width: 94%;
 
449
}
 
450
.ui.horizontal.items > .item > .image + .content + .meta,
 
451
.ui.items > .horizontal.item > .image + .content + .meta {
 
452
  bottom: 7%;
 
453
  left: 53%;
 
454
  width: 44%;
 
455
}
 
456
 
 
457
 
 
458
.ui.horizontal.items > .item .avatar,
 
459
.ui.items > .horizontal.item .avatar {
 
460
  width: 11.5%;
 
461
}
 
462
 
 
463
.ui.items > .item .avatar {
 
464
  max-width: 25px;
 
465
}
 
466
 
 
467
/*--------------
 
468
    Item Count
 
469
---------------*/
 
470
 
 
471
 
 
472
.ui.one.items {
 
473
  margin-left: -2%;
 
474
  margin-right: -2%;
 
475
}
 
476
.ui.one.items > .item {
 
477
  width: 100%;
 
478
  margin-left: 2%;
 
479
  margin-right: 2%;
 
480
}
 
481
 
 
482
.ui.two.items {
 
483
  margin-left: -1%;
 
484
  margin-right: -1%;
 
485
}
 
486
.ui.two.items > .item {
 
487
  width: 48%;
 
488
  margin-left: 1%;
 
489
  margin-right: 1%;
 
490
}
 
491
.ui.two.items > .item:nth-child(2n+1) {
 
492
  clear: left;
 
493
}
 
494
 
 
495
.ui.three.items {
 
496
  margin-left: -1%;
 
497
  margin-right: -1%;
 
498
}
 
499
.ui.three.items > .item {
 
500
  width: 31.333%;
 
501
  margin-left: 1%;
 
502
  margin-right: 1%;
 
503
}
 
504
.ui.three.items > .item:nth-child(3n+1) {
 
505
  clear: left;
 
506
}
 
507
 
 
508
.ui.four.items {
 
509
  margin-left: -0.5%;
 
510
  margin-right: -0.5%;
 
511
}
 
512
.ui.four.items > .item {
 
513
  width: 24%;
 
514
  margin-left: 0.5%;
 
515
  margin-right: 0.5%;
 
516
}
 
517
.ui.four.items > .item:nth-child(4n+1) {
 
518
  clear: left;
 
519
}
 
520
 
 
521
.ui.five.items {
 
522
  margin-left: -0.5%;
 
523
  margin-right: -0.5%;
 
524
}
 
525
.ui.five.items > .item {
 
526
  width: 19%;
 
527
  margin-left: 0.5%;
 
528
  margin-right: 0.5%;
 
529
}
 
530
.ui.five.items > .item:nth-child(5n+1) {
 
531
  clear: left;
 
532
}
 
533
 
 
534
.ui.six.items {
 
535
  margin-left: -0.5%;
 
536
  margin-right: -0.5%;
 
537
}
 
538
.ui.six.items > .item {
 
539
  width: 15.66%;
 
540
  margin-left: 0.5%;
 
541
  margin-right: 0.5%;
 
542
}
 
543
.ui.six.items > .item:nth-child(6n+1) {
 
544
  clear: left;
 
545
}
 
546
 
 
547
.ui.seven.items {
 
548
  margin-left: -0.5%;
 
549
  margin-right: -0.5%;
 
550
}
 
551
.ui.seven.items > .item {
 
552
  width: 13.28%;
 
553
  margin-left: 0.5%;
 
554
  margin-right: 0.5%;
 
555
  font-size: 11px;
 
556
}
 
557
.ui.seven.items > .item:nth-child(7n+1) {
 
558
  clear: left;
 
559
}
 
560
 
 
561
.ui.eight.items {
 
562
  margin-left: -0.25%;
 
563
  margin-right: -0.25%;
 
564
}
 
565
.ui.eight.items > .item {
 
566
  width: 12.0%;
 
567
  margin-left: 0.25%;
 
568
  margin-right: 0.25%;
 
569
  font-size: 11px;
 
570
}
 
571
.ui.eight.items > .item:nth-child(8n+1) {
 
572
  clear: left;
 
573
}
 
574
 
 
575
.ui.nine.items {
 
576
  margin-left: -0.25%;
 
577
  margin-right: -0.25%;
 
578
}
 
579
.ui.nine.items > .item {
 
580
  width: 10.61%;
 
581
  margin-left: 0.25%;
 
582
  margin-right: 0.25%;
 
583
  font-size: 10px;
 
584
}
 
585
.ui.nine.items > .item:nth-child(9n+1) {
 
586
  clear: left;
 
587
}
 
588
 
 
589
.ui.ten.items {
 
590
  margin-left: -0.2%;
 
591
  margin-right: -0.2%;
 
592
}
 
593
.ui.ten.items > .item {
 
594
  width: 9.6%;
 
595
  margin-left: 0.2%;
 
596
  margin-right: 0.2%;
 
597
  font-size: 10px;
 
598
}
 
599
.ui.ten.items > .item:nth-child(10n+1) {
 
600
  clear: left;
 
601
}
 
602
 
 
603
.ui.eleven.items {
 
604
  margin-left: -0.2%;
 
605
  margin-right: -0.2%;
 
606
}
 
607
.ui.eleven.items > .item {
 
608
  width: 8.69%;
 
609
  margin-left: 0.2%;
 
610
  margin-right: 0.2%;
 
611
  font-size: 9px;
 
612
}
 
613
.ui.eleven.items > .item:nth-child(11n+1) {
 
614
  clear: left;
 
615
}
 
616
 
 
617
.ui.twelve.items {
 
618
  margin-left: -0.1%;
 
619
  margin-right: -0.1%;
 
620
}
 
621
.ui.twelve.items > .item {
 
622
  width: 8.1333%;
 
623
  margin-left: 0.1%;
 
624
  margin-right: 0.1%;
 
625
  font-size: 9px;
 
626
}
 
627
.ui.twelve.items > .item:nth-child(12n+1) {
 
628
  clear: left;
 
629
}
 
630