@pageboard/html 0.14.19 → 0.14.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/elements/accordion.js +1 -1
  2. package/elements/fieldsets.js +1 -1
  3. package/elements/form.js +2 -2
  4. package/elements/grid.js +1 -1
  5. package/elements/image.js +1 -1
  6. package/elements/input-file.js +2 -2
  7. package/elements/input-property.js +1 -1
  8. package/elements/inputs.js +5 -5
  9. package/elements/layout.js +1 -1
  10. package/elements/link.js +2 -2
  11. package/elements/menu.js +2 -2
  12. package/elements/navigation.js +1 -1
  13. package/elements/page.js +1 -1
  14. package/elements/paragraph.js +2 -2
  15. package/elements/query-tags.js +1 -1
  16. package/elements/tab.js +1 -1
  17. package/elements/table.js +1 -1
  18. package/elements/template.js +1 -1
  19. package/package.json +3 -8
  20. package/ui/card.css +3 -3
  21. package/ui/components/accordion.css +241 -0
  22. package/ui/components/accordion.js +613 -0
  23. package/ui/components/ad.css +275 -0
  24. package/ui/components/api.js +1167 -0
  25. package/ui/components/breadcrumb.css +122 -0
  26. package/ui/components/button.css +3525 -0
  27. package/ui/components/card.css +939 -0
  28. package/ui/components/checkbox.css +604 -0
  29. package/ui/components/checkbox.js +831 -0
  30. package/ui/components/colorize.js +274 -0
  31. package/ui/components/comment.css +268 -0
  32. package/ui/components/container.css +149 -0
  33. package/ui/components/dimmer.css +224 -0
  34. package/ui/components/dimmer.js +733 -0
  35. package/ui/components/divider.css +253 -0
  36. package/ui/components/dropdown.css +1448 -0
  37. package/ui/components/dropdown.js +3955 -0
  38. package/ui/components/embed.css +160 -0
  39. package/ui/components/embed.js +706 -0
  40. package/ui/components/feed.css +281 -0
  41. package/ui/components/flag.css +1035 -0
  42. package/ui/components/form.css +1011 -0
  43. package/ui/components/form.js +1706 -0
  44. package/ui/components/grid.css +1941 -0
  45. package/ui/components/header.css +719 -0
  46. package/ui/components/icon.css +4777 -0
  47. package/ui/components/image.css +310 -0
  48. package/ui/components/input.css +469 -0
  49. package/ui/components/item.css +464 -0
  50. package/ui/components/label.css +1281 -0
  51. package/ui/components/list.css +943 -0
  52. package/ui/components/loader.css +339 -0
  53. package/ui/components/menu.css +1940 -0
  54. package/ui/components/message.css +468 -0
  55. package/ui/components/modal.css +617 -0
  56. package/ui/components/modal.js +1034 -0
  57. package/ui/components/nag.css +145 -0
  58. package/ui/components/nag.js +507 -0
  59. package/ui/components/placeholder.css +229 -0
  60. package/ui/components/popup.css +640 -0
  61. package/ui/components/popup.js +1532 -0
  62. package/ui/components/progress.css +502 -0
  63. package/ui/components/progress.js +931 -0
  64. package/ui/components/rail.css +152 -0
  65. package/ui/components/rating.css +257 -0
  66. package/ui/components/rating.js +508 -0
  67. package/ui/components/reset.css +476 -0
  68. package/ui/components/reveal.css +260 -0
  69. package/ui/components/search.css +431 -0
  70. package/ui/components/search.js +1505 -0
  71. package/ui/components/segment.css +824 -0
  72. package/ui/components/shape.css +143 -0
  73. package/ui/components/shape.js +921 -0
  74. package/ui/components/sidebar.css +537 -0
  75. package/ui/components/sidebar.js +1033 -0
  76. package/ui/components/site.css +184 -0
  77. package/ui/components/site.js +487 -0
  78. package/ui/components/state.js +708 -0
  79. package/ui/components/statistic.css +534 -0
  80. package/ui/components/step.css +566 -0
  81. package/ui/components/sticky.css +73 -0
  82. package/ui/components/sticky.js +959 -0
  83. package/ui/components/tab.css +89 -0
  84. package/ui/components/tab.js +952 -0
  85. package/ui/components/table.css +1108 -0
  86. package/ui/components/transition.css +1792 -0
  87. package/ui/components/transition.js +1095 -0
  88. package/ui/components/video.css +121 -0
  89. package/ui/components/video.js +532 -0
  90. package/ui/components/visibility.js +1311 -0
  91. package/ui/components/visit.js +517 -0
  92. package/ui/item.css +2 -2
  93. package/ui/themes/default/assets/fonts/brand-icons.eot +0 -0
  94. package/ui/themes/default/assets/fonts/brand-icons.svg +1008 -0
  95. package/ui/themes/default/assets/fonts/brand-icons.ttf +0 -0
  96. package/ui/themes/default/assets/fonts/brand-icons.woff +0 -0
  97. package/ui/themes/default/assets/fonts/brand-icons.woff2 +0 -0
  98. package/ui/themes/default/assets/fonts/icons.eot +0 -0
  99. package/ui/themes/default/assets/fonts/icons.otf +0 -0
  100. package/ui/themes/default/assets/fonts/icons.svg +1518 -0
  101. package/ui/themes/default/assets/fonts/icons.ttf +0 -0
  102. package/ui/themes/default/assets/fonts/icons.woff +0 -0
  103. package/ui/themes/default/assets/fonts/icons.woff2 +0 -0
  104. package/ui/themes/default/assets/fonts/outline-icons.eot +0 -0
  105. package/ui/themes/default/assets/fonts/outline-icons.svg +366 -0
  106. package/ui/themes/default/assets/fonts/outline-icons.ttf +0 -0
  107. package/ui/themes/default/assets/fonts/outline-icons.woff +0 -0
  108. package/ui/themes/default/assets/fonts/outline-icons.woff2 +0 -0
  109. package/ui/themes/default/assets/images/flags.png +0 -0
