← 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/modules/dropdown.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/modules/dropdown.less
 
1
/*
 
2
 * # Semantic - Dropdown
 
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
/*******************************
 
13
            Dropdown
 
14
*******************************/
 
15
 
 
16
.ui.dropdown {
 
17
  cursor: pointer;
 
18
  position: relative;
 
19
  display: inline-block;
 
20
 
 
21
  line-height: 1;
 
22
 
 
23
  -webkit-transition:
 
24
    border-radius 0.1s ease,
 
25
    width 0.2s ease
 
26
  ;
 
27
  -moz-transition:
 
28
    border-radius 0.1s ease,
 
29
    width 0.2s ease
 
30
  ;
 
31
  transition:
 
32
    border-radius 0.1s ease,
 
33
    width 0.2s ease
 
34
  ;
 
35
 
 
36
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
37
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
 
38
  tap-highlight-color: rgba(0, 0, 0, 0);
 
39
}
 
40
 
 
41
 
 
42
/*******************************
 
43
            Content
 
44
*******************************/
 
45
 
 
46
/*--------------
 
47
     Menu
 
48
---------------*/
 
49
 
 
50
.ui.dropdown .menu {
 
51
  cursor: auto;
 
52
  position: absolute;
 
53
  display: none;
 
54
  top: 100%;
 
55
 
 
56
  margin: 0em;
 
57
  background-color: #FFFFFF;
 
58
  min-width: 100%;
 
59
 
 
60
  white-space: nowrap;
 
61
  font-size: 0.875em;
 
62
  text-shadow: none;
 
63
 
 
64
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
 
65
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
 
66
  border-radius: 0px 0px 0.325em 0.325em;
 
67
 
 
68
  -webkit-transition: opacity 0.2s ease;
 
69
  -moz-transition: opacity 0.2s ease;
 
70
  transition: opacity 0.2s ease;
 
71
  z-index: 11;
 
72
}
 
73
 
 
74
/*--------------
 
75
      Icon
 
76
---------------*/
 
77
 
 
78
.ui.dropdown > .dropdown.icon {
 
79
  width: auto;
 
80
  margin: 0em 0em 0em 1em;
 
81
}
 
82
 
 
83
.ui.dropdown > .dropdown.icon:before {
 
84
  content: "\f0d7";
 
85
}
 
86
.ui.dropdown .menu .item .dropdown.icon {
 
87
  width: auto;
 
88
  float: right;
 
89
  margin: 0em 0em 0em 0.5em;
 
90
}
 
91
.ui.dropdown .menu .item .dropdown.icon:before {
 
92
  content: "\f0da"/*rtl:"\f0d9"*/;
 
93
}
 
94
 
 
95
 
 
96
/*--------------
 
97
      Text
 
98
---------------*/
 
99
 
 
100
.ui.dropdown > .text {
 
101
  display: inline-block;
 
102
  -webkit-transition: color 0.2s ease;
 
103
  -moz-transition: color 0.2s ease;
 
104
  transition: color 0.2s ease;
 
105
}
 
106
 
 
107
/* Flyout Direction */
 
108
.ui.dropdown .menu {
 
109
  left: 0px;
 
110
}
 
111
 
 
112
 
 
113
/*--------------
 
114
    Sub Menu
 
115
---------------*/
 
116
 
 
117
.ui.dropdown .menu .menu {
 
118
  top: 0% !important;
 
119
  left: 100% !important;
 
120
  margin: 0em !important;
 
121
  border-radius: 0 0.325em 0.325em 0em !important;
 
122
}
 
123
.ui.dropdown .menu .menu:after {
 
124
  display: none;
 
125
}
 
126
 
 
127
.ui.dropdown .menu .item {
 
128
  cursor: pointer;
 
129
  border: none;
 
130
  border-top: 1px solid rgba(0, 0, 0, 0.05);
 
131
  height: auto;
 
132
 
 
133
  font-size: 0.875em;
 
134
  display: block;
 
135
  color: rgba(0, 0, 0, 0.75);
 
136
 
 
137
  padding: 0.85em 1em !important;
 
138
  font-size: 0.875rem;
 
139
  text-transform: none;
 
140
  font-weight: normal;
 
141
  text-align: left;
 
142
 
 
143
  -webkit-touch-callout: none;
 
144
}
 
