semantic-ui-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +26 -0
  6. data/Rakefile +1 -0
  7. data/lib/generators/semantic/install/install_generator.rb +38 -0
  8. data/lib/generators/semantic/install/templates/semantic-ui.js +21 -0
  9. data/lib/generators/semantic/install/templates/semantic-ui/collections.less +6 -0
  10. data/lib/generators/semantic/install/templates/semantic-ui/elements.less +11 -0
  11. data/lib/generators/semantic/install/templates/semantic-ui/modules.less +18 -0
  12. data/lib/generators/semantic/install/templates/semantic-ui/views.less +6 -0
  13. data/lib/semantic/ui/rails.rb +10 -0
  14. data/lib/semantic/ui/rails/engine.rb +8 -0
  15. data/lib/semantic/ui/rails/version.rb +7 -0
  16. data/semantic-ui-rails.gemspec +23 -0
  17. data/vendor/assets/fonts/icons.eot +0 -0
  18. data/vendor/assets/fonts/icons.svg +450 -0
  19. data/vendor/assets/fonts/icons.ttf +0 -0
  20. data/vendor/assets/fonts/icons.woff +0 -0
  21. data/vendor/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  22. data/vendor/assets/images/semantic-ui/loader-large.gif +0 -0
  23. data/vendor/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  24. data/vendor/assets/images/semantic-ui/loader-medium.gif +0 -0
  25. data/vendor/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  26. data/vendor/assets/images/semantic-ui/loader-mini.gif +0 -0
  27. data/vendor/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  28. data/vendor/assets/images/semantic-ui/loader-small.gif +0 -0
  29. data/vendor/assets/javascripts/semantic-ui/accordion.js +411 -0
  30. data/vendor/assets/javascripts/semantic-ui/behavior/api.js +666 -0
  31. data/vendor/assets/javascripts/semantic-ui/behavior/colorize.js +271 -0
  32. data/vendor/assets/javascripts/semantic-ui/behavior/form.js +657 -0
  33. data/vendor/assets/javascripts/semantic-ui/behavior/state.js +752 -0
  34. data/vendor/assets/javascripts/semantic-ui/carousel.js +327 -0
  35. data/vendor/assets/javascripts/semantic-ui/chatroom.js +766 -0
  36. data/vendor/assets/javascripts/semantic-ui/checkbox.js +348 -0
  37. data/vendor/assets/javascripts/semantic-ui/dimmer.js +525 -0
  38. data/vendor/assets/javascripts/semantic-ui/dropdown.js +697 -0
  39. data/vendor/assets/javascripts/semantic-ui/modal.js +478 -0
  40. data/vendor/assets/javascripts/semantic-ui/nag.js +542 -0
  41. data/vendor/assets/javascripts/semantic-ui/popup.js +721 -0
  42. data/vendor/assets/javascripts/semantic-ui/rating.js +358 -0
  43. data/vendor/assets/javascripts/semantic-ui/search.js +770 -0
  44. data/vendor/assets/javascripts/semantic-ui/shape.js +776 -0
  45. data/vendor/assets/javascripts/semantic-ui/sidebar.js +489 -0
  46. data/vendor/assets/javascripts/semantic-ui/tab.js +674 -0
  47. data/vendor/assets/javascripts/semantic-ui/transition.js +645 -0
  48. data/vendor/assets/javascripts/semantic-ui/video.js +459 -0
  49. data/vendor/assets/stylesheets/semantic-ui/collections/breadcrumb.less +79 -0
  50. data/vendor/assets/stylesheets/semantic-ui/collections/form.less +536 -0
  51. data/vendor/assets/stylesheets/semantic-ui/collections/grid.less +655 -0
  52. data/vendor/assets/stylesheets/semantic-ui/collections/menu.less +1736 -0
  53. data/vendor/assets/stylesheets/semantic-ui/collections/message.less +337 -0
  54. data/vendor/assets/stylesheets/semantic-ui/collections/table.less +526 -0
  55. data/vendor/assets/stylesheets/semantic-ui/elements/button.less +1294 -0
  56. data/vendor/assets/stylesheets/semantic-ui/elements/divider.less +200 -0
  57. data/vendor/assets/stylesheets/semantic-ui/elements/header.less +325 -0
  58. data/vendor/assets/stylesheets/semantic-ui/elements/icon.less +449 -0
  59. data/vendor/assets/stylesheets/semantic-ui/elements/image.less +170 -0
  60. data/vendor/assets/stylesheets/semantic-ui/elements/input.less +287 -0
  61. data/vendor/assets/stylesheets/semantic-ui/elements/label.less +805 -0
  62. data/vendor/assets/stylesheets/semantic-ui/elements/loader.less +178 -0
  63. data/vendor/assets/stylesheets/semantic-ui/elements/progress.less +353 -0
  64. data/vendor/assets/stylesheets/semantic-ui/elements/segment.less +465 -0
  65. data/vendor/assets/stylesheets/semantic-ui/elements/step.less +294 -0
  66. data/vendor/assets/stylesheets/semantic-ui/modules/accordion.less +135 -0
  67. data/vendor/assets/stylesheets/semantic-ui/modules/carousel.less +71 -0
  68. data/vendor/assets/stylesheets/semantic-ui/modules/chatroom.less +271 -0
  69. data/vendor/assets/stylesheets/semantic-ui/modules/checkbox.less +378 -0
  70. data/vendor/assets/stylesheets/semantic-ui/modules/dimmer.less +230 -0
  71. data/vendor/assets/stylesheets/semantic-ui/modules/dropdown.less +506 -0
  72. data/vendor/assets/stylesheets/semantic-ui/modules/extra.transition.less +1197 -0
  73. data/vendor/assets/stylesheets/semantic-ui/modules/modal.less +154 -0
  74. data/vendor/assets/stylesheets/semantic-ui/modules/nag.less +175 -0
  75. data/vendor/assets/stylesheets/semantic-ui/modules/popup.less +238 -0
  76. data/vendor/assets/stylesheets/semantic-ui/modules/rating.less +151 -0
  77. data/vendor/assets/stylesheets/semantic-ui/modules/reveal.less +367 -0
  78. data/vendor/assets/stylesheets/semantic-ui/modules/search.less +275 -0
  79. data/vendor/assets/stylesheets/semantic-ui/modules/shape.less +115 -0
  80. data/vendor/assets/stylesheets/semantic-ui/modules/sidebar.less +147 -0
  81. data/vendor/assets/stylesheets/semantic-ui/modules/tab.less +59 -0
  82. data/vendor/assets/stylesheets/semantic-ui/modules/transition.less +839 -0
  83. data/vendor/assets/stylesheets/semantic-ui/modules/video.less +99 -0
  84. data/vendor/assets/stylesheets/semantic-ui/views/comment.less +221 -0
  85. data/vendor/assets/stylesheets/semantic-ui/views/feed.less +151 -0
  86. data/vendor/assets/stylesheets/semantic-ui/views/item.less +641 -0
  87. data/vendor/assets/stylesheets/semantic-ui/views/list.less +491 -0
  88. data/vendor/assets/stylesheets/semantic-ui/views/sitemap.less +47 -0
  89. data/vendor/assets/stylesheets/semantic-ui/views/statistic.less +34 -0
  90. metadata +161 -0
