less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/semantic_ui/definitions/behaviors/api.js +394 -188
  3. data/assets/javascripts/semantic_ui/definitions/behaviors/colorize.js +4 -2
  4. data/assets/javascripts/semantic_ui/definitions/behaviors/form.js +263 -125
  5. data/assets/javascripts/semantic_ui/definitions/behaviors/state.js +3 -3
  6. data/assets/javascripts/semantic_ui/definitions/behaviors/visibility.js +213 -96
  7. data/assets/javascripts/semantic_ui/definitions/behaviors/visit.js +6 -4
  8. data/assets/javascripts/semantic_ui/definitions/globals/site.js +4 -4
  9. data/assets/javascripts/semantic_ui/definitions/modules/accordion.js +66 -52
  10. data/assets/javascripts/semantic_ui/definitions/modules/checkbox.js +309 -112
  11. data/assets/javascripts/semantic_ui/definitions/modules/dimmer.js +24 -26
  12. data/assets/javascripts/semantic_ui/definitions/modules/dropdown.js +2005 -590
  13. data/assets/javascripts/semantic_ui/definitions/modules/embed.js +662 -0
  14. data/assets/javascripts/semantic_ui/definitions/modules/modal.js +106 -79
  15. data/assets/javascripts/semantic_ui/definitions/modules/nag.js +7 -8
  16. data/assets/javascripts/semantic_ui/definitions/modules/popup.js +323 -194
  17. data/assets/javascripts/semantic_ui/definitions/modules/progress.js +111 -103
  18. data/assets/javascripts/semantic_ui/definitions/modules/rating.js +78 -54
  19. data/assets/javascripts/semantic_ui/definitions/modules/search.js +304 -122
  20. data/assets/javascripts/semantic_ui/definitions/modules/shape.js +93 -47
  21. data/assets/javascripts/semantic_ui/definitions/modules/sidebar.js +83 -149
  22. data/assets/javascripts/semantic_ui/definitions/modules/sticky.js +99 -29
  23. data/assets/javascripts/semantic_ui/definitions/modules/tab.js +219 -124
  24. data/assets/javascripts/semantic_ui/definitions/modules/transition.js +202 -171
  25. data/assets/stylesheets/semantic_ui/definitions/collections/breadcrumb.less +2 -1
  26. data/assets/stylesheets/semantic_ui/definitions/collections/form.less +135 -58
  27. data/assets/stylesheets/semantic_ui/definitions/collections/grid.less +366 -383
  28. data/assets/stylesheets/semantic_ui/definitions/collections/menu.less +838 -631
  29. data/assets/stylesheets/semantic_ui/definitions/collections/message.less +89 -71
  30. data/assets/stylesheets/semantic_ui/definitions/collections/table.less +183 -131
  31. data/assets/stylesheets/semantic_ui/definitions/elements/button.less +1097 -300
  32. data/assets/stylesheets/semantic_ui/definitions/elements/container.less +135 -0
  33. data/assets/stylesheets/semantic_ui/definitions/elements/divider.less +31 -30
  34. data/assets/stylesheets/semantic_ui/definitions/elements/flag.less +1 -1
  35. data/assets/stylesheets/semantic_ui/definitions/elements/header.less +209 -121
  36. data/assets/stylesheets/semantic_ui/definitions/elements/icon.less +201 -96
  37. data/assets/stylesheets/semantic_ui/definitions/elements/image.less +26 -11
  38. data/assets/stylesheets/semantic_ui/definitions/elements/input.less +49 -14
  39. data/assets/stylesheets/semantic_ui/definitions/elements/label.less +391 -221
  40. data/assets/stylesheets/semantic_ui/definitions/elements/list.less +107 -68
  41. data/assets/stylesheets/semantic_ui/definitions/elements/loader.less +3 -1
  42. data/assets/stylesheets/semantic_ui/definitions/elements/rail.less +34 -25
  43. data/assets/stylesheets/semantic_ui/definitions/elements/reveal.less +25 -10
  44. data/assets/stylesheets/semantic_ui/definitions/elements/segment.less +261 -173
  45. data/assets/stylesheets/semantic_ui/definitions/elements/step.less +169 -70
  46. data/assets/stylesheets/semantic_ui/definitions/globals/reset.less +1 -1
  47. data/assets/stylesheets/semantic_ui/definitions/globals/site.less +3 -1
  48. data/assets/stylesheets/semantic_ui/definitions/modules/accordion.less +1 -2
  49. data/assets/stylesheets/semantic_ui/definitions/modules/checkbox.less +175 -103
  50. data/assets/stylesheets/semantic_ui/definitions/modules/dimmer.less +26 -15
  51. data/assets/stylesheets/semantic_ui/definitions/modules/dropdown.less +349 -80
  52. data/assets/stylesheets/semantic_ui/definitions/modules/embed.less +174 -0
  53. data/assets/stylesheets/semantic_ui/definitions/modules/modal.less +83 -36
  54. data/assets/stylesheets/semantic_ui/definitions/modules/nag.less +1 -1
  55. data/assets/stylesheets/semantic_ui/definitions/modules/popup.less +48 -7
  56. data/assets/stylesheets/semantic_ui/definitions/modules/progress.less +160 -107
  57. data/assets/stylesheets/semantic_ui/definitions/modules/rating.less +57 -54
  58. data/assets/stylesheets/semantic_ui/definitions/modules/search.less +55 -10
  59. data/assets/stylesheets/semantic_ui/definitions/modules/shape.less +5 -6
  60. data/assets/stylesheets/semantic_ui/definitions/modules/sidebar.less +9 -5
  61. data/assets/stylesheets/semantic_ui/definitions/modules/sticky.less +1 -1
  62. data/assets/stylesheets/semantic_ui/definitions/modules/tab.less +1 -1
  63. data/assets/stylesheets/semantic_ui/definitions/modules/transition.less +3 -4
  64. data/assets/stylesheets/semantic_ui/definitions/views/card.less +240 -130
  65. data/assets/stylesheets/semantic_ui/definitions/views/comment.less +1 -1
  66. data/assets/stylesheets/semantic_ui/definitions/views/feed.less +15 -8
  67. data/assets/stylesheets/semantic_ui/definitions/views/item.less +13 -13
  68. data/assets/stylesheets/semantic_ui/definitions/views/statistic.less +230 -86
  69. data/assets/stylesheets/semantic_ui/theme.less +22 -15
  70. data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.overrides +5 -5
  71. data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.variables +5 -4
  72. data/assets/stylesheets/semantic_ui/themes/basic/collections/table.variables +1 -0
  73. data/assets/stylesheets/semantic_ui/themes/basic/views/card.variables +6 -4
  74. data/assets/stylesheets/semantic_ui/themes/bookish/elements/header.variables +4 -4
  75. data/assets/stylesheets/semantic_ui/themes/bootstrap3/elements/button.variables +1 -1
  76. data/assets/stylesheets/semantic_ui/themes/chubby/collections/form.overrides +8 -0
  77. data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.overrides +0 -0
  78. data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.variables +40 -0
  79. data/assets/stylesheets/semantic_ui/themes/classic/modules/progress.variables +1 -0
  80. data/assets/stylesheets/semantic_ui/themes/classic/views/card.overrides +1 -1
  81. data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.overrides +0 -0
  82. data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.variables +17 -0
  83. data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.overrides +0 -0
  84. data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.variables +5 -15
  85. data/assets/stylesheets/semantic_ui/themes/default/collections/form.overrides +0 -0
  86. data/assets/stylesheets/semantic_ui/themes/default/collections/form.variables +31 -35
  87. data/assets/stylesheets/semantic_ui/themes/default/collections/grid.overrides +0 -0
  88. data/assets/stylesheets/semantic_ui/themes/default/collections/grid.variables +34 -28
  89. data/assets/stylesheets/semantic_ui/themes/default/collections/menu.overrides +0 -0
  90. data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables +259 -163
  91. data/assets/stylesheets/semantic_ui/themes/default/collections/message.overrides +0 -0
  92. data/assets/stylesheets/semantic_ui/themes/default/collections/message.variables +42 -19
  93. data/assets/stylesheets/semantic_ui/themes/default/collections/table.overrides +0 -3
  94. data/assets/stylesheets/semantic_ui/themes/default/collections/table.variables +63 -59
  95. data/assets/stylesheets/semantic_ui/themes/default/elements/button.overrides +0 -0
  96. data/assets/stylesheets/semantic_ui/themes/default/elements/button.variables +90 -50
  97. data/assets/stylesheets/semantic_ui/themes/default/elements/container.overrides +3 -0
  98. data/assets/stylesheets/semantic_ui/themes/default/elements/container.variables +45 -0
  99. data/assets/stylesheets/semantic_ui/themes/default/elements/divider.overrides +15 -0
  100. data/assets/stylesheets/semantic_ui/themes/default/elements/divider.variables +3 -4
  101. data/assets/stylesheets/semantic_ui/themes/default/elements/flag.overrides +0 -0
  102. data/assets/stylesheets/semantic_ui/themes/default/elements/header.overrides +0 -0
  103. data/assets/stylesheets/semantic_ui/themes/default/elements/header.variables +40 -36
  104. data/assets/stylesheets/semantic_ui/themes/default/elements/icon.overrides +4 -3
  105. data/assets/stylesheets/semantic_ui/themes/default/elements/icon.variables +29 -12
  106. data/assets/stylesheets/semantic_ui/themes/default/elements/image.overrides +0 -0
  107. data/assets/stylesheets/semantic_ui/themes/default/elements/image.variables +5 -3
  108. data/assets/stylesheets/semantic_ui/themes/default/elements/input.overrides +0 -0
  109. data/assets/stylesheets/semantic_ui/themes/default/elements/input.variables +10 -24
  110. data/assets/stylesheets/semantic_ui/themes/default/elements/label.overrides +0 -0
  111. data/assets/stylesheets/semantic_ui/themes/default/elements/label.variables +88 -35
  112. data/assets/stylesheets/semantic_ui/themes/default/elements/list.overrides +0 -0
  113. data/assets/stylesheets/semantic_ui/themes/default/elements/list.variables +53 -34
  114. data/assets/stylesheets/semantic_ui/themes/default/elements/loader.overrides +0 -0
  115. data/assets/stylesheets/semantic_ui/themes/default/elements/loader.variables +9 -10
  116. data/assets/stylesheets/semantic_ui/themes/default/elements/rail.overrides +0 -0
  117. data/assets/stylesheets/semantic_ui/themes/default/elements/rail.variables +13 -5
  118. data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.overrides +0 -0
  119. data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.variables +6 -4
  120. data/assets/stylesheets/semantic_ui/themes/default/elements/segment.overrides +0 -0
  121. data/assets/stylesheets/semantic_ui/themes/default/elements/segment.variables +66 -28
  122. data/assets/stylesheets/semantic_ui/themes/default/elements/step.overrides +0 -0
  123. data/assets/stylesheets/semantic_ui/themes/default/elements/step.variables +60 -31
  124. data/assets/stylesheets/semantic_ui/themes/default/globals/reset.overrides +0 -0
  125. data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables +477 -303
  126. data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.overrides +0 -0
  127. data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.variables +6 -7
  128. data/assets/stylesheets/semantic_ui/themes/default/modules/chatroom.overrides +0 -0
  129. data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.overrides +19 -16
  130. data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.variables +71 -43
  131. data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.overrides +0 -0
  132. data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.variables +12 -9
  133. data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.overrides +0 -5
  134. data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.variables +146 -64
  135. data/assets/stylesheets/semantic_ui/themes/default/modules/{video.overrides → embed.overrides} +0 -0
  136. data/assets/stylesheets/semantic_ui/themes/default/modules/embed.variables +53 -0
  137. data/assets/stylesheets/semantic_ui/themes/default/modules/modal.overrides +0 -0
  138. data/assets/stylesheets/semantic_ui/themes/default/modules/modal.variables +24 -18
  139. data/assets/stylesheets/semantic_ui/themes/default/modules/nag.overrides +0 -0
  140. data/assets/stylesheets/semantic_ui/themes/default/modules/popup.overrides +0 -0
  141. data/assets/stylesheets/semantic_ui/themes/default/modules/popup.variables +3 -9
  142. data/assets/stylesheets/semantic_ui/themes/default/modules/progress.variables +13 -7
  143. data/assets/stylesheets/semantic_ui/themes/default/modules/rating.overrides +0 -0
  144. data/assets/stylesheets/semantic_ui/themes/default/modules/rating.variables +71 -33
  145. data/assets/stylesheets/semantic_ui/themes/default/modules/search.overrides +0 -0
  146. data/assets/stylesheets/semantic_ui/themes/default/modules/search.variables +36 -34
  147. data/assets/stylesheets/semantic_ui/themes/default/modules/shape.overrides +0 -0
  148. data/assets/stylesheets/semantic_ui/themes/default/modules/shape.variables +7 -2
  149. data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.overrides +0 -0
  150. data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.variables +2 -5
  151. data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.overrides +0 -0
  152. data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.variables +2 -7
  153. data/assets/stylesheets/semantic_ui/themes/default/modules/tab.variables +1 -3
  154. data/assets/stylesheets/semantic_ui/themes/default/modules/transition.overrides +8 -9
  155. data/assets/stylesheets/semantic_ui/themes/default/views/ad.variables +2 -2
  156. data/assets/stylesheets/semantic_ui/themes/default/views/card.variables +33 -23
  157. data/assets/stylesheets/semantic_ui/themes/default/views/comment.overrides +0 -0
  158. data/assets/stylesheets/semantic_ui/themes/default/views/feed.overrides +0 -0
  159. data/assets/stylesheets/semantic_ui/themes/default/views/feed.variables +15 -23
  160. data/assets/stylesheets/semantic_ui/themes/default/views/item.overrides +0 -0
  161. data/assets/stylesheets/semantic_ui/themes/default/views/item.variables +12 -11
  162. data/assets/stylesheets/semantic_ui/themes/default/views/statistic.overrides +0 -0
  163. data/assets/stylesheets/semantic_ui/themes/default/views/statistic.variables +25 -24
  164. data/assets/stylesheets/semantic_ui/themes/flat/collections/form.overrides +4 -0
  165. data/assets/stylesheets/semantic_ui/themes/flat/collections/form.variables +1 -2
  166. data/assets/stylesheets/semantic_ui/themes/flat/globals/site.variables +1 -0
  167. data/assets/stylesheets/semantic_ui/themes/github/collections/form.variables +1 -1
  168. data/assets/stylesheets/semantic_ui/themes/github/collections/menu.variables +10 -15
  169. data/assets/stylesheets/semantic_ui/themes/github/elements/button.variables +2 -2
  170. data/assets/stylesheets/semantic_ui/themes/github/elements/step.variables +2 -2
  171. data/assets/stylesheets/semantic_ui/themes/instagram/views/card.overrides +12 -0
  172. data/assets/stylesheets/semantic_ui/themes/instagram/views/card.variables +23 -0
  173. data/assets/stylesheets/semantic_ui/themes/material/collections/menu.overrides +1 -0
  174. data/assets/stylesheets/semantic_ui/themes/material/collections/menu.variables +10 -0
  175. data/assets/stylesheets/semantic_ui/themes/material/elements/button.overrides +1 -0
  176. data/assets/stylesheets/semantic_ui/themes/material/elements/button.variables +14 -6
  177. data/assets/stylesheets/semantic_ui/themes/material/globals/site.variables +3 -2
  178. data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.overrides +5 -0
  179. data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.variables +20 -0
  180. data/assets/stylesheets/semantic_ui/themes/raised/elements/button.variables +5 -5
  181. data/assets/stylesheets/semantic_ui/themes/round/elements/button.variables +1 -1
  182. data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.overrides +4 -12
  183. data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.variables +3 -7
  184. data/lib/generators/semantic_ui/install/templates/config/elements/container.overrides +3 -0
  185. data/lib/generators/semantic_ui/install/templates/config/elements/container.variables +3 -0
  186. data/lib/generators/semantic_ui/install/templates/config/modules/embed.overrides +3 -0
  187. data/lib/generators/semantic_ui/install/templates/config/modules/embed.variables +0 -0
  188. data/lib/generators/semantic_ui/install/templates/semantic_ui.css +2 -1
  189. data/lib/generators/semantic_ui/install/templates/semantic_ui.js +1 -1
  190. data/lib/generators/semantic_ui/install/templates/theme.config +5 -3
  191. data/lib/less/rails/semantic_ui/version.rb +1 -1
  192. data/tasks/update.rake +21 -6
  193. metadata +23 -7
  194. data/assets/fonts/semantic_ui/themes/default/assets/fonts/icons.otf +0 -0
  195. data/assets/javascripts/semantic_ui/definitions/modules/video.js +0 -540
  196. data/assets/stylesheets/semantic_ui/definitions/modules/video.less +0 -135
  197. data/assets/stylesheets/semantic_ui/themes/default/modules/video.variables +0 -16