145
.ui.dropdown .menu .item:before {
 
146
  display: none;
 
147
}
 
148
.ui.dropdown .menu .item .icon {
 
149
  margin-right: 0.75em;
 
150
}
 
151
 
 
152
.ui.dropdown .menu .item:first-child {
 
153
  border-top: none;
 
154
}
 
155
 
 
156
 
 
157
/*******************************
 
158
            Coupling
 
159
*******************************/
 
160
 
 
161
/* Opposite on last menu on right */
 
162
.ui.menu .right.menu .dropdown:last-child .menu,
 
163
.ui.buttons > .ui.dropdown:last-child .menu {
 
164
  left: auto;
 
165
  right: 0px;
 
166
}
 
167
.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
 
168
  content: "\f0da"/*rtl:"\f0d9"*/;
 
169
}
 
170
.ui.dropdown.icon.button > .dropdown.icon {
 
171
  margin: 0em;
 
172
}
 
173
 
 
174
 
 
175
/*******************************
 
176
            States
 
177
*******************************/
 
178
 
 
179
/* Dropdown Visible */
 
180
.ui.visible.dropdown > .menu {
 
181
  display: block;
 
182
}
 
183
 
 
184
/*--------------------
 
185
        Hover
 
186
----------------------*/
 
187
 
 
188
/* Menu Item Hover */
 
189
.ui.dropdown .menu .item:hover {
 
190
  background-color: rgba(0, 0, 0, 0.02);
 
191
  z-index: 12;
 
192
}
 
193
 
 
194
/*--------------------
 
195
        Selected
 
196
----------------------*/
 
197
 
 
198
/* Menu Item Selected */
 
199
.ui.dropdown .menu .item.selected {
 
200
  background-color: rgba(0, 0, 0, 0.02);
 
201
  z-index: 12;
 
202
}
 
203
 
 
204
/*--------------------
 
205
        Active
 
206
----------------------*/
 
207
 
 
208
/* Menu Item Active */
 
209
.ui.dropdown .menu .active.item {
 
210
  -webkit-box-shadow: none;
 
211
          box-shadow: none;
 
212
  background-color: rgba(0, 0, 0, 0.06) !important;
 
213
  border-left: none;
 
214
  border-color: transparent !important;
 
215
 
 
216
  -webkit-box-shadow: none;
 
217
  -moz-shadow: none;
 
218
  -webkit-box-shadow: none;
 
219
          box-shadow: none;
 
220
  z-index: 12;
 
221
}
 
222
 
 
223
/*--------------------
 
224
     Default Text
 
225
----------------------*/
 
226
 
 
227
.ui.dropdown > .default.text,
 
228
.ui.default.dropdown > .text {
 
229
  color: rgba(0, 0, 0, 0.5);
 
230
}
 
231
.ui.dropdown:hover > .default.text,
 
232
.ui.default.dropdown:hover > .text {
 
233
  color: rgba(0, 0, 0, 0.8);
 
234
}
 
235
 
 
236
 
 
237
/*--------------------
 
238
        Error
 
239
----------------------*/
 
240
 
 
241
.ui.dropdown.error,
 
242
.ui.dropdown.error > .text,
 
243
.ui.dropdown.error > .default.text {
 
244
  color: #D95C5C !important;
 
245
}
 
246
 
 
247
.ui.selection.dropdown.error {
 
248
  background-color: #FFFAFA;
 
249
  -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
250
  box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
251
}
 
252
.ui.selection.dropdown.error:hover {
 
253
  -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
254
  box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
255
}
 
256
 
 
257
.ui.dropdown.error > .menu,
 
258
.ui.dropdown.error > .menu .menu {
 
259
  -webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important;
 
260
  box-shadow: 0px 0px 1px 1px #E7BEBE !important;
 
261
}
 
262
 
 
263
.ui.dropdown.error > .menu .item {
 
264
  color: #D95C5C !important;
 
265
}
 
266
 
 
267
/* Item Hover */
 