@@ -0,0 +1,1736 @@
1
+ /*
2
+ * # Semantic Menu
3
+ * http://github.com/quirkyinc/semantic
4
+ *
5
+ *
6
+ * Copyright 2013 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ * Released: April 17 2013
11
+ */
12
+
13
+
14
+ /*******************************
15
+ Standard
16
+ *******************************/
17
+
18
+ /*--------------
19
+ Menu
20
+ ---------------*/
21
+
22
+ .ui.menu {
23
+ margin: 1rem 0rem;
24
+ background-color: #FFFFFF;
25
+
26
+ font-size: 0px;
27
+ font-weight: normal;
28
+
29
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
30
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
31
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
32
+
33
+ -webkit-border-radius: 0.1875rem;
34
+ -moz-border-radius: 0.1875rem;
35
+ border-radius: 0.1875rem;
36
+ }
37
+ .ui.menu:first-child {
38
+ margin-top: 0rem;
39
+ }
40
+ .ui.menu:last-child {
41
+ margin-bottom: 0rem;
42
+ }
43
+
44
+
45
+ .ui.menu:after {
46
+ content: ".";
47
+ display: block;
48
+ height: 0;
49
+ clear: both;
50
+ visibility: hidden;
51
+ }
52
+
53
+
54
+ .ui.menu > .item:first-child {
55
+ border-radius: 0.1875em 0px 0px 0.1875em;
56
+ }
57
+ .ui.menu > .item:last-child {
58
+ border-radius: 0px 0.1875em 0.1875em 0px;
59
+ }
60
+ .ui.menu .item {
61
+ -webkit-user-select: none;
62
+ -moz-user-select: none;
63
+ -ms-user-select: none;
64
+ user-select: none;
65
+
66
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
67
+
68
+ vertical-align: middle;
69
+
70
+ line-height: 1;
71
+ text-decoration: none;
72
+
73
+ -webkit-box-sizing: border-box;
74
+ -moz-box-sizing: border-box;
75
+ -ms-box-sizing: border-box;
76
+ box-sizing: border-box;
77
+
78
+ -webkit-transition:
79
+ opacity 0.2s ease,
80
+ background 0.2s ease,
81
+ box-shadow 0.2s ease
82
+ ;
83
+ -moz-transition:
84
+ opacity 0.2s ease,
85
+ background 0.2s ease,
86
+ box-shadow 0.2s ease
87
+ ;
88
+ -o-transition:
89
+ opacity 0.2s ease,
90
+ background 0.2s ease,
91
+ box-shadow 0.2s ease
92
+ ;
93
+ -ms-transition:
94
+ opacity 0.2s ease,
95
+ background 0.2s ease,
96
+ box-shadow 0.2s ease
97
+ ;
98
+ transition:
99
+ opacity 0.2s ease,
100
+ background 0.2s ease,
101
+ box-shadow 0.2s ease
102
+ ;
103
+ }
104
+
105
+ /*--------------
106
+ Colors
107
+ ---------------*/
108
+
109
+ /* Text Color */
110
+ .ui.menu .item,
111
+ .ui.menu .item > a {
112
+ color: rgba(0, 0, 0, 0.75);
113
+ }
114
+ .ui.menu .item .item,
115
+ .ui.menu .item .item > a {
116
+ color: rgba(30, 30, 30, 0.7);
117
+ }
118
+ .ui.menu .item .item .item,
119
+ .ui.menu .item .item .item > a {
120
+ color: rgba(30, 30, 30, 0.6);
121
+ }
122
+ .ui.menu .dropdown.item .menu .item,
123
+ .ui.menu .dropdown.item .menu .item a {
124
+ color: rgba(0, 0, 0, 0.75);
125
+ }
126
+ /* Hover */
127
+ .ui.menu .item .menu a.item:hover,
128
+ .ui.menu .item .menu a.item.hover,
129
+ .ui.menu .item .menu .link.item:hover,
130
+ .ui.menu .item .menu .link.item.hover {
131
+ color: rgba(0, 0, 0, 0.85);
132
+ }
133
+ .ui.menu .dropdown.item .menu .item a:hover {
134
+ color: rgba(0, 0, 0, 0.85);
135
+ }
136
+ /* Active */
137
+ .ui.menu .active.item,
138
+ .ui.menu .active.item a {
139
+ color: rgba(0, 0, 0, 0.85);
140
+
141
+ -moz-border-radius: 0px;
142
+ -webkit-border-radius: 0px;
143
+ border-radius: 0px;
144
+ }
145
+
146
+ /*--------------
147
+ Items
148
+ ---------------*/
149
+
150
+ .ui.menu .item {
151
+ position: relative;
152
+ display: inline-block;
153
+
154
+ padding: 0.83em 0.95em;
155
+
156
+ border-top: 0em solid rgba(0, 0, 0, 0);
157
+
158
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
159
+ -moz-user-select: -moz-none;
160
+ -khtml-user-select: none;
161
+ user-select: none;
162
+ }
163
+
164
+ .ui.menu .menu {
165
+ margin: 0em;
166
+ }
167
+
168
+ .ui.menu .item.left,
169
+ .ui.menu .menu.left {
170
+ float: left;
171
+ }
172
+ .ui.menu .item.right,
173
+ .ui.menu .menu.right {
174
+ float: right;
175
+ }
176
+
177
+
178
+ /*--------------
179
+ Borders
180
+ ---------------*/
181
+
182
+ .ui.menu .item:before {
183
+ position: absolute;
184
+ content: '';
185
+ top: 0%;
186
+ right: 0px;
187
+ width: 1px;
188
+ height: 100%;
189
+ background-image: -webkit-linear-gradient(top,
190
+ rgba(0, 0, 0, 0.05) 0%,
191
+ rgba(0, 0, 0, 0.1) 50%,
192
+ rgba(0, 0, 0, 0.05) 100%)
193
+ ;
194
+ background-image: -moz-linear-gradient(top,
195
+ rgba(0, 0, 0, 0.05) 0%,
196
+ rgba(0, 0, 0, 0.1) 50%,
197
+ rgba(0, 0, 0, 0.05) 100%)
198
+ ;
199
+ background-image: -o-linear-gradient(top,
200
+ rgba(0, 0, 0, 0.05) 0%,
201
+ rgba(0, 0, 0, 0.1) 50%,
202
+ rgba(0, 0, 0, 0.05) 100%)
203
+ ;
204
+ background-image: -ms-linear-gradient(top,
205
+ rgba(0, 0, 0, 0.05) 0%,
206
+ rgba(0, 0, 0, 0.1) 50%,
207
+ rgba(0, 0, 0, 0.05) 100%)
208
+ ;
209
+ background-image: linear-gradient(top,
210
+ rgba(0, 0, 0, 0.05) 0%,
211
+ rgba(0, 0, 0, 0.1) 50%,
212
+ rgba(0, 0, 0, 0.05) 100%)
213
+ ;
214
+ }
215
+ .ui.menu .menu.right .item:before,
216
+ .ui.menu .item.right:before {
217
+ right: auto;
218
+ left: 0px;
219
+ }
220
+
221
+ /*--------------
222
+ Text Content
223
+ ---------------*/
224
+
225
+ .ui.menu .text.item > *,
226
+ .ui.menu .item > p:only-child {
227
+ -webkit-user-select: text;
228
+ -moz-user-select: text;
229
+ -ms-user-select: text;
230
+ user-select: text;
231
+
232
+ line-height: 1.3;
233
+ color: rgba(0, 0, 0, 0.6);
234
+ }
235
+ .ui.menu .item > p:first-child {
236
+ margin-top: 0px;
237
+ }
238
+ .ui.menu .item > p:last-child {
239
+ margin-bottom: 0px;
240
+ }
241
+
242
+ /*--------------
243
+ Inputs
244
+ ---------------*/
245
+
246
+ .ui.menu .input,
247
+ .ui.menu .input input {
248
+ width: 100%;
249
+ }
250
+ .ui.menu .input .icon {
251
+ padding-top: 0em;
252
+ }
253
+ .ui.menu input {
254
+ margin: -0.55em 0em;
255
+ padding-top: 0.45em;
256
+ padding-bottom: 0.45em;
257
+ }
258
+ .ui.vertical.menu input {
259
+ margin: 0em;
260
+ padding-top: 0.63em;
261
+ padding-bottom: 0.63em;
262
+ }
263
+ .ui.vertical.menu .input .icon {
264
+ padding-top: 0.63em;
265
+ }
266
+
267
+ /*--------------
268
+ Header
269
+ ---------------*/
270
+
271
+ .ui.menu .header.item {
272
+ background-color: rgba(0, 0, 0, 0.04);
273
+ margin: 0em;
274
+ }
275
+ .ui.vertical.menu .header.item {
276
+ font-weight: bold;
277
+ }
278
+
279
+
280
+ /*--------------
281
+ Dropdowns
282
+ ---------------*/
283
+ /*.ui.menu .dropdown.item .menu {
284
+ margin: 1px 0px 0px 0px;
285
+ }*/
286
+ .ui.menu .simple.dropdown.item .menu {
287
+ margin: 0px !important;
288
+ }
289
+ .ui.menu .dropdown.item .menu .item {
290
+ width: 100%;
291
+ color: rgba(0, 0, 0, 0.75);
292
+ }
293
+ .ui.menu .dropdown.item .menu .active.item {
294
+ box-shadow: none !important;
295
+ }
296
+ .ui.menu .ui.dropdown .menu .item:before {
297
+ display: none;
298
+ }
299
+
300
+
301
+ /*--------------
302
+ Labels
303
+ ---------------*/
304
+
305
+ .ui.menu .item > .label {
306
+ background-color: rgba(0, 0, 0, 0.35);
307
+ color: #FFFFFF;
308
+ margin: -0.15em 0em -0.15em 0.5em;
309
+ padding: 0.3em 0.8em;
310
+ vertical-align: baseline;
311
+ }
312
+ .ui.menu .item > .floating.label {
313
+ padding: 0.3em 0.8em;
314
+ }
315
+
316
+ /*--------------
317
+ Images
318
+ ---------------*/
319
+
320
+ .ui.menu .item > img:only-child {
321
+ display: block;
322
+ max-width: 100%;
323
+ margin: 0em auto;
324
+ }
325
+
326
+ /*******************************
327
+ States
328
+ *******************************/
329
+
330
+ /*--------------
331
+ Hover
332
+ ---------------*/
333
+
334
+ .ui.link.menu .item:hover,
335
+ .ui.menu .item.hover,
336
+ .ui.menu .link.item:hover,
337
+ .ui.menu a.item:hover,
338
+ .ui.menu .ui.dropdown .menu .item.hover,
339
+ .ui.menu .ui.dropdown .menu .item:hover {
340
+ cursor: pointer;
341
+ background-color: rgba(0, 0, 0, 0.02);
342
+ }
343
+ .ui.menu .ui.dropdown.active {
344
+ background-color: rgba(0, 0, 0, 0.02);
345
+
346
+ -webkit-box-shadow: none;
347
+ box-shadow: none;
348
+
349
+ -webkit-border-bottom-right-radius: 0em;
350
+ -moz-border-bottom-right-radius: 0em;
351
+ border-bottom-right-radius: 0em;
352
+
353
+ -webkit-border-bottom-left-radius: 0em;
354
+ -moz-border-bottom-left-radius: 0em;
355
+ border-bottom-left-radius: 0em;
356
+ }
357
+
358
+
359
+ /*--------------
360
+ Down
361
+ ---------------*/
362
+
363
+ .ui.link.menu .item:active,
364
+ .ui.menu .item.down,
365
+ .ui.menu .link.item:active,
366
+ .ui.menu a.item:active,
367
+ .ui.menu .ui.dropdown .menu .item.down,
368
+ .ui.menu .ui.dropdown .menu .item:active {
369
+ background-color: rgba(0, 0, 0, 0.05);
370
+
371
+ }
372
+
373
+ /*--------------
374
+ Active
375
+ ---------------*/
376
+
377
+ .ui.menu .active.item {
378
+ background-color: rgba(0, 0, 0, 0.01);
379
+ color: rgba(0, 0, 0, 0.95);
380
+
381
+ -webkit-box-shadow: 0em 0.2em 0em inset;
382
+ -moz-box-shadow: 0em 0.2em 0em inset;
383
+ box-shadow: 0em 0.2em 0em inset;
384
+ }
385
+ .ui.vertical.menu .active.item {
386
+ -webkit-border-radius: 0em;
387
+ -moz-border-radius: 0em;
388
+ border-radius: 0em;
389
+
390
+ -moz-box-shadow: 0.2em 0em 0em inset;
391
+ -webkit-box-shadow: 0.2em 0em 0em inset;
392
+ box-shadow: 0.2em 0em 0em inset;
393
+ }
394
+ .ui.vertical.menu > .active.item:first-child {
395
+ -webkit-border-radius: 0em 0.1875em 0em 0em;
396
+ -moz-border-radius: 0em 0.1875em 0em 0em;
397
+ border-radius: 0em 0.1875em 0em 0em;
398
+ }
399
+ .ui.vertical.menu > .active.item:last-child {
400
+ -webkit-border-radius: 0em 0em 0.1875em 0em;
401
+ -moz-border-radius: 0em 0em 0.1875em 0em;
402
+ border-radius: 0em 0em 0.1875em 0em;
403
+ }
404
+ .ui.vertical.menu > .active.item:only-child {
405
+ -webkit-border-radius: 0em 0.1875em 0.1875em 0em;
406
+ -moz-border-radius: 0em 0.1875em 0.1875em 0em;
407
+ border-radius: 0em 0.1875em 0.1875em 0em;
408
+ }
409
+
410
+
411
+ .ui.vertical.menu .active.item .menu .active.item {
412
+ border-left: none;
413
+ }
414
+ .ui.vertical.menu .active.item .menu .active.item {
415
+ padding-left: 1.5rem;
416
+ }
417
+ .ui.vertical.menu .item .menu .active.item {
418
+ background-color: rgba(0, 0, 0, 0.03);
419
+ -webkit-box-shadow: none;
420
+ -moz-box-shadow: none;
421
+ box-shadow: none;
422
+ }
423
+
424
+ /*--------------
425
+ Disabled
426
+ ---------------*/
427
+
428
+ .ui.menu .item.disabled,
429
+ .ui.menu .item.disabled:hover,
430
+ .ui.menu .item.disabled.hover {
431
+ cursor: default;
432
+ color: rgba(0, 0, 0, 0.2);
433
+ background-color: transparent !important;
434
+ }
435
+
436
+
437
+ /*--------------------
438
+ Loading
439
+ ---------------------*/
440
+
441
+ /* On Form */
442
+ .ui.menu.loading {
443
+ position: relative;
444
+ }
445
+ .ui.menu.loading:after {
446
+ position: absolute;
447
+ top: 0%;
448
+ left: 0%;
449
+ content: '';
450
+
451
+ width: 100%;
452
+ height: 100%;
453
+ background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
454
+ visibility: visible;
455
+ }
456
+
457
+
458
+ /*******************************
459
+ Types
460
+ *******************************/
461
+
462
+ /*--------------
463
+ Vertical
464
+ ---------------*/
465
+
466
+ .ui.vertical.menu .item {
467
+ display: block;
468
+ height: auto !important;
469
+ border-top: none;
470
+ border-left: 0em solid rgba(0, 0, 0, 0);
471
+ border-right: none;
472
+ }
473
+ .ui.vertical.menu > .item:first-child {
474
+ border-radius: 0.1875em 0.1875em 0px 0px;
475
+ }
476
+ .ui.vertical.menu > .item:last-child {
477
+ border-radius: 0px 0px 0.1875em 0.1875em;
478
+ }
479
+
480
+ .ui.vertical.menu .item > .label {
481
+ float: right;
482
+ min-width: 2.5;
483
+ text-align: center;
484
+ }
485
+ .ui.vertical.menu .item > .icon:not(.input) {
486
+ float: right;
487
+ width: 1.22em;
488
+ margin: 0em 0em 0em 0.5em;
489
+ }
490
+ .ui.vertical.menu .item > .label + .icon {
491
+ float: none;
492
+ margin: 0em 0.25em 0em 0em;
493
+ }
494
+
495
+ /*--- Border ---*/
496
+ .ui.vertical.menu .item:before {
497
+ position: absolute;
498
+ content: '';
499
+ top: 0%;
500
+ left: 0px;
501
+ width: 100%;
502
+ height: 1px;
503
+ background-image: -webkit-linear-gradient(left,
504
+ rgba(0, 0, 0, 0.03) 0%,
505
+ rgba(0, 0, 0, 0.1) 1.5em,
506
+ rgba(0, 0, 0, 0.03) 100%)
507
+ ;
508
+ background-image: -moz-linear-gradient(left,
509
+ rgba(0, 0, 0, 0.03) 0%,
510
+ rgba(0, 0, 0, 0.1) 1.5em,
511
+ rgba(0, 0, 0, 0.03) 100%)
512
+ ;
513
+ background-image: -o-linear-gradient(left,
514
+ rgba(0, 0, 0, 0.03) 0%,
515
+ rgba(0, 0, 0, 0.1) 1.5em,
516
+ rgba(0, 0, 0, 0.03) 100%)
517
+ ;
518
+ background-image: -ms-linear-gradient(left,
519
+ rgba(0, 0, 0, 0.03) 0%,
520
+ rgba(0, 0, 0, 0.1) 1.5em,
521
+ rgba(0, 0, 0, 0.03) 100%)
522
+ ;
523
+ background-image: linear-gradient(left,
524
+ rgba(0, 0, 0, 0.03) 0%,
525
+ rgba(0, 0, 0, 0.1) 1.5em,
526
+ rgba(0, 0, 0, 0.03) 100%)
527
+ ;
528
+ }
529
+
530
+ .ui.vertical.menu .item:first-child:before {
531
+ background-image: none;
532
+ }
533
+
534
+ /*--- Dropdown ---*/
535
+ .ui.vertical.menu .dropdown.item > i {
536
+ float: right;
537
+ }
538
+ .ui.vertical.menu .dropdown.item .menu {
539
+ top: 0% !important;
540
+ left: 100%;
541
+ margin: 0px 0px 0px 1px;
542
+ }
543
+ .ui.vertical.menu .dropdown.item .menu .item {
544
+ font-size: 0.875rem;
545
+ padding: 0.83em 1em;
546
+ }
547
+ .ui.vertical.menu .dropdown.item .menu .item .icon {
548
+ margin-right: 0em;
549
+ }
550
+ .ui.vertical.menu .dropdown.item.active {
551
+ -webkit-box-shadow: none;
552
+ -moz-box-shadow: none;
553
+ box-shadow: none;
554
+ }
555
+
556
+ /*--- Sub Menu ---*/
557
+ .ui.vertical.menu .item > .menu {
558
+ margin: 0.5em -0.95em 0em;
559
+ }
560
+ .ui.vertical.menu .item > .menu > .item {
561
+ padding: 0.5rem 1.5rem;
562
+ font-size: 0.875em;
563
+ }
564
+ .ui.vertical.menu .item > .menu > .item:before {
565
+ display: none;
566
+ }
567
+
568
+
569
+ /*--------------
570
+ Tiered
571
+ ---------------*/
572
+
573
+ .ui.tiered.menu > .sub.menu > .item {
574
+ color: rgba(0, 0, 0, 0.4);
575
+ }
576
+ .ui.tiered.menu > .menu > .item:hover,
577
+ .ui.tiered.menu > .menu > .item.hover {
578
+ color: rgba(0, 0, 0, 0.8);
579
+ }
580
+ .ui.tiered.menu .item.active {
581
+ box-shadow: 0px 1px 0px 0px #FBFBFB;
582
+ color: rgba(0, 0, 0, 0.8);
583
+ }
584
+ .ui.tiered.menu .sub.menu {
585
+ background-color: rgba(0, 0, 0, 0.01);
586
+ border-radius: 0em;
587
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
588
+
589
+ -webkit-box-shadow: none;
590
+ -moz-box-shadow: none;
591
+ box-shadow: none;
592
+
593
+ color: #FFFFFF;
594
+ }
595
+ .ui.tiered.menu .sub.menu .item {
596
+ font-size: 0.875rem;
597
+ }
598
+ .ui.tiered.menu .sub.menu .item:before {
599
+ background-image: none;
600
+ }
601
+ .ui.tiered.menu .sub.menu .active.item {
602
+ padding-top: 0.83em;
603
+ background-color: transparent;
604
+ border-radius: 0 0 0 0;
605
+ border-top: medium none;
606
+
607
+ -webkit-box-shadow: none;
608
+ -moz-box-shadow: none;
609
+ box-shadow: none;
610
+
611
+ color: rgba(0, 0, 0, 0.7);
612
+ }
613
+
614
+ /* Inverted */
615
+ .ui.inverted.tiered.menu > .menu > .item {
616
+ color: rgba(255, 255, 255, 0.5);
617
+ }
618
+ .ui.inverted.tiered.menu .sub.menu {
619
+ background-color: rgba(0, 0, 0, 0.2);
620
+ }
621
+ .ui.inverted.tiered.menu .sub.menu .item {
622
+ color: rgba(255, 255, 255, 0.6);
623
+ }
624
+
625
+ .ui.inverted.tiered.menu > .menu > .item:hover,
626
+ .ui.inverted.tiered.menu > .menu > .item.hover {
627
+ color: rgba(255, 255, 255, 0.9);
628
+ }
629
+ .ui.inverted.tiered.menu > .sub.menu > .active.item,
630
+ .ui.inverted.tiered.menu > .menu > .active.item {
631
+ color: rgba(255, 255, 255, 1);
632
+ -webkit-box-shadow: none;
633
+ -moz-box-shadow: none;
634
+ box-shadow: none;
635
+ }
636
+
637
+ /* Tiered pointing */
638
+ .ui.pointing.tiered.menu > .menu > .item:after {
639
+ display: none;
640
+ }
641
+ .ui.pointing.tiered.menu > .sub.menu > .item:after {
642
+ display: block;
643
+ }
644
+
645
+
646
+ /*--------------
647
+ Tabular
648
+ ---------------*/
649
+
650
+ .ui.tabular.menu {
651
+ background-color: transparent;
652
+ border-bottom: 1px solid #DCDDDE;
653
+
654
+ -webkit-box-shadow: none;
655
+ -moz-box-shadow: none;
656
+ box-shadow: none;
657
+ }
658
+ .ui.tabular.menu .item {
659
+ background-color: transparent;
660
+ padding-left: 1.4em;
661
+ padding-right: 1.4em;
662
+ color: rgba(0, 0, 0, 0.6);
663
+ }
664
+ .ui.tabular.menu .item:before {
665
+ display: none;
666
+ }
667
+
668
+ /* Hover */
669
+ .ui.tabular.menu .item:hover {
670
+ background-color: transparent;
671
+ color: rgba(0, 0, 0, 0.8);
672
+ }
673
+
674
+ /* Active */
675
+ .ui.tabular.menu .active.item {
676
+ position: relative;
677
+ top: 1px;
678
+
679
+ background-color: #FFFFFF;
680
+ color: rgba(0, 0, 0, 0.8);
681
+
682
+ border-left: 1px solid #DCDDDE;
683
+ border-right: 1px solid #DCDDDE;
684
+ border-top: 1px solid #DCDDDE;
685
+
686
+ padding-top: 0.83em;
687
+
688
+ -webkit-box-shadow: none;
689
+ -moz-box-shadow: none;
690
+ box-shadow: none;
691
+
692
+ -webkit-border-radius: 5px 5px 0 0;
693
+ -moz-border-radius: 5px 5px 0 0;
694
+ border-radius: 5px 5px 0 0;
695
+ }
696
+
697
+ /*--------------
698
+ Pagination
699
+ ---------------*/
700
+
701
+ .ui.pagination.menu {
702
+ margin: 0em;
703
+ display: inline-block;
704
+ }
705
+
706
+ .ui.pagination.menu .item {
707
+ min-width: 2.7em;
708
+ min-height: 2.66em;
709
+ text-align: center;
710
+ }
711
+ .ui.pagination.menu.floated {
712
+ display: block;
713
+ }
714
+
715
+ /* active */
716
+ .ui.pagination.menu .active.item {
717
+ border-top: none;
718
+ padding-top: 0.83em;
719
+ background-color: transparent;
720
+ -webkit-box-shadow: none;
721
+ -moz-box-shadow: none;
722
+ box-shadow: none;
723
+ }
724
+
725
+ /*--------------
726
+ Secondary
727
+ ---------------*/
728
+
729
+ .ui.secondary.menu {
730
+ background-color: transparent;
731
+
732
+ -webkit-border-radius: 0px;
733
+ -moz-border-radius: 0px;
734
+ border-radius: 0px;
735
+
736
+ -webkit-box-shadow: none;
737
+ -moz-box-shadow: none;
738
+ box-shadow: none;
739
+ }
740
+ .ui.secondary.menu > .item {
741
+ -webkit-box-shadow: none;
742
+ -moz-box-shadow: none;
743
+ box-shadow: none;
744
+
745
+ border: none;
746
+ height: auto !important;
747
+
748
+ margin: 0em 0.25em;
749
+ padding: 0.5em 1em;
750
+
751
+ -webkit-border-radius: 0.3125em;
752
+ -moz-border-radius: 0.3125em;
753
+ border-radius: 0.3125em;
754
+ }
755
+ .ui.secondary.menu > .item:before {
756
+ display: none !important;
757
+ }
758
+
759
+ .ui.secondary.menu .link.item,
760
+ .ui.secondary.menu a.item {
761
+ opacity: 0.8;
762
+
763
+ -webkit-transition: opacity 0.2s ease;
764
+ -moz-transition: opacity 0.2s ease;
765
+ -o-transition: opacity 0.2s ease;
766
+ -ms-transition: opacity 0.2s ease;
767
+ transition: opacity 0.2s ease;
768
+ }
769
+
770
+ .ui.secondary.menu .header.item {
771
+ border-right: 0.1em solid rgba(0, 0, 0, 0.1);
772
+ background-color: transparent;
773
+
774
+ -webkit-border-radius: 0em;
775
+ -moz-border-radius: 0em;
776
+ border-radius: 0em;
777
+ }
778
+
779
+ /* hover */
780
+ .ui.secondary.menu .link.item:hover,
781
+ .ui.secondary.menu a.item:hover {
782
+ opacity: 1;
783
+ }
784
+
785
+ /* active */
786
+ .ui.secondary.menu > .active.item {
787
+ background-color: rgba(0, 0, 0, 0.08);
788
+ opacity: 1;
789
+
790
+ -webkit-box-shadow: none;
791
+ -moz-box-shadow: none;
792
+ box-shadow: none;
793
+ }
794
+ .ui.secondary.vertical.menu > .active.item {
795
+ -webkit-border-radius: 0.3125em;
796
+ -moz-border-radius: 0.3125em;
797
+ border-radius: 0.3125em;
798
+ }
799
+
800
+ /* inverted */
801
+ .ui.secondary.inverted.menu .link.item,
802
+ .ui.secondary.inverted.menu a.item {
803
+ color: rgba(255, 255, 255, 0.5);
804
+ }
805
+ .ui.secondary.inverted.menu .link.item:hover,
806
+ .ui.secondary.inverted.menu a.item:hover {
807
+ color: rgba(255, 255, 255, 0.9);
808
+ }
809
+ .ui.secondary.inverted.menu > .active.item {
810
+ background-color: rgba(255, 255, 255, 0.9);
811
+ }
812
+
813
+
814
+ /* disable variations */
815
+ .ui.secondary.item.menu > .item {
816
+ margin: 0em;
817
+ }
818
+ .ui.secondary.attached.menu {
819
+ -webkit-box-shadow: none;
820
+ -moz-box-shadow: none;
821
+ box-shadow: none;
822
+ }
823
+
824
+ /*---------------------
825
+ Secondary Pointing
826
+ -----------------------*/
827
+
828
+ .ui.secondary.pointing.menu {
829
+ border-bottom: 3px solid rgba(0, 0, 0, 0.1);
830
+
831
+ }
832
+
833
+ .ui.secondary.pointing.menu .header.item {
834
+ border-right-width: 0px;
835
+ font-weight: bold;
836
+ }
837
+
838
+ .ui.secondary.pointing.menu .text.item {
839
+ box-shadow: none !important;
840
+ }
841
+
842
+ .ui.secondary.pointing.menu > .item {
843
+ margin: 0em 0em -3px;
844
+ padding: 0.6em 0.95em;
845
+
846
+ border-bottom: 3px solid rgba(0, 0, 0, 0);
847
+
848
+ -webkit-border-radius: 0em;
849
+ -moz-border-radius: 0em;
850
+ border-radius: 0em;
851
+
852
+ -webkit-transition:
853
+ color 0.2s
854
+ ;
855
+ -moz-transition:
856
+ color 0.2s
857
+ ;
858
+ -o-transition:
859
+ color 0.2s
860
+ ;
861
+ -ms-transition:
862
+ color 0.2s
863
+ ;
864
+ transition:
865
+ color 0.2s
866
+ ;
867
+ }
868
+ .ui.secondary.pointing.menu > .item:after {
869
+ display: none;
870
+ }
871
+
872
+ /* Hover */
873
+ .ui.secondary.pointing.menu > .item.hover,
874
+ .ui.secondary.pointing.menu > .item:hover {
875
+ background-color: transparent;
876
+ color: rgba(0, 0, 0, 0.7);
877
+ }
878
+
879
+ /* Down */
880
+ .ui.secondary.pointing.menu > .item:active,
881
+ .ui.secondary.pointing.menu > .item.down {
882
+ background-color: transparent;
883
+ border-color: rgba(0, 0, 0, 0.2);
884
+ }
885
+
886
+ /* Active */
887
+ .ui.secondary.pointing.menu > .item.active {
888
+ background-color: transparent;
889
+ border-color: rgba(0, 0, 0, 0.4);
890
+
891
+ -webkit-box-shadow: none;
892
+ -moz-box-shadow: none;
893
+ box-shadow: none;
894
+ }
895
+
896
+ /*---------------------
897
+ Secondary Vertical
898
+ -----------------------*/
899
+
900
+ .ui.secondary.vertical.pointing.menu {
901
+ border: none;
902
+ border-right: 3px solid rgba(0, 0, 0, 0.1);
903
+ }
904
+ .ui.secondary.vertical.menu > .item {
905
+ border: none;
906
+ margin: 0em 0em 0.3em;
907
+ padding: 0.6em 0.8em;
908
+
909
+ -webkit-border-radius: 0.1875em;
910
+ -moz-border-radius: 0.1875em;
911
+ border-radius: 0.1875em;
912
+ }
913
+ .ui.secondary.vertical.menu > .header.item {
914
+ -webkit-border-radius: 0em;
915
+ -moz-border-radius: 0em;
916
+ border-radius: 0em;
917
+ }
918
+ .ui.secondary.vertical.pointing.menu > .item {
919
+ margin: 0em -3px 0em 0em;
920
+ border-bottom: none;
921
+ border-right: 3px solid transparent;
922
+ -webkit-border-radius: 0em;
923
+ -moz-border-radius: 0em;
924
+ border-radius: 0em;
925
+ }
926
+ /* Hover */
927
+ .ui.secondary.vertical.pointing.menu > .item.hover,
928
+ .ui.secondary.vertical.pointing.menu > .item:hover {
929
+ background-color: transparent;
930
+ color: rgba(0, 0, 0, 0.7);
931
+ }
932
+
933
+ /* Down */
934
+ .ui.secondary.vertical.pointing.menu > .item:active,
935
+ .ui.secondary.vertical.pointing.menu > .item.down {
936
+ background-color: transparent;
937
+ border-color: rgba(0, 0, 0, 0.2);
938
+ }
939
+
940
+ /* Active */
941
+ .ui.secondary.vertical.pointing.menu > .item.active {
942
+ background-color: transparent;
943
+ border-color: rgba(0, 0, 0, 0.4);
944
+ color: rgba(0, 0, 0, 0.85);
945
+ }
946
+
947
+ /*--------------
948
+ Inverted
949
+ ---------------*/
950
+
951
+ .ui.secondary.inverted.menu {
952
+ background-color: transparent;
953
+ }
954
+
955
+ .ui.secondary.inverted.pointing.menu {
956
+ border-bottom: 3px solid rgba(255, 255, 255, 0.1);
957
+ }
958
+ .ui.secondary.inverted.pointing.menu > .item {
959
+ color: rgba(255, 255, 255, 0.7);
960
+ }
961
+
962
+ /* Hover */
963
+ .ui.secondary.inverted.pointing.menu > .item.hover,
964
+ .ui.secondary.inverted.pointing.menu > .item:hover {
965
+ color: rgba(255, 255, 255, 0.85);
966
+ }
967
+
968
+ /* Down */
969
+ .ui.secondary.inverted.pointing.menu > .item:active,
970
+ .ui.secondary.inverted.pointing.menu > .item.down {
971
+ border-color: rgba(255, 255, 255, 0.4) !important;
972
+ }
973
+
974
+ /* Active */
975
+ .ui.secondary.inverted.pointing.menu > .item.active {
976
+ border-color: rgba(255, 255, 255, 0.8) !important;
977
+ color: rgba(255, 255, 255, 1);
978
+ }
979
+
980
+ /*---------------------
981
+ Inverted Vertical
982
+ ----------------------*/
983
+
984
+ .ui.secondary.inverted.vertical.pointing.menu {
985
+ border-right: 3px solid rgba(255, 255, 255, 0.1);
986
+ border-bottom: none;
987
+ }
988
+
989
+ /*--------------
990
+ Text Menu
991
+ ---------------*/
992
+
993
+ .ui.text.menu {
994
+ background-color: transparent;
995
+
996
+ margin: 1rem -1rem;
997
+ -moz-border-radius: 0px;
998
+ -webkit-border-radius: 0px;
999
+ border-radius: 0px;
1000
+
1001
+ -webkit-box-shadow: none;
1002
+ -moz-box-shadow: none;
1003
+ box-shadow: none;
1004
+ }
1005
+ .ui.text.menu > .item {
1006
+ opacity: 0.8;
1007
+
1008
+ margin: 0em 1em;
1009
+ padding: 0em;
1010
+ height: auto !important;
1011
+
1012
+ -webkit-border-radius: 0px;
1013
+ -moz-border-radius: 0px;
1014
+ border-radius: 0px;
1015
+
1016
+ -webkit-box-shadow: none;
1017
+ -moz-box-shadow: none;
1018
+ box-shadow: none;
1019
+
1020
+ -webkit-transition:
1021
+ opacity 0.2s ease
1022
+ ;
1023
+ -moz-transition:
1024
+ opacity 0.2s ease
1025
+ ;
1026
+ -o-transition:
1027
+ opacity 0.2s ease
1028
+ ;
1029
+ -ms-transition:
1030
+ opacity 0.2s ease
1031
+ ;
1032
+ transition:
1033
+ opacity 0.2s ease
1034
+ ;
1035
+ }
1036
+ .ui.text.menu > .item:before {
1037
+ display: none !important;
1038
+ }
1039
+ .ui.text.menu .header.item {
1040
+ background-color: transparent;
1041
+
1042
+ opacity: 1;
1043
+ color: rgba(50, 50, 50, 0.8);
1044
+ font-size: 0.875rem;
1045
+ padding: 0em;
1046
+ text-transform: uppercase;
1047
+ font-weight: bold;
1048
+ }
1049
+
1050
+ /*--- fluid text ---*/
1051
+ .ui.text.item.menu .item {
1052
+ margin: 0em;
1053
+ }
1054
+
1055
+ /*--- vertical text ---*/
1056
+ .ui.vertical.text.menu {
1057
+ margin: 1rem 0em;
1058
+ }
1059
+ .ui.vertical.text.menu:first-child {
1060
+ margin-top: 0rem;
1061
+ }
1062
+ .ui.vertical.text.menu:last-child {
1063
+ margin-bottom: 0rem;
1064
+ }
1065
+ .ui.vertical.text.menu .item {
1066
+ float: left;
1067
+ clear: left;
1068
+ margin: 0.5em 0em;
1069
+ }
1070
+ .ui.vertical.text.menu .item > .icon {
1071
+ float: none;
1072
+ margin: 0em 0.83em 0em 0em;
1073
+ }
1074
+ .ui.vertical.text.menu .header.item {
1075
+ margin: 0.8em 0em;
1076
+ }
1077
+
1078
+ /*--- hover ---*/
1079
+ .ui.text.menu .item.hover,
1080
+ .ui.text.menu .item:hover {
1081
+ opacity: 1;
1082
+ background-color: transparent;
1083
+ }
1084
+
1085
+ /*--- active ---*/
1086
+ .ui.text.menu .active.item {
1087
+ background-color: transparent;
1088
+ padding: 0em;
1089
+ border: none;
1090
+ opacity: 1;
1091
+ font-weight: bold;
1092
+ }
1093
+
1094
+ /* disable variations */
1095
+ .ui.text.pointing.menu .active.item:after {
1096
+ -webkit-box-shadow: none;
1097
+ -moz-box-shadow: none;
1098
+ box-shadow: none;
1099
+ }
1100
+ .ui.text.attached.menu {
1101
+ -webkit-box-shadow: none;
1102
+ -moz-box-shadow: none;
1103
+ box-shadow: none;
1104
+ }
1105
+
1106
+ .ui.inverted.text.menu,
1107
+ .ui.inverted.text.menu .item,
1108
+ .ui.inverted.text.menu .item:hover,
1109
+ .ui.inverted.text.menu .item.active {
1110
+ background-color: transparent;
1111
+ }
1112
+
1113
+ /*--------------
1114
+ Icon Only
1115
+ ---------------*/
1116
+
1117
+ .ui.icon.menu,
1118
+ .ui.vertical.icon.menu {
1119
+ width: auto;
1120
+ display: inline-block;
1121
+ height: auto;
1122
+ }
1123
+ .ui.icon.menu > .item {
1124
+ height: auto;
1125
+ text-align: center;
1126
+ color: rgba(60, 60, 60, 0.7);
1127
+ }
1128
+ .ui.icon.menu > .item > .icon {
1129
+ display: block;
1130
+ float: none !important;
1131
+ opacity: 1;
1132
+ margin: 0em auto !important;
1133
+ }
1134
+ .ui.icon.menu .icon:before {
1135
+ opacity: 1;
1136
+ }
1137
+
1138
+ /* Item Icon Only */
1139
+ .ui.menu .icon.item .icon {
1140
+ margin: 0em;
1141
+ }
1142
+
1143
+ .ui.vertical.icon.menu {
1144
+ float: none;
1145
+ }
1146
+
1147
+ /*--- inverted ---*/
1148
+ .ui.inverted.icon.menu .item {
1149
+ color: rgba(255, 255, 255, 0.8);
1150
+ }
1151
+ .ui.inverted.icon.menu .icon {
1152
+ color: rgba(255, 255, 255, 1);
1153
+ }
1154
+
1155
+ /*--------------
1156
+ Labeled Icon
1157
+ ---------------*/
1158
+
1159
+ .ui.labeled.icon.menu {
1160
+ text-align: center;
1161
+ }
1162
+ .ui.labeled.icon.menu > .item > .icon {
1163
+ display: block;
1164
+ font-size: 1.5em !important;
1165
+ margin: 0em auto 0.3em !important;
1166
+ }
1167
+
1168
+
1169
+
1170
+ /*******************************
1171
+ Variations
1172
+ *******************************/
1173
+
1174
+ /*--------------
1175
+ Colors
1176
+ ---------------*/
1177
+
1178
+ /*--- Light Colors ---*/
1179
+ .ui.menu .green.active.item,
1180
+ .ui.green.menu .active.item {
1181
+ border-color: #A1CF64 !important;
1182
+ color: #A1CF64 !important;
1183
+ }
1184
+ .ui.menu .red.active.item,
1185
+ .ui.red.menu .active.item {
1186
+ border-color: #D95C5C !important;
1187
+ color: #D95C5C !important;
1188
+ }
1189
+ .ui.menu .blue.active.item,
1190
+ .ui.blue.menu .active.item {
1191
+ border-color: #6ECFF5 !important;
1192
+ color: #6ECFF5 !important;
1193
+ }
1194
+ .ui.menu .purple.active.item,
1195
+ .ui.purple.menu .active.item {
1196
+ border-color: #564F8A !important;
1197
+ color: #564F8A !important;
1198
+ }
1199
+ .ui.menu .orange.active.item,
1200
+ .ui.orange.menu .active.item {
1201
+ border-color: #F05940 !important;
1202
+ color: #F05940 !important;
1203
+ }
1204
+ .ui.menu .teal.active.item,
1205
+ .ui.teal.menu .active.item {
1206
+ border-color: #00B5AD !important;
1207
+ color: #00B5AD !important;
1208
+ }
1209
+
1210
+
1211
+ /*--------------
1212
+ Inverted
1213
+ ---------------*/
1214
+
1215
+ .ui.inverted.menu {
1216
+ background-color: #333333;
1217
+ box-shadow: none;
1218
+ }
1219
+ .ui.inverted.menu .header.item {
1220
+ margin: 0em;
1221
+
1222
+ background-color: rgba(0, 0, 0, 0.3);
1223
+ -webkit-box-shadow: none;
1224
+ -moz-box-shadow: none;
1225
+ box-shadow: none;
1226
+ }
1227
+
1228
+ .ui.inverted.menu .item,
1229
+ .ui.inverted.menu .item > a {
1230
+ color: #FFFFFF;
1231
+ }
1232
+ .ui.inverted.menu .item .item,
1233
+ .ui.inverted.menu .item .item > a {
1234
+ color: rgba(255, 255, 255, 0.8);
1235
+ }
1236
+ .ui.inverted.menu .dropdown.item .menu .item,
1237
+ .ui.inverted.menu .dropdown.item .menu .item a {
1238
+ color: rgba(0, 0, 0, 0.75) !important;
1239
+ }
1240
+ .ui.inverted.menu .item.disabled,
1241
+ .ui.inverted.menu .item.disabled:hover,
1242
+ .ui.inverted.menu .item.disabled.hover {
1243
+ color: rgba(255, 255, 255, 0.2);
1244
+ }
1245
+
1246
+
1247
+
1248
+ /*--- Border ---*/
1249
+ .ui.inverted.menu .item:before {
1250
+ background-image: -webkit-linear-gradient(top,
1251
+ rgba(255, 255, 255, 0.03) 0%,
1252
+ rgba(255, 255, 255, 0.1) 50%,
1253
+ rgba(255, 255, 255, 0.03) 100%)
1254
+ ;
1255
+ background-image: -moz-linear-gradient(top,
1256
+ rgba(255, 255, 255, 0.03) 0%,
1257
+ rgba(255, 255, 255, 0.1) 50%,
1258
+ rgba(255, 255, 255, 0.03) 100%)
1259
+ ;
1260
+ background-image: -o-linear-gradient(top,
1261
+ rgba(255, 255, 255, 0.03) 0%,
1262
+ rgba(255, 255, 255, 0.1) 50%,
1263
+ rgba(255, 255, 255, 0.03) 100%)
1264
+ ;
1265
+ background-image: -ms-linear-gradient(top,
1266
+ rgba(255, 255, 255, 0.03) 0%,
1267
+ rgba(255, 255, 255, 0.1) 50%,
1268
+ rgba(255, 255, 255, 0.03) 100%)
1269
+ ;
1270
+ background-image: linear-gradient(top,
1271
+ rgba(255, 255, 255, 0.03) 0%,
1272
+ rgba(255, 255, 255, 0.1) 50%,
1273
+ rgba(255, 255, 255, 0.03) 100%)
1274
+ ;
1275
+ }
1276
+ .ui.vertical.inverted.menu .item:before {
1277
+ background-image: -webkit-linear-gradient(left,
1278
+ rgba(255, 255, 255, 0.03) 0%,
1279
+ rgba(255, 255, 255, 0.1) 50%,
1280
+ rgba(255, 255, 255, 0.03) 100%)
1281
+ ;
1282
+ background-image: -moz-linear-gradient(left,
1283
+ rgba(255, 255, 255, 0.03) 0%,
1284
+ rgba(255, 255, 255, 0.1) 50%,
1285
+ rgba(255, 255, 255, 0.03) 100%)
1286
+ ;
1287
+ background-image: -o-linear-gradient(left,
1288
+ rgba(255, 255, 255, 0.03) 0%,
1289
+ rgba(255, 255, 255, 0.1) 50%,
1290
+ rgba(255, 255, 255, 0.03) 100%)
1291
+ ;
1292
+ background-image: -ms-linear-gradient(left,
1293
+ rgba(255, 255, 255, 0.03) 0%,
1294
+ rgba(255, 255, 255, 0.1) 50%,
1295
+ rgba(255, 255, 255, 0.03) 100%)
1296
+ ;
1297
+ background-image: linear-gradient(left,
1298
+ rgba(255, 255, 255, 0.03) 0%,
1299
+ rgba(255, 255, 255, 0.1) 50%,
1300
+ rgba(255, 255, 255, 0.03) 100%)
1301
+ ;
1302
+ }
1303
+
1304
+ /*--- Hover ---*/
1305
+ .ui.link.inverted.menu .item:hover,
1306
+ .ui.inverted.menu .item.hover,
1307
+ .ui.inverted.menu .link.item:hover,
1308
+ .ui.inverted.menu a.item:hover,
1309
+ .ui.inverted.menu .dropdown.item.hover,
1310
+ .ui.inverted.menu .dropdown.item:hover {
1311
+ background-color: rgba(255, 255, 255, 0.1);
1312
+ }
1313
+ .ui.inverted.menu a.item:hover,
1314
+ .ui.inverted.menu .item.hover,
1315
+ .ui.inverted.menu .item > a:hover,
1316
+ .ui.inverted.menu .item .menu a.item:hover,
1317
+ .ui.inverted.menu .item .menu a.item.hover,
1318
+ .ui.inverted.menu .item .menu .link.item:hover,
1319
+ .ui.inverted.menu .item .menu .link.item.hover {
1320
+ color: rgba(255, 255, 255, 1);
1321
+ }
1322
+
1323
+ /*--- Down ---*/
1324
+ .ui.inverted.menu .item.down,
1325
+ .ui.inverted.menu a.item:active,
1326
+ .ui.inverted.menu .item.down,
1327
+ .ui.inverted.menu .dropdown.item:active,
1328
+ .ui.inverted.menu .link.item:active,
1329
+ .ui.inverted.menu a.item:active {
1330
+ background-color: rgba(255, 255, 255, 0.15);
1331
+ }
1332
+
1333
+ /*--- Active ---*/
1334
+ .ui.inverted.menu .active.item {
1335
+ box-shadow: none !important;
1336
+ background-color: rgba(255, 255, 255, 0.2);
1337
+ }
1338
+ .ui.inverted.menu .active.item,
1339
+ .ui.inverted.menu .active.item a {
1340
+ color: rgba(255, 255, 255, 1) !important;
1341
+ }
1342
+ .ui.inverted.vertical.menu .item .menu .active.item {
1343
+ background-color: rgba(255, 255, 255, 0.2);
1344
+ color: rgba(255, 255, 255, 1);
1345
+ }
1346
+
1347
+ /*--- Pointers ---*/
1348
+ .ui.inverted.pointing.menu .active.item:after {
1349
+ background-color: #505050;
1350
+ box-shadow: none;
1351
+ }
1352
+ .ui.inverted.pointing.menu .active.item:hover:after {
1353
+ background-color: #3B3B3B;
1354
+ }
1355
+
1356
+
1357
+ /*--------------
1358
+ Selection
1359
+ ---------------*/
1360
+
1361
+ .ui.selection.menu > .item {
1362
+ color: rgba(0, 0, 0, 0.4);
1363
+ }
1364
+ .ui.selection.menu > .item:hover {
1365
+ color: rgba(0, 0, 0, 0.6);
1366
+ }
1367
+ .ui.selection.menu > .item.active {
1368
+ color: rgba(0, 0, 0, 0.85);
1369
+ }
1370
+
1371
+ .ui.inverted.selection.menu > .item {
1372
+ color: rgba(255, 255, 255, 0.4);
1373
+ }
1374
+ .ui.inverted.selection.menu > .item:hover {
1375
+ color: rgba(255, 255, 255, 0.9);
1376
+ }
1377
+ .ui.inverted.selection.menu > .item.active {
1378
+ color: #FFFFFF;
1379
+ }
1380
+
1381
+
1382
+ /*--------------
1383
+ Floated
1384
+ ---------------*/
1385
+
1386
+ .ui.floated.menu {
1387
+ float: left;
1388
+ margin: 0rem 0.5rem 0rem 0rem;
1389
+ }
1390
+ .ui.right.floated.menu {
1391
+ float: right;
1392
+ margin: 0rem 0rem 0rem 0.5rem;
1393
+ }
1394
+
1395
+
1396
+ /*--------------
1397
+ Inverted Colors
1398
+ ---------------*/
1399
+
1400
+ /*--- Light Colors ---*/
1401
+ .ui.grey.menu {
1402
+ background-color: #F0F0F0;
1403
+ }
1404
+
1405
+ /*--- Inverted Colors ---*/
1406
+ .ui.inverted.green.menu {
1407
+ background-color: #A1CF64;
1408
+ }
1409
+ .ui.inverted.green.pointing.menu .active.item:after {
1410
+ background-color: #A1CF64;
1411
+ }
1412
+
1413
+ .ui.inverted.red.menu {
1414
+ background-color: #D95C5C;
1415
+ }
1416
+ .ui.inverted.red.pointing.menu .active.item:after {
1417
+ background-color: #F16883;
1418
+ }
1419
+
1420
+ .ui.inverted.blue.menu {
1421
+ background-color: #6ECFF5;
1422
+ }
1423
+ .ui.inverted.blue.pointing.menu .active.item:after {
1424
+ background-color: #6ECFF5;
1425
+ }
1426
+
1427
+ .ui.inverted.purple.menu {
1428
+ background-color: #564F8A;
1429
+ }
1430
+ .ui.inverted.purple.pointing.menu .active.item:after {
1431
+ background-color: #564F8A;
1432
+ }
1433
+
1434
+ .ui.inverted.orange.menu {
1435
+ background-color: #F05940;
1436
+ }
1437
+ .ui.inverted.orange.pointing.menu .active.item:after {
1438
+ background-color: #F05940;
1439
+ }
1440
+
1441
+ .ui.inverted.teal.menu {
1442
+ background-color: #00B5AD;
1443
+ }
1444
+ .ui.inverted.teal.pointing.menu .active.item:after {
1445
+ background-color: #00B5AD;
1446
+ }
1447
+
1448
+
1449
+ /*--------------
1450
+ Fitted
1451
+ ---------------*/
1452
+
1453
+ .ui.fitted.menu .item,
1454
+ .ui.fitted.menu .item .menu .item,
1455
+ .ui.menu .fitted.item {
1456
+ padding-top: 0em;
1457
+ padding-bottom: 0em;
1458
+ }
1459
+
1460
+ /*--------------
1461
+ Tight
1462
+ ---------------*/
1463
+
1464
+ .ui.tight.menu .item,
1465
+ .ui.tight.menu .item .menu .item,
1466
+ .ui.menu .tight.item {
1467
+ padding: 0em;
1468
+ }
1469
+
1470
+
1471
+ /*--------------
1472
+ Borderless
1473
+ ---------------*/
1474
+
1475
+ .ui.borderless.menu .item:before,
1476
+ .ui.borderless.menu .item .menu .item:before,
1477
+ .ui.menu .borderless.item:before {
1478
+ background-image: none;
1479
+ }
1480
+
1481
+ /*-------------------
1482
+ Compact
1483
+ --------------------*/
1484
+
1485
+ .ui.compact.menu {
1486
+ display: inline-block;
1487
+ margin: 0em;
1488
+ vertical-align: middle;
1489
+ }
1490
+ .ui.compact.vertical.menu {
1491
+ width: auto !important;
1492
+ }
1493
+ .ui.compact.vertical.menu .item:last-child::before {
1494
+ display: block;
1495
+ }
1496
+
1497
+ /*-------------------
1498
+ Fluid
1499
+ --------------------*/
1500
+
1501
+ .ui.menu.fluid,
1502
+ .ui.vertical.menu.fluid {
1503
+ display: block;
1504
+ width: 100%;
1505
+ }
1506
+
1507
+
1508
+ /*-------------------
1509
+ Evenly Sized
1510
+ --------------------*/
1511
+
1512
+ .ui.item.menu,
1513
+ .ui.item.menu .item {
1514
+ width: 100%;
1515
+ padding-left: 0px !important;
1516
+ padding-right: 0px !important;
1517
+ text-align: center;
1518
+ }
1519
+
1520
+ .ui.menu.two.item .item {
1521
+ width: 50%;
1522
+ }
1523
+ .ui.menu.three.item .item {
1524
+ width: 33.333%;
1525
+ }
1526
+ .ui.menu.four.item .item {
1527
+ width: 25%;
1528
+ }
1529
+ .ui.menu.five.item .item {
1530
+ width: 20%;
1531
+ }
1532
+ .ui.menu.six.item .item {
1533
+ width: 16.666%;
1534
+ }
1535
+ .ui.menu.seven.item .item {
1536
+ width: 14.285%;
1537
+ }
1538
+ .ui.menu.eight.item .item {
1539
+ width: 12.500%;
1540
+ }
1541
+ .ui.menu.nine.item .item {
1542
+ width: 11.11%;
1543
+ }
1544
+ .ui.menu.ten.item .item {
1545
+ width: 10.0%;
1546
+ }
1547
+ .ui.menu.eleven.item .item {
1548
+ width: 9.09%;
1549
+ }
1550
+ .ui.menu.twelve.item .item {
1551
+ width: 8.333%;
1552
+ }
1553
+
1554
+ /*--------------
1555
+ Fixed
1556
+ ---------------*/
1557
+
1558
+ .ui.menu.fixed {
1559
+ position: fixed;
1560
+ z-index: 10;
1561
+
1562
+ margin: 0em;
1563
+ border: none;
1564
+ width: 100%;
1565
+ }
1566
+ .ui.menu.fixed,
1567
+ .ui.menu.fixed .item:first-child,
1568
+ .ui.menu.fixed .item:last-child {
1569
+ -webkit-border-radius: 0px !important;
1570
+ -moz-border-radius: 0px !important;
1571
+ border-radius: 0px !important;
1572
+ }
1573
+
1574
+ .ui.menu.fixed.top {
1575
+ top: 0px;
1576
+ left: 0px;
1577
+ right: auto;
1578
+ bottom: auto;
1579
+ }
1580
+ .ui.menu.fixed.right {
1581
+ top: 0px;
1582
+ right: 0px;
1583
+ left: auto;
1584
+ bottom: auto;
1585
+ width: auto;
1586
+ height: 100%;
1587
+ }
1588
+ .ui.menu.fixed.bottom {
1589
+ bottom: 0px;
1590
+ left: 0px;
1591
+ top: auto;
1592
+ right: auto;
1593
+ }
1594
+ .ui.menu.fixed.left {
1595
+ top: 0px;
1596
+ left: 0px;
1597
+ right: auto;
1598
+ bottom: auto;
1599
+ width: auto;
1600
+ height: 100%;
1601
+ }
1602
+
1603
+ /*-------------------
1604
+ Pointing
1605
+ --------------------*/
1606
+
1607
+ .ui.pointing.menu .active.item:after {
1608
+ position: absolute;
1609
+ bottom: -0.35em;
1610
+ left: 50%;
1611
+ content: "";
1612
+
1613
+ margin-left: -0.3em;
1614
+ width: 0.6em;
1615
+ height: 0.6em;
1616
+
1617
+ border: none;
1618
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
1619
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
1620
+
1621
+ background-image: none;
1622
+
1623
+ -webkit-transform: rotate(45deg);
1624
+ -moz-transform: rotate(45deg);
1625
+ transform: rotate(45deg);
1626
+ z-index: 2;
1627
+
1628
+ -webkit-transition:
1629
+ background 0.2s ease
1630
+ ;
1631
+ -moz-transition:
1632
+ background 0.2s ease
1633
+ ;
1634
+ -o-transition:
1635
+ background 0.2s ease
1636
+ ;
1637
+ -ms-transition:
1638
+ background 0.2s ease
1639
+ ;
1640
+ transition:
1641
+ background 0.2s ease
1642
+ ;
1643
+ }
1644
+
1645
+ /* Don't double up pointers */
1646
+ .ui.pointing.menu .active.item .menu .active.item:after {
1647
+ display: none;
1648
+ }
1649
+
1650
+ .ui.vertical.pointing.menu .active.item:after {
1651
+ position: absolute;
1652
+ top: 50%;
1653
+ margin-top: -0.3em;
1654
+ right: -0.4em;
1655
+ bottom: auto;
1656
+ left: auto;
1657
+
1658
+ border: none;
1659
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
1660
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
1661
+ }
1662
+
1663
+ /* Colors */
1664
+ .ui.pointing.menu .active.item:after {
1665
+ background-color: #FCFCFC;
1666
+ }
1667
+ .ui.pointing.menu .active.item.hover:after,
1668
+ .ui.pointing.menu .active.item:hover:after {
1669
+ background-color: #FAFAFA;
1670
+ }
1671
+
1672
+ .ui.vertical.pointing.menu .menu .active.item:after {
1673
+ background-color: #F4F4F4;
1674
+ }
1675
+
1676
+ .ui.pointing.menu .active.item.down:after,
1677
+ .ui.pointing.menu .active.item:active:after {
1678
+ background-color: #F0F0F0;
1679
+ }
1680
+
1681
+
1682
+ /*--------------
1683
+ Attached
1684
+ ---------------*/
1685
+
1686
+ .ui.menu.attached {
1687
+ margin: 0rem;
1688
+
1689
+ -moz-border-radius: 0px;
1690
+ -webkit-border-radius: 0px;
1691
+ border-radius: 0px;
1692
+ /* avoid rgba multiplying */
1693
+ -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
1694
+ -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
1695
+ box-shadow: 0px 0px 0px 1px #DDDDDD;
1696
+ }
1697
+ .ui.top.attached.menu {
1698
+ -moz-border-radius: 0.1875em 0.1875em 0px 0px;
1699
+ -webkit-border-radius: 0.1875em 0.1875em 0px 0px;
1700
+ border-radius: 0.1875em 0.1875em 0px 0px;
1701
+ }
1702
+ .ui.menu.bottom.attached {
1703
+ -moz-border-radius: 0px 0px 0.1875em 0.1875em;
1704
+ -webkit-border-radius: 0px 0px 0.1875em 0.1875em;
1705
+ border-radius: 0px 0px 0.1875em 0.1875em;
1706
+ }
1707
+
1708
+ /*--------------
1709
+ Sizes
1710
+ ---------------*/
1711
+
1712
+ .ui.small.menu .item {
1713
+ font-size: 0.875rem;
1714
+ }
1715
+ .ui.small.vertical.menu {
1716
+ width: 13rem;
1717
+ }
1718
+
1719
+ .ui.menu .item {
1720
+ font-size: 1rem;
1721
+ height: 2.66em;
1722
+ }
1723
+ .ui.vertical.menu {
1724
+ width: 15rem;
1725
+ }
1726
+
1727
+
1728
+ .ui.large.menu .item {
1729
+ font-size: 1.125rem;
1730
+ }
1731
+ .ui.large.menu .item .item {
1732
+ font-size: 0.875rem;
1733
+ }
1734
+ .ui.large.vertical.menu {
1735
+ width: 18rem;
1736
+ }