aloha-vue 2.80.1 → 2.81.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/aloha-vue.css +7 -0
  3. package/dist/aloha-vue.css.map +1 -1
  4. package/dist/aloha-vue.es.js +47 -14
  5. package/dist/aloha-vue.umd.js +2 -2
  6. package/package.json +1 -1
  7. package/scss/components/AMenu.scss +634 -627
  8. package/src/AMenu/AMenu.js +592 -581
  9. package/src/AMenu/__tests__/AMenu.test.js +54 -0
  10. package/src/AMenu/compositionAPI/SearchAPI.js +45 -2
  11. package/src/AMenu/compositionAPI/__tests__/SearchAPI.test.js +108 -0
package/scss/components/AMenu.scss CHANGED
@@ -1,627 +1,634 @@
1
- :root {
2
- --a_menu_width_expanded: 21.875rem;
3
- --a_menu_width_collapsed: 3.75rem;
4
- --a_menu_transition: 0.5s;
5
- --a_menu_btn_toggle_top: 0.3125rem;
6
- --a_menu_btn_toggle_margin_left: 0.5rem;
7
- --a_menu_mobile_btn_toggle_margin_left: 0.5rem;
8
- --a_menu_mobile_btn_toggle_margin_top: 0.5rem;
9
- --a_menu_mobile_z_index: 1051;
10
- --a_menu_close_opacity: .3;
11
- --a_menu_page_bg: var(--a_color_white);
12
- }
13
-
14
- .a_menu {
15
- --a_menu_width: var(--a_menu_width_expanded);
16
- --a_menu_top: 0;
17
- --a_menu_navbar_top_height: 3.125rem;
18
- --a_menu_navbar_top_padding: .7rem .5rem .5rem .5rem;
19
- --a_menu_navbar_top_margin_bottom: .5rem;
20
- --a_menu_background: var(--a_color_white);
21
- --a_menu_border_color: var(--a_color_gray_300);
22
- --a_menu_box_shadow_color: var(--a_color_gray_600);
23
- --a_menu_box_shadow_size: 2px 6px 6px 1px;
24
- --a_menu_panel_child_offset: 100%;
25
- --a_menu_panel_parent_offset: -30%;
26
- --a_menu_panel_iconpanel_size: var(--a_menu_width_collapsed);
27
- --a_menu_panel_color: var(--a_color_gray_600);
28
- --a_menu_panel_secondary_bg: var(--a_color_white);
29
- --a_menu_panel_main_link_hover_color: var(--a_color_gray_900);
30
- --a_menu_panel_main_link_hover_bg: var(--a_color_gray_300);
31
- --a_menu_panel_main_link_padding_left: 1.5625rem;
32
- --a_menu_link_color: var(--a_color_gray_900);
33
- --a_menu_link_hover_color: var(--a_color_gray_900);
34
- --a_menu_link_hover_bg: var(--a_color_gray_300);
35
- --a_menu_listitem_padding: .3rem;
36
- --a_menu_listitem_panel_secondary_padding_x: .6rem;
37
- --a_menu_listitem_panel_secondary_padding_y: .3rem;
38
- --a_menu_link_padding_x: .7rem;
39
- --a_menu_link_padding_y: .5rem;
40
- --a_menu_link_selected_bg: var(--a_color_gray_200);
41
- --a_menu_link_selected_color: inherit;
42
- --a_menu_link_border_color: transparent;
43
- --a_menu_link_border_radius: .3rem;
44
- --a_menu_link_focus_size: 0 0 1px 3px;
45
- --a_menu_icon_color: var(--a_menu_link_color);
46
- --a_menu_focus_shadow_color: var(--a_color_focus);
47
- --a_menu_list_header_bg: var(--a_color_gray_200);
48
- --a_menu_breadcrumb_min_height: 4.0625rem;
49
- --a_menu_breadcrumb_border_bottom_width: 1px;
50
- --a_menu_submenu_open_bg: var(--a_color_primary);
51
- --a_menu_submenu_open_color: var(--a_color_white);
52
- --a_menu_submenu_border_radius: 1rem;
53
- --a_menu_submenu_border_width: 2px;
54
- --a_menu_search_height: 2.375rem;
55
- --a_menu_search_link_focus_size: inset 0 0 1px 2px;
56
- --a_menu_close_panel_width: 18.75rem;
57
- --a_menu_close_panel_max_height: 25rem;
58
- --a_menu_close_panel_border_radius: .3rem;
59
- --a_menu_close_panel_box_shadow_color: var(--a_color_gray_600);
60
- --a_menu_close_panel_box_shadow_size: 0 0 7px 3px;
61
- --a_menu_close_panel_header_color: var(--a_color_gray_900);
62
- --a_menu_close_panel_header_border_bottom_color: var(--a_color_gray_600);
63
- --a_menu_close_panel_header_border_bottom_width: 1px;
64
- --a_menu_link_line_horizontal_display: none;
65
-
66
- width: var(--a_menu_width);
67
- position: absolute;
68
- top: var(--a_menu_top);
69
- bottom: 0;
70
- left: 0;
71
- display: flex;
72
- flex-direction: column;
73
- background-color: var(--a_menu_background);
74
- margin: 0;
75
- padding: 0;
76
- border-right: 1px solid var(--a_menu_border_color);
77
- z-index: 2;
78
- box-shadow: var(--a_menu_box_shadow_size) var(--a_menu_box_shadow_color);
79
- }
80
- .a_menu__page {
81
- background-color: var(--a_menu_page_bg);
82
- box-sizing: border-box;
83
- position: relative;
84
- z-index: 1;
85
- }
86
-
87
- .a_menu__wrapper_open {
88
- .a_menu__page {
89
- width: calc(100% - var(--a_menu_width_expanded));
90
- margin-left: var(--a_menu_width_expanded);
91
- }
92
- }
93
-
94
- .a_menu__wrapper_close {
95
- .a_menu__page {
96
- width: calc(100% - var(--a_menu_width_collapsed));
97
- margin-left: var(--a_menu_width_collapsed);
98
- }
99
- }
100
-
101
- .a_menu__listview {
102
- list-style: none;
103
- padding: 0;
104
- margin: 0;
105
- }
106
- .a_menu__listitem {
107
- display: flex;
108
- flex-wrap: wrap;
109
- position: relative;
110
- padding: var(--a_menu_listitem_padding);
111
- margin: 0;
112
- border-color: var(--a_menu_border_color);
113
- &:not(:last-child):after {
114
- .a_menu__panel_main & {
115
- left: var(--a_menu_panel_iconpanel_size);
116
- }
117
- content: "";
118
- border-color: inherit;
119
- border-bottom-width: 1px;
120
- border-bottom-style: solid;
121
- display: var(--a_menu_link_line_horizontal_display);
122
- position: absolute;
123
- inset-inline-start: 1.25rem;
124
- inset-inline-end: 0;
125
- bottom: -1px;
126
- }
127
- }
128
- .a_menu__list_header {
129
- padding-left: var(--a_menu_panel_iconpanel_size);
130
- background-color: var(--a_menu_list_header_bg);
131
- padding-top: .5rem;
132
- padding-bottom: .5rem;
133
- }
134
- .a_menu__list_header_search {
135
- padding-left: var(--a_menu_link_padding_x);
136
- padding-right: var(--a_menu_link_padding_x);
137
- }
138
- .a_menu__link {
139
- flex-grow: 1;
140
- flex-basis: 10%;
141
- display: block;
142
- padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
143
- cursor: pointer;
144
- color: var(--a_menu_link_color);
145
- border: 1px solid var(--a_menu_link_border_color);
146
- border-radius: var(--a_menu_link_border_radius);
147
- &,
148
- &:active,
149
- &:hover,
150
- &:link,
151
- &:visited {
152
- text-decoration: none;
153
- color: var(--a_menu_link_color);
154
- }
155
- &:focus {
156
- outline: 0;
157
- box-shadow: var(--a_menu_link_focus_size) var(--a_menu_focus_shadow_color);
158
- color: var(--a_menu_link_color);
159
- }
160
- &:hover {
161
- outline: 0;
162
- color: var(--a_menu_link_hover_color);
163
- background-color: var(--a_menu_link_hover_bg);
164
- }
165
- &.a_menu__link_active {
166
- --a_menu_icon_color: var(--a_menu_submenu_open_color);
167
- --a_menu_link_border_color: var(--a_menu_submenu_open_color);
168
-
169
- background-color: var(--a_menu_submenu_open_bg);
170
- color: var(--a_menu_submenu_open_color);
171
- }
172
-
173
- &.a_menu__link_open {
174
- --a_menu_icon_color: var(--a_menu_submenu_open_color);
175
- --a_menu_link_border_color: var(--a_menu_submenu_open_bg);
176
-
177
- background-color: var(--a_menu_submenu_open_bg);
178
- color: var(--a_menu_submenu_open_color);
179
- }
180
- }
181
- .a_menu__link_panel_main {
182
- .a_menu__link__text {
183
- padding-left: var(--a_menu_panel_main_link_padding_left);
184
- }
185
- }
186
- .a_menu__link_disabled {
187
- opacity: .8;
188
- cursor: not-allowed;
189
- }
190
- .a_menu__link__text_truncated {
191
- text-overflow: ellipsis;
192
- white-space: nowrap;
193
- overflow: hidden;
194
- }
195
- .a_menu__link_selected {
196
- background-color: var(--a_menu_link_selected_bg);
197
- color: var(--a_menu_link_selected_color);
198
- }
199
- .a_menu__link__icon {
200
- width: 1.5625rem;
201
- height: 1.5625rem;
202
- text-align: center;
203
- color: var(--a_menu_icon_color);
204
- }
205
- .a_menu__link__counter {
206
- display: block;
207
- padding-inline-start: .5rem;
208
- float: right;
209
- }
210
- .a_menu__link__counter__icon {
211
- margin-left: .5rem;
212
- }
213
- .a_menu__link_btn {
214
- display: block;
215
- position: relative;
216
- width: auto;
217
- }
218
-
219
- .a_menu_clickable {
220
- cursor: pointer;
221
- }
222
-
223
- .a_menu__navbar_top {
224
- flex-shrink: 0;
225
- display: flex;
226
- padding: var(--a_menu_navbar_top_padding);
227
- height: var(--a_menu_navbar_top_height);
228
- margin-bottom: var(--a_menu_navbar_top_margin_bottom);
229
- }
230
- // search
231
- .a_menu__panel_search {
232
- .a_menu__listitem {
233
- padding: 0;
234
- }
235
- }
236
- .a_menu__navbar_top__search {
237
- width: 100%;
238
- .a_input {
239
- height: var(--a_menu_search_height);
240
- }
241
- .a_form_element__parent {
242
- --a_form_element_label_float_top: 50%;
243
- }
244
- }
245
- .a_menu__navbar_top_sub {
246
- display: flex;
247
- align-items: center;
248
- padding-left: var(--a_menu_width_collapsed);
249
- height: var(--a_menu_breadcrumb_min_height);
250
- }
251
- .a_menu__navbar_top_sub__search {
252
- padding-top: 0.4rem;
253
- padding-bottom: 0.4rem;
254
- margin: 0 var(--a_menu_listitem_padding);
255
- }
256
-
257
- .a_menu__btn_toggle {
258
- --a_menu_btn_toggle_width: 2.625rem;
259
- --a_menu_btn_toggle_height: 2.375rem;
260
- --a_menu_btn_toggle_bar_width: 1.125rem;
261
- --a_menu_btn_toggle_bar_height: 2px;
262
- --a_menu_btn_toggle_bar_1_top: 0.75rem;
263
- --a_menu_btn_toggle_bar_2_top: calc(var(--a_menu_btn_toggle_height) / 2 - var(--a_menu_btn_toggle_bar_height) / 2);
264
- --a_menu_btn_toggle_bar_3_top: 1.5rem;
265
- --a_menu_btn_toggle_bar_bg: var(--a_btn_color, var(--a_color_white));
266
-
267
- min-height: var(--a_menu_btn_toggle_height);
268
- height: var(--a_menu_btn_toggle_height);
269
- min-width: var(--a_menu_btn_toggle_width);
270
- width: var(--a_menu_btn_toggle_width);
271
- position: relative;
272
- &:active,
273
- &.active {
274
- --a_menu_btn_toggle_bar_bg: var(--a_btn_active_color, var(--a_color_white));
275
- }
276
- &:hover,
277
- &:focus {
278
- --a_menu_btn_toggle_bar_bg: var(--a_btn_hover_color, var(--a_color_white));
279
- }
280
- }
281
- .a_menu__btn_toggle_inside_menu {
282
- margin-right: 1rem;
283
- }
284
- .a_menu__btn_toggle_outside_menu:not(.a_menu__btn_toggle_only_mobile) {
285
- display: none;
286
- }
287
-
288
- .a_menu__btn_toggle__bar {
289
- display: block;
290
- background-color: var(--a_menu_btn_toggle_bar_bg);
291
- width: var(--a_menu_btn_toggle_bar_width);
292
- height: var(--a_menu_btn_toggle_bar_height);
293
- border-radius: 0.0625rem;
294
- position: absolute;
295
- left: 50%;
296
- transform: translateX(-50%);
297
- transition: var(--a_menu_transition);
298
- &.a_menu__btn_toggle__bar_1 {
299
- top: var(--a_menu_btn_toggle_bar_1_top);
300
- }
301
- &.a_menu__btn_toggle__bar_2 {
302
- top: var(--a_menu_btn_toggle_bar_2_top);
303
- }
304
- &.a_menu__btn_toggle__bar_3 {
305
- top: var(--a_menu_btn_toggle_bar_3_top);
306
- }
307
- }
308
- .a_menu__btn_toggle_open {
309
- .a_menu__btn_toggle__bar {
310
- &.a_menu__btn_toggle__bar_1 {
311
- top: var(--a_menu_btn_toggle_bar_2_top);
312
- transform: translateX(-50%) rotate(45deg);
313
- }
314
- &.a_menu__btn_toggle__bar_2 {
315
- opacity: 0;
316
- }
317
- &.a_menu__btn_toggle__bar_3 {
318
- top: var(--a_menu_btn_toggle_bar_2_top);
319
- transform: translateX(-50%) rotate(-45deg);
320
- }
321
- }
322
- }
323
-
324
- .a_menu__backdrop {
325
- z-index: -1;
326
- }
327
- // mobile
328
- .a_mobile {
329
- .a_menu_close {
330
- display: none;
331
- }
332
- .a_menu__page {
333
- width: 100%;
334
- margin-left: 0;
335
- }
336
- .a_menu_open {
337
- max-width: 100vw;
338
- }
339
- &.a_menu__wrapper_open {
340
- overflow: hidden;
341
- .a_menu__page {
342
- opacity: .5;
343
- }
344
- // .a_menu__backdrop {
345
- // opacity: .5;
346
- // z-index: var(--a__backdrop_zindex);
347
- // }
348
- }
349
- .a_menu__btn_toggle_close.a_menu__btn_toggle_outside_menu {
350
- display: inline-block;
351
- }
352
- }
353
- .a_menu_only_mobile {
354
- &.a_menu_close {
355
- display: none;
356
- }
357
- &.a_menu_open {
358
- max-width: 100vw;
359
- }
360
- & + .a_menu__page {
361
- padding-left: 1rem;
362
- }
363
- }
364
-
365
- // panels
366
- .a_menu__panels {
367
- position: absolute;
368
- top: 0;
369
- left: var(--a_menu_width_collapsed);
370
- right: 0;
371
- bottom: 0;
372
- overflow: hidden;
373
- display: none;
374
- }
375
- .a_menu__panels__main {
376
- position: relative;
377
- display: flex;
378
- flex-direction: column;
379
- height: calc(100% - var(--a_menu_navbar_top_height) - var(--a_menu_navbar_top_margin_bottom));
380
- .a_vertical_scroll {
381
- height: calc(100% - var(--a_menu_breadcrumb_min_height) + 1.25rem);
382
- margin-top: -1.25rem;
383
- &:not(.a_vertical_scroll_scrollable) {
384
- padding-bottom: 0;
385
- .a_vertical_scroll__btn__wrapper_up {
386
- border-bottom: 2px solid var(--a_menu_border_color);
387
- }
388
- .a_vertical_scroll__btn__wrapper_down {
389
- display: none;
390
- }
391
- }
392
- .a_menu__panel_main {
393
- position: relative;
394
- overflow: visible;
395
- transform: none;
396
- }
397
- }
398
- }
399
-
400
- .a_menu__panel {
401
- position: absolute;
402
- left: 0;
403
- right: 0;
404
- top: 0;
405
- bottom: 0;
406
- z-index: 1;
407
- overflow: hidden;
408
- overflow-y: auto;
409
- overscroll-behavior: contain;
410
- color: var(--a_menu_panel_color);
411
- background: var(--a_menu_background);
412
- transform: translate3d(var(--a_menu_panel_child_offset),0,0);
413
- border-color: var(--a_menu_border_color);
414
- &:not(.a_menu__panel_main) {
415
- border-inline-start-width: 1px;
416
- border-inline-start-style: solid;
417
- }
418
- }
419
- .a_menu__panel_opened {
420
- z-index: 2;
421
- transform: translate3d(0,0,0);
422
- }
423
- .a_menu__panel_parent {
424
- overflow-y: hidden;
425
- transform: unset;
426
- z-index: 0;
427
- .a_menu__list_header {
428
- opacity: 0;
429
- }
430
- }
431
- .a_menu__panels__main {
432
- & ~ .a_menu__panel {
433
- inset-inline-start: var(--a_menu_panel_iconpanel_size);
434
- }
435
- &.a_menu__panel_parent {
436
- .a_menu__breadcrumb {
437
- opacity: 0;
438
- }
439
- }
440
- }
441
- .a_menu__panel_secondary {
442
- display: none;
443
- background-color: var(--a_menu_panel_secondary_bg);
444
- &.a_menu__panel_opened {
445
- display: block;
446
- border-left: var(--a_menu_submenu_border_width) solid var(--a_menu_submenu_open_bg);
447
- border-top: var(--a_menu_submenu_border_width) solid var(--a_menu_submenu_open_bg);
448
- border-top-left-radius: var(--a_menu_submenu_border_radius);
449
- }
450
- .a_menu__listitem {
451
- padding: var(--a_menu_listitem_panel_secondary_padding_y) var(--a_menu_listitem_panel_secondary_padding_x);
452
- }
453
- }
454
- .a_menu_sub_open {
455
- .a_menu__panels {
456
- display: block;
457
- }
458
- }
459
-
460
- .a_menu_sub_open,
461
- .a_menu_close {
462
- .a_menu__navbar_top_sub__text {
463
- display: none;
464
- }
465
- .a_menu__panel_search .a_menu__navbar_top_sub__text {
466
- display: block;
467
- }
468
- }
469
- .a_menu_open {
470
- .a_menu__navbar_top_sub__search {
471
- display: none;
472
- }
473
- }
474
- .a_menu__panel_main {
475
- position: relative;
476
- .a_menu__link:hover {
477
- --a_menu_link_hover_color: var(--a_menu_panel_main_link_hover_color);
478
- --a_menu_link_hover_bg: var(--a_menu_panel_main_link_hover_bg);
479
- }
480
- }
481
-
482
- // menu closed
483
- .a_menu_close {
484
- width: var(--a_menu_width_collapsed);
485
- .a_menu__navbar_top__search {
486
- display: none;
487
- }
488
- .a_menu__list_header {
489
- opacity: 0;
490
- width: var(--a_menu_width_expanded);
491
- }
492
- .a_menu__panel_main {
493
- .a_menu__link__text {
494
- display: none;
495
- }
496
- .a_menu__link__counter {
497
- display: none;
498
- }
499
- }
500
- .a_menu__listitem:after {
501
- display: none;
502
- }
503
- .a_menu__btn_toggle {
504
- margin: 0;
505
- }
506
- .a_menu__panel {
507
- overflow: hidden;
508
- }
509
- .a_menu__panels {
510
- position: relative;
511
- overflow: visible;
512
- .a_menu__breadcrumb_secondary {
513
- display: none;
514
- }
515
- .a_menu__panel {
516
- width: var(--a_menu_close_panel_width);
517
- bottom: auto;
518
- right: auto;
519
- left: auto;
520
- top: auto;
521
- border: none;
522
- border-radius: var(--a_menu_close_panel_border_radius);
523
- // Aloha
524
- box-shadow: var(--a_menu_close_panel_box_shadow_size) var(--a_color_gray_600);
525
- max-height: var(--a_menu_close_panel_max_height);
526
- overflow-y: auto;
527
- z-index: 2;
528
- }
529
- .a_menu__panel_parent {
530
- display: block;
531
- overflow-y: hidden;
532
- }
533
- }
534
- .a_menu__link {
535
- text-overflow: clip;
536
- }
537
- .a_menu__navbar_top_sub {
538
- padding-left: 0;
539
- align-items: baseline;
540
- }
541
- }
542
- .a_menu__vertical_scroll_hidden .a_scroll_content{
543
- overflow-y: hidden;
544
- }
545
- // breadcrumb
546
- .a_menu__breadcrumb {
547
- min-height: var(--a_menu_breadcrumb_min_height);
548
- display: flex;
549
- align-items: center;
550
- position: relative;
551
- width: 100%;
552
- }
553
- .a_menu__breadcrumb_secondary {
554
- &:after {
555
- content: "";
556
- display: block;
557
- position: absolute;
558
- height: var(--a_menu_breadcrumb_border_bottom_width);
559
- width: calc(100% - 2rem);
560
- background-color: var(--a_menu_submenu_open_bg);
561
- left: 1rem;
562
- bottom: 0;
563
- }
564
- }
565
- .a_menu__breadcrumb__ul {
566
- list-style: none;
567
- display: block;
568
- width: 100%;
569
- margin: 0.5rem;
570
- padding: 0;
571
- }
572
- .a_menu__breadcrumb__ul_truncated {
573
- white-space: nowrap;
574
- text-overflow: ellipsis;
575
- overflow-x: hidden;
576
- }
577
- .a_menu__breadcrumb__ul_search {
578
- display: flex;
579
- .a_menu__listitem {
580
- overflow-x: hidden;
581
- &:after {
582
- display: none;
583
- }
584
- }
585
- .a_menu__link {
586
- padding: 0.2rem 0.3rem;
587
- &:focus,
588
- &:hover {
589
- box-shadow: var(--a_menu_search_link_focus_size) var(--a_menu_focus_shadow_color);
590
- }
591
- }
592
- .a_menu__breadcrumbs__item__divider {
593
- padding: 0.2rem;
594
- }
595
- }
596
- .a_menu__breadcrumbs__item {
597
- display: inline;
598
- }
599
- .a_menu__breadcrumbs__item__divider {
600
- padding-right: .2rem;
601
- }
602
- .a_menu__breadcrumbs__link {
603
- padding: .2rem;
604
- font-size: .8rem;
605
- }
606
- .a_menu__breadcrumb__ul_truncated__btn {
607
- margin-right: .2rem;
608
- }
609
- .a_menu__breadcrumb__ul_truncated__dropdown {
610
- padding: .2rem;
611
- min-width: auto;
612
- }
613
-
614
- .a_menu__panel_header {
615
- color: var(--a_menu_close_panel_header_color);
616
- border-bottom: var(--a_menu_close_panel_header_border_bottom_width) solid var(--a_menu_close_panel_header_border_bottom_color);
617
- padding: var(--a_menu_listitem_panel_secondary_padding_y) var(--a_menu_listitem_panel_secondary_padding_x);
618
- }
619
- .a_menu__panel_header__text {
620
- display: inline-block;
621
- padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
622
- }
623
- .a_menu__backdrop {
624
- opacity: 0.5;
625
- z-index: 1;
626
- left: var(--a_menu_width_expanded);
627
- }
1
+ :root {
2
+ --a_menu_width_expanded: 21.875rem;
3
+ --a_menu_width_collapsed: 3.75rem;
4
+ --a_menu_transition: 0.5s;
5
+ --a_menu_btn_toggle_top: 0.3125rem;
6
+ --a_menu_btn_toggle_margin_left: 0.5rem;
7
+ --a_menu_mobile_btn_toggle_margin_left: 0.5rem;
8
+ --a_menu_mobile_btn_toggle_margin_top: 0.5rem;
9
+ --a_menu_mobile_z_index: 1051;
10
+ --a_menu_close_opacity: .3;
11
+ --a_menu_page_bg: var(--a_color_white);
12
+ }
13
+
14
+ .a_menu {
15
+ --a_menu_width: var(--a_menu_width_expanded);
16
+ --a_menu_top: 0;
17
+ --a_menu_navbar_top_height: 3.125rem;
18
+ --a_menu_navbar_top_padding: .7rem .5rem .5rem .5rem;
19
+ --a_menu_navbar_top_margin_bottom: .5rem;
20
+ --a_menu_background: var(--a_color_white);
21
+ --a_menu_border_color: var(--a_color_gray_300);
22
+ --a_menu_box_shadow_color: var(--a_color_gray_600);
23
+ --a_menu_box_shadow_size: 2px 6px 6px 1px;
24
+ --a_menu_panel_child_offset: 100%;
25
+ --a_menu_panel_parent_offset: -30%;
26
+ --a_menu_panel_iconpanel_size: var(--a_menu_width_collapsed);
27
+ --a_menu_panel_color: var(--a_color_gray_600);
28
+ --a_menu_panel_secondary_bg: var(--a_color_white);
29
+ --a_menu_panel_main_link_hover_color: var(--a_color_gray_900);
30
+ --a_menu_panel_main_link_hover_bg: var(--a_color_gray_300);
31
+ --a_menu_panel_main_link_padding_left: 1.5625rem;
32
+ --a_menu_link_color: var(--a_color_gray_900);
33
+ --a_menu_link_hover_color: var(--a_color_gray_900);
34
+ --a_menu_link_hover_bg: var(--a_color_gray_300);
35
+ --a_menu_listitem_padding: .3rem;
36
+ --a_menu_listitem_panel_secondary_padding_x: .6rem;
37
+ --a_menu_listitem_panel_secondary_padding_y: .3rem;
38
+ --a_menu_link_padding_x: .7rem;
39
+ --a_menu_link_padding_y: .5rem;
40
+ --a_menu_link_selected_bg: var(--a_color_gray_200);
41
+ --a_menu_link_selected_color: inherit;
42
+ --a_menu_link_border_color: transparent;
43
+ --a_menu_link_border_radius: .3rem;
44
+ --a_menu_link_focus_size: 0 0 1px 3px;
45
+ --a_menu_icon_color: var(--a_menu_link_color);
46
+ --a_menu_focus_shadow_color: var(--a_color_focus);
47
+ --a_menu_list_header_bg: var(--a_color_gray_200);
48
+ --a_menu_breadcrumb_min_height: 4.0625rem;
49
+ --a_menu_breadcrumb_border_bottom_width: 1px;
50
+ --a_menu_submenu_open_bg: var(--a_color_primary);
51
+ --a_menu_submenu_open_color: var(--a_color_white);
52
+ --a_menu_submenu_border_radius: 1rem;
53
+ --a_menu_submenu_border_width: 2px;
54
+ --a_menu_search_height: 2.375rem;
55
+ --a_menu_search_link_focus_size: inset 0 0 1px 2px;
56
+ --a_menu_close_panel_width: 18.75rem;
57
+ --a_menu_close_panel_max_height: 25rem;
58
+ --a_menu_close_panel_border_radius: .3rem;
59
+ --a_menu_close_panel_box_shadow_color: var(--a_color_gray_600);
60
+ --a_menu_close_panel_box_shadow_size: 0 0 7px 3px;
61
+ --a_menu_close_panel_header_color: var(--a_color_gray_900);
62
+ --a_menu_close_panel_header_border_bottom_color: var(--a_color_gray_600);
63
+ --a_menu_close_panel_header_border_bottom_width: 1px;
64
+ --a_menu_link_line_horizontal_display: none;
65
+
66
+ width: var(--a_menu_width);
67
+ position: absolute;
68
+ top: var(--a_menu_top);
69
+ bottom: 0;
70
+ left: 0;
71
+ display: flex;
72
+ flex-direction: column;
73
+ background-color: var(--a_menu_background);
74
+ margin: 0;
75
+ padding: 0;
76
+ border-right: 1px solid var(--a_menu_border_color);
77
+ z-index: 2;
78
+ box-shadow: var(--a_menu_box_shadow_size) var(--a_menu_box_shadow_color);
79
+ }
80
+ .a_menu.a_menu_inline {
81
+ position: relative;
82
+ inset: auto;
83
+ height: 100%;
84
+ max-width: 100%;
85
+ }
86
+
87
+ .a_menu__page {
88
+ background-color: var(--a_menu_page_bg);
89
+ box-sizing: border-box;
90
+ position: relative;
91
+ z-index: 1;
92
+ }
93
+
94
+ .a_menu__wrapper_open {
95
+ .a_menu__page {
96
+ width: calc(100% - var(--a_menu_width_expanded));
97
+ margin-left: var(--a_menu_width_expanded);
98
+ }
99
+ }
100
+
101
+ .a_menu__wrapper_close {
102
+ .a_menu__page {
103
+ width: calc(100% - var(--a_menu_width_collapsed));
104
+ margin-left: var(--a_menu_width_collapsed);
105
+ }
106
+ }
107
+
108
+ .a_menu__listview {
109
+ list-style: none;
110
+ padding: 0;
111
+ margin: 0;
112
+ }
113
+ .a_menu__listitem {
114
+ display: flex;
115
+ flex-wrap: wrap;
116
+ position: relative;
117
+ padding: var(--a_menu_listitem_padding);
118
+ margin: 0;
119
+ border-color: var(--a_menu_border_color);
120
+ &:not(:last-child):after {
121
+ .a_menu__panel_main & {
122
+ left: var(--a_menu_panel_iconpanel_size);
123
+ }
124
+ content: "";
125
+ border-color: inherit;
126
+ border-bottom-width: 1px;
127
+ border-bottom-style: solid;
128
+ display: var(--a_menu_link_line_horizontal_display);
129
+ position: absolute;
130
+ inset-inline-start: 1.25rem;
131
+ inset-inline-end: 0;
132
+ bottom: -1px;
133
+ }
134
+ }
135
+ .a_menu__list_header {
136
+ padding-left: var(--a_menu_panel_iconpanel_size);
137
+ background-color: var(--a_menu_list_header_bg);
138
+ padding-top: .5rem;
139
+ padding-bottom: .5rem;
140
+ }
141
+ .a_menu__list_header_search {
142
+ padding-left: var(--a_menu_link_padding_x);
143
+ padding-right: var(--a_menu_link_padding_x);
144
+ }
145
+ .a_menu__link {
146
+ flex-grow: 1;
147
+ flex-basis: 10%;
148
+ display: block;
149
+ padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
150
+ cursor: pointer;
151
+ color: var(--a_menu_link_color);
152
+ border: 1px solid var(--a_menu_link_border_color);
153
+ border-radius: var(--a_menu_link_border_radius);
154
+ &,
155
+ &:active,
156
+ &:hover,
157
+ &:link,
158
+ &:visited {
159
+ text-decoration: none;
160
+ color: var(--a_menu_link_color);
161
+ }
162
+ &:focus {
163
+ outline: 0;
164
+ box-shadow: var(--a_menu_link_focus_size) var(--a_menu_focus_shadow_color);
165
+ color: var(--a_menu_link_color);
166
+ }
167
+ &:hover {
168
+ outline: 0;
169
+ color: var(--a_menu_link_hover_color);
170
+ background-color: var(--a_menu_link_hover_bg);
171
+ }
172
+ &.a_menu__link_active {
173
+ --a_menu_icon_color: var(--a_menu_submenu_open_color);
174
+ --a_menu_link_border_color: var(--a_menu_submenu_open_color);
175
+
176
+ background-color: var(--a_menu_submenu_open_bg);
177
+ color: var(--a_menu_submenu_open_color);
178
+ }
179
+
180
+ &.a_menu__link_open {
181
+ --a_menu_icon_color: var(--a_menu_submenu_open_color);
182
+ --a_menu_link_border_color: var(--a_menu_submenu_open_bg);
183
+
184
+ background-color: var(--a_menu_submenu_open_bg);
185
+ color: var(--a_menu_submenu_open_color);
186
+ }
187
+ }
188
+ .a_menu__link_panel_main {
189
+ .a_menu__link__text {
190
+ padding-left: var(--a_menu_panel_main_link_padding_left);
191
+ }
192
+ }
193
+ .a_menu__link_disabled {
194
+ opacity: .8;
195
+ cursor: not-allowed;
196
+ }
197
+ .a_menu__link__text_truncated {
198
+ text-overflow: ellipsis;
199
+ white-space: nowrap;
200
+ overflow: hidden;
201
+ }
202
+ .a_menu__link_selected {
203
+ background-color: var(--a_menu_link_selected_bg);
204
+ color: var(--a_menu_link_selected_color);
205
+ }
206
+ .a_menu__link__icon {
207
+ width: 1.5625rem;
208
+ height: 1.5625rem;
209
+ text-align: center;
210
+ color: var(--a_menu_icon_color);
211
+ }
212
+ .a_menu__link__counter {
213
+ display: block;
214
+ padding-inline-start: .5rem;
215
+ float: right;
216
+ }
217
+ .a_menu__link__counter__icon {
218
+ margin-left: .5rem;
219
+ }
220
+ .a_menu__link_btn {
221
+ display: block;
222
+ position: relative;
223
+ width: auto;
224
+ }
225
+
226
+ .a_menu_clickable {
227
+ cursor: pointer;
228
+ }
229
+
230
+ .a_menu__navbar_top {
231
+ flex-shrink: 0;
232
+ display: flex;
233
+ padding: var(--a_menu_navbar_top_padding);
234
+ height: var(--a_menu_navbar_top_height);
235
+ margin-bottom: var(--a_menu_navbar_top_margin_bottom);
236
+ }
237
+ // search
238
+ .a_menu__panel_search {
239
+ .a_menu__listitem {
240
+ padding: 0;
241
+ }
242
+ }
243
+ .a_menu__navbar_top__search {
244
+ width: 100%;
245
+ .a_input {
246
+ height: var(--a_menu_search_height);
247
+ }
248
+ .a_form_element__parent {
249
+ --a_form_element_label_float_top: 50%;
250
+ }
251
+ }
252
+ .a_menu__navbar_top_sub {
253
+ display: flex;
254
+ align-items: center;
255
+ padding-left: var(--a_menu_width_collapsed);
256
+ height: var(--a_menu_breadcrumb_min_height);
257
+ }
258
+ .a_menu__navbar_top_sub__search {
259
+ padding-top: 0.4rem;
260
+ padding-bottom: 0.4rem;
261
+ margin: 0 var(--a_menu_listitem_padding);
262
+ }
263
+
264
+ .a_menu__btn_toggle {
265
+ --a_menu_btn_toggle_width: 2.625rem;
266
+ --a_menu_btn_toggle_height: 2.375rem;
267
+ --a_menu_btn_toggle_bar_width: 1.125rem;
268
+ --a_menu_btn_toggle_bar_height: 2px;
269
+ --a_menu_btn_toggle_bar_1_top: 0.75rem;
270
+ --a_menu_btn_toggle_bar_2_top: calc(var(--a_menu_btn_toggle_height) / 2 - var(--a_menu_btn_toggle_bar_height) / 2);
271
+ --a_menu_btn_toggle_bar_3_top: 1.5rem;
272
+ --a_menu_btn_toggle_bar_bg: var(--a_btn_color, var(--a_color_white));
273
+
274
+ min-height: var(--a_menu_btn_toggle_height);
275
+ height: var(--a_menu_btn_toggle_height);
276
+ min-width: var(--a_menu_btn_toggle_width);
277
+ width: var(--a_menu_btn_toggle_width);
278
+ position: relative;
279
+ &:active,
280
+ &.active {
281
+ --a_menu_btn_toggle_bar_bg: var(--a_btn_active_color, var(--a_color_white));
282
+ }
283
+ &:hover,
284
+ &:focus {
285
+ --a_menu_btn_toggle_bar_bg: var(--a_btn_hover_color, var(--a_color_white));
286
+ }
287
+ }
288
+ .a_menu__btn_toggle_inside_menu {
289
+ margin-right: 1rem;
290
+ }
291
+ .a_menu__btn_toggle_outside_menu:not(.a_menu__btn_toggle_only_mobile) {
292
+ display: none;
293
+ }
294
+
295
+ .a_menu__btn_toggle__bar {
296
+ display: block;
297
+ background-color: var(--a_menu_btn_toggle_bar_bg);
298
+ width: var(--a_menu_btn_toggle_bar_width);
299
+ height: var(--a_menu_btn_toggle_bar_height);
300
+ border-radius: 0.0625rem;
301
+ position: absolute;
302
+ left: 50%;
303
+ transform: translateX(-50%);
304
+ transition: var(--a_menu_transition);
305
+ &.a_menu__btn_toggle__bar_1 {
306
+ top: var(--a_menu_btn_toggle_bar_1_top);
307
+ }
308
+ &.a_menu__btn_toggle__bar_2 {
309
+ top: var(--a_menu_btn_toggle_bar_2_top);
310
+ }
311
+ &.a_menu__btn_toggle__bar_3 {
312
+ top: var(--a_menu_btn_toggle_bar_3_top);
313
+ }
314
+ }
315
+ .a_menu__btn_toggle_open {
316
+ .a_menu__btn_toggle__bar {
317
+ &.a_menu__btn_toggle__bar_1 {
318
+ top: var(--a_menu_btn_toggle_bar_2_top);
319
+ transform: translateX(-50%) rotate(45deg);
320
+ }
321
+ &.a_menu__btn_toggle__bar_2 {
322
+ opacity: 0;
323
+ }
324
+ &.a_menu__btn_toggle__bar_3 {
325
+ top: var(--a_menu_btn_toggle_bar_2_top);
326
+ transform: translateX(-50%) rotate(-45deg);
327
+ }
328
+ }
329
+ }
330
+
331
+ .a_menu__backdrop {
332
+ z-index: -1;
333
+ }
334
+ // mobile
335
+ .a_mobile {
336
+ .a_menu_close {
337
+ display: none;
338
+ }
339
+ .a_menu__page {
340
+ width: 100%;
341
+ margin-left: 0;
342
+ }
343
+ .a_menu_open {
344
+ max-width: 100vw;
345
+ }
346
+ &.a_menu__wrapper_open {
347
+ overflow: hidden;
348
+ .a_menu__page {
349
+ opacity: .5;
350
+ }
351
+ // .a_menu__backdrop {
352
+ // opacity: .5;
353
+ // z-index: var(--a__backdrop_zindex);
354
+ // }
355
+ }
356
+ .a_menu__btn_toggle_close.a_menu__btn_toggle_outside_menu {
357
+ display: inline-block;
358
+ }
359
+ }
360
+ .a_menu_only_mobile {
361
+ &.a_menu_close {
362
+ display: none;
363
+ }
364
+ &.a_menu_open {
365
+ max-width: 100vw;
366
+ }
367
+ & + .a_menu__page {
368
+ padding-left: 1rem;
369
+ }
370
+ }
371
+
372
+ // panels
373
+ .a_menu__panels {
374
+ position: absolute;
375
+ top: 0;
376
+ left: var(--a_menu_width_collapsed);
377
+ right: 0;
378
+ bottom: 0;
379
+ overflow: hidden;
380
+ display: none;
381
+ }
382
+ .a_menu__panels__main {
383
+ position: relative;
384
+ display: flex;
385
+ flex-direction: column;
386
+ height: calc(100% - var(--a_menu_navbar_top_height) - var(--a_menu_navbar_top_margin_bottom));
387
+ .a_vertical_scroll {
388
+ height: calc(100% - var(--a_menu_breadcrumb_min_height) + 1.25rem);
389
+ margin-top: -1.25rem;
390
+ &:not(.a_vertical_scroll_scrollable) {
391
+ padding-bottom: 0;
392
+ .a_vertical_scroll__btn__wrapper_up {
393
+ border-bottom: 2px solid var(--a_menu_border_color);
394
+ }
395
+ .a_vertical_scroll__btn__wrapper_down {
396
+ display: none;
397
+ }
398
+ }
399
+ .a_menu__panel_main {
400
+ position: relative;
401
+ overflow: visible;
402
+ transform: none;
403
+ }
404
+ }
405
+ }
406
+
407
+ .a_menu__panel {
408
+ position: absolute;
409
+ left: 0;
410
+ right: 0;
411
+ top: 0;
412
+ bottom: 0;
413
+ z-index: 1;
414
+ overflow: hidden;
415
+ overflow-y: auto;
416
+ overscroll-behavior: contain;
417
+ color: var(--a_menu_panel_color);
418
+ background: var(--a_menu_background);
419
+ transform: translate3d(var(--a_menu_panel_child_offset),0,0);
420
+ border-color: var(--a_menu_border_color);
421
+ &:not(.a_menu__panel_main) {
422
+ border-inline-start-width: 1px;
423
+ border-inline-start-style: solid;
424
+ }
425
+ }
426
+ .a_menu__panel_opened {
427
+ z-index: 2;
428
+ transform: translate3d(0,0,0);
429
+ }
430
+ .a_menu__panel_parent {
431
+ overflow-y: hidden;
432
+ transform: unset;
433
+ z-index: 0;
434
+ .a_menu__list_header {
435
+ opacity: 0;
436
+ }
437
+ }
438
+ .a_menu__panels__main {
439
+ & ~ .a_menu__panel {
440
+ inset-inline-start: var(--a_menu_panel_iconpanel_size);
441
+ }
442
+ &.a_menu__panel_parent {
443
+ .a_menu__breadcrumb {
444
+ opacity: 0;
445
+ }
446
+ }
447
+ }
448
+ .a_menu__panel_secondary {
449
+ display: none;
450
+ background-color: var(--a_menu_panel_secondary_bg);
451
+ &.a_menu__panel_opened {
452
+ display: block;
453
+ border-left: var(--a_menu_submenu_border_width) solid var(--a_menu_submenu_open_bg);
454
+ border-top: var(--a_menu_submenu_border_width) solid var(--a_menu_submenu_open_bg);
455
+ border-top-left-radius: var(--a_menu_submenu_border_radius);
456
+ }
457
+ .a_menu__listitem {
458
+ padding: var(--a_menu_listitem_panel_secondary_padding_y) var(--a_menu_listitem_panel_secondary_padding_x);
459
+ }
460
+ }
461
+ .a_menu_sub_open {
462
+ .a_menu__panels {
463
+ display: block;
464
+ }
465
+ }
466
+
467
+ .a_menu_sub_open,
468
+ .a_menu_close {
469
+ .a_menu__navbar_top_sub__text {
470
+ display: none;
471
+ }
472
+ .a_menu__panel_search .a_menu__navbar_top_sub__text {
473
+ display: block;
474
+ }
475
+ }
476
+ .a_menu_open {
477
+ .a_menu__navbar_top_sub__search {
478
+ display: none;
479
+ }
480
+ }
481
+ .a_menu__panel_main {
482
+ position: relative;
483
+ .a_menu__link:hover {
484
+ --a_menu_link_hover_color: var(--a_menu_panel_main_link_hover_color);
485
+ --a_menu_link_hover_bg: var(--a_menu_panel_main_link_hover_bg);
486
+ }
487
+ }
488
+
489
+ // menu closed
490
+ .a_menu_close {
491
+ width: var(--a_menu_width_collapsed);
492
+ .a_menu__navbar_top__search {
493
+ display: none;
494
+ }
495
+ .a_menu__list_header {
496
+ opacity: 0;
497
+ width: var(--a_menu_width_expanded);
498
+ }
499
+ .a_menu__panel_main {
500
+ .a_menu__link__text {
501
+ display: none;
502
+ }
503
+ .a_menu__link__counter {
504
+ display: none;
505
+ }
506
+ }
507
+ .a_menu__listitem:after {
508
+ display: none;
509
+ }
510
+ .a_menu__btn_toggle {
511
+ margin: 0;
512
+ }
513
+ .a_menu__panel {
514
+ overflow: hidden;
515
+ }
516
+ .a_menu__panels {
517
+ position: relative;
518
+ overflow: visible;
519
+ .a_menu__breadcrumb_secondary {
520
+ display: none;
521
+ }
522
+ .a_menu__panel {
523
+ width: var(--a_menu_close_panel_width);
524
+ bottom: auto;
525
+ right: auto;
526
+ left: auto;
527
+ top: auto;
528
+ border: none;
529
+ border-radius: var(--a_menu_close_panel_border_radius);
530
+ // Aloha
531
+ box-shadow: var(--a_menu_close_panel_box_shadow_size) var(--a_color_gray_600);
532
+ max-height: var(--a_menu_close_panel_max_height);
533
+ overflow-y: auto;
534
+ z-index: 2;
535
+ }
536
+ .a_menu__panel_parent {
537
+ display: block;
538
+ overflow-y: hidden;
539
+ }
540
+ }
541
+ .a_menu__link {
542
+ text-overflow: clip;
543
+ }
544
+ .a_menu__navbar_top_sub {
545
+ padding-left: 0;
546
+ align-items: baseline;
547
+ }
548
+ }
549
+ .a_menu__vertical_scroll_hidden .a_scroll_content{
550
+ overflow-y: hidden;
551
+ }
552
+ // breadcrumb
553
+ .a_menu__breadcrumb {
554
+ min-height: var(--a_menu_breadcrumb_min_height);
555
+ display: flex;
556
+ align-items: center;
557
+ position: relative;
558
+ width: 100%;
559
+ }
560
+ .a_menu__breadcrumb_secondary {
561
+ &:after {
562
+ content: "";
563
+ display: block;
564
+ position: absolute;
565
+ height: var(--a_menu_breadcrumb_border_bottom_width);
566
+ width: calc(100% - 2rem);
567
+ background-color: var(--a_menu_submenu_open_bg);
568
+ left: 1rem;
569
+ bottom: 0;
570
+ }
571
+ }
572
+ .a_menu__breadcrumb__ul {
573
+ list-style: none;
574
+ display: block;
575
+ width: 100%;
576
+ margin: 0.5rem;
577
+ padding: 0;
578
+ }
579
+ .a_menu__breadcrumb__ul_truncated {
580
+ white-space: nowrap;
581
+ text-overflow: ellipsis;
582
+ overflow-x: hidden;
583
+ }
584
+ .a_menu__breadcrumb__ul_search {
585
+ display: flex;
586
+ .a_menu__listitem {
587
+ overflow-x: hidden;
588
+ &:after {
589
+ display: none;
590
+ }
591
+ }
592
+ .a_menu__link {
593
+ padding: 0.2rem 0.3rem;
594
+ &:focus,
595
+ &:hover {
596
+ box-shadow: var(--a_menu_search_link_focus_size) var(--a_menu_focus_shadow_color);
597
+ }
598
+ }
599
+ .a_menu__breadcrumbs__item__divider {
600
+ padding: 0.2rem;
601
+ }
602
+ }
603
+ .a_menu__breadcrumbs__item {
604
+ display: inline;
605
+ }
606
+ .a_menu__breadcrumbs__item__divider {
607
+ padding-right: .2rem;
608
+ }
609
+ .a_menu__breadcrumbs__link {
610
+ padding: .2rem;
611
+ font-size: .8rem;
612
+ }
613
+ .a_menu__breadcrumb__ul_truncated__btn {
614
+ margin-right: .2rem;
615
+ }
616
+ .a_menu__breadcrumb__ul_truncated__dropdown {
617
+ padding: .2rem;
618
+ min-width: auto;
619
+ }
620
+
621
+ .a_menu__panel_header {
622
+ color: var(--a_menu_close_panel_header_color);
623
+ border-bottom: var(--a_menu_close_panel_header_border_bottom_width) solid var(--a_menu_close_panel_header_border_bottom_color);
624
+ padding: var(--a_menu_listitem_panel_secondary_padding_y) var(--a_menu_listitem_panel_secondary_padding_x);
625
+ }
626
+ .a_menu__panel_header__text {
627
+ display: inline-block;
628
+ padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
629
+ }
630
+ .a_menu__backdrop {
631
+ opacity: 0.5;
632
+ z-index: 1;
633
+ left: var(--a_menu_width_expanded);
634
+ }