268
.ui.dropdown.error > .menu .item:hover {
 
269
  background-color: #FFF2F2 !important;
 
270
}
 
271
 
 
272
/* Item Active */
 
273
.ui.dropdown.error > .menu .active.item {
 
274
  background-color: #FDCFCF !important;
 
275
}
 
276
 
 
277
 
 
278
/*******************************
 
279
           Variations
 
280
*******************************/
 
281
 
 
282
/*--------------
 
283
     Simple
 
284
---------------*/
 
285
/* Displays without javascript */
 
286
 
 
287
.ui.simple.dropdown .menu:before,
 
288
.ui.simple.dropdown .menu:after {
 
289
  display: none;
 
290
}
 
291
.ui.simple.dropdown .menu {
 
292
  display: block;
 
293
  overflow: hidden;
 
294
  top: -9999px !important;
 
295
  position: absolute;
 
296
  opacity: 0;
 
297
  width: 0;
 
298
  height: 0;
 
299
  -webkit-transition: opacity 0.2s ease-out;
 
300
  -moz-transition: opacity 0.2s ease-out;
 
301
  transition: opacity 0.2s ease-out;
 
302
}
 
303
 
 
304
.ui.simple.active.dropdown,
 
305
.ui.simple.dropdown:hover {
 
306
  border-bottom-left-radius: 0em !important;
 
307
  border-bottom-right-radius: 0em !important;
 
308
}
 
309
 
 
310
.ui.simple.active.dropdown > .menu,
 
311
.ui.simple.dropdown:hover > .menu {
 
312
  overflow: visible;
 
313
  width: auto;
 
314
  height: auto;
 
315
  top: 100% !important;
 
316
  opacity: 1;
 
317
}
 
318
.ui.simple.dropdown > .menu .item:active > .menu,
 
319
.ui.simple.dropdown:hover > .menu .item:hover > .menu {
 
320
  overflow: visible;
 
321
  width: auto;
 
322
  height: auto;
 
323
  top: 0% !important;
 
324
  left: 100% !important;
 
325
  opacity: 1;
 
326
}
 
327
.ui.simple.disabled.dropdown:hover .menu {
 
328
  display: none;
 
329
  height: 0px;
 
330
  width: 0px;
 
331
  overflow: hidden;
 
332
}
 
333
 
 
334
 
 
335
/*--------------
 
336
    Selection
 
337
---------------*/
 
338
/* Displays like a select box */
 
339
 
 
340
.ui.selection.dropdown {
 
341
  cursor: pointer;
 
342
  display: inline-block;
 
343
 
 
344
  word-wrap: break-word;
 
345
  white-space: normal;
 
346
 
 
347
  background-color: #FFFFFF;
 
348
  padding: 0.65em 1em;
 
349
 
 
350
  line-height: 1.33;
 
351
  color: rgba(0, 0, 0, 0.8);
 
352
 
 
353
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
 
354
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
 
355
  border-radius: 0.3125em !important;
 
356
}
 
357
.ui.selection.dropdown select {
 
358
  display: none;
 
359
}
 
360
.ui.selection.dropdown > .dropdown.icon {
 
361
  opacity: 0.7;
 
362
  margin: 0.2em 0em 0.2em 1.25em;
 
363
 
 
364
  -webkit-transition: opacity 0.2s ease-out;
 
365
  -moz-transition: opacity 0.2s ease-out;
 
366
  transition: opacity 0.2s ease-out;
 
367
}
 
368
 
 
369
.ui.selection.dropdown,
 
370
.ui.selection.dropdown .menu {
 
371
  -webkit-transition: -webkit-box-shadow 0.2s ease-out;
 
372
  -moz-transition: box-shadow 0.2s ease-out;
 
373
  transition: box-shadow 0.2s ease-out;
 
374
}
 
375
 
 
376
.ui.selection.dropdown .menu {
 
377
  top: 100%;
 
378
  max-height: 312px;
 
379
 
 
380
  overflow-x: hidden;
 
381
  overflow-y: auto;
 
382
 
 
383
  -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0;
 
384
  box-shadow: 0px 1px 0px 1px #E0E0E0;
 
385
  border-radius: 0px 0px 0.325em 0.325em;
 
386
}
 