@@ -8,12 +8,12 @@
8
8
  *= depend_on semantic_ui/config/collections/menu.variables
9
9
  */
10
10
 
11
- /*!
12
- * # Semantic UI - Menu
11
+ /*
12
+ * # Semantic - Menu
13
13
  * http://github.com/semantic-org/semantic-ui/
14
14
  *
15
15
  *
16
- * Copyright 2014 Contributors
16
+ * Copyright 2015 Contributor
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -38,12 +38,15 @@
38
38
  ---------------*/
39
39
 
40
40
  .ui.menu {
41
+ display: flex;
41
42
  margin: @margin;
43
+ font-family: @fontFamily;
42
44
  background: @background;
43
- font-size: 0em;
44
45
  font-weight: @fontWeight;
46
+ border: @border;
45
47
  box-shadow: @boxShadow;
46
48
  border-radius: @borderRadius;
49
+ min-height: @minHeight;
47
50
  }
48
51
 
49
52
  .ui.menu:after {
@@ -61,89 +64,59 @@
61
64
  margin-bottom: 0rem;
62
65
  }
63
66
 
64
- .ui.menu .menu {
65
- margin: 0em;
66
- }
67
- .ui.menu:not(.vertical) .menu {
68
- font-size: 0em;
69
- }
70
67
 
71
68
  /*--------------
72
- Colors
69
+ Sub-Menu
73
70
  ---------------*/
74
71
 
