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.
- checksums.yaml +4 -4
- data/assets/javascripts/semantic_ui/definitions/behaviors/api.js +394 -188
- data/assets/javascripts/semantic_ui/definitions/behaviors/colorize.js +4 -2
- data/assets/javascripts/semantic_ui/definitions/behaviors/form.js +263 -125
- data/assets/javascripts/semantic_ui/definitions/behaviors/state.js +3 -3
- data/assets/javascripts/semantic_ui/definitions/behaviors/visibility.js +213 -96
- data/assets/javascripts/semantic_ui/definitions/behaviors/visit.js +6 -4
- data/assets/javascripts/semantic_ui/definitions/globals/site.js +4 -4
- data/assets/javascripts/semantic_ui/definitions/modules/accordion.js +66 -52
- data/assets/javascripts/semantic_ui/definitions/modules/checkbox.js +309 -112
- data/assets/javascripts/semantic_ui/definitions/modules/dimmer.js +24 -26
- data/assets/javascripts/semantic_ui/definitions/modules/dropdown.js +2005 -590
- data/assets/javascripts/semantic_ui/definitions/modules/embed.js +662 -0
- data/assets/javascripts/semantic_ui/definitions/modules/modal.js +106 -79
- data/assets/javascripts/semantic_ui/definitions/modules/nag.js +7 -8
- data/assets/javascripts/semantic_ui/definitions/modules/popup.js +323 -194
- data/assets/javascripts/semantic_ui/definitions/modules/progress.js +111 -103
- data/assets/javascripts/semantic_ui/definitions/modules/rating.js +78 -54
- data/assets/javascripts/semantic_ui/definitions/modules/search.js +304 -122
- data/assets/javascripts/semantic_ui/definitions/modules/shape.js +93 -47
- data/assets/javascripts/semantic_ui/definitions/modules/sidebar.js +83 -149
- data/assets/javascripts/semantic_ui/definitions/modules/sticky.js +99 -29
- data/assets/javascripts/semantic_ui/definitions/modules/tab.js +219 -124
- data/assets/javascripts/semantic_ui/definitions/modules/transition.js +202 -171
- data/assets/stylesheets/semantic_ui/definitions/collections/breadcrumb.less +2 -1
- data/assets/stylesheets/semantic_ui/definitions/collections/form.less +135 -58
- data/assets/stylesheets/semantic_ui/definitions/collections/grid.less +366 -383
- data/assets/stylesheets/semantic_ui/definitions/collections/menu.less +838 -631
- data/assets/stylesheets/semantic_ui/definitions/collections/message.less +89 -71
- data/assets/stylesheets/semantic_ui/definitions/collections/table.less +183 -131
- data/assets/stylesheets/semantic_ui/definitions/elements/button.less +1097 -300
- data/assets/stylesheets/semantic_ui/definitions/elements/container.less +135 -0
- data/assets/stylesheets/semantic_ui/definitions/elements/divider.less +31 -30
- data/assets/stylesheets/semantic_ui/definitions/elements/flag.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/elements/header.less +209 -121
- data/assets/stylesheets/semantic_ui/definitions/elements/icon.less +201 -96
- data/assets/stylesheets/semantic_ui/definitions/elements/image.less +26 -11
- data/assets/stylesheets/semantic_ui/definitions/elements/input.less +49 -14
- data/assets/stylesheets/semantic_ui/definitions/elements/label.less +391 -221
- data/assets/stylesheets/semantic_ui/definitions/elements/list.less +107 -68
- data/assets/stylesheets/semantic_ui/definitions/elements/loader.less +3 -1
- data/assets/stylesheets/semantic_ui/definitions/elements/rail.less +34 -25
- data/assets/stylesheets/semantic_ui/definitions/elements/reveal.less +25 -10
- data/assets/stylesheets/semantic_ui/definitions/elements/segment.less +261 -173
- data/assets/stylesheets/semantic_ui/definitions/elements/step.less +169 -70
- data/assets/stylesheets/semantic_ui/definitions/globals/reset.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/globals/site.less +3 -1
- data/assets/stylesheets/semantic_ui/definitions/modules/accordion.less +1 -2
- data/assets/stylesheets/semantic_ui/definitions/modules/checkbox.less +175 -103
- data/assets/stylesheets/semantic_ui/definitions/modules/dimmer.less +26 -15
- data/assets/stylesheets/semantic_ui/definitions/modules/dropdown.less +349 -80
- data/assets/stylesheets/semantic_ui/definitions/modules/embed.less +174 -0
- data/assets/stylesheets/semantic_ui/definitions/modules/modal.less +83 -36
- data/assets/stylesheets/semantic_ui/definitions/modules/nag.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/modules/popup.less +48 -7
- data/assets/stylesheets/semantic_ui/definitions/modules/progress.less +160 -107
- data/assets/stylesheets/semantic_ui/definitions/modules/rating.less +57 -54
- data/assets/stylesheets/semantic_ui/definitions/modules/search.less +55 -10
- data/assets/stylesheets/semantic_ui/definitions/modules/shape.less +5 -6
- data/assets/stylesheets/semantic_ui/definitions/modules/sidebar.less +9 -5
- data/assets/stylesheets/semantic_ui/definitions/modules/sticky.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/modules/tab.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/modules/transition.less +3 -4
- data/assets/stylesheets/semantic_ui/definitions/views/card.less +240 -130
- data/assets/stylesheets/semantic_ui/definitions/views/comment.less +1 -1
- data/assets/stylesheets/semantic_ui/definitions/views/feed.less +15 -8
- data/assets/stylesheets/semantic_ui/definitions/views/item.less +13 -13
- data/assets/stylesheets/semantic_ui/definitions/views/statistic.less +230 -86
- data/assets/stylesheets/semantic_ui/theme.less +22 -15
- data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.overrides +5 -5
- data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.variables +5 -4
- data/assets/stylesheets/semantic_ui/themes/basic/collections/table.variables +1 -0
- data/assets/stylesheets/semantic_ui/themes/basic/views/card.variables +6 -4
- data/assets/stylesheets/semantic_ui/themes/bookish/elements/header.variables +4 -4
- data/assets/stylesheets/semantic_ui/themes/bootstrap3/elements/button.variables +1 -1
- data/assets/stylesheets/semantic_ui/themes/chubby/collections/form.overrides +8 -0
- data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.variables +40 -0
- data/assets/stylesheets/semantic_ui/themes/classic/modules/progress.variables +1 -0
- data/assets/stylesheets/semantic_ui/themes/classic/views/card.overrides +1 -1
- data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.variables +17 -0
- data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.variables +5 -15
- data/assets/stylesheets/semantic_ui/themes/default/collections/form.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/collections/form.variables +31 -35
- data/assets/stylesheets/semantic_ui/themes/default/collections/grid.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/collections/grid.variables +34 -28
- data/assets/stylesheets/semantic_ui/themes/default/collections/menu.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables +259 -163
- data/assets/stylesheets/semantic_ui/themes/default/collections/message.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/collections/message.variables +42 -19
- data/assets/stylesheets/semantic_ui/themes/default/collections/table.overrides +0 -3
- data/assets/stylesheets/semantic_ui/themes/default/collections/table.variables +63 -59
- data/assets/stylesheets/semantic_ui/themes/default/elements/button.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/button.variables +90 -50
- data/assets/stylesheets/semantic_ui/themes/default/elements/container.overrides +3 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/container.variables +45 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/divider.overrides +15 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/divider.variables +3 -4
- data/assets/stylesheets/semantic_ui/themes/default/elements/flag.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/header.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/header.variables +40 -36
- data/assets/stylesheets/semantic_ui/themes/default/elements/icon.overrides +4 -3
- data/assets/stylesheets/semantic_ui/themes/default/elements/icon.variables +29 -12
- data/assets/stylesheets/semantic_ui/themes/default/elements/image.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/image.variables +5 -3
- data/assets/stylesheets/semantic_ui/themes/default/elements/input.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/input.variables +10 -24
- data/assets/stylesheets/semantic_ui/themes/default/elements/label.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/label.variables +88 -35
- data/assets/stylesheets/semantic_ui/themes/default/elements/list.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/list.variables +53 -34
- data/assets/stylesheets/semantic_ui/themes/default/elements/loader.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/loader.variables +9 -10
- data/assets/stylesheets/semantic_ui/themes/default/elements/rail.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/rail.variables +13 -5
- data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.variables +6 -4
- data/assets/stylesheets/semantic_ui/themes/default/elements/segment.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/segment.variables +66 -28
- data/assets/stylesheets/semantic_ui/themes/default/elements/step.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/elements/step.variables +60 -31
- data/assets/stylesheets/semantic_ui/themes/default/globals/reset.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables +477 -303
- data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.variables +6 -7
- data/assets/stylesheets/semantic_ui/themes/default/modules/chatroom.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.overrides +19 -16
- data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.variables +71 -43
- data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.variables +12 -9
- data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.overrides +0 -5
- data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.variables +146 -64
- data/assets/stylesheets/semantic_ui/themes/default/modules/{video.overrides → embed.overrides} +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/embed.variables +53 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/modal.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/modal.variables +24 -18
- data/assets/stylesheets/semantic_ui/themes/default/modules/nag.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/popup.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/popup.variables +3 -9
- data/assets/stylesheets/semantic_ui/themes/default/modules/progress.variables +13 -7
- data/assets/stylesheets/semantic_ui/themes/default/modules/rating.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/rating.variables +71 -33
- data/assets/stylesheets/semantic_ui/themes/default/modules/search.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/search.variables +36 -34
- data/assets/stylesheets/semantic_ui/themes/default/modules/shape.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/shape.variables +7 -2
- data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.variables +2 -5
- data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.variables +2 -7
- data/assets/stylesheets/semantic_ui/themes/default/modules/tab.variables +1 -3
- data/assets/stylesheets/semantic_ui/themes/default/modules/transition.overrides +8 -9
- data/assets/stylesheets/semantic_ui/themes/default/views/ad.variables +2 -2
- data/assets/stylesheets/semantic_ui/themes/default/views/card.variables +33 -23
- data/assets/stylesheets/semantic_ui/themes/default/views/comment.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/views/feed.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/views/feed.variables +15 -23
- data/assets/stylesheets/semantic_ui/themes/default/views/item.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/views/item.variables +12 -11
- data/assets/stylesheets/semantic_ui/themes/default/views/statistic.overrides +0 -0
- data/assets/stylesheets/semantic_ui/themes/default/views/statistic.variables +25 -24
- data/assets/stylesheets/semantic_ui/themes/flat/collections/form.overrides +4 -0
- data/assets/stylesheets/semantic_ui/themes/flat/collections/form.variables +1 -2
- data/assets/stylesheets/semantic_ui/themes/flat/globals/site.variables +1 -0
- data/assets/stylesheets/semantic_ui/themes/github/collections/form.variables +1 -1
- data/assets/stylesheets/semantic_ui/themes/github/collections/menu.variables +10 -15
- data/assets/stylesheets/semantic_ui/themes/github/elements/button.variables +2 -2
- data/assets/stylesheets/semantic_ui/themes/github/elements/step.variables +2 -2
- data/assets/stylesheets/semantic_ui/themes/instagram/views/card.overrides +12 -0
- data/assets/stylesheets/semantic_ui/themes/instagram/views/card.variables +23 -0
- data/assets/stylesheets/semantic_ui/themes/material/collections/menu.overrides +1 -0
- data/assets/stylesheets/semantic_ui/themes/material/collections/menu.variables +10 -0
- data/assets/stylesheets/semantic_ui/themes/material/elements/button.overrides +1 -0
- data/assets/stylesheets/semantic_ui/themes/material/elements/button.variables +14 -6
- data/assets/stylesheets/semantic_ui/themes/material/globals/site.variables +3 -2
- data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.overrides +5 -0
- data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.variables +20 -0
- data/assets/stylesheets/semantic_ui/themes/raised/elements/button.variables +5 -5
- data/assets/stylesheets/semantic_ui/themes/round/elements/button.variables +1 -1
- data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.overrides +4 -12
- data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.variables +3 -7
- data/lib/generators/semantic_ui/install/templates/config/elements/container.overrides +3 -0
- data/lib/generators/semantic_ui/install/templates/config/elements/container.variables +3 -0
- data/lib/generators/semantic_ui/install/templates/config/modules/embed.overrides +3 -0
- data/lib/generators/semantic_ui/install/templates/config/modules/embed.variables +0 -0
- data/lib/generators/semantic_ui/install/templates/semantic_ui.css +2 -1
- data/lib/generators/semantic_ui/install/templates/semantic_ui.js +1 -1
- data/lib/generators/semantic_ui/install/templates/theme.config +5 -3
- data/lib/less/rails/semantic_ui/version.rb +1 -1
- data/tasks/update.rake +21 -6
- metadata +23 -7
- data/assets/fonts/semantic_ui/themes/default/assets/fonts/icons.otf +0 -0
- data/assets/javascripts/semantic_ui/definitions/modules/video.js +0 -540
- data/assets/stylesheets/semantic_ui/definitions/modules/video.less +0 -135
- 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
|
11
|
+
/*
|
12
|
+
* # Semantic - Menu
|
13
13
|
* http://github.com/semantic-org/semantic-ui/
|
14
14
|
*
|
15
15
|
*
|
16
|
-
* Copyright
|
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
|
-
|
69
|
+
Sub-Menu
|
73
70
|
---------------*/
|
74
71
|
|
75
|
-
|
76
|
-
|
77
|
-
color: @menuTextColor;
|
78
|
-
}
|
79
|
-
.ui.menu .item .item {
|
80
|
-
color: @subMenuTextColor;
|
72
|
+
.ui.menu .menu {
|
73
|
+
margin: 0em;
|
81
74
|
}
|
82
75
|
|
83
|
-
|
84
|
-
|
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
|
-
|
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:
|
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
|
-
|
216
|
+
Popup
|
256
217
|
---------------*/
|
257
218
|
|
258
|
-
|
259
|
-
|
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.
|
265
|
-
|
222
|
+
.ui.menu .ui.visible.popup {
|
223
|
+
display: block;
|
266
224
|
}
|
267
225
|
|
268
|
-
|
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
|
-
|
243
|
+
border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
|
244
|
+
background: @dropdownBackground;
|
245
|
+
margin: @dropdownMenuDistance 0px 0px;
|
246
|
+
box-shadow: @dropdownMenuBoxShadow;
|
275
247
|
}
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
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 .
|
282
|
-
|
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
|
-
|
287
|
-
|
288
|
-
|
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
|
-
|
291
|
-
|
292
|
-
|
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
|
-
/*
|
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: @
|
339
|
+
margin-left: @labelTextMargin;
|
308
340
|
padding: @labelVerticalPadding @labelHorizontalPadding;
|
309
|
-
|
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:
|
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
|
-
|
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
|
-
|
335
|
-
.ui.menu
|
336
|
-
.ui.menu
|
337
|
-
.ui.
|
338
|
-
.ui.menu .
|
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: @
|
342
|
-
color: @
|
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: @
|
354
|
-
color: @
|
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: @
|
363
|
-
color: @
|
364
|
-
font-weight: @
|
365
|
-
box-shadow:
|
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.
|
400
|
-
.ui.menu .active.item:hover {
|
401
|
-
background-color: @
|
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
|
-
|
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
|
-
|
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
|
507
|
-
margin: @subMenuMargin
|
565
|
+
.ui.vertical.menu .item > .menu {
|
566
|
+
margin: @subMenuMargin;
|
508
567
|
}
|
509
|
-
.ui.vertical.menu .
|
568
|
+
.ui.vertical.menu .menu .item {
|
510
569
|
background: none;
|
511
|
-
padding: @
|
570
|
+
padding: @subMenuVerticalPadding @subMenuHorizontalPadding;
|
512
571
|
font-size: @subMenuFontSize;
|
572
|
+
color: @subMenuTextColor;
|
513
573
|
}
|
514
|
-
.ui.vertical.menu .item
|
515
|
-
|
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.
|
578
|
+
.ui.vertical.menu .menu .item:before {
|
576
579
|
display: none;
|
577
580
|
}
|
578
581
|
|
579
|
-
/*
|
580
|
-
.ui.
|
581
|
-
|
582
|
-
|
583
|
-
|
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.
|
590
|
-
|
588
|
+
.ui.vertical.menu > .active.item:first-child {
|
589
|
+
border-radius: 0em @borderRadius 0em 0em;
|
591
590
|
}
|
592
|
-
.ui.
|
593
|
-
|
591
|
+
.ui.vertical.menu > .active.item:last-child {
|
592
|
+
border-radius: 0em 0em @borderRadius 0em;
|
594
593
|
}
|
595
|
-
.ui.
|
596
|
-
|
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
|
-
|
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.
|
606
|
-
|
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: @
|
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-
|
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: @
|
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
|
-
|
753
|
+
padding: @secondaryItemPadding;
|
754
|
+
margin: @secondaryItemMargin;
|
716
755
|
background: @secondaryItemBackground;
|
717
|
-
|
718
|
-
|
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
|
-
|
729
|
-
|
730
|
-
|
760
|
+
/* No Divider */
|
761
|
+
.ui.secondary.menu .item:before {
|
762
|
+
display: none !important;
|
731
763
|
}
|
732
764
|
|
733
|
-
|
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
|
-
|
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
|
-
|
781
|
+
background: @secondaryHoverItemBackground;
|
782
|
+
color: @secondaryHoverItemColor;
|
748
783
|
}
|
749
784
|
|
750
785
|
/* Active */
|
751
|
-
.ui.secondary.menu
|
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
|
-
|
758
|
-
|
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
|
-
|
809
|
+
background: @secondaryInvertedHoverBackground;
|
810
|
+
color: @secondaryInvertedHoverColor !important;
|
769
811
|
}
|
770
812
|
.ui.secondary.inverted.menu .active.item {
|
771
|
-
background
|
813
|
+
background: @secondaryInvertedActiveBackground;
|
814
|
+
color: @secondaryInvertedActiveColor !important;
|
772
815
|
}
|
773
816
|
|
774
|
-
|
775
|
-
|
776
|
-
|
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:
|
791
|
-
border-radius: @
|
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
|
-
/*
|
798
|
-
.ui.secondary.
|
843
|
+
/* Sub Menu */
|
844
|
+
.ui.vertical.secondary.menu .item > .menu .item {
|
799
845
|
background-color: transparent;
|
800
846
|
}
|
801
847
|
|
802
|
-
|
803
|
-
|
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
|
-
|
858
|
+
margin-left: 0em;
|
859
|
+
margin-right: 0em;
|
860
|
+
border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;
|
838
861
|
}
|
839
862
|
|
840
|
-
.ui.secondary.pointing.menu
|
841
|
-
|
842
|
-
|
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
|
-
|
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
|
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
|
867
|
-
.ui.secondary.pointing.menu
|
868
|
-
.ui.secondary.pointing.menu
|
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
|
876
|
-
.ui.secondary.pointing.menu
|
877
|
-
.ui.secondary.pointing.menu
|
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
|
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
|
-
/*
|
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:
|
895
|
-
border-right: @secondaryPointingBorderWidth
|
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
|
898
|
-
margin: 0em -@secondaryPointingBorderWidth 0em 0em;
|
929
|
+
.ui.secondary.vertical.pointing.menu .item {
|
899
930
|
border-bottom: none;
|
900
|
-
border-right:
|
901
|
-
border-
|
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
|
-
/*
|
905
|
-
.ui.secondary.vertical.pointing.menu
|
906
|
-
|
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
|
-
/*
|
911
|
-
.ui.secondary.
|
912
|
-
|
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
|
-
|
917
|
-
|
918
|
-
|
919
|
-
|
920
|
-
|
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
|
-
/*
|
924
|
-
.ui.secondary.inverted.
|
925
|
-
|
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:
|
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
|
-
|
986
|
+
align-self: center;
|
987
|
+
margin: @textMenuItemMargin;
|
988
|
+
font-weight: @textMenuItemFontWeight;
|
989
|
+
color: @textMenuItemColor;
|
990
|
+
transition: @textMenuItemTransition;
|
954
991
|
}
|
955
|
-
|
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:
|
971
|
-
font-
|
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:
|
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
|
-
|
991
|
-
clear: left;
|
992
|
-
margin: 0.5em 0em;
|
1036
|
+
margin: @textVerticalMenuItemMargin;
|
993
1037
|
}
|
994
1038
|
.ui.vertical.text.menu .item > i.icon {
|
995
|
-
float:
|
996
|
-
margin:
|
1039
|
+
float: @textVerticalMenuIconFloat;
|
1040
|
+
margin: @iconMargin;
|
997
1041
|
}
|
998
1042
|
.ui.vertical.text.menu .header.item {
|
999
|
-
margin:
|
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
|
-
|
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
|
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
|
1056
|
-
|
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
|
-
|
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
|
-
|
1119
|
+
width: auto;
|
1072
1120
|
}
|
1073
1121
|
|
1074
|
-
|
1122
|
+
/* Inverted */
|
1075
1123
|
.ui.inverted.icon.menu .item {
|
1076
|
-
color:
|
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
|
1134
|
+
.ui.fluid.labeled.icon.menu .item {
|
1090
1135
|
min-width: 0em;
|
1091
1136
|
}
|
1092
1137
|
|
1093
|
-
.ui.labeled.icon.menu
|
1138
|
+
.ui.labeled.icon.menu .item {
|
1094
1139
|
min-width: @labeledIconMinWidth;
|
1095
1140
|
}
|
1096
|
-
.ui.labeled.icon.menu
|
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
|
-
|
1162
|
+
Stackable
|
1110
1163
|
---------------*/
|
1111
1164
|
|
1112
|
-
|
1113
|
-
.ui.menu
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
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
|
-
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
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 .
|
1129
|
-
.ui.
|
1130
|
-
border-color: @
|
1131
|
-
color: @
|
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 .
|
1134
|
-
.ui.
|
1135
|
-
border-color: @
|
1136
|
-
color: @
|
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 .
|
1139
|
-
.ui.
|
1140
|
-
border-color: @
|
1141
|
-
color: @
|
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 .
|
1149
|
-
.ui.
|
1150
|
-
border-color: @
|
1151
|
-
color: @
|
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
|
-
|
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:
|
1243
|
-
|
1244
|
-
|
1245
|
-
|
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
|
-
|
1265
|
-
|
1337
|
+
/*--- Active Hover ---*/
|
1338
|
+
.ui.inverted.menu .active.item:hover {
|
1339
|
+
background: @invertedActiveHoverBackground;
|
1340
|
+
color: @invertedActiveHoverColor !important;
|
1266
1341
|
}
|
1267
|
-
.ui.inverted.
|
1268
|
-
|
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
|
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
|
1361
|
+
margin: 0rem 0rem 0rem @floatedDistance;
|
1286
1362
|
}
|
1287
1363
|
|
1288
1364
|
|
1289
1365
|
/*--------------
|
1290
|
-
|
1366
|
+
Inverted
|
1291
1367
|
---------------*/
|
1292
1368
|
|
1293
|
-
|
1294
|
-
.ui.
|
1295
|
-
background-color: @
|
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
|
-
|
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
|
-
/*
|
1301
|
-
.ui.inverted.
|
1302
|
-
background-color: @
|
1391
|
+
/* Yellow */
|
1392
|
+
.ui.inverted.yellow.menu {
|
1393
|
+
background-color: @yellow;
|
1303
1394
|
}
|
1304
|
-
.ui.inverted.
|
1305
|
-
background-color: @
|
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.
|
1312
|
-
background-color: @
|
1417
|
+
.ui.inverted.green.menu .item:before {
|
1418
|
+
background-color: @invertedColoredDividerBackground;
|
1313
1419
|
}
|
1314
|
-
|
1315
|
-
|
1316
|
-
background-color: @orange;
|
1420
|
+
.ui.inverted.green.menu .active.item {
|
1421
|
+
background-color: @invertedColoredActiveBackground !important;
|
1317
1422
|
}
|
1318
|
-
|
1319
|
-
|
1423
|
+
|
1424
|
+
/* Teal */
|
1425
|
+
.ui.inverted.teal.menu {
|
1426
|
+
background-color: @teal;
|
1320
1427
|
}
|
1321
|
-
|
1322
|
-
|
1323
|
-
background-color: @pink;
|
1428
|
+
.ui.inverted.teal.menu .item:before {
|
1429
|
+
background-color: @invertedColoredDividerBackground;
|
1324
1430
|
}
|
1325
|
-
.ui.inverted.
|
1326
|
-
background-color: @
|
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.
|
1333
|
-
background-color: @
|
1461
|
+
.ui.inverted.purple.menu .item:before {
|
1462
|
+
background-color: @invertedColoredDividerBackground;
|
1334
1463
|
}
|
1335
|
-
|
1336
|
-
|
1337
|
-
background-color: @red;
|
1464
|
+
.ui.inverted.purple.menu .active.item {
|
1465
|
+
background-color: @invertedColoredActiveBackground !important;
|
1338
1466
|
}
|
1339
|
-
|
1340
|
-
|
1467
|
+
|
1468
|
+
/* Pink */
|
1469
|
+
.ui.inverted.pink.menu {
|
1470
|
+
background-color: @pink;
|
1341
1471
|
}
|
1342
|
-
|
1343
|
-
|
1344
|
-
background-color: @teal;
|
1472
|
+
.ui.inverted.pink.menu .item:before {
|
1473
|
+
background-color: @invertedColoredDividerBackground;
|
1345
1474
|
}
|
1346
|
-
.ui.inverted.
|
1347
|
-
background-color: @
|
1475
|
+
.ui.inverted.pink.menu .active.item {
|
1476
|
+
background-color: @invertedColoredActiveBackground !important;
|
1348
1477
|
}
|
1349
|
-
|
1350
|
-
|
1351
|
-
|
1478
|
+
|
1479
|
+
/* Brown */
|
1480
|
+
.ui.inverted.brown.menu {
|
1481
|
+
background-color: @brown;
|
1352
1482
|
}
|
1353
|
-
.ui.inverted.
|
1354
|
-
background-color: @
|
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: @
|
1371
|
-
padding-bottom: @
|
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: @
|
1377
|
-
padding-right: @
|
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-
|
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
|
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
|
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
|
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
|
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: @
|
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 .
|
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
|
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
|
1586
|
-
margin: 0rem;
|
1763
|
+
.ui.attached.menu {
|
1587
1764
|
border-radius: 0px;
|
1588
|
-
|
1589
|
-
|
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.
|
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
|
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
|
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
|
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();
|