387
.ui.selection.dropdown .menu:after,
 
388
.ui.selection.dropdown .menu:before {
 
389
  display: none;
 
390
}
 
391
.ui.selection.dropdown .menu img {
 
392
  height: 2.5em;
 
393
  display: inline-block;
 
394
  vertical-align: middle;
 
395
  margin-right: 0.5em;
 
396
}
 
397
 
 
398
/*--------------------
 
399
        Error
 
400
----------------------*/
 
401
.ui.selection.dropdown.error,
 
402
.ui.selection.dropdown.error .item {
 
403
  background-color: #FFFAFA;
 
404
  color: #D95C5C;
 
405
}
 
406
.ui.selection.dropdown.error {
 
407
  -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
408
  box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
409
}
 
410
 
 
411
.ui.selection.dropdown.error .menu {
 
412
  -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
 
413
  box-shadow: 0px 1px 0px 1px #E7BEBE;
 
414
  border-radius: 0px 0px 0.325em 0.325em;
 
415
}
 
416
 
 
417
 
 
418
/* Menu Item Active */
 
419
.ui.selection.dropdown.error .menu .active.item {
 
420
  background-color: #FDCFCF !important;
 
421
}
 
422
 
 
423
/* Hover */
 
424
.ui.selection.dropdown:hover {
 
425
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
 
426
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
 
427
}
 
428
.ui.selection.dropdown:hover .menu {
 
429
  -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
 
430
  box-shadow: 0px 1px 0px 1px #D3D3D3;
 
431
}
 
432
.ui.selection.dropdown:hover > .dropdown.icon {
 
433
  opacity: 1;
 
434
}
 
435
.ui.selection.dropdown.error:hover {
 
436
  -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
437
  box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
 
438
}
 
439
.ui.selection.dropdown.error:hover .menu {
 
440
  -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
 
441
  box-shadow: 0px 1px 0px 1px #E7BEBE;
 
442
}
 
443
.ui.selection.dropdown.error .menu .item:hover {
 
444
  background-color: #FFF2F2;
 
445
}
 
446
 
 
447
/* Selected */
 
448
.ui.selection.dropdown.error .menu .item.selected {
 
449
  background-color: #FFF2F2;
 
450
}
 
451
 
 
452
/* Visible */
 
453
.ui.visible.selection.dropdown {
 
454
  border-bottom-left-radius: 0em !important;
 
455
  border-bottom-right-radius: 0em !important;
 
456
}
 
457
 
 
458
/* Active */
 
459
.ui.active.selection.dropdown {
 
460
  border-radius: 0.3125em 0.3125em 0em 0em !important;
 
461
}
 
462
.ui.active.selection.dropdown > .dropdown.icon {
 
463
  opacity: 1;
 
464
}
 
465
 
 
466
/*--------------
 
467
      Fluid
 
468
---------------*/
 
469
 
 
470
.ui.fluid.dropdown {
 
471
  display: block;
 
472
}
 
473
.ui.fluid.dropdown > .dropdown.icon {
 
474
  float: right;
 
475
}
 
476
 
 
477
/*--------------
 
478
     Inline
 
479
---------------*/
 
480
 
 
481
.ui.inline.dropdown {
 
482
  cursor: pointer;
 
483
  display: inline-block;
 
484
  color: inherit;
 
485
}
 
486
.ui.inline.dropdown .dropdown.icon {
 
487
  margin: 0em 0.5em 0em 0.25em;
 
488
}
 
489
.ui.inline.dropdown .text {
 
490
  font-weight: bold;
 
491
}
 
492
.ui.inline.dropdown .menu {
 
493
  cursor: auto;
 
494
  margin-top: 0.25em;
 
495
  border-radius: 0.325em;
 
496
}
 
497
 
 
498
/*--------------
 
499
    Floating
 
500
---------------*/
 
501
 
 
502
.ui.floating.dropdown .menu {
 
503
  left: 0;
 
504
  right: auto;
 
505
 
 
506
  margin-top: 0.5em !important;
 
507
  border-radius: 0.325em;
 
508
}
 