75
- /* Text Color */
76
- .ui.menu .item {
77
- color: @menuTextColor;
78
- }
79
- .ui.menu .item .item {
80
- color: @subMenuTextColor;
72
+ .ui.menu .menu {
73
+ margin: 0em;
81
74
  }
82
75
 
83
- /* Hover */
84
- .ui.menu .item .menu a.item:hover,
85
- .ui.menu .item .menu .link.item:hover {
86
- color: @darkTextColor;
76
+ .ui.menu:not(.vertical) > .menu {
77
+ display: flex;
87
78
  }
88
79
 
89
-
90
80
  /*--------------
91
- Items
81
+ Item
92
82
  ---------------*/
93
83
 
84
+ .ui.menu:not(.vertical) .item {
85
+ display: flex;
86
+ align-items: center;
87
+ }
88
+
94
89
  .ui.menu .item {
95
90
  position: relative;
96
- display: inline-block;
97
- padding: @verticalPadding @horizontalPadding;
98
- border-top: @borderSize solid transparent;
99
-
100
- background: @itemBackground;
101
91
  vertical-align: middle;
102
92
  line-height: 1;
103
93
  text-decoration: none;
104
- box-sizing: border-box;
105
-
106
94
  -webkit-tap-highlight-color: transparent;
107
95
  user-select: none;
108
- transition: @transition;
109
- }
110
96
 
97
+ background: @itemBackground;
98
+ padding: @itemVerticalPadding @itemHorizontalPadding;
99
+ text-transform: @itemTextTransform;
100
+ color: @itemTextColor;
101
+ font-weight: @itemFontWeight;
102
+ transition: @itemTransition;
103
+ }
111
104
 
112
- /* Floated Content */
113
105
  .ui.menu > .item:first-child {
114
106
  border-radius: @borderRadius 0px 0px @borderRadius;
115
107
  }
116
- .ui.menu:not(.vertical) .item.left,
117
- .ui.menu:not(.vertical) .menu.left {
118
- float: left;
119
- }
120
- .ui.menu:not(.vertical) .item.right,
121
- .ui.menu:not(.vertical) .menu.right {
122
- float: right;
123
- }
124
-
125
-
126
- /*--------------
127
- Borders
128
- ---------------*/
129
108
 
109
+ /* Border */
130
110
  .ui.menu .item:before {
131
111
  position: absolute;
132
112
  content: '';
133
113
  top: 0%;
134
114
  right: 0px;
135
- width: @dividerSize;
136
115
  height: 100%;
116
+
117
+ width: @dividerSize;
137
118
  background: @dividerBackground;
138
119
  }
139
- .ui.menu > .right.menu:first-child {
140
- display: none;
141
- }
142
- .ui.menu .menu.right .item:before,
143
- .ui.menu .item.right:before {
144
- right: auto;
145
- left: 0px;
146
- }
147
120
 
148
121
  /*--------------
149
122
  Text Content
@@ -154,7 +127,6 @@
154
127
  .ui.menu .item > p:only-child {
155
128
  user-select: text;
156
129
  line-height: @textLineHeight;
157
- color: @textColor;
158
130
  }
159
131
  .ui.menu .item > p:first-child {
160
132
  margin-top: 0;
@@ -173,11 +145,6 @@
173
145
  margin: @iconMargin;
174
146
  }
175
147
 
176
- .ui.menu .item > i.dropdown.icon {
177
- float: @dropdownIconFloat;
178
- margin-left: @dropdownIconDistance;
179
- }
180
-
181
148
  /*--------------
182
149
  Button
183
150
  ---------------*/
@@ -185,12 +152,22 @@
185
152
  .ui.menu:not(.vertical) .item > .button {
186
153
  position: relative;
187
154
  top: @buttonOffset;
188
- margin: -@buttonVerticalPadding 0;
155
+ margin: @buttonMargin;
189
156
  padding-bottom: @buttonVerticalPadding;
190
157
  padding-top: @buttonVerticalPadding;
191
158
  font-size: @buttonSize;
192
159
  }
193
160
 
161
+ /*----------------
162
+ Grid / Container
163
+ -----------------*/
164
+
165
+ .ui.menu > .grid,
166
+ .ui.menu > .container {
167
+ display: flex;
168
+ align-items: inherit;
169
+ flex-direction: inherit;
170
+ }
194
171
 
195
172
  /*--------------
196
173
  Inputs
@@ -215,27 +192,6 @@
215
192
  padding-bottom: @inputVerticalPadding;
216
193
  }
217
194
 
218
- /* Resizes */
219
- .ui.small.menu .item > .input input {
220
- top: @smallInputOffset;
221
- padding-top: @smallInputVerticalPadding;
222
- padding-bottom: @smallInputVerticalPadding;
223
- }
224
- .ui.small.menu .item > .input .button,
225
- .ui.small.menu .item > .input .label {
226
- padding-top: @smallInputVerticalPadding;
227
- padding-bottom: @smallInputVerticalPadding;
228
- }
229
- .ui.large.menu .item > .input input {
230
- top: @largeInputOffset;
231
- padding-bottom: @largeInputVerticalPadding;
232
- padding-top: @largeInputVerticalPadding;
233
- }
234
- .ui.large.menu .item > .input .button,
235
- .ui.large.menu .item > .input .label {
236
- padding-top: @largeInputVerticalPadding;
237
- padding-bottom: @largeInputVerticalPadding;
238
- }
239
195
 
240
196
 
241
197
  /*--------------
@@ -244,55 +200,131 @@
244
200
 
245
201
  .ui.menu .header.item,
246
202
  .ui.vertical.menu .header.item {
247
- background: @headerBackground;
248
203
  margin: 0em;
204
+ background: @headerBackground;
249
205
  text-transform: @headerTextTransform;
250
206
  font-weight: @headerWeight;
251
207
  }
252
208
 
209
+ .ui.vertical.menu .item > .header:not(.ui) {
210
+ margin: @verticalHeaderMargin;
211
+ font-size: @verticalHeaderFontSize;
212
+ font-weight: @verticalHeaderFontWeight;
213
+ }
253
214
 
254
215
  /*--------------
255
- Dropdowns
216
+ Popup
256
217
  ---------------*/
257
218
 
258
- /* Dropdown */
259
- .ui.menu .ui.dropdown.item.visible {
260
- background: @subtleTransparentBlack;
261
- border-bottom-right-radius: 0em;
262
- border-bottom-left-radius: 0em;
219
+ .ui.menu .ui.popup {
220
+ display: none;
263
221
  }
264
- .ui.menu .ui.dropdown.active {
265
- box-shadow: none;
222
+ .ui.menu .ui.visible.popup {
223
+ display: block;
266
224
  }
267
225
 
268
- /* Menu Position */
226
+
227
+ /*--------------
228
+ Dropdowns
229
+ ---------------*/
230
+
231
+
232
+ /* Dropdown Icon */
233
+ .ui.menu .item > i.dropdown.icon {
234
+ padding: 0em;
235
+ float: @dropdownIconFloat;
236
+ margin: 0em 0em 0em @dropdownIconDistance;
237
+ }
238
+
239
+ /* Menu */
269
240
  .ui.menu .dropdown.item .menu {
270
- background: @dropdownBackground;
271
241
  left: 0px;
272
- margin: @dropdownMenuOffset 0px 0px;
273
242
  min-width: ~"calc(100% - 1px)";
274
- box-shadow: @dropdownBoxShadow;
243
+ border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
244
+ background: @dropdownBackground;
245
+ margin: @dropdownMenuDistance 0px 0px;
246
+ box-shadow: @dropdownMenuBoxShadow;
275
247
  }
276
- .ui.menu:not(.secondary) .pointing.dropdown.item .menu {
277
- margin-top: @dropdownPointingDistance;
278
- border-top-left-radius: 0em;
279
- border-top-right-radius: 0em;
248
+
249
+
250
+ /* Menu Items */
251
+ .ui.menu .ui.dropdown .menu > .item {
252
+ margin: 0;
253
+ font-size: @dropdownItemFontSize !important;
254
+ padding: @dropdownItemPadding !important;
255
+ background: @dropdownItemBackground !important;
256
+ color: @dropdownItemColor !important;
257
+ text-transform: @dropdownItemTextTransform !important;
258
+ font-weight: @dropdownItemFontWeight !important;
259
+ box-shadow: @dropdownItemBoxShadow !important;
260
+ transition: @dropdownItemTransition !important;
261
+ }
262
+ .ui.menu .ui.dropdown .menu > .item:hover {
263
+ background: @dropdownHoveredItemBackground !important;
264
+ color: @dropdownHoveredItemColor !important;
265
+ }
266
+ .ui.menu .ui.dropdown .menu > .selected.item {
267
+ background: @dropdownSelectedItemBackground !important;
268
+ color: @dropdownSelectedItemColor !important;
280
269
  }
281
- .ui.menu .simple.dropdown.item .menu {
282
- margin: 0px !important;
270
+ .ui.menu .ui.dropdown .menu > .active.item {
271
+ background: @dropdownActiveItemBackground !important;
272
+ font-weight: @dropdownActiveItemFontWeight !important;
273
+ color: @dropdownActiveItemColor !important;
283
274
  }
284
275
 
276
+ .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
277
+ display: block;
278
+ }
279
+ .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
280
+ display: inline-block;
281
+ font-size: @dropdownItemIconFontSize !important;
282
+ float: @dropdownItemIconFloat;
283
+ margin: @dropdownItemIconMargin;
284
+ }
285
285
 
286
- /* Secondary Menu Dropdown */
287
- .ui.secondary.menu > .menu > .active.dropdown.item {
288
- background-color: transparent;
286
+
287
+ /* Secondary */
288
+ .ui.secondary.menu .dropdown.item > .menu,
289
+ .ui.text.menu .dropdown.item > .menu {
290
+ border-radius: @dropdownMenuBorderRadius;
291
+ margin-top: @secondaryDropdownMenuDistance;
289
292
  }
290
- .ui.secondary.menu .dropdown.item .menu {
291
- left: 0px;
292
- min-width: 100%;
293
+
294
+ /* Pointing */
295
+ .ui.menu .pointing.dropdown.item .menu {
296
+ margin-top: @pointingDropdownMenuDistance;
297
+ }
298
+
299
+ /* Inverted */
300
+ .ui.inverted.menu .search.dropdown.item > .search,
301
+ .ui.inverted.menu .search.dropdown.item > .text {
302
+ color: @invertedSelectionDropdownColor;
303
+ }
304
+
305
+ /* Vertical */
306
+ .ui.vertical.menu .dropdown.item > .icon {
307
+ float: right;
308
+ content: "\f0da";
309
+ margin-left: 1em;
310
+ }
311
+ .ui.vertical.menu .dropdown.item .menu {
312
+ top: 0% !important;
313
+ left: 100%;
314
+ min-width: 0;
315
+ margin: 0em 0em 0em @dropdownMenuDistance;
316
+ box-shadow: @dropdownVerticalMenuBoxShadow;
317
+ border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
318
+ }
319
+ .ui.vertical.menu .active.dropdown.item {
320
+ border-top-right-radius: 0em;
321
+ border-bottom-right-radius: 0em;
322
+ }
323
+ .ui.vertical.menu .dropdown.active.item {
324
+ box-shadow: none;
293
325
  }
294
326
 
295
- /* Even Width Menu Dropdown */
327
+ /* Evenly Divided */
296
328
  .ui.item.menu .dropdown .menu .item {
297
329
  width: 100%;
298
330
  }
@@ -304,9 +336,18 @@
304
336
  .ui.menu .item > .label {
305
337
  background: @labelBackground;
306
338
  color: @labelTextColor;
307
- margin: @labelOffset 0em @labelOffset @labelTextMargin;
339
+ margin-left: @labelTextMargin;
308
340
  padding: @labelVerticalPadding @labelHorizontalPadding;
309
- vertical-align: baseline;
341
+ }
342
+ .ui.vertical.menu .item > .label {
343
+ background: @labelBackground;
344
+ color: @labelTextColor;
345
+ margin-top: @labelOffset;
346
+ margin-bottom: @labelOffset;
347
+ padding: @labelVerticalPadding @labelHorizontalPadding;
348
+ }
349
+ .ui.menu .item > .label:before {
350
+ background-color: @labelBackground;
310
351
  }
311
352
  .ui.menu .item > .floating.label {
312
353
  padding: @labelVerticalPadding @labelHorizontalPadding;
@@ -316,10 +357,51 @@
316
357
  Images
317
358
  ---------------*/
318
359
 
319
- .ui.menu .item > img:only-child {
360
+ .ui.menu .item > img:not(.ui) {
361
+ display: inline-block;
362
+ vertical-align: middle;
363
+ margin: @imageMargin;
364
+ width: @imageWidth;
365
+ }
366
+ .ui.vertical.menu .item > img:not(.ui):only-child {
320
367
  display: block;
321
368
  max-width: 100%;
322
- margin: 0em auto;
369
+ width: @verticalImageWidth;
370
+ }
371
+
372
+ /*******************************
373
+ Coupling
374
+ *******************************/
375
+
376
+ /*--------------
377
+ Sidebar
378
+ ---------------*/
379
+
380
+ /* Show vertical dividers below last */
381
+
382
+ .ui.vertical.sidebar.menu > .item:first-child:before {
383
+ display: block !important;
384
+ }
385
+ .ui.vertical.sidebar.menu > .item::before {
386
+ top: auto;
387
+ bottom: 0px;
388
+ }
389
+
390
+ /*--------------
391
+ Container
392
+ ---------------*/
393
+
394
+ @media only screen and (max-width: @largestMobileScreen) {
395
+ .ui.menu > .ui.container {
396
+ width: 100%;
397
+ margin-left: 0em !important;
398
+ margin-right: 0em !important;
399
+ }
400
+ }
401
+ @media only screen and (min-width: @tabletBreakpoint) {
402
+ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
403
+ border-left: @dividerSize solid @dividerBackground;
404
+ }
323
405
  }
324
406
 
325
407
 
@@ -331,15 +413,14 @@
331
413
  Hover
332
414
  ---------------*/
333
415
 
334
- .ui.link.menu > .item:hover,
335
- .ui.menu > .link.item:hover,
336
- .ui.menu > a.item:hover,
337
- .ui.link.menu .menu > .item:hover,
338
- .ui.menu .menu > .link.item:hover,
339
- .ui.menu .menu > a.item:hover {
416
+
417
+ .ui.link.menu .item:hover,
418
+ .ui.menu .dropdown.item:hover,
419
+ .ui.menu .link.item:hover,
420
+ .ui.menu a.item:hover {
340
421
  cursor: pointer;
341
- background: @hoverBackground;
342
- color: @hoverColor;
422
+ background: @hoverItemBackground;
423
+ color: @hoverItemTextColor;
343
424
  }
344
425
 
345
426
 
@@ -350,57 +431,36 @@
350
431
  .ui.link.menu .item:active,
351
432
  .ui.menu .link.item:active,
352
433
  .ui.menu a.item:active {
353
- background: @pressedBackground;
354
- color: @pressedColor;
434
+ background: @pressedItemBackground;
435
+ color: @pressedItemColor;
355
436
  }
356
437
 
438
+
357
439
  /*--------------
358
440
  Active
359
441
  ---------------*/
360
442
 
361
443
  .ui.menu .active.item {
362
- background: @activeBackground;
363
- color: @selectedTextColor;
364
- font-weight: @activeFontWeight;
365
- box-shadow: 0em @activeBorderSize 0em inset;
444
+ background: @activeItemBackground;
445
+ color: @activeItemTextColor;
446
+ font-weight: @activeItemFontWeight;
447
+ box-shadow: @activeItemBoxShadow;
366
448
  }
367
449
  .ui.menu .active.item > i.icon {
368
450
  opacity: @activeIconOpacity;
369
451
  }
370
452
 
371
- /* Vertical */
372
- .ui.vertical.menu .active.item {
373
- background: @activeBackground;
374
- border-radius: 0em;
375
- box-shadow: @activeBorderSize 0em 0em inset;
376
- }
377
- .ui.vertical.menu > .active.item:first-child {
378
- border-radius: 0em @borderRadius 0em 0em;
379
- }
380
- .ui.vertical.menu > .active.item:last-child {
381
- border-radius: 0em 0em @borderRadius 0em;
382
- }
383
- .ui.vertical.menu > .active.item:only-child {
384
- border-radius: 0em @borderRadius @borderRadius 0em;
385
- }
386
- .ui.vertical.menu .active.item .menu .active.item {
387
- border-left: none;
388
- }
389
- .ui.vertical.menu .item .menu .active.item {
390
- background-color: @subMenuActiveBackground;
391
- box-shadow: none;
392
- }
393
-
394
-
395
453
  /*--------------
396
454
  Active Hover
397
455
  ---------------*/
398
456
 
399
- .ui.vertical.menu .active.item:hover,
400
- .ui.menu .active.item:hover {
401
- background-color: @activeHoverBackground;
457
+ .ui.menu .active.item:hover,
458
+ .ui.vertical.menu .active.item:hover {
459
+ background-color: @activeHoverItemBackground;
460
+ color: @activeHoverItemColor;
402
461
  }
403
462
 
463
+
404
464
  /*--------------
405
465
  Disabled
406
466
  ---------------*/
@@ -408,8 +468,8 @@
408
468
  .ui.menu .item.disabled,
409
469
  .ui.menu .item.disabled:hover {
410
470
  cursor: default;
411
- color: @disabledTextColor;
412
471
  background-color: transparent !important;
472
+ color: @disabledTextColor;
413
473
  }
414
474
 
415
475
 
@@ -417,21 +477,46 @@
417
477
  Types
418
478
  *******************************/
419
479
 
480
+ /*------------------
481
+ Floated Menu / Item
482
+ -------------------*/
483
+
484
+ /* Left Floated */
485
+ .ui.menu:not(.vertical) .left.item,
486
+ .ui.menu:not(.vertical) .left.menu {
487
+ display: flex;
488
+ margin-right: auto !important;
489
+ }
490
+ /* Right Floated */
491
+ .ui.menu:not(.vertical) .right.item,
492
+ .ui.menu:not(.vertical) .right.menu {
493
+ display: flex;
494
+ margin-left: auto !important;
495
+ }
496
+
497
+ /* Swapped Borders */
498
+ .ui.menu .right.item::before,
499
+ .ui.menu .right.menu > .item::before {
500
+ right: auto;
501
+ left: 0;
502
+ }
503
+
504
+
420
505
  /*--------------
421
506
  Vertical
422
507
  ---------------*/
423
508
 
424
509
  .ui.vertical.menu {
510
+ display: block;
425
511
  background: @verticalBackground;
512
+ box-shadow: @verticalBoxShadow;
426
513
  }
427
514
 
428
515
  /*--- Item ---*/
429
516
  .ui.vertical.menu .item {
430
- background: @verticalItemBackground;
431
517
  display: block;
432
- height: auto !important;
518
+ background: @verticalItemBackground;
433
519
  border-top: none;
434
- border-left: @borderSize solid transparent;
435
520
  border-right: none;
436
521
  }
437
522
  .ui.vertical.menu > .item:first-child {
@@ -472,138 +557,50 @@
472
557
  }
473
558
 
474
559
  .ui.vertical.menu .item:first-child:before {
475
- background: none !important;
560
+ display: none !important;
476
561
  }
477
562
 
478
- /*--- Dropdown ---*/
479
- .ui.vertical.menu .dropdown.item > .icon {
480
- float: right;
481
- content: "\f0da";
482
- margin-left: 1em;
483
- }
484
- .ui.vertical.menu .active.dropdown.item {
485
- border-top-right-radius: 0em;
486
- border-bottom-right-radius: 0em;
487
- }
488
- .ui.vertical.menu .dropdown.item .menu {
489
- top: 0% !important;
490
- left: 100%;
491
- margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset;
492
- box-shadow: @dropdownVerticalBoxShadow;
493
- border-radius: 0em @borderRadius @borderRadius @borderRadius;
494
- }
495
- .ui.vertical.menu .dropdown.item .menu .item {
496
- font-size: 1rem;
497
- }
498
- .ui.vertical.menu .dropdown.item .menu .item i.icon {
499
- margin-right: 0em;
500
- }
501
- .ui.vertical.menu .dropdown.item.active {
502
- box-shadow: none;
503
- }
504
563
 
505
564
  /*--- Sub Menu ---*/
506
- .ui.vertical.menu .item:not(.dropdown) > .menu {
507
- margin: @subMenuMargin -@horizontalPadding 0em;
565
+ .ui.vertical.menu .item > .menu {
566
+ margin: @subMenuMargin;
508
567
  }
509
- .ui.vertical.menu .item:not(.dropdown) > .menu > .item {
568
+ .ui.vertical.menu .menu .item {
510
569
  background: none;
511
- padding: @subMenuHorizontalPadding @subMenuVerticalPadding;
570
+ padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
512
571
  font-size: @subMenuFontSize;
572
+ color: @subMenuTextColor;
513
573
  }
514
- .ui.vertical.menu .item > .menu > .item:before {
515
- display: none;
516
- }
517
-
518
-
519
- /*--------------
520
- Tiered
521
- ---------------*/
522
-
523
- .ui.tiered.menu > .menu > .item:hover {
524
- color: @tieredSubMenuActiveColor;
525
- }
526
- .ui.tiered.menu .active.item {
527
- background: @tieredActiveItemBackground;
528
- }
529
- .ui.tiered.menu > .menu .item.active:after {
530
- position: absolute;
531
- content: '';
532
- margin-top: -@dividerSize;
533
- top: 100%;
534
- left: 0px;
535
-
536
- width: 100%;
537
- height: 2px;
538
- background-color: @tieredActiveMenuBackground;
539
- }
540
-
541
- /* Sub Menu */
542
- .ui.tiered.menu .sub.menu {
543
- background-color: @tieredActiveMenuBackground;
544
- border-radius: 0em 0em @borderRadius @borderRadius;
545
- border-top: 1px solid @borderColor;
546
- box-shadow: none;
547
- }
548
- .ui.tiered.menu > .sub.menu > .item {
549
- color: @tieredSubMenuColor;
550
- font-weight: @tieredSubMenuFontWeight;
551
- text-transform: @tieredSubMenuTextTransform;
552
- font-size: @subMenuFontSize;
553
- }
554
-
555
- /* Sub Menu Divider */
556
- .ui.tiered.menu .sub.menu .item:before {
557
- background: none;
558
- }
559
-
560
- /* Sub Menu Hover */
561
- .ui.tiered.menu .sub.menu .item:hover {
562
- background: @tieredSubMenuHoverBackground;
563
- color: @tieredSubMenuHoverColor;
564
- }
565
-
566
- /* Sub Menu Active */
567
- .ui.tiered.menu .sub.menu .active.item {
568
- padding-top: @verticalPadding;
569
- background: @tieredSubMenuActiveBackground;
570
- border-radius: 0;
571
- border-top: medium none;
572
- box-shadow: none;
573
- color: @tieredSubMenuActiveColor !important;
574
+ .ui.vertical.menu .item .menu a.item:hover,
575
+ .ui.vertical.menu .item .menu .link.item:hover {
576
+ color: @darkTextColor;
574
577
  }
575
- .ui.tiered.menu .sub.menu .active.item:after {
578
+ .ui.vertical.menu .menu .item:before {
576
579
  display: none;
577
580
  }
578
581
 
579
- /* Inverted Tiered Menu */
580
- .ui.inverted.tiered.menu > .menu > .item {
581
- color: @invertedUnselectedTextColor;
582
- }
583
- .ui.inverted.tiered.menu .sub.menu {
584
- background-color: @tieredInvertedSubMenuBackground;
585
- }
586
- .ui.inverted.tiered.menu .sub.menu .item {
587
- color: @invertedLightTextColor;
582
+ /* Vertical Active */
583
+ .ui.vertical.menu .active.item {
584
+ background: @activeItemBackground;
585
+ border-radius: 0em;
586
+ box-shadow: @verticalActiveBoxShadow;
588
587
  }
589
- .ui.inverted.tiered.menu > .menu > .item:hover {
590
- color: @invertedHoveredTextColor;
588
+ .ui.vertical.menu > .active.item:first-child {
589
+ border-radius: 0em @borderRadius 0em 0em;
591
590
  }
592
- .ui.inverted.tiered.menu .active.item:after {
593
- display: none;
591
+ .ui.vertical.menu > .active.item:last-child {
592
+ border-radius: 0em 0em @borderRadius 0em;
594
593
  }
595
- .ui.inverted.tiered.menu > .sub.menu > .active.item,
596
- .ui.inverted.tiered.menu > .menu > .active.item {
597
- color: @invertedSelectedTextColor !important;
598
- box-shadow: none;
594
+ .ui.vertical.menu > .active.item:only-child {
595
+ border-radius: 0em @borderRadius @borderRadius 0em;
599
596
  }
600
-
601
- /* Tiered Pointing */
602
- .ui.pointing.tiered.menu > .menu > .item:after {
603
- display: none;
597
+ .ui.vertical.menu .active.item .menu .active.item {
598
+ border-left: none;
604
599
  }
605
- .ui.pointing.tiered.menu > .sub.menu > .item:after {
606
- display: block;
600
+ .ui.vertical.menu .item .menu .active.item {
601
+ background-color: @subMenuActiveBackground;
602
+ font-weight: @subMenuActiveFontWeight;
603
+ color: @subMenuActiveTextColor;
607
604
  }
608
605
 
609
606
 
@@ -615,6 +612,7 @@
615
612
  background-color: transparent;
616
613
  border-radius: 0em;
617
614
  box-shadow: none !important;
615
+ border: none;
618
616
  border-bottom: @tabularBorderWidth solid @tabularBorderColor;
619
617
  }
620
618
  .ui.tabular.fluid.menu {
@@ -625,7 +623,8 @@
625
623
 
626
624
  border-left: @tabularBorderWidth solid transparent;
627
625
  border-right: @tabularBorderWidth solid transparent;
628
- border-top: @tabularBorderWidth solid transparent;
626
+ border-top: @tabularOppositeBorderWidth solid transparent;
627
+ border-bottom: none;
629
628
 
630
629
  padding-left: @tabularHorizontalPadding;
631
630
  padding-right: @tabularHorizontalPadding;
@@ -643,28 +642,56 @@
643
642
 
644
643
  /* Active */
645
644
  .ui.tabular.menu .active.item {
646
- position: relative;
647
- border-bottom: none;
648
- vertical-align: bottom;
649
-
650
645
  background-color: @tabularMenuActiveBackground;
651
646
  color: @tabularActiveColor;
647
+ border-top-width: @tabularBorderWidth;
652
648
  border-color: @tabularBorderColor;
653
649
  font-weight: @tabularActiveWeight;
654
650
  margin-bottom: -@tabularBorderWidth;
655
651
  box-shadow: @tabularActiveBoxShadow;
656
- border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px;
652
+ border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important;
657
653
  }
658
654
 
659
655
  /* Coupling with segment for attachment */
660
- .ui.attached.tabular.menu {
661
- position: relative;
662
- z-index: 2;
663
- }
664
656
  .ui.tabular.menu + .bottom.attached.segment,
665
657
  .ui.tabular.menu ~ .bottom.attached.segment + .bottom.attached.segment {
666
658
  border-top: none;
667
659
  margin: 0px;
660
+ width: 100%;
661
+ }
662
+
663
+ /* Vertical Tabular */
664
+ .ui.vertical.tabular.menu {
665
+ background-color: transparent;
666
+ border-radius: 0em;
667
+ box-shadow: none !important;
668
+ border-bottom: none;
669
+ border-right: @tabularBorderWidth solid @tabularBorderColor;
670
+ }
671
+ .ui.vertical.tabular.menu .item {
672
+ background: none;
673
+ border-left: @tabularBorderWidth solid transparent;
674
+ border-bottom: @tabularBorderWidth solid transparent;
675
+ border-top: @tabularBorderWidth solid transparent;
676
+ border-right: none;
677
+ }
678
+
679
+ /* Active */
680
+ .ui.vertical.tabular.menu .active.item {
681
+ background-color: @tabularMenuActiveBackground;
682
+ color: @tabularMenuActiveColor;
683
+ border-color: @tabularBorderColor;
684
+ margin: 0px -@tabularBorderWidth 0px 0px;
685
+ border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;
686
+ }
687
+
688
+ /* Dropdown */
689
+ .ui.tabular.menu .active.dropdown.item {
690
+ margin-bottom: 0px;
691
+ border-left: @tabularBorderWidth solid transparent;
692
+ border-right: @tabularBorderWidth solid transparent;
693
+ border-top: @tabularOppositeBorderWidth solid transparent;
694
+ border-bottom: none;
668
695
  }
669
696
 
670
697
 
@@ -675,9 +702,18 @@
675
702
 
676
703
  .ui.pagination.menu {
677
704
  margin: 0em;
678
- display: inline-block;
705
+ display: inline-flex;
679
706
  vertical-align: middle;
680
707
  }
708
+ .ui.pagination.menu .item:last-child {
709
+ border-radius: 0em @borderRadius @borderRadius 0em;
710
+ }
711
+ .ui.compact.menu .item:last-child {
712
+ border-radius: 0em @borderRadius @borderRadius 0em;
713
+ }
714
+ .ui.pagination.menu .item:last-child:before {
715
+ display: none;
716
+ }
681
717
 
682
718
  .ui.pagination.menu .item {
683
719
  min-width: @paginationMinWidth;
@@ -686,15 +722,13 @@
686
722
  .ui.pagination.menu .icon.item i.icon {
687
723
  vertical-align: top;
688
724
  }
689
- .ui.pagination.menu.floated {
690
- display: block;
691
- }
692
725
 
693
726
  /* Active */
694
727
  .ui.pagination.menu .active.item {
695
728
  border-top: none;
696
- padding-top: @verticalPadding;
729
+ padding-top: @itemVerticalPadding;
697
730
  background-color: @paginationActiveBackground;
731
+ color: @paginationActiveTextColor;
698
732
  box-shadow: none;
699
733
  }
700
734
 
@@ -704,77 +738,89 @@
704
738
 
705
739
  .ui.secondary.menu {
706
740
  background: @secondaryBackground;
741
+ margin-left: -@secondaryItemSpacing;
742
+ margin-right: -@secondaryItemSpacing;
707
743
  border-radius: 0em;
744
+ border: none;
708
745
  box-shadow: none;
709
746
  }
710
- .ui.secondary.menu > .menu > .item,
711
- .ui.secondary.menu > .item {
712
- box-shadow: none;
713
747
 
748
+ /* Item */
749
+ .ui.secondary.menu .item {
750
+ align-self: center;
751
+ box-shadow: none;
714
752
  border: none;
715
- height: auto !important;
753
+ padding: @secondaryItemPadding;
754
+ margin: @secondaryItemMargin;
716
755
  background: @secondaryItemBackground;
717
-
718
- margin: 0em @secondaryMargin;
719
- padding: @secondaryVerticalPadding @secondaryHorizontalPadding;
720
-
721
- border-radius: @secondaryBorderRadius;
722
- }
723
- .ui.secondary.menu > .menu > .item:before,
724
- .ui.secondary.menu > .item:before {
725
- display: none !important;
756
+ transition: @secondaryItemTransition;
757
+ border-radius: @secondaryItemBorderRadius;
726
758
  }
727
759
 
728
- .ui.secondary.menu .item > .input input {
729
- background-color: transparent;
730
- border: none;
760
+ /* No Divider */
761
+ .ui.secondary.menu .item:before {
762
+ display: none !important;
731
763
  }
732
764
 
733
- .ui.secondary.menu .link.item,
734
- .ui.secondary.menu a.item {
735
- opacity: @secondaryLinkOpacity;
736
- transition: none;
737
- }
765
+ /* Header */
738
766
  .ui.secondary.menu .header.item {
767
+ border-radius: 0em;
739
768
  border-right: @secondaryHeaderBorder;
740
769
  background: @secondaryHeaderBackground;
741
- border-radius: 0em;
770
+ }
771
+
772
+ /* Image */
773
+ .ui.secondary.menu .item > img:not(.ui) {
774
+ margin: 0em;
742
775
  }
743
776
 
744
777
  /* Hover */
778
+ .ui.secondary.menu .dropdown.item:hover,
745
779
  .ui.secondary.menu .link.item:hover,
746
780
  .ui.secondary.menu a.item:hover {
747
- opacity: 1;
781
+ background: @secondaryHoverItemBackground;
782
+ color: @secondaryHoverItemColor;
748
783
  }
749
784
 
750
785
  /* Active */
751
- .ui.secondary.menu > .menu > .active.item,
752
- .ui.secondary.menu > .active.item {
753
- background: @secondaryActiveBackground;
754
- opacity: 1;
786
+ .ui.secondary.menu .active.item {
755
787
  box-shadow: none;
788
+ background: @secondaryActiveItemBackground;
789
+ color: @secondaryActiveItemColor;
790
+ border-radius: @secondaryItemBorderRadius;
756
791
  }
757
- .ui.secondary.vertical.menu > .active.item {
758
- border-radius: @secondaryBorderRadius;
792
+
793
+ /* Active Hover */
794
+ .ui.secondary.menu .active.item:hover {
795
+ box-shadow: none;
796
+ background: @secondaryActiveHoverItemBackground;
797
+ color: @secondaryActiveHoverItemColor;
759
798
  }
760
799
 
800
+
761
801
  /* Inverted */
762
802
  .ui.secondary.inverted.menu .link.item,
763
803
  .ui.secondary.inverted.menu a.item {
764
- color: @secondaryInvertedColor;
804
+ color: @secondaryInvertedColor !important;
765
805
  }
806
+ .ui.secondary.inverted.menu .dropdown.item:hover,
766
807
  .ui.secondary.inverted.menu .link.item:hover,
767
808
  .ui.secondary.inverted.menu a.item:hover {
768
- color: @secondaryInvertedHoverColor;
809
+ background: @secondaryInvertedHoverBackground;
810
+ color: @secondaryInvertedHoverColor !important;
769
811
  }
770
812
  .ui.secondary.inverted.menu .active.item {
771
- background-color: @secondaryInvertedActiveBackground;
813
+ background: @secondaryInvertedActiveBackground;
814
+ color: @secondaryInvertedActiveColor !important;
772
815
  }
773
816
 
774
-
775
- /* Disable variations */
776
- .ui.secondary.item.menu > .item {
777
- margin: 0em;
817
+ /* Fix item margins */
818
+ .ui.secondary.item.menu {
819
+ margin-left: 0em;
820
+ margin-right: 0em;
821
+ }
822
+ .ui.secondary.item.menu .item:last-child {
823
+ margin-right: 0em;
778
824
  }
779
825
  .ui.secondary.attached.menu {
780
826
  box-shadow: none;
@@ -787,188 +833,188 @@
787
833
 
788
834
  .ui.secondary.vertical.menu > .item {
789
835
  border: none;
790
- margin: 0em 0em @secondaryVerticalMargin;
791
- border-radius: @borderRadius;
836
+ margin: @secondaryVerticalItemMargin;
837
+ border-radius: @secondaryVerticalItemBorderRadius !important;
792
838
  }
793
839
  .ui.secondary.vertical.menu > .header.item {
794
840
  border-radius: 0em;
795
841
  }
796
842
 
797
- /* Inverted */
798
- .ui.secondary.inverted.menu {
843
+ /* Sub Menu */
844
+ .ui.vertical.secondary.menu .item > .menu .item {
799
845
  background-color: transparent;
800
846
  }
801
847
 
802
- .ui.secondary.inverted.pointing.menu {
803
- border-bottom: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1);
804
- }
805
- .ui.secondary.inverted.pointing.menu > .item {
806
- color: rgba(255, 255, 255, 0.7);
807
- }
808
- .ui.secondary.inverted.pointing.menu > .header.item {
809
- color: #FFFFFF !important;
810
- }
811
-
812
- /* Hover */
813
- .ui.secondary.inverted.pointing.menu > .menu > .item:hover,
814
- .ui.secondary.inverted.pointing.menu > .item:hover {
815
- color: rgba(255, 255, 255, 0.85);
816
- }
817
-
818
- /* Pressed */
819
- .ui.secondary.inverted.pointing.menu > .menu > .item:active,
820
- .ui.secondary.inverted.pointing.menu > .item:active {
821
- border-color: rgba(255, 255, 255, 0.4);
822
- }
823
-
824
- /* Active */
825
- .ui.secondary.inverted.pointing.menu > .menu > .item.active,
826
- .ui.secondary.inverted.pointing.menu > .item.active {
827
- border-color: rgba(255, 255, 255, 0.8);
828
- color: rgba(255, 255, 255, 1);
848
+ /* Inverted */
849
+ .ui.secondary.inverted.menu {
850
+ background-color: transparent;
829
851
  }
830
852
 
831
-
832
853
  /*---------------------
833
854
  Secondary Pointing
834
855
  -----------------------*/
835
856
 
836
857
  .ui.secondary.pointing.menu {
837
- border-bottom: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1);
858
+ margin-left: 0em;
859
+ margin-right: 0em;
860
+ border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
838
861
  }
839
862
 
840
- .ui.secondary.pointing.menu > .menu > .item,
841
- .ui.secondary.pointing.menu > .item {
842
- margin: 0em 0em -@secondaryPointingBorderWidth;
843
- padding: @secondaryPointingVerticalPadding @secondaryPointingHorizontalPadding;
844
- border-bottom: @secondaryPointingBorderWidth solid transparent;
863
+ .ui.secondary.pointing.menu .item {
864
+ border-bottom-color: transparent;
865
+ border-bottom-style: solid;
845
866
  border-radius: 0em;
846
- transition: @secondaryTransition;
867
+ align-self: flex-end;
868
+
869
+ margin: 0em 0em -@secondaryPointingBorderWidth;
870
+ padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
871
+ border-bottom-width: @secondaryPointingBorderWidth;
872
+ transition: @secondaryItemTransition;
847
873
  }
848
874
 
849
875
  /* Item Types */
850
876
  .ui.secondary.pointing.menu .header.item {
851
- margin-bottom: -@secondaryPointingBorderWidth;
852
- background-color: transparent !important;
853
- border-right-width: 0px !important;
854
- font-weight: bold !important;
855
877
  color: @secondaryPointingHeaderColor !important;
856
878
  }
857
879
  .ui.secondary.pointing.menu .text.item {
858
880
  box-shadow: none !important;
859
881
  }
860
- .ui.secondary.pointing.menu > .menu > .item:after,
861
- .ui.secondary.pointing.menu > .item:after {
882
+ .ui.secondary.pointing.menu .item:after {
862
883
  display: none;
863
884
  }
864
885
 
865
886
  /* Hover */
866
- .ui.secondary.pointing.menu > .menu > .link.item:hover,
867
- .ui.secondary.pointing.menu > .link.item:hover,
868
- .ui.secondary.pointing.menu > .menu > a.item:hover,
869
- .ui.secondary.pointing.menu > a.item:hover {
887
+ .ui.secondary.pointing.menu .dropdown.item:hover,
888
+ .ui.secondary.pointing.menu .link.item:hover,
889
+ .ui.secondary.pointing.menu a.item:hover {
870
890
  background-color: transparent;
871
891
  color: @secondaryPointingHoverTextColor;
872
892
  }
873
893
 
874
894
  /* Pressed */
875
- .ui.secondary.pointing.menu > .menu > .link.item:active,
876
- .ui.secondary.pointing.menu > .link.item:active,
877
- .ui.secondary.pointing.menu > .menu > a.item:active,
878
- .ui.secondary.pointing.menu > a.item:active {
895
+ .ui.secondary.pointing.menu .dropdown.item:active,
896
+ .ui.secondary.pointing.menu .link.item:active,
897
+ .ui.secondary.pointing.menu a.item:active {
879
898
  background-color: transparent;
880
899
  border-color: @secondaryPointingBorderColor;
881
900
  }
882
901
 
883
902
  /* Active */
884
- .ui.secondary.pointing.menu > .menu > .item.active,
885
- .ui.secondary.pointing.menu > .item.active {
903
+ .ui.secondary.pointing.menu .active.item {
886
904
  background-color: transparent;
887
- border-color: rgba(0, 0, 0, 0.4);
888
905
  box-shadow: none;
906
+ border-color: @secondaryPointingActiveBorderColor;
907
+ font-weight: @secondaryPointingActiveFontWeight;
889
908
  color: @secondaryPointingActiveTextColor;
890
909
  }
891
910
 
892
- /* Secondary Vertical Pointing */
911
+ /* Active Hover */
912
+ .ui.secondary.pointing.menu .active.item:hover {
913
+ border-color: @secondaryPointingActiveHoverBorderColor;
914
+ color: @secondaryPointingActiveHoverTextColor;
915
+ }
916
+
917
+ /* Active Dropdown */
918
+ .ui.secondary.pointing.menu .active.dropdown.item {
919
+ border-color: @secondaryPointingActiveDropdownBorderColor;
920
+ }
921
+
922
+ /* Vertical Pointing */
893
923
  .ui.secondary.vertical.pointing.menu {
894
- border: none;
895
- border-right: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1);
924
+ border-bottom-width: 0px;
925
+ border-right-width: @secondaryPointingBorderWidth;
926
+ border-right-style: solid;
927
+ border-right-color: @secondaryPointingBorderColor;
896
928
  }
897
- .ui.secondary.vertical.pointing.menu > .item {
898
- margin: 0em -@secondaryPointingBorderWidth 0em 0em;
929
+ .ui.secondary.vertical.pointing.menu .item {
899
930
  border-bottom: none;
900
- border-right: @secondaryPointingBorderWidth solid transparent;
901
- border-radius: 0em;
931
+ border-right-style: solid;
932
+ border-right-color: transparent;
933
+ border-radius: 0em !important;
934
+ margin: @secondaryVerticalPointingItemMargin;
935
+ border-right-width: @secondaryPointingBorderWidth;
902
936
  }
903
937
 
904
- /* Hover */
905
- .ui.secondary.vertical.pointing.menu > .item:hover {
906
- background-color: transparent;
907
- color: rgba(0, 0, 0, 0.7);
938
+ /* Vertical Active */
939
+ .ui.secondary.vertical.pointing.menu .active.item {
940
+ border-color: @secondaryPointingActiveBorderColor;
908
941
  }
909
942
 
910
- /* Pressed */
911
- .ui.secondary.vertical.pointing.menu > .item:active {
912
- background-color: transparent;
913
- border-color: rgba(0, 0, 0, 0.2);
943
+ /* Inverted */
944
+ .ui.secondary.inverted.pointing.menu {
945
+ border-color: @secondaryPointingInvertedBorderColor;
914
946
  }
915
947
 
916
- /* Active */
917
- .ui.secondary.vertical.pointing.menu > .item.active {
918
- background-color: transparent;
919
- border-color: rgba(0, 0, 0, 0.4);
920
- color: rgba(0, 0, 0, 0.85);
948
+ .ui.secondary.inverted.pointing.menu {
949
+ border-width: @secondaryPointingBorderWidth;
950
+ border-color: @secondaryPointingBorderColor;
951
+ }
952
+ .ui.secondary.inverted.pointing.menu .item {
953
+ color: @secondaryPointingInvertedItemTextColor;
954
+ }
955
+ .ui.secondary.inverted.pointing.menu .header.item {
956
+ color: @secondaryPointingInvertedItemHeaderColor !important;
921
957
  }
922
958
 
923
- /* Inverted Vertical Pointing Secondary */
924
- .ui.secondary.inverted.vertical.pointing.menu {
925
- border-right: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1);
926
- border-bottom: none;
959
+ /* Hover */
960
+ .ui.secondary.inverted.pointing.menu .item:hover {
961
+ color: @secondaryPointingInvertedItemHoverTextColor;
927
962
  }
928
963
 
964
+ /* Active */
965
+ .ui.secondary.inverted.pointing.menu .active.item {
966
+ border-color: @secondaryPointingInvertedActiveBorderColor;
967
+ color: @secondaryPointingInvertedActiveColor;
968
+ }
929
969
 
930
970
  /*--------------
931
971
  Text Menu
932
972
  ---------------*/
933
973
 
934
974
  .ui.text.menu {
935
- display: inline-block;
936
975
  background: none transparent;
937
-
938
- margin: 1rem -1rem;
939
976
  border-radius: 0px;
940
-
941
977
  box-shadow: none;
942
- }
943
- .ui.text.menu > .item {
944
- opacity: 0.8;
978
+ border: none;
945
979
 
946
- margin: 0em 1em;
980
+ margin: @textMenuMargin;
981
+ }
982
+ .ui.text.menu .item {
947
983
  padding: 0em;
948
- height: auto !important;
949
-
950
984
  border-radius: 0px;
951
-
952
985
  box-shadow: none;
953
- transition: @textMenuTransition;
986
+ align-self: center;
987
+ margin: @textMenuItemMargin;
988
+ font-weight: @textMenuItemFontWeight;
989
+ color: @textMenuItemColor;
990
+ transition: @textMenuItemTransition;
954
991
  }
955
- .ui.text.menu > .item:before {
992
+
993
+ /* Sub Menu */
994
+ .ui.vertical.text.menu > .menu {
995
+ margin: @textMenuSubMenuMargin;
996
+ }
997
+
998
+ /* Border */
999
+ .ui.text.menu .item:before,
1000
+ .ui.text.menu .menu .item:before {
956
1001
  display: none !important;
957
1002
  }
1003
+
1004
+ /* Header */
958
1005
  .ui.text.menu .header.item {
959
1006
  background-color: transparent;
960
-
961
- opacity: 1;
962
- color: rgba(50, 50, 50, 0.8);
963
- font-size: 0.875rem;
964
1007
  padding: 0em;
965
- text-transform: uppercase;
966
- font-weight: bold;
967
- }
968
- .ui.text.menu .text.item {
969
1008
  opacity: 1;
970
- color: rgba(50, 50, 50, 0.8);
971
- font-weight: bold;
1009
+ color: @textMenuHeaderColor;
1010
+ font-size: @textMenuHeaderSize;
1011
+ text-transform: @textMenuHeaderTextTransform;
1012
+ font-weight: @textMenuHeaderFontWeight;
1013
+ }
1014
+
1015
+ /* Image */
1016
+ .ui.text.menu .item > img:not(.ui) {
1017
+ margin: 0em;
972
1018
  }
973
1019
 
974
1020
  /*--- fluid text ---*/
@@ -978,7 +1024,7 @@
978
1024
 
979
1025
  /*--- vertical text ---*/
980
1026
  .ui.vertical.text.menu {
981
- margin: 1rem 0em;
1027
+ margin: @textVerticalMenuMargin;
982
1028
  }
983
1029
  .ui.vertical.text.menu:first-child {
984
1030
  margin-top: 0rem;
@@ -987,16 +1033,14 @@
987
1033
  margin-bottom: 0rem;
988
1034
  }
989
1035
  .ui.vertical.text.menu .item {
990
- float: left;
991
- clear: left;
992
- margin: 0.5em 0em;
1036
+ margin: @textVerticalMenuItemMargin;
993
1037
  }
994
1038
  .ui.vertical.text.menu .item > i.icon {
995
- float: none;
996
- margin: 0em @verticalPadding 0em 0em;
1039
+ float: @textVerticalMenuIconFloat;
1040
+ margin: @iconMargin;
997
1041
  }
998
1042
  .ui.vertical.text.menu .header.item {
999
- margin: 0.8em 0em;
1043
+ margin: @textVerticalMenuHeaderMargin;
1000
1044
  }
1001
1045
 
1002
1046
  /*--- hover ---*/
@@ -1010,12 +1054,17 @@
1010
1054
  background-color: transparent;
1011
1055
  padding: 0em;
1012
1056
  border: none;
1013
- opacity: 1;
1014
- font-weight: bold;
1015
1057
  box-shadow: none;
1058
+ font-weight: @textMenuActiveItemFontWeight;
1059
+ color: @textMenuActiveItemColor;
1016
1060
  }
1017
1061
 
1018
- /* disable variations */
1062
+ /*--- active hover ---*/
1063
+ .ui.text.menu .active.item:hover {
1064
+ background-color: transparent;
1065
+ }
1066
+
1067
+ /* Disable Bariations */
1019
1068
  .ui.text.pointing.menu .active.item:after {
1020
1069
  box-shadow: none;
1021
1070
  }
@@ -1027,8 +1076,8 @@
1027
1076
  .ui.inverted.text.menu,
1028
1077
  .ui.inverted.text.menu .item,
1029
1078
  .ui.inverted.text.menu .item:hover,
1030
- .ui.inverted.text.menu .item.active {
1031
- background-color: transparent;
1079
+ .ui.inverted.text.menu .active.item {
1080
+ background-color: transparent !important;
1032
1081
  }
1033
1082
 
1034
1083
  /* Fluid */
@@ -1041,42 +1090,38 @@
1041
1090
  Icon Only
1042
1091
  ---------------*/
1043
1092
 
1044
- .ui.icon.menu,
1045
- .ui.vertical.icon.menu {
1046
- width: auto;
1047
- display: inline-block;
1048
- height: auto;
1049
- }
1050
- .ui.icon.menu > .item {
1093
+ .ui.icon.menu .item {
1051
1094
  height: auto;
1052
1095
  text-align: @iconMenuTextAlign;
1053
1096
  color: @iconMenuItemColor;
1054
1097
  }
1055
- .ui.icon.menu > .item > .icon {
1056
- display: block;
1057
- float: none !important;
1058
- margin: 0em auto !important;
1098
+ .ui.icon.menu .item > .icon {
1099
+ margin: 0em;
1059
1100
  opacity: 1;
1060
1101
  }
1102
+ .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
1103
+ display: block;
1104
+ margin: 0em auto;
1105
+ float: none;
1106
+ }
1061
1107
  .ui.icon.menu .icon:before {
1062
1108
  opacity: 1;
1063
1109
  }
1064
1110
 
1065
1111
  /* Item Icon Only */
1066
- .ui.menu .icon.item .icon {
1067
- margin: 0em;
1112
+ .ui.menu .icon.item > .icon {
1113
+ width: auto;
1114
+ margin: 0em auto;
1068
1115
  }
1069
1116
 
1117
+ /* Vertical */
1070
1118
  .ui.vertical.icon.menu {
1071
- float: none;
1119
+ width: auto;
1072
1120
  }
1073
1121
 
1074
- /*--- inverted ---*/
1122
+ /* Inverted */
1075
1123
  .ui.inverted.icon.menu .item {
1076
- color: rgba(255, 255, 255, 0.8);
1077
- }
1078
- .ui.inverted.icon.menu .icon {
1079
- color: rgba(255, 255, 255, 1);
1124
+ color: @iconMenuInvertedItemColor;
1080
1125
  }
1081
1126
 
1082
1127
  /*--------------
@@ -1086,71 +1131,122 @@
1086
1131
  .ui.labeled.icon.menu {
1087
1132
  text-align: center;
1088
1133
  }
1089
- .ui.fluid.labeled.icon.menu > .item {
1134
+ .ui.fluid.labeled.icon.menu .item {
1090
1135
  min-width: 0em;
1091
1136
  }
1092
1137
 
1093
- .ui.labeled.icon.menu > .item {
1138
+ .ui.labeled.icon.menu .item {
1094
1139
  min-width: @labeledIconMinWidth;
1095
1140
  }
1096
- .ui.labeled.icon.menu > .item > .icon {
1141
+ .ui.labeled.icon.menu:not(.vertical) .item {
1142
+ padding-left: @labeledIconItemHorizontalPadding;
1143
+ padding-right: @labeledIconItemHorizontalPadding;
1144
+ }
1145
+
1146
+ .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
1147
+ height: 1em;
1097
1148
  display: block;
1098
1149
  font-size: @labeledIconSize !important;
1150
+ margin: 0em @labeledIconTextMargin 0em 0em !important;
1151
+ }
1152
+ .ui.vertical.labeled.icon.menu .item > .icon:not(.dropdown) {
1099
1153
  margin: 0em auto @labeledIconTextMargin !important;
1100
1154
  }
1101
1155
 
1102
1156
 
1103
-
1104
1157
  /*******************************
1105
1158
  Variations
1106
1159
  *******************************/
1107
1160
 
1108
1161
  /*--------------
1109
- Colors
1162
+ Stackable
1110
1163
  ---------------*/
1111
1164
 
1112
- /*--- Light Colors ---*/
1113
- .ui.menu .blue.active.item,
1114
- .ui.blue.menu .active.item {
1115
- border-color: @blue !important;
1116
- color: @blue !important;
1165
+ @media only screen and (max-width: @largestMobileScreen) {
1166
+ .ui.stackable.menu {
1167
+ flex-direction: column;
1168
+ }
1169
+ .ui.stackable.menu .item {
1170
+ width: 100% !important;
1171
+ }
1172
+ .ui.stackable.menu .item:before {
1173
+ position: absolute;
1174
+ content: '';
1175
+ top: auto;
1176
+ bottom: 0px;
1177
+ left: 0px;
1178
+ width: 100%;
1179
+ height: @dividerSize;
1180
+ background: @verticalDividerBackground;
1181
+ height: 1px;
1182
+ }
1117
1183
  }
1118
- .ui.menu .green.active.item,
1119
- .ui.green.menu .active.item {
1120
- border-color: @green !important;
1121
- color: @green !important;
1184
+
1185
+ /*--------------
1186
+ Colors
1187
+ ---------------*/
1188
+
1189
+ /*--- Standard Colors ---*/
1190
+ .ui.menu .red.active.item,
1191
+ .ui.red.menu .active.item {
1192
+ border-color: @red !important;
1193
+ color: @red !important;
1122
1194
  }
1123
1195
  .ui.menu .orange.active.item,
1124
1196
  .ui.orange.menu .active.item {
1125
1197
  border-color: @orange !important;
1126
1198
  color: @orange !important;
1127
1199
  }
1128
- .ui.menu .pink.active.item,
1129
- .ui.pink.menu .active.item {
1130
- border-color: @pink !important;
1131
- color: @pink !important;
1200
+ .ui.menu .yellow.active.item,
1201
+ .ui.yellow.menu .active.item {
1202
+ border-color: @yellow !important;
1203
+ color: @yellow !important;
1132
1204
  }
1133
- .ui.menu .purple.active.item,
1134
- .ui.purple.menu .active.item {
1135
- border-color: @purple !important;
1136
- color: @purple !important;
1205
+ .ui.menu .olive.active.item,
1206
+ .ui.olive.menu .active.item {
1207
+ border-color: @olive !important;
1208
+ color: @olive !important;
1137
1209
  }
1138
- .ui.menu .red.active.item,
1139
- .ui.red.menu .active.item {
1140
- border-color: @red !important;
1141
- color: @red !important;
1210
+ .ui.menu .green.active.item,
1211
+ .ui.green.menu .active.item {
1212
+ border-color: @green !important;
1213
+ color: @green !important;
1142
1214
  }
1143
1215
  .ui.menu .teal.active.item,
1144
1216
  .ui.teal.menu .active.item {
1145
1217
  border-color: @teal !important;
1146
1218
  color: @teal !important;
1147
1219
  }
1148
- .ui.menu .yellow.active.item,
1149
- .ui.yellow.menu .active.item {
1150
- border-color: @yellow !important;
1151
- color: @yellow !important;
1220
+ .ui.menu .blue.active.item,
1221
+ .ui.blue.menu .active.item {
1222
+ border-color: @blue !important;
1223
+ color: @blue !important;
1224
+ }
1225
+ .ui.menu .violet.active.item,
1226
+ .ui.violet.menu .active.item {
1227
+ border-color: @violet !important;
1228
+ color: @violet !important;
1229
+ }
1230
+ .ui.menu .purple.active.item,
1231
+ .ui.purple.menu .active.item {
1232
+ border-color: @purple !important;
1233
+ color: @purple !important;
1234
+ }
1235
+ .ui.menu .pink.active.item,
1236
+ .ui.pink.menu .active.item {
1237
+ border-color: @pink !important;
1238
+ color: @pink !important;
1239
+ }
1240
+ .ui.menu .brown.active.item,
1241
+ .ui.brown.menu .active.item {
1242
+ border-color: @brown !important;
1243
+ color: @brown !important;
1244
+ }
1245
+ .ui.menu .grey.active.item,
1246
+ .ui.grey.menu .active.item {
1247
+ border-color: @grey !important;
1248
+ color: @grey !important;
1152
1249
  }
1153
-
1154
1250
 
1155
1251
 
1156
1252
  /*--------------
@@ -1158,43 +1254,21 @@
1158
1254
  ---------------*/
1159
1255
 
1160
1256
  .ui.inverted.menu {
1257
+ border: @invertedBorder;
1161
1258
  background: @invertedBackground;
1162
1259
  box-shadow: @invertedBoxShadow;
1163
1260
  }
1164
- .ui.inverted.menu .header.item {
1165
- margin: 0em;
1166
- background: @invertedHeaderBackground;
1167
- box-shadow: none;
1168
- }
1169
1261
 
1262
+ /* Menu Item */
1170
1263
  .ui.inverted.menu .item,
1171
1264
  .ui.inverted.menu .item > a:not(.ui) {
1172
- color: @invertedTextColor;
1265
+ background: @invertedItemBackground;
1266
+ color: @invertedItemTextColor;
1173
1267
  }
1174
-
1175
- .ui.inverted.menu .item:not(.dropdown).menu {
1268
+ .ui.inverted.menu .item.menu {
1176
1269
  background: @invertedSubMenuBackground;
1177
1270
  }
1178
1271
 
1179
- .ui.inverted.menu .item .item,
1180
- .ui.inverted.menu .item .item > a:not(.ui) {
1181
- color: @invertedSubMenuColor;
1182
- }
1183
- .ui.inverted.menu .dropdown .menu .item {
1184
- color: @dropdownTextColor !important;
1185
- transition: none;
1186
- }
1187
- .ui.inverted.menu .dropdown .menu .item:hover {
1188
- background: @dropdownBackgroundHover !important;
1189
- color: @dropdownTextColorHover !important;
1190
- }
1191
- .ui.inverted.menu .item.disabled,
1192
- .ui.inverted.menu .item.disabled:hover {
1193
- color: @invertedDisabledTextColor;
1194
- }
1195
-
1196
-
1197
-
1198
1272
  /*--- Border ---*/
1199
1273
  .ui.inverted.menu .item:before {
1200
1274
  background: @invertedDividerBackground;
@@ -1203,23 +1277,41 @@
1203
1277
  background: @invertedVerticalDividerBackground;
1204
1278
  }
1205
1279
 
1280
+ /* Sub Menu */
1281
+ .ui.vertical.inverted.menu .menu .item,
1282
+ .ui.vertical.inverted.menu .menu .item a:not(.ui) {
1283
+ color: @invertedSubMenuColor;
1284
+ }
1285
+
1286
+ /* Header */
1287
+ .ui.inverted.menu .header.item {
1288
+ margin: 0em;
1289
+ background: @invertedHeaderBackground;
1290
+ box-shadow: none;
1291
+ }
1292
+
1293
+ /* Disabled */
1294
+ .ui.inverted.menu .item.disabled,
1295
+ .ui.inverted.menu .item.disabled:hover {
1296
+ color: @invertedDisabledTextColor;
1297
+ }
1298
+
1206
1299
  /*--- Hover ---*/
1207
1300
  .ui.link.inverted.menu .item:hover,
1301
+ .ui.inverted.menu .dropdown.item:hover,
1208
1302
  .ui.inverted.menu .link.item:hover,
1209
- .ui.inverted.menu a.item:hover,
1210
- .ui.inverted.menu .dropdown.item:hover {
1303
+ .ui.inverted.menu a.item:hover {
1211
1304
  background: @invertedHoverBackground;
1212
1305
  color: @invertedHoverColor;
1213
1306
  }
1214
- .ui.inverted.menu .item .menu a.item:hover,
1215
- .ui.inverted.menu .item .menu .link.item:hover {
1307
+ .ui.vertical.inverted.menu .item .menu a.item:hover,
1308
+ .ui.vertical.inverted.menu .item .menu .link.item:hover {
1216
1309
  background: @invertedSubMenuBackground;
1217
1310
  color: @invertedSubMenuHoverColor;
1218
1311
  }
1219
1312
 
1220
1313
  /*--- Pressed ---*/
1221
1314
  .ui.inverted.menu a.item:active,
1222
- .ui.inverted.menu .dropdown.item:active,
1223
1315
  .ui.inverted.menu .link.item:active,
1224
1316
  .ui.inverted.menu a.item:active {
1225
1317
  background: @invertedMenuPressedBackground;
@@ -1228,7 +1320,6 @@
1228
1320
 
1229
1321
  /*--- Active ---*/
1230
1322
  .ui.inverted.menu .active.item {
1231
- box-shadow: none !important;
1232
1323
  background: @invertedActiveBackground;
1233
1324
  color: @invertedActiveColor !important;
1234
1325
  }
@@ -1236,39 +1327,20 @@
1236
1327
  background: @invertedSubMenuActiveBackground;
1237
1328
  color: @invertedSubMenuActiveColor;
1238
1329
  }
1239
-
1240
- /*--- Pointers ---*/
1241
1330
  .ui.inverted.pointing.menu .active.item:after {
1242
- background: #5B5B5B;
1243
- box-shadow: none;
1244
- }
1245
- .ui.inverted.pointing.menu .active.item:hover:after {
1246
- background: #4A4A4A;
1247
- }
1248
-
1249
-
1250
- /*--------------
1251
- Selection
1252
- ---------------*/
1253
-
1254
- .ui.selection.menu > .item {
1255
- color: rgba(0, 0, 0, 0.4);
1256
- }
1257
- .ui.selection.menu > .item:hover {
1258
- color: rgba(0, 0, 0, 0.6);
1259
- }
1260
- .ui.selection.menu > .item.active {
1261
- color: rgba(0, 0, 0, 0.85);
1331
+ background: @invertedArrowActiveColor !important;
1332
+ margin: 0em !important;
1333
+ box-shadow: none !important;
1334
+ border: none !important;
1262
1335
  }
1263
1336
 
1264
- .ui.inverted.selection.menu > .item {
1265
- color: rgba(255, 255, 255, 0.4);
1337
+ /*--- Active Hover ---*/
1338
+ .ui.inverted.menu .active.item:hover {
1339
+ background: @invertedActiveHoverBackground;
1340
+ color: @invertedActiveHoverColor !important;
1266
1341
  }
1267
- .ui.inverted.selection.menu > .item:hover {
1268
- color: rgba(255, 255, 255, 0.9);
1269
- }
1270
- .ui.inverted.selection.menu > .item.active {
1271
- color: #FFFFFF;
1342
+ .ui.inverted.pointing.menu .active.item:hover:after {
1343
+ background: @invertedArrowActiveHoverColor !important;
1272
1344
  }
1273
1345
 
1274
1346
 
@@ -1278,80 +1350,152 @@
1278
1350
 
1279
1351
  .ui.floated.menu {
1280
1352
  float: left;
1281
- margin: 0rem 0.5rem 0rem 0rem;
1353
+ margin: 0rem @floatedDistance 0rem 0rem;
1282
1354
  }
1355
+ .ui.floated.menu .item:last-child:before {
1356
+ display: none;
1357
+ }
1358
+
1283
1359
  .ui.right.floated.menu {
1284
1360
  float: right;
1285
- margin: 0rem 0rem 0rem 0.5rem;
1361
+ margin: 0rem 0rem 0rem @floatedDistance;
1286
1362
  }
1287
1363
 
1288
1364
 
1289
1365
  /*--------------
1290
- Inverted Colors
1366
+ Inverted
1291
1367
  ---------------*/
1292
1368
 
1293
- /*--- Light Colors ---*/
1294
- .ui.grey.menu {
1295
- background-color: @offWhite;
1369
+ /* Red */
1370
+ .ui.inverted.red.menu {
1371
+ background-color: @red;
1372
+ }
1373
+ .ui.inverted.red.menu .item:before {
1374
+ background-color: @invertedColoredDividerBackground;
1375
+ }
1376
+ .ui.inverted.red.menu .active.item {
1377
+ background-color: @invertedColoredActiveBackground !important;
1296
1378
  }
1297
1379
 
1298
- /*--- Inverted Colors ---*/
1380
+ /* Orange */
1381
+ .ui.inverted.orange.menu {
1382
+ background-color: @orange;
1383
+ }
1384
+ .ui.inverted.orange.menu .item:before {
1385
+ background-color: @invertedColoredDividerBackground;
1386
+ }
1387
+ .ui.inverted.orange.menu .active.item {
1388
+ background-color: @invertedColoredActiveBackground !important;
1389
+ }
1299
1390
 
1300
- /* Blue */
1301
- .ui.inverted.blue.menu {
1302
- background-color: @blue;
1391
+ /* Yellow */
1392
+ .ui.inverted.yellow.menu {
1393
+ background-color: @yellow;
1303
1394
  }
1304
- .ui.inverted.blue.pointing.menu .active.item:after {
1305
- background-color: @blue;
1395
+ .ui.inverted.yellow.menu .item:before {
1396
+ background-color: @invertedColoredDividerBackground;
1397
+ }
1398
+ .ui.inverted.yellow.menu .active.item {
1399
+ background-color: @invertedColoredActiveBackground !important;
1400
+ }
1401
+
1402
+ /* Olive */
1403
+ .ui.inverted.olive.menu {
1404
+ background-color: @olive;
1405
+ }
1406
+ .ui.inverted.olive.menu .item:before {
1407
+ background-color: @invertedColoredDividerBackground;
1306
1408
  }
1409
+ .ui.inverted.olive.menu .active.item {
1410
+ background-color: @invertedColoredActiveBackground !important;
1411
+ }
1412
+
1307
1413
  /* Green */
1308
1414
  .ui.inverted.green.menu {
1309
1415
  background-color: @green;
1310
1416
  }
1311
- .ui.inverted.green.pointing.menu .active.item:after {
1312
- background-color: @green;
1417
+ .ui.inverted.green.menu .item:before {
1418
+ background-color: @invertedColoredDividerBackground;
1313
1419
  }
1314
- /* Orange */
1315
- .ui.inverted.orange.menu {
1316
- background-color: @orange;
1420
+ .ui.inverted.green.menu .active.item {
1421
+ background-color: @invertedColoredActiveBackground !important;
1317
1422
  }
1318
- .ui.inverted.orange.pointing.menu .active.item:after {
1319
- background-color: @orange;
1423
+
1424
+ /* Teal */
1425
+ .ui.inverted.teal.menu {
1426
+ background-color: @teal;
1320
1427
  }
1321
- /* Pink */
1322
- .ui.inverted.pink.menu {
1323
- background-color: @pink;
1428
+ .ui.inverted.teal.menu .item:before {
1429
+ background-color: @invertedColoredDividerBackground;
1324
1430
  }
1325
- .ui.inverted.pink.pointing.menu .active.item:after {
1326
- background-color: @pink;
1431
+ .ui.inverted.teal.menu .active.item {
1432
+ background-color: @invertedColoredActiveBackground !important;
1433
+ }
1434
+
1435
+ /* Blue */
1436
+ .ui.inverted.blue.menu {
1437
+ background-color: @blue;
1438
+ }
1439
+ .ui.inverted.blue.menu .item:before {
1440
+ background-color: @invertedColoredDividerBackground;
1441
+ }
1442
+ .ui.inverted.blue.menu .active.item {
1443
+ background-color: @invertedColoredActiveBackground !important;
1327
1444
  }
1445
+
1446
+ /* Violet */
1447
+ .ui.inverted.violet.menu {
1448
+ background-color: @violet;
1449
+ }
1450
+ .ui.inverted.violet.menu .item:before {
1451
+ background-color: @invertedColoredDividerBackground;
1452
+ }
1453
+ .ui.inverted.violet.menu .active.item {
1454
+ background-color: @invertedColoredActiveBackground !important;
1455
+ }
1456
+
1328
1457
  /* Purple */
1329
1458
  .ui.inverted.purple.menu {
1330
1459
  background-color: @purple;
1331
1460
  }
1332
- .ui.inverted.purple.pointing.menu .active.item:after {
1333
- background-color: @purple;
1461
+ .ui.inverted.purple.menu .item:before {
1462
+ background-color: @invertedColoredDividerBackground;
1334
1463
  }
1335
- /* Red */
1336
- .ui.inverted.red.menu {
1337
- background-color: @red;
1464
+ .ui.inverted.purple.menu .active.item {
1465
+ background-color: @invertedColoredActiveBackground !important;
1338
1466
  }
1339
- .ui.inverted.red.pointing.menu .active.item:after {
1340
- background-color: @red;
1467
+
1468
+ /* Pink */
1469
+ .ui.inverted.pink.menu {
1470
+ background-color: @pink;
1341
1471
  }
1342
- /* Teal */
1343
- .ui.inverted.teal.menu {
1344
- background-color: @teal;
1472
+ .ui.inverted.pink.menu .item:before {
1473
+ background-color: @invertedColoredDividerBackground;
1345
1474
  }
1346
- .ui.inverted.teal.pointing.menu .active.item:after {
1347
- background-color: @teal;
1475
+ .ui.inverted.pink.menu .active.item {
1476
+ background-color: @invertedColoredActiveBackground !important;
1348
1477
  }
1349
- /* Yellow */
1350
- .ui.inverted.yellow.menu {
1351
- background-color: @yellow;
1478
+
1479
+ /* Brown */
1480
+ .ui.inverted.brown.menu {
1481
+ background-color: @brown;
1352
1482
  }
1353
- .ui.inverted.yellow.pointing.menu .active.item:after {
1354
- background-color: @yellow;
1483
+ .ui.inverted.brown.menu .item:before {
1484
+ background-color: @invertedColoredDividerBackground;
1485
+ }
1486
+ .ui.inverted.brown.menu .active.item {
1487
+ background-color: @invertedColoredActiveBackground !important;
1488
+ }
1489
+
1490
+ /* Grey */
1491
+ .ui.inverted.grey.menu {
1492
+ background-color: @grey;
1493
+ }
1494
+ .ui.inverted.grey.menu .item:before {
1495
+ background-color: @invertedColoredDividerBackground;
1496
+ }
1497
+ .ui.inverted.grey.menu .active.item {
1498
+ background-color: @invertedColoredActiveBackground !important;
1355
1499
  }
1356
1500
 
1357
1501
 
@@ -1367,14 +1511,14 @@
1367
1511
  .ui.horizontally.fitted.menu .item,
1368
1512
  .ui.horizontally.fitted.menu .item .menu .item,
1369
1513
  .ui.menu .horizontally.fitted.item {
1370
- padding-top: @verticalPadding;
1371
- padding-bottom: @verticalPadding;
1514
+ padding-top: @itemVerticalPadding;
1515
+ padding-bottom: @itemVerticalPadding;
1372
1516
  }
1373
1517
  .ui.vertically.fitted.menu .item,
1374
1518
  .ui.vertically.fitted.menu .item .menu .item,
1375
1519
  .ui.menu .vertically.fitted.item {
1376
- padding-left: @horizontalPadding;
1377
- padding-right: @horizontalPadding;
1520
+ padding-left: @itemHorizontalPadding;
1521
+ padding-right: @itemHorizontalPadding;
1378
1522
  }
1379
1523
 
1380
1524
  /*--------------
@@ -1392,10 +1536,16 @@
1392
1536
  --------------------*/
1393
1537
 
1394
1538
  .ui.compact.menu {
1395
- display: inline-block;
1539
+ display: inline-flex;
1396
1540
  margin: 0em;
1397
1541
  vertical-align: middle;
1398
1542
  }
1543
+ .ui.compact.menu .item:last-child {
1544
+ border-radius: 0em @borderRadius @borderRadius 0em;
1545
+ }
1546
+ .ui.compact.menu .item:last-child:before {
1547
+ display: none;
1548
+ }
1399
1549
  .ui.compact.vertical.menu {
1400
1550
  width: auto !important;
1401
1551
  }
@@ -1409,7 +1559,6 @@
1409
1559
 
1410
1560
  .ui.menu.fluid,
1411
1561
  .ui.vertical.menu.fluid {
1412
- display: block;
1413
1562
  width: 100% !important;
1414
1563
  }
1415
1564
 
@@ -1424,7 +1573,13 @@
1424
1573
  padding-left: 0px !important;
1425
1574
  padding-right: 0px !important;
1426
1575
  text-align: center;
1576
+ justify-content: center;
1577
+ }
1578
+
1579
+ .ui.item.menu .item:last-child:before {
1580
+ display: none;
1427
1581
  }
1582
+
1428
1583
  .ui.menu.two.item .item {
1429
1584
  width: 50%;
1430
1585
  }
@@ -1459,7 +1614,6 @@
1459
1614
  width: 8.333%;
1460
1615
  }
1461
1616
 
1462
-
1463
1617
  /*--------------
1464
1618
  Fixed
1465
1619
  ---------------*/
@@ -1468,7 +1622,6 @@
1468
1622
  position: fixed;
1469
1623
  z-index: 101;
1470
1624
  margin: 0em;
1471
- border: none;
1472
1625
  width: 100%;
1473
1626
  }
1474
1627
  .ui.menu.fixed,
@@ -1478,13 +1631,21 @@
1478
1631
  }
1479
1632
 
1480
1633
  .ui.fixed.menu,
1481
- .ui.top.fixed.menu {
1634
+ .ui[class*="top fixed"].menu {
1635
+ border-top: none;
1482
1636
  top: 0px;
1483
1637
  left: 0px;
1484
1638
  right: auto;
1485
1639
  bottom: auto;
1486
1640
  }
1487
- .ui.right.fixed.menu {
1641
+ .ui[class*="top fixed"].menu {
1642
+ border-left: none;
1643
+ border-right: none;
1644
+ }
1645
+ .ui[class*="right fixed"].menu {
1646
+ border-top: none;
1647
+ border-bottom: none;
1648
+ border-right: none;
1488
1649
  top: 0px;
1489
1650
  right: 0px;
1490
1651
  left: auto;
@@ -1492,13 +1653,19 @@
1492
1653
  width: auto;
1493
1654
  height: 100%;
1494
1655
  }
1495
- .ui.bottom.fixed.menu {
1656
+ .ui[class*="bottom fixed"].menu {
1657
+ border-bottom: none;
1658
+ border-left: none;
1659
+ border-right: none;
1496
1660
  bottom: 0px;
1497
1661
  left: 0px;
1498
1662
  top: auto;
1499
1663
  right: auto;
1500
1664
  }
1501
- .ui.left.fixed.menu {
1665
+ .ui[class*="left fixed"].menu {
1666
+ border-top: none;
1667
+ border-bottom: none;
1668
+ border-left: none;
1502
1669
  top: 0px;
1503
1670
  left: 0px;
1504
1671
  right: auto;
@@ -1509,7 +1676,7 @@
1509
1676
 
1510
1677
  /* Coupling with Grid */
1511
1678
  .ui.fixed.menu + .ui.grid {
1512
- padding-top: @fixedGridMargin;
1679
+ padding-top: @fixedPrecedingGridMargin;
1513
1680
  }
1514
1681
 
1515
1682
 
@@ -1517,15 +1684,16 @@
1517
1684
  Pointing
1518
1685
  --------------------*/
1519
1686
 
1520
- .ui.pointing.menu .active.item:after {
1687
+ .ui.pointing.menu .item:after {
1688
+ visibility: hidden;
1521
1689
  position: absolute;
1522
1690
  content: '';
1523
1691
  top: 100%;
1524
1692
  left: 50%;
1525
1693
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
1526
- margin: 0em;
1527
1694
  background: none;
1528
1695
 
1696
+ margin: (@arrowBorderWidth / 2) 0em 0em;
1529
1697
  width: @arrowSize;
1530
1698
  height: @arrowSize;
1531
1699
 
@@ -1534,16 +1702,9 @@
1534
1702
  border-right: @arrowBorder;
1535
1703
 
1536
1704
  z-index: @arrowZIndex;
1537
-
1538
1705
  transition: @arrowTransition;
1539
1706
  }
1540
-
1541
- /* Don't double up pointers */
1542
- .ui.pointing.menu .active.item .menu .active.item:after {
1543
- display: none;
1544
- }
1545
-
1546
- .ui.vertical.pointing.menu .active.item:after {
1707
+ .ui.vertical.pointing.menu .item:after {
1547
1708
  position: absolute;
1548
1709
  top: 50%;
1549
1710
  right: 0%;
@@ -1551,13 +1712,27 @@
1551
1712
  left: auto;
1552
1713
 
1553
1714
  transform: translateX(50%) translateY(-50%) rotate(45deg);
1554
- margin: 0em -@arrowBorderSize 0em 0em;
1715
+ margin: 0em -(@arrowBorderWidth / 2) 0em 0em;
1555
1716
 
1556
1717
  border: none;
1557
1718
  border-top: @arrowBorder;
1558
1719
  border-right: @arrowBorder;
1559
1720
  }
1560
1721
 
1722
+ /* Active */
1723
+ .ui.pointing.menu .active.item:after {
1724
+ visibility: visible;
1725
+ }
1726
+ .ui.pointing.menu .active.dropdown.item:after {
1727
+ visibility: hidden;
1728
+ }
1729
+
1730
+ /* Don't double up pointers */
1731
+ .ui.pointing.menu .dropdown.active.item:after,
1732
+ .ui.pointing.menu .active.item .menu .active.item:after {
1733
+ display: none;
1734
+ }
1735
+
1561
1736
  /* Colors */
1562
1737
  .ui.pointing.menu .active.item:hover:after {
1563
1738
  background-color: @arrowHoverColor;
@@ -1565,8 +1740,11 @@
1565
1740
  .ui.pointing.menu .active.item:after {
1566
1741
  background-color: @arrowActiveColor;
1567
1742
  }
1743
+ .ui.pointing.menu .active.item:hover:after {
1744
+ background-color: @arrowActiveHoverColor;
1745
+ }
1568
1746
 
1569
- .ui.vertical.pointing.menu .item:hover:after {
1747
+ .ui.vertical.pointing.menu .active.item:hover:after {
1570
1748
  background-color: @arrowVerticalHoverColor;
1571
1749
  }
1572
1750
  .ui.vertical.pointing.menu .active.item:after {
@@ -1582,25 +1760,52 @@
1582
1760
  Attached
1583
1761
  ---------------*/
1584
1762
 
1585
- .ui.menu.attached {
1586
- margin: 0rem;
1763
+ .ui.attached.menu {
1587
1764
  border-radius: 0px;
1588
- /* avoid rgba multiplying */
1589
- box-shadow: @attachedBoxShadow;
1765
+ margin-left: -@borderWidth;
1766
+ margin-right: -@borderWidth;
1767
+ width: @attachedWidth;
1768
+ box-shadow: @attachedBoxShadow; /* avoid rgba multiplying */
1769
+ }
1770
+
1771
+ /* Direction */
1772
+ .ui.attached.menu:not(.top):not(.bottom) {
1773
+ margin-top: 0em;
1774
+ margin-bottom: 0em;
1590
1775
  }
1591
1776
  .ui.top.attached.menu {
1777
+ margin-bottom: 0em;
1592
1778
  border-radius: @borderRadius @borderRadius 0em 0em;
1593
1779
  }
1594
- .ui.menu.bottom.attached {
1780
+ .ui.top.attached.menu > .item:first-child {
1781
+ border-radius: @borderRadius 0em 0em 0em;
1782
+ }
1783
+
1784
+ .ui.bottom.attached.menu {
1785
+ margin-top: 0em;
1786
+ border-top: none;
1595
1787
  border-radius: 0em 0em @borderRadius @borderRadius;
1596
1788
  }
1789
+ .ui.bottom.attached.menu > .item:first-child {
1790
+ border-radius: 0em 0em 0em @borderRadius;
1791
+ }
1792
+
1793
+ /* Tabular Attached */
1794
+ .ui.top.attached.menu:not(.fixed):not(.tabular) {
1795
+ border-bottom: none;
1796
+ }
1797
+ .ui.attached.tabular.menu {
1798
+ margin-left: 0;
1799
+ margin-right: 0;
1800
+ width: 100%;
1801
+ }
1597
1802
 
1598
1803
  /*--------------
1599
1804
  Sizes
1600
1805
  ---------------*/
1601
1806
 
1602
1807
  /* Small */
1603
- .ui.small.menu .item {
1808
+ .ui.small.menu {
1604
1809
  font-size: @small;
1605
1810
  }
1606
1811
  .ui.small.vertical.menu {
@@ -1608,7 +1813,7 @@
1608
1813
  }
1609
1814
 
1610
1815
  /* Medium */
1611
- .ui.menu .item {
1816
+ .ui.menu {
1612
1817
  font-size: @medium;
1613
1818
  }
1614
1819
  .ui.vertical.menu {
@@ -1616,17 +1821,19 @@
1616
1821
  }
1617
1822
 
1618
1823
  /* Large */
1619
- .ui.large.menu .item {
1824
+ .ui.large.menu {
1620
1825
  font-size: @large;
1621
1826
  }
1622
- .ui.large.menu .item .item {
1623
- font-size: @largeSubMenu;
1624
- }
1625
- .ui.large.menu .dropdown .item {
1626
- font-size: @largeDropdown;
1627
- }
1628
1827
  .ui.large.vertical.menu {
1629
1828
  width: @largeWidth;
1630
1829
  }
1631
1830
 
1831
+ /* Huge */
1832
+ .ui.huge.menu {
1833
+ font-size: @huge;
1834
+ }
1835
+ .ui.huge.vertical.menu {
1836
+ width: @hugeWidth;
1837
+ }
1838
+
1632
1839
  .loadUIOverrides();