noph-ui 0.24.17 → 0.24.19
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/dist/menu/Menu.svelte +20 -26
- package/dist/menu/types.d.ts +0 -1
- package/package.json +1 -1
package/dist/menu/Menu.svelte
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
showPopover = $bindable(),
|
|
9
9
|
hidePopover = $bindable(),
|
|
10
10
|
open = $bindable(),
|
|
11
|
-
quick = false,
|
|
12
11
|
style,
|
|
13
12
|
popover = 'auto',
|
|
14
13
|
anchor,
|
|
@@ -112,7 +111,7 @@
|
|
|
112
111
|
attributes.ontoggle?.(event)
|
|
113
112
|
}}
|
|
114
113
|
{popover}
|
|
115
|
-
class={['np-menu-container',
|
|
114
|
+
class={['np-menu-container', attributes.class]}
|
|
116
115
|
{style}
|
|
117
116
|
>
|
|
118
117
|
<div class="np-menu">
|
|
@@ -121,7 +120,18 @@
|
|
|
121
120
|
</div>
|
|
122
121
|
|
|
123
122
|
<style>
|
|
124
|
-
.np-menu
|
|
123
|
+
.np-menu {
|
|
124
|
+
overflow-y: auto;
|
|
125
|
+
overflow-x: hidden;
|
|
126
|
+
flex: 1;
|
|
127
|
+
padding: 0.5rem 0;
|
|
128
|
+
scrollbar-color: var(--np-color-on-surface-variant) transparent;
|
|
129
|
+
scrollbar-width: thin;
|
|
130
|
+
}
|
|
131
|
+
:global(.np-menu .np-divider) {
|
|
132
|
+
margin-block: 0.5rem;
|
|
133
|
+
}
|
|
134
|
+
.np-menu-container[popover] {
|
|
125
135
|
color: var(--np-menu-text-color, var(--np-color-on-surface));
|
|
126
136
|
background-color: var(--np-menu-container-color, var(--np-color-surface-container));
|
|
127
137
|
border: none;
|
|
@@ -130,37 +140,21 @@
|
|
|
130
140
|
box-shadow: var(--np-elevation-2);
|
|
131
141
|
margin: var(--np-menu-margin, 2px);
|
|
132
142
|
inset: auto;
|
|
133
|
-
|
|
134
|
-
|
|
143
|
+
transition:
|
|
144
|
+
display 0.2s allow-discrete,
|
|
145
|
+
opacity 0.2s linear;
|
|
146
|
+
opacity: 0;
|
|
135
147
|
justify-self: var(--np-menu-justify-self, anchor-center);
|
|
136
148
|
position-area: var(--np-menu-position-area, bottom center);
|
|
137
149
|
position-try: normal flip-block;
|
|
138
150
|
z-index: 1000;
|
|
139
151
|
}
|
|
140
152
|
|
|
141
|
-
.np-
|
|
153
|
+
.np-menu-container:popover-open {
|
|
142
154
|
opacity: 1;
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
@keyframes fadeIn {
|
|
147
|
-
from {
|
|
155
|
+
display: flex;
|
|
156
|
+
@starting-style {
|
|
148
157
|
opacity: 0;
|
|
149
158
|
}
|
|
150
|
-
to {
|
|
151
|
-
opacity: 1;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.np-menu {
|
|
156
|
-
overflow-y: auto;
|
|
157
|
-
overflow-x: hidden;
|
|
158
|
-
flex: 1;
|
|
159
|
-
padding: 0.5rem 0;
|
|
160
|
-
scrollbar-color: var(--np-color-on-surface-variant) transparent;
|
|
161
|
-
scrollbar-width: thin;
|
|
162
|
-
}
|
|
163
|
-
:global(.np-menu .np-divider) {
|
|
164
|
-
margin-block: 0.5rem;
|
|
165
159
|
}
|
|
166
160
|
</style>
|
package/dist/menu/types.d.ts
CHANGED