1 | @import "../core/index-noreset.scss";
|
2 | @import "scss/variable";
|
3 | @import "scss/mixin";
|
4 | @import "./rtl.scss";
|
5 |
|
6 | #{$menu-prefix} {
|
7 | @include box-sizing;
|
8 |
|
9 | &:focus,
|
10 | & *:focus {
|
11 | outline: 0;
|
12 | }
|
13 |
|
14 | position: relative;
|
15 | min-width: $s-25;
|
16 | margin: 0;
|
17 | list-style: none;
|
18 | border: $popup-local-border-width $popup-local-border-style $popup-local-border-color;
|
19 | border-radius: $popup-local-corner;
|
20 | box-shadow: $popup-local-shadow;
|
21 | background: $menu-background;
|
22 | line-height: $menu-line-height;
|
23 | font-size: $menu-font-size;
|
24 | animation-duration: $motion-duration-standard;
|
25 | animation-timing-function: $motion-ease;
|
26 |
|
27 | &-spacing-lr {
|
28 | padding: 0 $popup-spacing-lr;
|
29 | &#{$menu-prefix}-outside > #{$menu-prefix} {
|
30 | height: 100%;
|
31 | overflow-y: auto;
|
32 | }
|
33 | }
|
34 |
|
35 | &-spacing-tb {
|
36 | padding: $popup-spacing-tb 0;
|
37 | }
|
38 |
|
39 | &.#{$css-prefix}ver {
|
40 | padding: $menu-padding-ver-padding-tb $menu-padding-ver-padding-lr;
|
41 | #{$menu-prefix}-item {
|
42 | padding: 0 $menu-item-padding-ver-padding-r 0 $menu-item-padding-ver-padding-l;
|
43 | }
|
44 | }
|
45 | &.#{$css-prefix}hoz {
|
46 | padding: $menu-padding-hoz-padding-tb $menu-padding-hoz-padding-lr;
|
47 | #{$menu-prefix}-item {
|
48 | padding: 0 $menu-item-padding-hoz-padding-lr;
|
49 | }
|
50 | }
|
51 | &-embeddable,
|
52 | &-embeddable &-item.#{$css-prefix}disabled,
|
53 | &-embeddable &-item.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {
|
54 | background: transparent;
|
55 | border: none;
|
56 | }
|
57 |
|
58 | &-embeddable {
|
59 | box-shadow: none;
|
60 | }
|
61 |
|
62 | &-embeddable &-item-inner {
|
63 | height: 100%;
|
64 | }
|
65 |
|
66 | &-content {
|
67 | position: relative;
|
68 | padding: 0;
|
69 | margin: 0;
|
70 | list-style: none;
|
71 | }
|
72 |
|
73 | &-sub-menu {
|
74 | padding: 0;
|
75 | margin: 0;
|
76 | list-style: none;
|
77 |
|
78 | &.#{$css-prefix} {
|
79 | &expand-enter {
|
80 | overflow: hidden;
|
81 | }
|
82 |
|
83 | &expand-enter-active {
|
84 | transition: height $motion-duration-standard $motion-ease;
|
85 | }
|
86 |
|
87 | &expand-leave {
|
88 | overflow: hidden;
|
89 | }
|
90 |
|
91 | &expand-leave-active {
|
92 | transition: height $motion-duration-standard $motion-ease;
|
93 | }
|
94 | }
|
95 | }
|
96 |
|
97 | &-item {
|
98 | position: relative;
|
99 | transition: background $motion-duration-immediately $motion-linear;
|
100 | color: $menu-color;
|
101 | cursor: pointer;
|
102 |
|
103 | &-helper {
|
104 | float: right;
|
105 | color: $color-text1-2;
|
106 | font-style: normal;
|
107 | font-size: $menu-font-size;
|
108 | }
|
109 |
|
110 | .#{$css-prefix}checkbox,
|
111 | .#{$css-prefix}radio {
|
112 | margin-right: $menu-icon-margin;
|
113 | }
|
114 |
|
115 | &.#{$css-prefix}selected {
|
116 | @include menu-item-state(
|
117 | $menu-color-selected,
|
118 | $menu-background-selected,
|
119 | $menu-arrow-color,
|
120 | $menu-icon-selected-color
|
121 | );
|
122 | }
|
123 |
|
124 | &.#{$css-prefix}disabled,
|
125 | &.#{$css-prefix}disabled #{$menu-prefix}-item-text > a {
|
126 | @include menu-item-state(
|
127 | $menu-color-disabled,
|
128 | $menu-background,
|
129 | $menu-color-disabled,
|
130 | $menu-color-disabled
|
131 | );
|
132 | cursor: not-allowed;
|
133 | }
|
134 |
|
135 | &:not(.#{$css-prefix}disabled):hover,
|
136 | &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:hover,
|
137 | &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused:hover,
|
138 | &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus:hover,
|
139 | &:not(.#{$css-prefix}disabled).#{$css-prefix}focused,
|
140 | &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused,
|
141 | &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus {
|
142 | @include menu-item-state(
|
143 | $menu-color-hover,
|
144 | $menu-background-hover,
|
145 | $menu-arrow-color-hover,
|
146 | $menu-icon-selected-hover-color
|
147 | );
|
148 | }
|
149 | }
|
150 |
|
151 | &-item-inner {
|
152 | height: $menu-line-height;
|
153 | font-size: $menu-font-size;
|
154 | overflow: hidden;
|
155 | text-overflow: ellipsis;
|
156 | white-space: nowrap;
|
157 | word-wrap: normal;
|
158 | }
|
159 |
|
160 | &-item &-item-text {
|
161 | vertical-align: middle;
|
162 |
|
163 | & > a {
|
164 | display: inline-block;
|
165 | text-decoration: none;
|
166 | color: $menu-color;
|
167 | &::before {
|
168 | position: absolute;
|
169 | background-color: transparent;
|
170 | top: 0;
|
171 | left: 0;
|
172 | bottom: 0;
|
173 | right: 0;
|
174 | content: '';
|
175 | }
|
176 | }
|
177 | }
|
178 |
|
179 | &.#{$css-prefix}hoz {
|
180 | padding: 0;
|
181 |
|
182 | &#{$menu-prefix}-nowrap {
|
183 | overflow: hidden;
|
184 | white-space: nowrap;
|
185 |
|
186 | #{$menu-prefix}-more {
|
187 | text-align: center;
|
188 | }
|
189 | }
|
190 |
|
191 | > #{$menu-prefix}-item,
|
192 | > #{$menu-prefix}-sub-menu-wrapper,
|
193 | #{$menu-prefix}-content > #{$menu-prefix}-item {
|
194 | display: inline-block;
|
195 | vertical-align: top;
|
196 | }
|
197 |
|
198 | #{$menu-prefix}-header,
|
199 | #{$menu-prefix}-content,
|
200 | #{$menu-prefix}-footer {
|
201 | display: inline-block;
|
202 | }
|
203 | }
|
204 |
|
205 | &-hoz-right {
|
206 | float: right;
|
207 | }
|
208 |
|
209 | &-group-label {
|
210 | padding: 0 $menu-padding-title-horizontal;
|
211 | color: $color-text1-2;
|
212 | }
|
213 |
|
214 | &-divider {
|
215 | margin: $menu-divider-margin-ver $menu-divider-margin-hoz;
|
216 | border-bottom: $menu-divider-width $menu-divider-style $menu-divider-color;
|
217 | }
|
218 |
|
219 | & &-icon-selected.#{$css-prefix}icon {
|
220 | position: absolute;
|
221 | top: 0;
|
222 |
|
223 | @include icon-size($menu-icon-selected-size, calc(0px - (#{$menu-item-padding-ver-padding-l} - #{$menu-icon-selected-right})));
|
224 |
|
225 | &#{$menu-prefix}-icon-right {
|
226 | right: $menu-icon-selected-right;
|
227 | }
|
228 | }
|
229 | & &-symbol-icon-selected#{$menu-prefix}-icon-selected::before {
|
230 | content: $menu-select-icon-content;
|
231 | }
|
232 |
|
233 | & &-icon-arrow.#{$css-prefix}icon {
|
234 | position: absolute;
|
235 | top: 0;
|
236 | right: $menu-arrow-right;
|
237 | @include icon-size($menu-icon-size);
|
238 | color: $menu-arrow-color;
|
239 | transition: all $motion-duration-immediately $motion-linear;
|
240 | }
|
241 |
|
242 | & &-icon-arrow-down::before {
|
243 | content: $menu-fold-icon-content;
|
244 | }
|
245 |
|
246 | & &-icon-arrow-down.#{$css-prefix}open {
|
247 | @if get-compiling-value($menu-unfold-icon-content) != get-compiling-value($icon-reset) {
|
248 | &::before {
|
249 | content: $menu-unfold-icon-content;
|
250 | }
|
251 | } @else {
|
252 | @include icon-size(
|
253 | $size: $menu-icon-size,
|
254 | $transform: rotate(180deg)
|
255 | );
|
256 | }
|
257 | }
|
258 |
|
259 | & &-symbol-popupfold::before {
|
260 | content: $menu-popupfold-icon-content;
|
261 | }
|
262 |
|
263 | & &-icon-arrow-right.#{$css-prefix}open {
|
264 | @include icon-size(
|
265 | $size: $menu-icon-size,
|
266 | $transform: rotate(-90deg)
|
267 | );
|
268 | }
|
269 |
|
270 | & &-hoz-icon-arrow.#{$css-prefix}icon {
|
271 | position: absolute;
|
272 | top: 0;
|
273 | right: 6px;
|
274 | @include icon-size($menu-hoz-icon-size);
|
275 | color: $menu-arrow-color;
|
276 | transition: all $motion-duration-immediately $motion-linear;
|
277 |
|
278 | @if get-compiling-value($menu-fold-icon-content) != get-compiling-value($icon-reset) {
|
279 | &::before {
|
280 | content: $menu-fold-icon-content;
|
281 | }
|
282 | }
|
283 | }
|
284 |
|
285 |
|
286 | &-unfold-icon::before {
|
287 | content: $menu-unfold-icon-content;
|
288 | }
|
289 |
|
290 |
|
291 | & &-hoz-icon-arrow.#{$css-prefix}open {
|
292 | @if get-compiling-value($menu-unfold-icon-content) != get-compiling-value($icon-reset) {
|
293 | &::before {
|
294 | content: $menu-unfold-icon-content;
|
295 | }
|
296 | } @else {
|
297 | @include icon-size(
|
298 | $size: $menu-hoz-icon-size,
|
299 | $transform: rotate(180deg)
|
300 | );
|
301 | }
|
302 | }
|
303 |
|
304 | &.#{$css-prefix}context {
|
305 | line-height: $s-6;
|
306 |
|
307 | #{$menu-prefix}-item-inner {
|
308 | height: $s-6;
|
309 | }
|
310 | }
|
311 |
|
312 |
|
313 |
|
314 |
|
315 | }
|