509
 
 
510
/*--------------
 
511
     Pointing
 
512
---------------*/
 
513
 
 
514
 
 
515
.ui.pointing.dropdown .menu {
 
516
  top: 100%;
 
517
  margin-top: 0.75em;
 
518
  border-radius: 0.325em;
 
519
}
 
520
 
 
521
.ui.pointing.dropdown .menu:after {
 
522
  display: block;
 
523
  position: absolute;
 
524
  pointer-events: none;
 
525
  content: " ";
 
526
  visibility: visible;
 
527
 
 
528
  width: 0.5em;
 
529
  height: 0.5em;
 
530
  -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
 
531
  box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
 
532
 
 
533
  background-image: none;
 
534
  background-color: #FFFFFF;
 
535
 
 
536
  -webkit-transform: rotate(45deg);
 
537
  -moz-transform: rotate(45deg);
 
538
  -ms-transform: rotate(45deg);
 
539
      transform: rotate(45deg);
 
540
  z-index: 12;
 
541
}
 
542
 
 
543
.ui.pointing.dropdown .menu .active.item:first-child {
 
544
  background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 
545
  background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 
546
  background: transparent -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.03)));
 
547
  background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
 
548
}
 
549
 
 
550
/* Directions */
 
551
 
 
552
.ui.pointing.dropdown .menu:after {
 
553
  top: -0.25em;
 
554
  left: 50%;
 
555
  margin: 0em 0em 0em -0.25em;
 
556
}
 
557
.ui.top.left.pointing.dropdown .menu {
 
558
  top: 100%;
 
559
  bottom: auto;
 
560
  left: 0%;
 
561
  right: auto;
 
562
  margin: 0.75em 0em 0em;
 
563
}
 
564
.ui.top.left.pointing.dropdown .menu:after {
 
565
  top: -0.25em;
 
566
  left: 1.25em;
 
567
  right: auto;
 
568
  margin: 0em;
 
569
  -webkit-transform: rotate(45deg);
 
570
  -moz-transform: rotate(45deg);
 
571
  -ms-transform: rotate(45deg);
 
572
      transform: rotate(45deg);
 
573
}
 
574
.ui.top.right.pointing.dropdown .menu {
 
575
  top: 100%;
 
576
  bottom: auto;
 
577
  right: 0%;
 
578
  left: auto;
 
579
  margin: 0.75em 0em 0em;
 
580
}
 
581
.ui.top.right.pointing.dropdown .menu:after {
 
582
  top: -0.25em;
 
583
  left: auto;
 
584
  right: 1.25em;
 
585
  margin: 0em;
 
586
  -webkit-transform: rotate(45deg);
 
587
  -moz-transform: rotate(45deg);
 
588
  -ms-transform: rotate(45deg);
 
589
      transform: rotate(45deg);
 
590
}
 
591
 
 
592
.ui.left.pointing.dropdown .menu {
 
593
  top: 0%;
 
594
  left: 100%;
 
595
  right: auto;
 
596
  margin: 0em 0em 0em 0.75em;
 
597
}
 
598
.ui.left.pointing.dropdown .menu:after {
 
599
  top: 1em;
 
600
  left: -0.25em;
 
601
  margin: 0em 0em 0em 0em;
 
602
 
 
603
  -webkit-transform: rotate(-45deg);
 
604
  -moz-transform: rotate(-45deg);
 
605
  -ms-transform: rotate(-45deg);
 
606
      transform: rotate(-45deg);
 
607
}
 
608
 
 
609
.ui.right.pointing.dropdown .menu {
 
610
  top: 0%;
 
611
  left: auto;
 
612
  right: 100%;
 
613
  margin: 0em 0.75em 0em 0em;
 
614
}
 
615
.ui.right.pointing.dropdown .menu:after {
 
616
  top: 1em;
 
617
  left: auto;
 
618
  right: -0.25em;
 
619
  margin: 0em 0em 0em 0em;
 
620
 
 
621
  -webkit-transform: rotate(135deg);
 
622
  -moz-transform: rotate(135deg);
 
623
  -ms-transform: rotate(135deg);
 
624
      transform: rotate(135deg);
 
625
}