blob: 8e211a5a54f63aee68d660d8be523d27b74a5754 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
@use '../base' as *;
/* --------------------------------
File#: _1_menu
Title: Menu
Descr: Application menu that provides access to a set of functionalities
Usage: codyhouse.co/license
-------------------------------- */
.menu {
--menu-vertical-gap: 5px; // vertical gap between the Menu element and its control
--menu-item-padding: var(--space-xxxs) var(--space-xs);
list-style: none;
position: fixed; // top/left position set in JS
background-color: var(--color-bg-light);
//padding: var(--space-xxs) 0;
border-radius: var(--radius-md);
z-index: var(--z-index-popover, 5);
user-select: none;
margin-top: var(--menu-vertical-gap);
margin-bottom: var(--menu-vertical-gap);
overflow: auto;
// use rem units
@include spaceUnit(1rem);
@include textUnit(1rem);
visibility: hidden;
opacity: 0;
}
.menu--is-visible {
visibility: visible;
opacity: 1;
}
.menu--overlay {
z-index: var(--z-index-overlay, 15);
}
.menu__content {
display: block; // fallback
display: flex;
align-items: center;
text-decoration: none; // reset link style
padding: var(--menu-item-padding);
color: var(--color-contrast-high);
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: alpha(var(--color-contrast-higher), 0.075);
}
&:focus {
outline: none;
background-color: alpha(var(--color-primary), 0.15);
}
}
.menu__label {
padding: var(--menu-item-padding);
font-size: var(--text-sm);
color: var(--color-contrast-medium);
}
.menu__separator {
height: 1px;
background-color: var(--color-contrast-lower);
margin: var(--menu-item-padding);
}
.menu__icon {
color: alpha(var(--color-contrast-higher), 0.5);
margin-right: var(--space-xxs);
}
|
