@enso-ui/menus 5.2.2 → 5.2.4
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.
package/package.json
CHANGED
|
@@ -20,8 +20,10 @@
|
|
|
20
20
|
v-else/>
|
|
21
21
|
</span>
|
|
22
22
|
<span class="menu-item-label"
|
|
23
|
-
:class="{
|
|
24
|
-
|
|
23
|
+
:class="{
|
|
24
|
+
'is-collapsed': !expandedSidebar,
|
|
25
|
+
'is-opaque': !menu.active && !hasActiveChild
|
|
26
|
+
}">
|
|
25
27
|
{{ i18n(menu.name) }}
|
|
26
28
|
</span>
|
|
27
29
|
<span class="menu-arrow"
|
|
@@ -82,14 +84,6 @@ export default {
|
|
|
82
84
|
position: relative;
|
|
83
85
|
min-width: 0;
|
|
84
86
|
|
|
85
|
-
.is-opaque {
|
|
86
|
-
opacity: 0.7;
|
|
87
|
-
|
|
88
|
-
&:hover {
|
|
89
|
-
font-weight: inherit;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
87
|
.menu-item-link {
|
|
94
88
|
display: flex;
|
|
95
89
|
align-items: center;
|
|
@@ -98,11 +92,16 @@ export default {
|
|
|
98
92
|
line-height: 1.3;
|
|
99
93
|
width: 100%;
|
|
100
94
|
min-width: 0;
|
|
101
|
-
padding-block: 0.
|
|
95
|
+
padding-block: 0.3rem;
|
|
102
96
|
padding-inline-start: 0.25rem;
|
|
103
|
-
padding-inline-end: 0.
|
|
97
|
+
padding-inline-end: 0.4rem;
|
|
104
98
|
color: var(--bulma-text);
|
|
105
|
-
transition:
|
|
99
|
+
transition:
|
|
100
|
+
background-color .2s ease,
|
|
101
|
+
color .2s ease,
|
|
102
|
+
gap 0s linear,
|
|
103
|
+
padding-inline-start 0s linear,
|
|
104
|
+
padding-inline-end 0s linear;
|
|
106
105
|
text-decoration: none;
|
|
107
106
|
|
|
108
107
|
&:hover {
|
|
@@ -141,34 +140,47 @@ export default {
|
|
|
141
140
|
&.is-collapsed {
|
|
142
141
|
justify-content: flex-start;
|
|
143
142
|
gap: 0;
|
|
144
|
-
|
|
145
|
-
padding-inline-start: 0.45rem;
|
|
143
|
+
transition-delay: 0s, 0s, .5s, .5s, .5s;
|
|
146
144
|
}
|
|
147
145
|
}
|
|
148
146
|
|
|
149
147
|
.menu-item-label {
|
|
150
148
|
flex: 1 1 auto;
|
|
151
149
|
min-width: 0;
|
|
150
|
+
max-width: 100%;
|
|
152
151
|
overflow: hidden;
|
|
153
152
|
text-overflow: ellipsis;
|
|
154
153
|
white-space: nowrap;
|
|
155
154
|
font-weight: 500;
|
|
155
|
+
opacity: 1;
|
|
156
|
+
transition: opacity .16s ease, max-width 0s linear, flex-basis 0s linear;
|
|
157
|
+
|
|
158
|
+
&.is-opaque {
|
|
159
|
+
opacity: 0.7;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&.is-collapsed {
|
|
163
|
+
opacity: 0;
|
|
164
|
+
max-width: 0;
|
|
165
|
+
flex-basis: 0;
|
|
166
|
+
transition-delay: .5s, .5s, .5s;
|
|
167
|
+
}
|
|
156
168
|
}
|
|
157
169
|
|
|
158
170
|
.menu-item-icon {
|
|
159
171
|
flex: 0 0 auto;
|
|
172
|
+
|
|
173
|
+
&.is-opaque {
|
|
174
|
+
opacity: 0.7;
|
|
175
|
+
}
|
|
160
176
|
}
|
|
161
177
|
|
|
162
178
|
.menu-arrow {
|
|
163
179
|
display: inline-flex;
|
|
164
180
|
align-items: center;
|
|
165
181
|
justify-content: center;
|
|
166
|
-
margin-inline-start: auto;
|
|
167
182
|
min-width: 0.5rem;
|
|
168
|
-
|
|
169
|
-
&.is-collapsed {
|
|
170
|
-
margin-inline-start: 0.25rem;
|
|
171
|
-
}
|
|
183
|
+
margin-inline-start: auto;
|
|
172
184
|
}
|
|
173
185
|
}
|
|
174
186
|
}
|
|
@@ -39,17 +39,5 @@ export default {
|
|
|
39
39
|
display: block;
|
|
40
40
|
overflow-y: hidden;
|
|
41
41
|
overflow-x: visible;
|
|
42
|
-
margin: 0;
|
|
43
|
-
|
|
44
|
-
li > ul {
|
|
45
|
-
[dir='ltr'] & {
|
|
46
|
-
margin: 0 0 0 .75rem;
|
|
47
|
-
padding-left: 0;
|
|
48
|
-
}
|
|
49
|
-
[dir='rtl'] & {
|
|
50
|
-
margin: 0 .75rem 0 0;
|
|
51
|
-
padding-right: 0;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
42
|
}
|
|
55
43
|
</style>
|