semantic-ui-sass 0.19.3.1 → 1.7.0.0

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