semantic-ui-sass 1.12.3.0 → 2.0.4.0

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