@@ -0,0 +1,1940 @@
1
+ /*
2
+ * # Semantic - Menu
3
+ * http://github.com/semantic-org/semantic-ui/
4
+ *
5
+ *
6
+ * Copyright 2015 Contributor
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ */
11
+
12
+
13
+ /*******************************
14
+ Standard
15
+ *******************************/
16
+
17
+
18
+ /*--------------
19
+ Menu
20
+ ---------------*/
21
+
22
+ .ui.menu {
23
+ display: flex;
24
+ margin: 1rem 0em;
25
+ font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
26
+ background: #FFFFFF;
27
+ font-weight: normal;
28
+ border: 1px solid rgb(34 36 38 / 15%);
29
+ box-shadow: 0px 1px 2px 0 rgb(34 36 38 / 15%);
30
+ border-radius: 0.2857rem;
31
+ min-height: 2.8571em;
32
+ }
33
+ .ui.menu::after {
34
+ content: '';
35
+ display: block;
36
+ height: 0px;
37
+ clear: both;
38
+ visibility: hidden;
39
+ }
40
+ .ui.menu:first-child {
41
+ margin-top: 0rem;
42
+ }
43
+ .ui.menu:last-child {
44
+ margin-bottom: 0rem;
45
+ }
46
+
47
+ /*--------------
48
+ Sub-Menu
49
+ ---------------*/
50
+
51
+ .ui.menu .menu {
52
+ margin: 0em;
53
+ }
54
+ .ui.menu:not(.vertical) > .menu {
55
+ display: flex;
56
+ }
57
+
58
+ /*--------------
59
+ Item
60
+ ---------------*/
61
+
62
+ .ui.menu:not(.vertical) .item {
63
+ display: flex;
64
+ align-items: center;
65
+ }
66
+ .ui.menu .item {
67
+ position: relative;
68
+ vertical-align: middle;
69
+ line-height: 1;
70
+ text-decoration: none;
71
+ -webkit-tap-highlight-color: transparent;
72
+ flex: 0 0 auto;
73
+ user-select: none;
74
+ background: none;
75
+ padding: 0.9285em 1.1428em;
76
+ text-transform: none;
77
+ color: rgb(0 0 0 / 87%);
78
+ font-weight: normal;
79
+ transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
80
+ }
81
+ .ui.menu > .item:first-child {
82
+ border-radius: 0.2857rem 0px 0px 0.2857rem;
83
+ }
84
+
85
+ /* Border */
86
+ .ui.menu .item::before {
87
+ position: absolute;
88
+ content: '';
89
+ top: 0%;
90
+ right: 0px;
91
+ height: 100%;
92
+ width: 1px;
93
+ background: rgb(34 36 38 / 10%);
94
+ }
95
+
96
+ /*--------------
97
+ Text Content
98
+ ---------------*/
99
+
100
+ .ui.menu .text.item > *,
101
+ .ui.menu .item > a:not(.ui),
102
+ .ui.menu .item > p:only-child {
103
+ user-select: text;
104
+ line-height: 1.3;
105
+ }
106
+ .ui.menu .item > p:first-child {
107
+ margin-top: 0;
108
+ }
109
+ .ui.menu .item > p:last-child {
110
+ margin-bottom: 0;
111
+ }
112
+
113
+ /*--------------
114
+ Icons
115
+ ---------------*/
116
+
117
+ .ui.menu .item > i.icon {
118
+ opacity: 0.9;
119
+ float: none;
120
+ margin: 0em 0.3571em 0em 0em;
121
+ }
122
+
123
+ /*--------------
124
+ Button
125
+ ---------------*/
126
+
127
+ .ui.menu:not(.vertical) .item > .button {
128
+ position: relative;
129
+ top: 0em;
130
+ margin: -0.5em 0em;
131
+ padding-bottom: 0.7857em;
132
+ padding-top: 0.7857em;
133
+ font-size: 1em;
134
+ }
135
+
136
+ /*----------------
137
+ Grid / Container
138
+ -----------------*/
139
+
140
+ .ui.menu > .grid,
141
+ .ui.menu > .container {
142
+ display: flex;
143
+ align-items: inherit;
144
+ flex-direction: inherit;
145
+ }
146
+
147
+ /*--------------
148
+ Inputs
149
+ ---------------*/
150
+
151
+ .ui.menu .item > .input {
152
+ width: 100%;
153
+ }
154
+ .ui.menu:not(.vertical) .item > .input {
155
+ position: relative;
156
+ top: 0em;
157
+ margin: -0.5em 0em;
158
+ }
159
+ .ui.menu .item > .input input {
160
+ font-size: 1em;
161
+ padding-top: 0.57142857em;
162
+ padding-bottom: 0.57142857em;
163
+ }
164
+
165
+ /*--------------
166
+ Header
167
+ ---------------*/
168
+
169
+ .ui.menu .header.item,
170
+ .ui.vertical.menu .header.item {
171
+ margin: 0em;
172
+ background: '';
173
+ text-transform: normal;
174
+ font-weight: bold;
175
+ }
176
+ .ui.vertical.menu .item > .header:not(.ui) {
177
+ margin: 0em 0em 0.5em;
178
+ font-size: 1em;
179
+ font-weight: bold;
180
+ }
181
+
182
+ /*--------------
183
+ Dropdowns
184
+ ---------------*/
185
+
186
+
187
+ /* Dropdown Icon */
188
+ .ui.menu .item > i.dropdown.icon {
189
+ padding: 0em;
190
+ float: right;
191
+ margin: 0em 0em 0em 1em;
192
+ }
193
+
194
+ /* Menu */
195
+ .ui.menu .dropdown.item .menu {
196
+ min-width: calc(100% - 1px);
197
+ border-radius: 0em 0em 0.2857rem 0.2857rem;
198
+ background: #FFFFFF;
199
+ margin: 0em 0px 0px;
200
+ box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 8%);
201
+ flex-direction: column !important;
202
+ }
203
+
204
+ /* Menu Items */
205
+ .ui.menu .ui.dropdown .menu > .item {
206
+ margin: 0;
207
+ text-align: left;
208
+ font-size: 1em !important;
209
+ padding: 0.7857em 1.1428em !important;
210
+ background: transparent !important;
211
+ color: rgb(0 0 0 / 87%) !important;
212
+ text-transform: none !important;
213
+ font-weight: normal !important;
214
+ box-shadow: none !important;
215
+ transition: none !important;
216
+ }
217
+ .ui.menu .ui.dropdown .menu > .item:hover {
218
+ background: rgb(0 0 0 / 5%) !important;
219
+ color: rgb(0 0 0 / 95%) !important;
220
+ }
221
+ .ui.menu .ui.dropdown .menu > .selected.item {
222
+ background: rgb(0 0 0 / 5%) !important;
223
+ color: rgb(0 0 0 / 95%) !important;
224
+ }
225
+ .ui.menu .ui.dropdown .menu > .active.item {
226
+ background: rgb(0 0 0 / 3%) !important;
227
+ font-weight: bold !important;
228
+ color: rgb(0 0 0 / 95%) !important;
229
+ }
230
+ .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
231
+ display: block;
232
+ }
233
+ .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
234
+ display: inline-block;
235
+ font-size: 1em !important;
236
+ float: none;
237
+ margin: 0em 0.75em 0em 0em !important;
238
+ }
239
+
240
+ /* Secondary */
241
+ .ui.secondary.menu .dropdown.item > .menu,
242
+ .ui.text.menu .dropdown.item > .menu {
243
+ border-radius: 0.2857rem;
244
+ margin-top: 0.3571em;
245
+ }
246
+
247
+ /* Pointing */
248
+ .ui.menu .pointing.dropdown.item .menu {
249
+ margin-top: 0.75em;
250
+ }
251
+
252
+ /* Inverted */
253
+ .ui.inverted.menu .search.dropdown.item > .search,
254
+ .ui.inverted.menu .search.dropdown.item > .text {
255
+ color: rgb(255 255 255 / 90%);
256
+ }
257
+
258
+ /* Vertical */
259
+ .ui.vertical.menu .dropdown.item > .icon {
260
+ float: right;
261
+ content: "\f0da";
262
+ margin-left: 1em;
263
+ }
264
+ .ui.vertical.menu .dropdown.item .menu {
265
+ left: 100%;
266
+ min-width: 0;
267
+ margin: 0em;
268
+ box-shadow: 0 1px 3px 0px rgb(0 0 0 / 8%);
269
+ border-radius: 0em 0.2857rem 0.2857rem;
270
+ }
271
+ .ui.vertical.menu .dropdown.item.upward .menu {
272
+ bottom: 0;
273
+ }
274
+ .ui.vertical.menu .dropdown.item:not(.upward) .menu {
275
+ top: 0;
276
+ }
277
+ .ui.vertical.menu .active.dropdown.item {
278
+ border-top-right-radius: 0em;
279
+ border-bottom-right-radius: 0em;
280
+ }
281
+ .ui.vertical.menu .dropdown.active.item {
282
+ box-shadow: none;
283
+ }
284
+
285
+ /* Evenly Divided */
286
+ .ui.item.menu .dropdown .menu .item {
287
+ width: 100%;
288
+ }
289
+
290
+ /*--------------
291
+ Labels
292
+ ---------------*/
293
+
294
+ .ui.menu .item > .label {
295
+ background: #999999;
296
+ color: #FFFFFF;
297
+ margin-left: 1em;
298
+ padding: 0.3em 0.7857em;
299
+ }
300
+ .ui.vertical.menu .item > .label {
301
+ background: #999999;
302
+ color: #FFFFFF;
303
+ margin-top: -0.15em;
304
+ margin-bottom: -0.15em;
305
+ padding: 0.3em 0.7857em;
306
+ }
307
+ .ui.menu .item > .floating.label {
308
+ padding: 0.3em 0.7857em;
309
+ }
310
+
311
+ /*--------------
312
+ Images
313
+ ---------------*/
314
+
315
+ .ui.menu .item > img:not(.ui) {
316
+ display: inline-block;
317
+ vertical-align: middle;
318
+ margin: -0.3em 0em;
319
+ width: 2.5em;
320
+ }
321
+ .ui.vertical.menu .item > img:not(.ui):only-child {
322
+ display: block;
323
+ max-width: 100%;
324
+ width: auto;
325
+ }
326
+
327
+
328
+ /*******************************
329
+ Coupling
330
+ *******************************/
331
+
332
+
333
+ /*--------------
334
+ List
335
+ ---------------*/
336
+
337
+
338
+ /* Menu divider shouldnt apply */
339
+ .ui.menu .list .item::before {
340
+ background: none !important;
341
+ }
342
+
343
+ /*--------------
344
+ Sidebar
345
+ ---------------*/
346
+
347
+
348
+ /* Show vertical dividers below last */
349
+ .ui.vertical.sidebar.menu > .item:first-child::before {
350
+ display: block !important;
351
+ }
352
+ .ui.vertical.sidebar.menu > .item::before {
353
+ top: auto;
354
+ bottom: 0px;
355
+ }
356
+
357
+ /*--------------
358
+ Container
359
+ ---------------*/
360
+
361
+ @media (width <= 767px) {
362
+ .ui.menu > .ui.container {
363
+ width: 100% !important;
364
+ margin-left: 0em !important;
365
+ margin-right: 0em !important;
366
+ }
367
+ }
368
+
369
+ @media (width >= 768px) {
370
+ .ui.menu:not(.secondary, .text, .tabular, .borderless) > .container > .item:not(.right, .borderless):first-child {
371
+ border-left: 1px solid rgb(34 36 38 / 10%);
372
+ }
373
+ }
374
+
375
+
376
+ /*******************************
377
+ States
378
+ *******************************/
379
+
380
+
381
+ /*--------------
382
+ Hover
383
+ ---------------*/
384
+
385
+ .ui.link.menu .item:hover,
386
+ .ui.menu .dropdown.item:hover,
387
+ .ui.menu .link.item:hover,
388
+ .ui.menu a.item:hover {
389
+ cursor: pointer;
390
+ background: rgb(0 0 0 / 3%);
391
+ color: rgb(0 0 0 / 95%);
392
+ }
393
+
394
+ /*--------------
395
+ Pressed
396
+ ---------------*/
397
+
398
+ .ui.link.menu .item:active,
399
+ .ui.menu .link.item:active,
400
+ .ui.menu a.item:active {
401
+ background: rgb(0 0 0 / 3%);
402
+ color: rgb(0 0 0 / 95%);
403
+ }
404
+
405
+ /*--------------
406
+ Active
407
+ ---------------*/
408
+
409
+ .ui.menu .active.item {
410
+ background: rgb(0 0 0 / 5%);
411
+ color: rgb(0 0 0 / 95%);
412
+ font-weight: normal;
413
+ box-shadow: none;
414
+ }
415
+ .ui.menu .active.item > i.icon {
416
+ opacity: 1;
417
+ }
418
+
419
+ /*--------------
420
+ Active Hover
421
+ ---------------*/
422
+
423
+ .ui.menu .active.item:hover,
424
+ .ui.vertical.menu .active.item:hover {
425
+ background-color: rgb(0 0 0 / 5%);
426
+ color: rgb(0 0 0 / 95%);
427
+ }
428
+
429
+ /*--------------
430
+ Disabled
431
+ ---------------*/
432
+
433
+ .ui.menu .item.disabled,
434
+ .ui.menu .item.disabled:hover {
435
+ cursor: default !important;
436
+ background-color: transparent !important;
437
+ color: rgb(40 40 40 / 30%) !important;
438
+ }
439
+
440
+
441
+ /*******************************
442
+ Types
443
+ *******************************/
444
+
445
+
446
+ /*------------------
447
+ Floated Menu / Item
448
+ -------------------*/
449
+
450
+
451
+ /* Left Floated */
452
+ .ui.menu:not(.vertical) .left.item,
453
+ .ui.menu:not(.vertical) :not(.dropdown) > .left.menu {
454
+ display: flex;
455
+ margin-right: auto !important;
456
+ }
457
+
458
+ /* Right Floated */
459
+ .ui.menu:not(.vertical) .right.item,
460
+ .ui.menu:not(.vertical) .right.menu {
461
+ display: flex;
462
+ margin-left: auto !important;
463
+ }
464
+
465
+ /* Swapped Borders */
466
+ .ui.menu .right.item::before,
467
+ .ui.menu .right.menu > .item::before {
468
+ right: auto;
469
+ left: 0;
470
+ }
471
+
472
+ /*--------------
473
+ Vertical
474
+ ---------------*/
475
+
476
+ .ui.vertical.menu {
477
+ display: block;
478
+ flex-direction: column;
479
+ background: #FFFFFF;
480
+ box-shadow: 0px 1px 2px 0 rgb(34 36 38 / 15%);
481
+ }
482
+
483
+ /*--- Item ---*/
484
+
485
+ .ui.vertical.menu .item {
486
+ display: block;
487
+ background: none;
488
+ border-top: none;
489
+ border-right: none;
490
+ }
491
+ .ui.vertical.menu > .item:first-child {
492
+ border-radius: 0.2857rem 0.2857rem 0px 0px;
493
+ }
494
+ .ui.vertical.menu > .item:last-child {
495
+ border-radius: 0px 0px 0.2857rem 0.2857rem;
496
+ }
497
+
498
+ /*--- Label ---*/
499
+
500
+ .ui.vertical.menu .item > .label {
501
+ float: right;
502
+ text-align: center;
503
+ }
504
+
505
+ /*--- Icon ---*/
506
+
507
+ .ui.vertical.menu .item > i.icon {
508
+ width: 1.18em;
509
+ float: right;
510
+ margin: 0em 0em 0em 0.5em;
511
+ }
512
+ .ui.vertical.menu .item > .label + i.icon {
513
+ float: none;
514
+ margin: 0em 0.5em 0em 0em;
515
+ }
516
+
517
+ /*--- Border ---*/
518
+
519
+ .ui.vertical.menu .item::before {
520
+ position: absolute;
521
+ content: '';
522
+ top: 0%;
523
+ left: 0px;
524
+ width: 100%;
525
+ height: 1px;
526
+ background: rgb(34 36 38 / 10%);
527
+ }
528
+ .ui.vertical.menu .item:first-child::before {
529
+ display: none !important;
530
+ }
531
+
532
+ /*--- Sub Menu ---*/
533
+
534
+ .ui.vertical.menu .item > .menu {
535
+ margin: 0.5em -1.1428em 0em;
536
+ }
537
+ .ui.vertical.menu .menu .item {
538
+ background: none;
539
+ padding: 0.5em 1.33333333em;
540
+ font-size: 0.8571em;
541
+ color: rgb(0 0 0 / 50%);
542
+ }
543
+ .ui.vertical.menu .item .menu a.item:hover,
544
+ .ui.vertical.menu .item .menu .link.item:hover {
545
+ color: rgb(0 0 0 / 85%);
546
+ }
547
+ .ui.vertical.menu .menu .item::before {
548
+ display: none;
549
+ }
550
+
551
+ /* Vertical Active */
552
+ .ui.vertical.menu .active.item {
553
+ background: rgb(0 0 0 / 5%);
554
+ border-radius: 0em;
555
+ box-shadow: none;
556
+ }
557
+ .ui.vertical.menu > .active.item:first-child {
558
+ border-radius: 0.2857rem 0.2857rem 0em 0em;
559
+ }
560
+ .ui.vertical.menu > .active.item:last-child {
561
+ border-radius: 0em 0em 0.2857rem 0.2857rem;
562
+ }
563
+ .ui.vertical.menu > .active.item:only-child {
564
+ border-radius: 0.2857rem;
565
+ }
566
+ .ui.vertical.menu .active.item .menu .active.item {
567
+ border-left: none;
568
+ }
569
+ .ui.vertical.menu .item .menu .active.item {
570
+ background-color: transparent;
571
+ font-weight: bold;
572
+ color: rgb(0 0 0 / 95%);
573
+ }
574
+
575
+ /*--------------
576
+ Tabular
577
+ ---------------*/
578
+
579
+ .ui.tabular.menu {
580
+ border-radius: 0em;
581
+ box-shadow: none !important;
582
+ border: none;
583
+ background: none transparent;
584
+ border-bottom: 1px solid #D4D4D5;
585
+ }
586
+ .ui.tabular.fluid.menu {
587
+ width: calc(100% + (1px * 2)) !important;
588
+ }
589
+ .ui.tabular.menu .item {
590
+ background: transparent;
591
+ border-bottom: none;
592
+ border-left: 1px solid transparent;
593
+ border-right: 1px solid transparent;
594
+ border-top: 2px solid transparent;
595
+ padding: 0.9285em 1.4286em;
596
+ color: rgb(0 0 0 / 87%);
597
+ }
598
+ .ui.tabular.menu .item::before {
599
+ display: none;
600
+ }
601
+
602
+ /* Hover */
603
+ .ui.tabular.menu .item:hover {
604
+ background-color: transparent;
605
+ color: rgb(0 0 0 / 80%);
606
+ }
607
+
608
+ /* Active */
609
+ .ui.tabular.menu .active.item {
610
+ background: none #FFFFFF;
611
+ color: rgb(0 0 0 / 95%);
612
+ border-top-width: 1px;
613
+ border-color: #D4D4D5;
614
+ font-weight: bold;
615
+ margin-bottom: -1px;
616
+ box-shadow: none;
617
+ border-radius: 0.2857rem 0.2857rem 0px 0px !important;
618
+ }
619
+
620
+ /* Coupling with segment for attachment */
621
+ .ui.tabular.menu + .attached:not(.top).segment,
622
+ .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
623
+ border-top: none;
624
+ margin-left: 0px;
625
+ margin-top: 0px;
626
+ margin-right: 0px;
627
+ width: 100%;
628
+ }
629
+ .top.attached.segment + .ui.bottom.tabular.menu {
630
+ position: relative;
631
+ width: calc(100% + (1px * 2));
632
+ left: -1px;
633
+ }
634
+
635
+ /* Bottom Vertical Tabular */
636
+ .ui.bottom.tabular.menu {
637
+ background: none transparent;
638
+ border-radius: 0em;
639
+ box-shadow: none !important;
640
+ border-bottom: none;
641
+ border-top: 1px solid #D4D4D5;
642
+ }
643
+ .ui.bottom.tabular.menu .item {
644
+ background: none;
645
+ border-left: 1px solid transparent;
646
+ border-right: 1px solid transparent;
647
+ border-bottom: 1px solid transparent;
648
+ border-top: none;
649
+ }
650
+ .ui.bottom.tabular.menu .active.item {
651
+ background: none #FFFFFF;
652
+ color: rgb(0 0 0 / 95%);
653
+ border-color: #D4D4D5;
654
+ margin: -1px 0px 0px;
655
+ border-radius: 0px 0px 0.2857rem 0.2857rem !important;
656
+ }
657
+
658
+ /* Vertical Tabular (Left) */
659
+ .ui.vertical.tabular.menu {
660
+ background: none transparent;
661
+ border-radius: 0em;
662
+ box-shadow: none !important;
663
+ border-bottom: none;
664
+ border-right: 1px solid #D4D4D5;
665
+ }
666
+ .ui.vertical.tabular.menu .item {
667
+ background: none;
668
+ border-left: 1px solid transparent;
669
+ border-bottom: 1px solid transparent;
670
+ border-top: 1px solid transparent;
671
+ border-right: none;
672
+ }
673
+ .ui.vertical.tabular.menu .active.item {
674
+ background: none #FFFFFF;
675
+ color: rgb(0 0 0 / 95%);
676
+ border-color: #D4D4D5;
677
+ margin: 0px -1px 0px 0px;
678
+ border-radius: 0.2857rem 0px 0px 0.2857rem !important;
679
+ }
680
+
681
+ /* Vertical Right Tabular */
682
+ .ui.vertical.right.tabular.menu {
683
+ background: none transparent;
684
+ border-radius: 0em;
685
+ box-shadow: none !important;
686
+ border-bottom: none;
687
+ border-right: none;
688
+ border-left: 1px solid #D4D4D5;
689
+ }
690
+ .ui.vertical.right.tabular.menu .item {
691
+ background: none;
692
+ border-right: 1px solid transparent;
693
+ border-bottom: 1px solid transparent;
694
+ border-top: 1px solid transparent;
695
+ border-left: none;
696
+ }
697
+ .ui.vertical.right.tabular.menu .active.item {
698
+ background: none #FFFFFF;
699
+ color: rgb(0 0 0 / 95%);
700
+ border-color: #D4D4D5;
701
+ margin: 0px 0px 0px -1px;
702
+ border-radius: 0px 0.2857rem 0.2857rem 0px !important;
703
+ }
704
+
705
+ /* Dropdown */
706
+ .ui.tabular.menu .active.dropdown.item {
707
+ margin-bottom: 0px;
708
+ border-left: 1px solid transparent;
709
+ border-right: 1px solid transparent;
710
+ border-top: 2px solid transparent;
711
+ border-bottom: none;
712
+ }
713
+
714
+ /*--------------
715
+ Pagination
716
+ ---------------*/
717
+
718
+ .ui.pagination.menu {
719
+ margin: 0em;
720
+ display: inline-flex;
721
+ vertical-align: middle;
722
+ }
723
+ .ui.pagination.menu .item:last-child {
724
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
725
+ }
726
+ .ui.compact.menu .item:last-child {
727
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
728
+ }
729
+ .ui.pagination.menu .item:last-child::before {
730
+ display: none;
731
+ }
732
+ .ui.pagination.menu .item {
733
+ min-width: 3em;
734
+ text-align: center;
735
+ }
736
+ .ui.pagination.menu .icon.item i.icon {
737
+ vertical-align: top;
738
+ }
739
+
740
+ /* Active */
741
+ .ui.pagination.menu .active.item {
742
+ border-top: none;
743
+ padding-top: 0.9285em;
744
+ background-color: rgb(0 0 0 / 5%);
745
+ color: rgb(0 0 0 / 95%);
746
+ box-shadow: none;
747
+ }
748
+
749
+ /*--------------
750
+ Secondary
751
+ ---------------*/
752
+
753
+ .ui.secondary.menu {
754
+ background: none;
755
+ margin-left: -0.3571em;
756
+ margin-right: -0.3571em;
757
+ border-radius: 0em;
758
+ border: none;
759
+ box-shadow: none;
760
+ }
761
+
762
+ /* Item */
763
+ .ui.secondary.menu .item {
764
+ align-self: center;
765
+ box-shadow: none;
766
+ border: none;
767
+ padding: 0.7857em 0.9285em;
768
+ margin: 0em 0.3571em;
769
+ background: none;
770
+ transition: color 0.1s ease;
771
+ border-radius: 0.2857rem;
772
+ }
773
+
774
+ /* No Divider */
775
+ .ui.secondary.menu .item::before {
776
+ display: none !important;
777
+ }
778
+
779
+ /* Header */
780
+ .ui.secondary.menu .header.item {
781
+ border-radius: 0em;
782
+ border-right: none;
783
+ background: none transparent;
784
+ }
785
+
786
+ /* Image */
787
+ .ui.secondary.menu .item > img:not(.ui) {
788
+ margin: 0em;
789
+ }
790
+
791
+ /* Hover */
792
+ .ui.secondary.menu .dropdown.item:hover,
793
+ .ui.secondary.menu .link.item:hover,
794
+ .ui.secondary.menu a.item:hover {
795
+ background: rgb(0 0 0 / 5%);
796
+ color: rgb(0 0 0 / 95%);
797
+ }
798
+
799
+ /* Active */
800
+ .ui.secondary.menu .active.item {
801
+ box-shadow: none;
802
+ background: rgb(0 0 0 / 5%);
803
+ color: rgb(0 0 0 / 95%);
804
+ border-radius: 0.2857rem;
805
+ }
806
+
807
+ /* Active Hover */
808
+ .ui.secondary.menu .active.item:hover {
809
+ box-shadow: none;
810
+ background: rgb(0 0 0 / 5%);
811
+ color: rgb(0 0 0 / 95%);
812
+ }
813
+
814
+ /* Inverted */
815
+ .ui.secondary.inverted.menu .link.item,
816
+ .ui.secondary.inverted.menu a.item {
817
+ color: rgb(255 255 255 / 70%) !important;
818
+ }
819
+ .ui.secondary.inverted.menu .dropdown.item:hover,
820
+ .ui.secondary.inverted.menu .link.item:hover,
821
+ .ui.secondary.inverted.menu a.item:hover {
822
+ background: rgb(255 255 255 / 8%);
823
+ color: #ffffff !important;
824
+ }
825
+ .ui.secondary.inverted.menu .active.item {
826
+ background: rgb(255 255 255 / 15%);
827
+ color: #ffffff !important;
828
+ }
829
+
830
+ /* Fix item margins */
831
+ .ui.secondary.item.menu {
832
+ margin-left: 0em;
833
+ margin-right: 0em;
834
+ }
835
+ .ui.secondary.item.menu .item:last-child {
836
+ margin-right: 0em;
837
+ }
838
+ .ui.secondary.attached.menu {
839
+ box-shadow: none;
840
+ }
841
+
842
+ /* Sub Menu */
843
+ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
844
+ margin: 0em -0.9285em;
845
+ }
846
+ .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
847
+ margin: 0em;
848
+ padding: 0.5em 1.33333333em;
849
+ }
850
+
851
+ /*---------------------
852
+ Secondary Vertical
853
+ -----------------------*/
854
+
855
+ .ui.secondary.vertical.menu > .item {
856
+ border: none;
857
+ margin: 0em 0em 0.3571em;
858
+ border-radius: 0.2857rem !important;
859
+ }
860
+ .ui.secondary.vertical.menu > .header.item {
861
+ border-radius: 0em;
862
+ }
863
+
864
+ /* Sub Menu */
865
+ .ui.vertical.secondary.menu .item > .menu .item {
866
+ background-color: transparent;
867
+ }
868
+
869
+ /* Inverted */
870
+ .ui.secondary.inverted.menu {
871
+ background-color: transparent;
872
+ }
873
+
874
+ /*---------------------
875
+ Secondary Pointing
876
+ -----------------------*/
877
+
878
+ .ui.secondary.pointing.menu {
879
+ margin-left: 0em;
880
+ margin-right: 0em;
881
+ border-bottom: 2px solid rgb(34 36 38 / 15%);
882
+ }
883
+ .ui.secondary.pointing.menu .item {
884
+ border-bottom: 2px solid transparent;
885
+ border-radius: 0em;
886
+ align-self: flex-end;
887
+ margin: 0em 0em -2px;
888
+ padding: 0.8571em 1.1428em;
889
+ transition: color 0.1s ease;
890
+ }
891
+
892
+ /* Item Types */
893
+ .ui.secondary.pointing.menu .header.item {
894
+ color: rgb(0 0 0 / 85%) !important;
895
+ }
896
+ .ui.secondary.pointing.menu .text.item {
897
+ box-shadow: none !important;
898
+ }
899
+ .ui.secondary.pointing.menu .item::after {
900
+ display: none;
901
+ }
902
+
903
+ /* Hover */
904
+ .ui.secondary.pointing.menu .dropdown.item:hover,
905
+ .ui.secondary.pointing.menu .link.item:hover,
906
+ .ui.secondary.pointing.menu a.item:hover {
907
+ background-color: transparent;
908
+ color: rgb(0 0 0 / 87%);
909
+ }
910
+
911
+ /* Pressed */
912
+ .ui.secondary.pointing.menu .dropdown.item:active,
913
+ .ui.secondary.pointing.menu .link.item:active,
914
+ .ui.secondary.pointing.menu a.item:active {
915
+ background-color: transparent;
916
+ border-color: rgb(34 36 38 / 15%);
917
+ }
918
+
919
+ /* Active */
920
+ .ui.secondary.pointing.menu .active.item {
921
+ background-color: transparent;
922
+ box-shadow: none;
923
+ border-color: #1B1C1D;
924
+ font-weight: bold;
925
+ color: rgb(0 0 0 / 95%);
926
+ }
927
+
928
+ /* Active Hover */
929
+ .ui.secondary.pointing.menu .active.item:hover {
930
+ border-color: #1B1C1D;
931
+ color: rgb(0 0 0 / 95%);
932
+ }
933
+
934
+ /* Active Dropdown */
935
+ .ui.secondary.pointing.menu .active.dropdown.item {
936
+ border-color: transparent;
937
+ }
938
+
939
+ /* Vertical Pointing */
940
+ .ui.secondary.vertical.pointing.menu {
941
+ border-bottom-width: 0px;
942
+ border-right: 2px solid rgb(34 36 38 / 15%);
943
+ }
944
+ .ui.secondary.vertical.pointing.menu .item {
945
+ border-bottom: none;
946
+ border-right: 2px solid transparent;
947
+ border-radius: 0em !important;
948
+ margin: 0em -2px 0em 0em;
949
+ }
950
+
951
+ /* Vertical Active */
952
+ .ui.secondary.vertical.pointing.menu .active.item {
953
+ border-color: #1B1C1D;
954
+ }
955
+
956
+ /* Inverted */
957
+ .ui.secondary.inverted.pointing.menu {
958
+ border-color: rgb(255 255 255 / 10%);
959
+ }
960
+ .ui.secondary.inverted.pointing.menu {
961
+ border-width: 2px;
962
+ border-color: rgb(34 36 38 / 15%);
963
+ }
964
+ .ui.secondary.inverted.pointing.menu .item {
965
+ color: rgb(255 255 255 / 90%);
966
+ }
967
+ .ui.secondary.inverted.pointing.menu .header.item {
968
+ color: #FFFFFF !important;
969
+ }
970
+
971
+ /* Hover */
972
+ .ui.secondary.inverted.pointing.menu .link.item:hover,
973
+ .ui.secondary.inverted.pointing.menu a.item:hover {
974
+ color: rgb(0 0 0 / 95%);
975
+ }
976
+
977
+ /* Active */
978
+ .ui.secondary.inverted.pointing.menu .active.item {
979
+ border-color: #FFFFFF;
980
+ color: #ffffff;
981
+ }
982
+
983
+ /*--------------
984
+ Text Menu
985
+ ---------------*/
986
+
987
+ .ui.text.menu {
988
+ background: none transparent;
989
+ border-radius: 0px;
990
+ box-shadow: none;
991
+ border: none;
992
+ margin: 1em -0.5em;
993
+ }
994
+ .ui.text.menu .item {
995
+ border-radius: 0px;
996
+ box-shadow: none;
997
+ align-self: center;
998
+ margin: 0em;
999
+ padding: 0.3571em 0.5em;
1000
+ font-weight: normal;
1001
+ color: rgb(0 0 0 / 60%);
1002
+ transition: opacity 0.1s ease;
1003
+ }
1004
+
1005
+ /* Border */
1006
+ .ui.text.menu .item::before,
1007
+ .ui.text.menu .menu .item::before {
1008
+ display: none !important;
1009
+ }
1010
+
1011
+ /* Header */
1012
+ .ui.text.menu .header.item {
1013
+ background-color: transparent;
1014
+ opacity: 1;
1015
+ color: rgb(0 0 0 / 85%);
1016
+ font-size: 0.9285em;
1017
+ text-transform: uppercase;
1018
+ font-weight: bold;
1019
+ }
1020
+
1021
+ /* Image */
1022
+ .ui.text.menu .item > img:not(.ui) {
1023
+ margin: 0em;
1024
+ }
1025
+
1026
+ /*--- fluid text ---*/
1027
+
1028
+ .ui.text.item.menu .item {
1029
+ margin: 0em;
1030
+ }
1031
+
1032
+ /*--- vertical text ---*/
1033
+
1034
+ .ui.vertical.text.menu {
1035
+ margin: 1em 0em;
1036
+ }
1037
+ .ui.vertical.text.menu:first-child {
1038
+ margin-top: 0rem;
1039
+ }
1040
+ .ui.vertical.text.menu:last-child {
1041
+ margin-bottom: 0rem;
1042
+ }
1043
+ .ui.vertical.text.menu .item {
1044
+ margin: 0.57142857em 0em;
1045
+ padding-left: 0em;
1046
+ padding-right: 0em;
1047
+ }
1048
+ .ui.vertical.text.menu .item > i.icon {
1049
+ float: none;
1050
+ margin: 0em 0.3571em 0em 0em;
1051
+ }
1052
+ .ui.vertical.text.menu .header.item {
1053
+ margin: 0.57142857em 0em 0.7143em;
1054
+ }
1055
+
1056
+ /* Vertical Sub Menu */
1057
+ .ui.vertical.text.menu .item:not(.dropdown) > .menu {
1058
+ margin: 0em;
1059
+ }
1060
+ .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
1061
+ margin: 0em;
1062
+ padding: 0.5em 0em;
1063
+ }
1064
+
1065
+ /*--- hover ---*/
1066
+
1067
+ .ui.text.menu .item:hover {
1068
+ opacity: 1;
1069
+ background-color: transparent;
1070
+ }
1071
+
1072
+ /*--- active ---*/
1073
+
1074
+ .ui.text.menu .active.item {
1075
+ background-color: transparent;
1076
+ border: none;
1077
+ box-shadow: none;
1078
+ font-weight: normal;
1079
+ color: rgb(0 0 0 / 95%);
1080
+ }
1081
+
1082
+ /*--- active hover ---*/
1083
+
1084
+ .ui.text.menu .active.item:hover {
1085
+ background-color: transparent;
1086
+ }
1087
+
1088
+ /* Disable Bariations */
1089
+ .ui.text.pointing.menu .active.item::after {
1090
+ box-shadow: none;
1091
+ }
1092
+ .ui.text.attached.menu {
1093
+ box-shadow: none;
1094
+ }
1095
+
1096
+ /* Inverted */
1097
+ .ui.inverted.text.menu,
1098
+ .ui.inverted.text.menu .item,
1099
+ .ui.inverted.text.menu .item:hover,
1100
+ .ui.inverted.text.menu .active.item {
1101
+ background-color: transparent !important;
1102
+ }
1103
+
1104
+ /* Fluid */
1105
+ .ui.fluid.text.menu {
1106
+ margin-left: 0em;
1107
+ margin-right: 0em;
1108
+ }
1109
+
1110
+ /*--------------
1111
+ Icon Only
1112
+ ---------------*/
1113
+
1114
+
1115
+ /* Vertical Menu */
1116
+ .ui.vertical.icon.menu {
1117
+ display: inline-block;
1118
+ width: auto;
1119
+ }
1120
+
1121
+ /* Item */
1122
+ .ui.icon.menu .item {
1123
+ height: auto;
1124
+ text-align: center;
1125
+ color: #1B1C1D;
1126
+ }
1127
+
1128
+ /* Icon */
1129
+ .ui.icon.menu .item > .icon:not(.dropdown) {
1130
+ margin: 0;
1131
+ opacity: 1;
1132
+ }
1133
+
1134
+ /* Icon Gylph */
1135
+ .ui.icon.menu .icon::before {
1136
+ opacity: 1;
1137
+ }
1138
+
1139
+ /* (x) Item Icon */
1140
+ .ui.menu .icon.item > .icon {
1141
+ width: auto;
1142
+ margin: 0em auto;
1143
+ }
1144
+
1145
+ /* Vertical Icon */
1146
+ .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
1147
+ display: block;
1148
+ opacity: 1;
1149
+ margin: 0em auto;
1150
+ float: none;
1151
+ }
1152
+
1153
+ /* Inverted */
1154
+ .ui.inverted.icon.menu .item {
1155
+ color: #FFFFFF;
1156
+ }
1157
+
1158
+ /*--------------
1159
+ Labeled Icon
1160
+ ---------------*/
1161
+
1162
+
1163
+ /* Menu */
1164
+ .ui.labeled.icon.menu {
1165
+ text-align: center;
1166
+ }
1167
+
1168
+ /* Item */
1169
+ .ui.labeled.icon.menu .item {
1170
+ min-width: 6em;
1171
+ flex-direction: column;
1172
+ }
1173
+
1174
+ /* Icon */
1175
+ .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
1176
+ height: 1em;
1177
+ display: block;
1178
+ font-size: 1.7143em !important;
1179
+ margin: 0em auto 0.5rem !important;
1180
+ }
1181
+
1182
+ /* Fluid */
1183
+ .ui.fluid.labeled.icon.menu > .item {
1184
+ min-width: 0em;
1185
+ }
1186
+
1187
+
1188
+ /*******************************
1189
+ Variations
1190
+ *******************************/
1191
+
1192
+
1193
+ /*--------------
1194
+ Stackable
1195
+ ---------------*/
1196
+
1197
+ @media (width <= 767px) {
1198
+ .ui.stackable.menu {
1199
+ flex-direction: column;
1200
+ }
1201
+ .ui.stackable.menu .item {
1202
+ width: 100% !important;
1203
+ }
1204
+ .ui.stackable.menu .item::before {
1205
+ position: absolute;
1206
+ content: '';
1207
+ top: auto;
1208
+ bottom: 0px;
1209
+ left: 0px;
1210
+ width: 100%;
1211
+ height: 1px;
1212
+ background: rgb(34 36 38 / 10%);
1213
+ }
1214
+ .ui.stackable.menu .left.menu,
1215
+ .ui.stackable.menu .left.item {
1216
+ margin-right: 0 !important;
1217
+ }
1218
+ .ui.stackable.menu .right.menu,
1219
+ .ui.stackable.menu .right.item {
1220
+ margin-left: 0 !important;
1221
+ }
1222
+ .ui.stackable.menu .right.menu,
1223
+ .ui.stackable.menu .left.menu {
1224
+ flex-direction: column;
1225
+ }
1226
+ }
1227
+
1228
+ /*--------------
1229
+ Colors
1230
+ ---------------*/
1231
+
1232
+
1233
+ /*--- Standard Colors ---*/
1234
+
1235
+ .ui.menu .red.active.item,
1236
+ .ui.red.menu .active.item {
1237
+ border-color: #DB2828 !important;
1238
+ color: #DB2828 !important;
1239
+ }
1240
+ .ui.menu .orange.active.item,
1241
+ .ui.orange.menu .active.item {
1242
+ border-color: #F2711C !important;
1243
+ color: #F2711C !important;
1244
+ }
1245
+ .ui.menu .yellow.active.item,
1246
+ .ui.yellow.menu .active.item {
1247
+ border-color: #FBBD08 !important;
1248
+ color: #FBBD08 !important;
1249
+ }
1250
+ .ui.menu .olive.active.item,
1251
+ .ui.olive.menu .active.item {
1252
+ border-color: #B5CC18 !important;
1253
+ color: #B5CC18 !important;
1254
+ }
1255
+ .ui.menu .green.active.item,
1256
+ .ui.green.menu .active.item {
1257
+ border-color: #21BA45 !important;
1258
+ color: #21BA45 !important;
1259
+ }
1260
+ .ui.menu .teal.active.item,
1261
+ .ui.teal.menu .active.item {
1262
+ border-color: #00B5AD !important;
1263
+ color: #00B5AD !important;
1264
+ }
1265
+ .ui.menu .blue.active.item,
1266
+ .ui.blue.menu .active.item {
1267
+ border-color: #2185D0 !important;
1268
+ color: #2185D0 !important;
1269
+ }
1270
+ .ui.menu .violet.active.item,
1271
+ .ui.violet.menu .active.item {
1272
+ border-color: #6435C9 !important;
1273
+ color: #6435C9 !important;
1274
+ }
1275
+ .ui.menu .purple.active.item,
1276
+ .ui.purple.menu .active.item {
1277
+ border-color: #A333C8 !important;
1278
+ color: #A333C8 !important;
1279
+ }
1280
+ .ui.menu .pink.active.item,
1281
+ .ui.pink.menu .active.item {
1282
+ border-color: #E03997 !important;
1283
+ color: #E03997 !important;
1284
+ }
1285
+ .ui.menu .brown.active.item,
1286
+ .ui.brown.menu .active.item {
1287
+ border-color: #A5673F !important;
1288
+ color: #A5673F !important;
1289
+ }
1290
+ .ui.menu .grey.active.item,
1291
+ .ui.grey.menu .active.item {
1292
+ border-color: #767676 !important;
1293
+ color: #767676 !important;
1294
+ }
1295
+
1296
+ /*--------------
1297
+ Inverted
1298
+ ---------------*/
1299
+
1300
+ .ui.inverted.menu {
1301
+ border: 0px solid transparent;
1302
+ background: #1B1C1D;
1303
+ box-shadow: none;
1304
+ }
1305
+
1306
+ /* Menu Item */
1307
+ .ui.inverted.menu .item,
1308
+ .ui.inverted.menu .item > a:not(.ui) {
1309
+ background: transparent;
1310
+ color: rgb(255 255 255 / 90%);
1311
+ }
1312
+ .ui.inverted.menu .item.menu {
1313
+ background: transparent;
1314
+ }
1315
+
1316
+ /*--- Border ---*/
1317
+
1318
+ .ui.inverted.menu .item::before {
1319
+ background: rgb(255 255 255 / 8%);
1320
+ }
1321
+ .ui.vertical.inverted.menu .item::before {
1322
+ background: rgb(255 255 255 / 8%);
1323
+ }
1324
+
1325
+ /* Sub Menu */
1326
+ .ui.vertical.inverted.menu .menu .item,
1327
+ .ui.vertical.inverted.menu .menu .item a:not(.ui) {
1328
+ color: rgb(255 255 255 / 50%);
1329
+ }
1330
+
1331
+ /* Header */
1332
+ .ui.inverted.menu .header.item {
1333
+ margin: 0em;
1334
+ background: transparent;
1335
+ box-shadow: none;
1336
+ }
1337
+
1338
+ /* Disabled */
1339
+ .ui.inverted.menu .item.disabled,
1340
+ .ui.inverted.menu .item.disabled:hover {
1341
+ color: rgb(225 225 225 / 30%);
1342
+ }
1343
+
1344
+ /*--- Hover ---*/
1345
+
1346
+ .ui.link.inverted.menu .item:hover,
1347
+ .ui.inverted.menu .dropdown.item:hover,
1348
+ .ui.inverted.menu .link.item:hover,
1349
+ .ui.inverted.menu a.item:hover {
1350
+ background: rgb(255 255 255 / 8%);
1351
+ color: #ffffff;
1352
+ }
1353
+ .ui.vertical.inverted.menu .item .menu a.item:hover,
1354
+ .ui.vertical.inverted.menu .item .menu .link.item:hover {
1355
+ background: transparent;
1356
+ color: #ffffff;
1357
+ }
1358
+
1359
+ /*--- Pressed ---*/
1360
+
1361
+ .ui.inverted.menu a.item:active,
1362
+ .ui.inverted.menu .link.item:active {
1363
+ background: rgb(255 255 255 / 8%);
1364
+ color: #ffffff;
1365
+ }
1366
+
1367
+ /*--- Active ---*/
1368
+
1369
+ .ui.inverted.menu .active.item {
1370
+ background: rgb(255 255 255 / 15%);
1371
+ color: #ffffff !important;
1372
+ }
1373
+ .ui.inverted.vertical.menu .item .menu .active.item {
1374
+ background: transparent;
1375
+ color: #FFFFFF;
1376
+ }
1377
+ .ui.inverted.pointing.menu .active.item::after {
1378
+ background: #3D3E3F !important;
1379
+ margin: 0em !important;
1380
+ box-shadow: none !important;
1381
+ border: none !important;
1382
+ }
1383
+
1384
+ /*--- Active Hover ---*/
1385
+
1386
+ .ui.inverted.menu .active.item:hover {
1387
+ background: rgb(255 255 255 / 15%);
1388
+ color: #FFFFFF !important;
1389
+ }
1390
+ .ui.inverted.pointing.menu .active.item:hover::after {
1391
+ background: #3D3E3F !important;
1392
+ }
1393
+
1394
+ /*--------------
1395
+ Floated
1396
+ ---------------*/
1397
+
1398
+ .ui.floated.menu {
1399
+ float: left;
1400
+ margin: 0rem 0.5rem 0rem 0rem;
1401
+ }
1402
+ .ui.floated.menu .item:last-child::before {
1403
+ display: none;
1404
+ }
1405
+ .ui.right.floated.menu {
1406
+ float: right;
1407
+ margin: 0rem 0rem 0rem 0.5rem;
1408
+ }
1409
+
1410
+ /*--------------
1411
+ Inverted
1412
+ ---------------*/
1413
+
1414
+
1415
+ /* Red */
1416
+ .ui.inverted.menu .red.active.item,
1417
+ .ui.inverted.red.menu {
1418
+ background-color: #DB2828;
1419
+ }
1420
+ .ui.inverted.red.menu .item::before {
1421
+ background-color: rgb(34 36 38 / 10%);
1422
+ }
1423
+ .ui.inverted.red.menu .active.item {
1424
+ background-color: rgb(0 0 0 / 10%) !important;
1425
+ }
1426
+
1427
+ /* Orange */
1428
+ .ui.inverted.menu .orange.active.item,
1429
+ .ui.inverted.orange.menu {
1430
+ background-color: #F2711C;
1431
+ }
1432
+ .ui.inverted.orange.menu .item::before {
1433
+ background-color: rgb(34 36 38 / 10%);
1434
+ }
1435
+ .ui.inverted.orange.menu .active.item {
1436
+ background-color: rgb(0 0 0 / 10%) !important;
1437
+ }
1438
+
1439
+ /* Yellow */
1440
+ .ui.inverted.menu .yellow.active.item,
1441
+ .ui.inverted.yellow.menu {
1442
+ background-color: #FBBD08;
1443
+ }
1444
+ .ui.inverted.yellow.menu .item::before {
1445
+ background-color: rgb(34 36 38 / 10%);
1446
+ }
1447
+ .ui.inverted.yellow.menu .active.item {
1448
+ background-color: rgb(0 0 0 / 10%) !important;
1449
+ }
1450
+
1451
+ /* Olive */
1452
+ .ui.inverted.menu .olive.active.item,
1453
+ .ui.inverted.olive.menu {
1454
+ background-color: #B5CC18;
1455
+ }
1456
+ .ui.inverted.olive.menu .item::before {
1457
+ background-color: rgb(34 36 38 / 10%);
1458
+ }
1459
+ .ui.inverted.olive.menu .active.item {
1460
+ background-color: rgb(0 0 0 / 10%) !important;
1461
+ }
1462
+
1463
+ /* Green */
1464
+ .ui.inverted.menu .green.active.item,
1465
+ .ui.inverted.green.menu {
1466
+ background-color: #21BA45;
1467
+ }
1468
+ .ui.inverted.green.menu .item::before {
1469
+ background-color: rgb(34 36 38 / 10%);
1470
+ }
1471
+ .ui.inverted.green.menu .active.item {
1472
+ background-color: rgb(0 0 0 / 10%) !important;
1473
+ }
1474
+
1475
+ /* Teal */
1476
+ .ui.inverted.menu .teal.active.item,
1477
+ .ui.inverted.teal.menu {
1478
+ background-color: #00B5AD;
1479
+ }
1480
+ .ui.inverted.teal.menu .item::before {
1481
+ background-color: rgb(34 36 38 / 10%);
1482
+ }
1483
+ .ui.inverted.teal.menu .active.item {
1484
+ background-color: rgb(0 0 0 / 10%) !important;
1485
+ }
1486
+
1487
+ /* Blue */
1488
+ .ui.inverted.menu .blue.active.item,
1489
+ .ui.inverted.blue.menu {
1490
+ background-color: #2185D0;
1491
+ }
1492
+ .ui.inverted.blue.menu .item::before {
1493
+ background-color: rgb(34 36 38 / 10%);
1494
+ }
1495
+ .ui.inverted.blue.menu .active.item {
1496
+ background-color: rgb(0 0 0 / 10%) !important;
1497
+ }
1498
+
1499
+ /* Violet */
1500
+ .ui.inverted.menu .violet.active.item,
1501
+ .ui.inverted.violet.menu {
1502
+ background-color: #6435C9;
1503
+ }
1504
+ .ui.inverted.violet.menu .item::before {
1505
+ background-color: rgb(34 36 38 / 10%);
1506
+ }
1507
+ .ui.inverted.violet.menu .active.item {
1508
+ background-color: rgb(0 0 0 / 10%) !important;
1509
+ }
1510
+
1511
+ /* Purple */
1512
+ .ui.inverted.menu .purple.active.item,
1513
+ .ui.inverted.purple.menu {
1514
+ background-color: #A333C8;
1515
+ }
1516
+ .ui.inverted.purple.menu .item::before {
1517
+ background-color: rgb(34 36 38 / 10%);
1518
+ }
1519
+ .ui.inverted.purple.menu .active.item {
1520
+ background-color: rgb(0 0 0 / 10%) !important;
1521
+ }
1522
+
1523
+ /* Pink */
1524
+ .ui.inverted.menu .pink.active.item,
1525
+ .ui.inverted.pink.menu {
1526
+ background-color: #E03997;
1527
+ }
1528
+ .ui.inverted.pink.menu .item::before {
1529
+ background-color: rgb(34 36 38 / 10%);
1530
+ }
1531
+ .ui.inverted.pink.menu .active.item {
1532
+ background-color: rgb(0 0 0 / 10%) !important;
1533
+ }
1534
+
1535
+ /* Brown */
1536
+ .ui.inverted.menu .brown.active.item,
1537
+ .ui.inverted.brown.menu {
1538
+ background-color: #A5673F;
1539
+ }
1540
+ .ui.inverted.brown.menu .item::before {
1541
+ background-color: rgb(34 36 38 / 10%);
1542
+ }
1543
+ .ui.inverted.brown.menu .active.item {
1544
+ background-color: rgb(0 0 0 / 10%) !important;
1545
+ }
1546
+
1547
+ /* Grey */
1548
+ .ui.inverted.menu .grey.active.item,
1549
+ .ui.inverted.grey.menu {
1550
+ background-color: #767676;
1551
+ }
1552
+ .ui.inverted.grey.menu .item::before {
1553
+ background-color: rgb(34 36 38 / 10%);
1554
+ }
1555
+ .ui.inverted.grey.menu .active.item {
1556
+ background-color: rgb(0 0 0 / 10%) !important;
1557
+ }
1558
+
1559
+ /*--------------
1560
+ Fitted
1561
+ ---------------*/
1562
+
1563
+ .ui.fitted.menu .item,
1564
+ .ui.fitted.menu .item .menu .item,
1565
+ .ui.menu .fitted.item {
1566
+ padding: 0em;
1567
+ }
1568
+ .ui.horizontally.fitted.menu .item,
1569
+ .ui.horizontally.fitted.menu .item .menu .item,
1570
+ .ui.menu .horizontally.fitted.item {
1571
+ padding-top: 0.9285em;
1572
+ padding-bottom: 0.9285em;
1573
+ }
1574
+ .ui.vertically.fitted.menu .item,
1575
+ .ui.vertically.fitted.menu .item .menu .item,
1576
+ .ui.menu .vertically.fitted.item {
1577
+ padding-left: 1.1428em;
1578
+ padding-right: 1.1428em;
1579
+ }
1580
+
1581
+ /*--------------
1582
+ Borderless
1583
+ ---------------*/
1584
+
1585
+ .ui.borderless.menu .item::before,
1586
+ .ui.borderless.menu .item .menu .item::before,
1587
+ .ui.menu .borderless.item::before {
1588
+ background: none !important;
1589
+ }
1590
+
1591
+ /*-------------------
1592
+ Compact
1593
+ --------------------*/
1594
+
1595
+ .ui.compact.menu {
1596
+ display: inline-flex;
1597
+ margin: 0em;
1598
+ vertical-align: middle;
1599
+ }
1600
+ .ui.compact.vertical.menu {
1601
+ display: inline-block;
1602
+ }
1603
+ .ui.compact.menu .item:last-child {
1604
+ border-radius: 0em 0.2857rem 0.2857rem 0em;
1605
+ }
1606
+ .ui.compact.menu .item:last-child::before {
1607
+ display: none;
1608
+ }
1609
+ .ui.compact.vertical.menu {
1610
+ width: auto !important;
1611
+ }
1612
+ .ui.compact.vertical.menu .item:last-child::before {
1613
+ display: block;
1614
+ }
1615
+
1616
+ /*-------------------
1617
+ Fluid
1618
+ --------------------*/
1619
+
1620
+ .ui.menu.fluid,
1621
+ .ui.vertical.menu.fluid {
1622
+ width: 100% !important;
1623
+ }
1624
+
1625
+ /*-------------------
1626
+ Evenly Sized
1627
+ --------------------*/
1628
+
1629
+ .ui.item.menu,
1630
+ .ui.item.menu .item {
1631
+ width: 100%;
1632
+ padding-left: 0em !important;
1633
+ padding-right: 0em !important;
1634
+ margin-left: 0em !important;
1635
+ margin-right: 0em !important;
1636
+ text-align: center;
1637
+ justify-content: center;
1638
+ }
1639
+ .ui.attached.item.menu {
1640
+ margin: 0em -1px !important;
1641
+ }
1642
+ .ui.item.menu .item:last-child::before {
1643
+ display: none;
1644
+ }
1645
+ .ui.menu.two.item .item {
1646
+ width: 50%;
1647
+ }
1648
+ .ui.menu.three.item .item {
1649
+ width: 33.333%;
1650
+ }
1651
+ .ui.menu.four.item .item {
1652
+ width: 25%;
1653
+ }
1654
+ .ui.menu.five.item .item {
1655
+ width: 20%;
1656
+ }
1657
+ .ui.menu.six.item .item {
1658
+ width: 16.666%;
1659
+ }
1660
+ .ui.menu.seven.item .item {
1661
+ width: 14.285%;
1662
+ }
1663
+ .ui.menu.eight.item .item {
1664
+ width: 12.5%;
1665
+ }
1666
+ .ui.menu.nine.item .item {
1667
+ width: 11.11%;
1668
+ }
1669
+ .ui.menu.ten.item .item {
1670
+ width: 10%;
1671
+ }
1672
+ .ui.menu.eleven.item .item {
1673
+ width: 9.09%;
1674
+ }
1675
+ .ui.menu.twelve.item .item {
1676
+ width: 8.333%;
1677
+ }
1678
+
1679
+ /*--------------
1680
+ Fixed
1681
+ ---------------*/
1682
+
1683
+ .ui.menu.fixed {
1684
+ position: fixed;
1685
+ z-index: 101;
1686
+ margin: 0em;
1687
+ width: 100%;
1688
+ }
1689
+ .ui.menu.fixed,
1690
+ .ui.menu.fixed .item:first-child,
1691
+ .ui.menu.fixed .item:last-child {
1692
+ border-radius: 0px !important;
1693
+ }
1694
+ .ui.fixed.menu,
1695
+ .ui[class*="top fixed"].menu {
1696
+ inset: 0px auto auto 0px;
1697
+ }
1698
+ .ui[class*="top fixed"].menu {
1699
+ border-top: none;
1700
+ border-left: none;
1701
+ border-right: none;
1702
+ }
1703
+ .ui[class*="right fixed"].menu {
1704
+ border-top: none;
1705
+ border-bottom: none;
1706
+ border-right: none;
1707
+ inset: 0px 0px auto auto;
1708
+ width: auto;
1709
+ height: 100%;
1710
+ }
1711
+ .ui[class*="bottom fixed"].menu {
1712
+ border-bottom: none;
1713
+ border-left: none;
1714
+ border-right: none;
1715
+ inset: auto auto 0px 0px;
1716
+ }
1717
+ .ui[class*="left fixed"].menu {
1718
+ border-top: none;
1719
+ border-bottom: none;
1720
+ border-left: none;
1721
+ inset: 0px auto auto 0px;
1722
+ width: auto;
1723
+ height: 100%;
1724
+ }
1725
+
1726
+ /* Coupling with Grid */
1727
+ .ui.fixed.menu + .ui.grid {
1728
+ padding-top: 2.75rem;
1729
+ }
1730
+
1731
+ /*-------------------
1732
+ Pointing
1733
+ --------------------*/
1734
+
1735
+ .ui.pointing.menu .item::after {
1736
+ visibility: hidden;
1737
+ position: absolute;
1738
+ content: '';
1739
+ top: 100%;
1740
+ left: 50%;
1741
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
1742
+ background: none;
1743
+ margin: 0.5px 0em 0em;
1744
+ width: 0.57142857em;
1745
+ height: 0.57142857em;
1746
+ border: none;
1747
+ border-bottom: 1px solid #D4D4D5;
1748
+ border-right: 1px solid #D4D4D5;
1749
+ z-index: 2;
1750
+ transition: background 0.1s ease;
1751
+ }
1752
+ .ui.vertical.pointing.menu .item::after {
1753
+ position: absolute;
1754
+ inset: 50% 0% auto auto;
1755
+ transform: translateX(50%) translateY(-50%) rotate(45deg);
1756
+ margin: 0em -0.5px 0em 0em;
1757
+ border: none;
1758
+ border-top: 1px solid #D4D4D5;
1759
+ border-right: 1px solid #D4D4D5;
1760
+ }
1761
+
1762
+ /* Active */
1763
+ .ui.pointing.menu .active.item::after {
1764
+ visibility: visible;
1765
+ }
1766
+ .ui.pointing.menu .active.dropdown.item::after {
1767
+ visibility: hidden;
1768
+ }
1769
+
1770
+ /* Don't double up pointers */
1771
+ .ui.pointing.menu .dropdown.active.item::after,
1772
+ .ui.pointing.menu .active.item .menu .active.item::after {
1773
+ display: none;
1774
+ }
1775
+
1776
+ /* Colors */
1777
+ .ui.pointing.menu .active.item:hover::after {
1778
+ background-color: #F2F2F2;
1779
+ }
1780
+ .ui.pointing.menu .active.item::after {
1781
+ background-color: #F2F2F2;
1782
+ }
1783
+ .ui.pointing.menu .active.item:hover::after {
1784
+ background-color: #F2F2F2;
1785
+ }
1786
+ .ui.vertical.pointing.menu .active.item:hover::after {
1787
+ background-color: #F2F2F2;
1788
+ }
1789
+ .ui.vertical.pointing.menu .active.item::after {
1790
+ background-color: #F2F2F2;
1791
+ }
1792
+ .ui.vertical.pointing.menu .menu .active.item::after {
1793
+ background-color: #FFFFFF;
1794
+ }
1795
+
1796
+ /*--------------
1797
+ Attached
1798
+ ---------------*/
1799
+
1800
+
1801
+ /* Middle */
1802
+ .ui.attached.menu {
1803
+ top: 0px;
1804
+ bottom: 0px;
1805
+ border-radius: 0px;
1806
+ margin: 0em -1px;
1807
+ width: calc(100% - (-1px * 2));
1808
+ max-width: calc(100% - (-1px * 2));
1809
+ box-shadow: none;
1810
+ }
1811
+ .ui.attached + .ui.attached.menu:not(.top) {
1812
+ border-top: none;
1813
+ }
1814
+
1815
+ /* Top */
1816
+ .ui[class*="top attached"].menu {
1817
+ bottom: 0px;
1818
+ margin-bottom: 0em;
1819
+ top: 0px;
1820
+ margin-top: 1rem;
1821
+ border-radius: 0.2857rem 0.2857rem 0em 0em;
1822
+ }
1823
+ .ui.menu[class*="top attached"]:first-child {
1824
+ margin-top: 0em;
1825
+ }
1826
+
1827
+ /* Bottom */
1828
+ .ui[class*="bottom attached"].menu {
1829
+ bottom: 0px;
1830
+ margin-top: 0em;
1831
+ top: 0px;
1832
+ margin-bottom: 1rem;
1833
+ box-shadow: 0px 1px 2px 0 rgb(34 36 38 / 15%), none;
1834
+ border-radius: 0em 0em 0.2857rem 0.2857rem;
1835
+ }
1836
+ .ui[class*="bottom attached"].menu:last-child {
1837
+ margin-bottom: 0em;
1838
+ }
1839
+
1840
+ /* Attached Menu Item */
1841
+ .ui.top.attached.menu > .item:first-child {
1842
+ border-radius: 0.2857rem 0em 0em;
1843
+ }
1844
+ .ui.bottom.attached.menu > .item:first-child {
1845
+ border-radius: 0em 0em 0em 0.2857rem;
1846
+ }
1847
+
1848
+ /* Tabular Attached */
1849
+ .ui.attached.menu:not(.tabular) {
1850
+ border: 1px solid #D4D4D5;
1851
+ }
1852
+ .ui.attached.inverted.menu {
1853
+ border: none;
1854
+ }
1855
+ .ui.attached.tabular.menu {
1856
+ margin-left: 0;
1857
+ margin-right: 0;
1858
+ width: 100%;
1859
+ }
1860
+
1861
+ /*--------------
1862
+ Sizes
1863
+ ---------------*/
1864
+
1865
+
1866
+ /* Mini */
1867
+ .ui.mini.menu {
1868
+ font-size: 0.7857rem;
1869
+ }
1870
+ .ui.mini.vertical.menu {
1871
+ width: 9rem;
1872
+ }
1873
+
1874
+ /* Tiny */
1875
+ .ui.tiny.menu {
1876
+ font-size: 0.8571rem;
1877
+ }
1878
+ .ui.tiny.vertical.menu {
1879
+ width: 11rem;
1880
+ }
1881
+
1882
+ /* Small */
1883
+ .ui.small.menu {
1884
+ font-size: 0.9285rem;
1885
+ }
1886
+ .ui.small.vertical.menu {
1887
+ width: 13rem;
1888
+ }
1889
+
1890
+ /* Medium */
1891
+ .ui.menu {
1892
+ font-size: 1rem;
1893
+ }
1894
+ .ui.vertical.menu {
1895
+ width: 15rem;
1896
+ }
1897
+
1898
+ /* Large */
1899
+ .ui.large.menu {
1900
+ font-size: 1.0714rem;
1901
+ }
1902
+ .ui.large.vertical.menu {
1903
+ width: 18rem;
1904
+ }
1905
+
1906
+ /* Huge */
1907
+ .ui.huge.menu {
1908
+ font-size: 1.2143rem;
1909
+ }
1910
+ .ui.huge.vertical.menu {
1911
+ width: 22rem;
1912
+ }
1913
+
1914
+ /* Big */
1915
+ .ui.big.menu {
1916
+ font-size: 1.1428rem;
1917
+ }
1918
+ .ui.big.vertical.menu {
1919
+ width: 20rem;
1920
+ }
1921
+
1922
+ /* Massive */
1923
+ .ui.massive.menu {
1924
+ font-size: 1.2857rem;
1925
+ }
1926
+ .ui.massive.vertical.menu {
1927
+ width: 25rem;
1928
+ }
1929
+
1930
+
1931
+ /*******************************
1932
+ Theme Overrides
1933
+ *******************************/
1934
+
1935
+
1936
+
1937
+ /*******************************
1938
+ Site Overrides
1939
+ *******************************/
1940
+