fluent-svelte-extra 1.8.8 → 1.9.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.
|
@@ -42,6 +42,8 @@ export let inputLabelElement = null;
|
|
|
42
42
|
export let subMenuAnchorElement = null;
|
|
43
43
|
/** Obtains a bound DOM reference to the inner submenumenu element, which is present if the item is cascading and the submenu is visible. */
|
|
44
44
|
export let subMenuElement = null;
|
|
45
|
+
export let cascadingDelay = 500;
|
|
46
|
+
export let cascadingAcrylic = true;
|
|
45
47
|
const forwardEvents = createEventForwarder(get_current_component());
|
|
46
48
|
const dispatch = createEventDispatcher();
|
|
47
49
|
const closeFlyout = getContext("closeFlyout");
|
|
@@ -80,7 +82,7 @@ function handleMouseEnter() {
|
|
|
80
82
|
setTimeout(() => {
|
|
81
83
|
if (subMenuQueue.open)
|
|
82
84
|
open = true;
|
|
83
|
-
},
|
|
85
|
+
}, cascadingDelay);
|
|
84
86
|
}
|
|
85
87
|
function handleMouseLeave(e) {
|
|
86
88
|
subMenuQueue.close = true;
|
|
@@ -88,7 +90,7 @@ function handleMouseLeave(e) {
|
|
|
88
90
|
setTimeout(() => {
|
|
89
91
|
if (subMenuQueue.close)
|
|
90
92
|
open = false;
|
|
91
|
-
},
|
|
93
|
+
}, cascadingDelay);
|
|
92
94
|
}
|
|
93
95
|
</script>
|
|
94
96
|
|
|
@@ -152,7 +154,11 @@ function handleMouseLeave(e) {
|
|
|
152
154
|
style:transform={cascadingDirection == "left" ? "translateX(-100%)" : undefined}
|
|
153
155
|
class="menu-flyout-submenu-anchor"
|
|
154
156
|
>
|
|
155
|
-
<MenuFlyoutSurface
|
|
157
|
+
<MenuFlyoutSurface
|
|
158
|
+
bind:element={subMenuElement}
|
|
159
|
+
bind:this={menu}
|
|
160
|
+
acrylic={cascadingAcrylic}
|
|
161
|
+
>
|
|
156
162
|
<slot name="flyout" />
|
|
157
163
|
</MenuFlyoutSurface>
|
|
158
164
|
</div>
|
|
@@ -29,14 +29,51 @@
|
|
|
29
29
|
max-block-size: 100vh;
|
|
30
30
|
margin: 0;
|
|
31
31
|
padding: 0;
|
|
32
|
-
padding-block: 2px;
|
|
33
32
|
box-sizing: border-box;
|
|
34
33
|
color: var(--text-primary);
|
|
35
34
|
border-radius: var(--overlay-corner-radius);
|
|
36
|
-
border: 1px solid var(--surface-stroke-flyout);
|
|
37
|
-
background-color: var(--solid-background-quarternary);
|
|
38
35
|
background-clip: padding-box;
|
|
39
36
|
&-surface-container {
|
|
40
37
|
overflow: hidden;
|
|
41
38
|
}
|
|
39
|
+
&-background {
|
|
40
|
+
z-index: -1;
|
|
41
|
+
border-radius: var(--overlay-corner-radius);
|
|
42
|
+
border: 1px solid var(--surface-stroke-flyout);
|
|
43
|
+
background-clip: padding-box;
|
|
44
|
+
height: 100%;
|
|
45
|
+
width: 100%;
|
|
46
|
+
position: absolute;
|
|
47
|
+
background-color: var(--solid-background-quarternary);
|
|
48
|
+
}
|
|
49
|
+
.acrylic &-background {
|
|
50
|
+
background-color: unset !important;
|
|
51
|
+
background-blend-mode: luminosity;
|
|
52
|
+
background: linear-gradient(0deg, rgb(44, 44, 44, 15%), rgb(44, 44, 44, 15%)),
|
|
53
|
+
rgba(44, 44, 44, 80%);
|
|
54
|
+
}
|
|
55
|
+
&-items {
|
|
56
|
+
z-index: 1;
|
|
57
|
+
padding: 1px;
|
|
58
|
+
padding-block: 2px;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.acrylic::before {
|
|
63
|
+
content: "";
|
|
64
|
+
border-radius: var(--fds-overlay-corner-radius);
|
|
65
|
+
position: absolute;
|
|
66
|
+
width: 100%;
|
|
67
|
+
height: 100%;
|
|
68
|
+
backdrop-filter: blur(64px);
|
|
69
|
+
-webkit-backdrop-filter: blur(64px);
|
|
70
|
+
}
|
|
71
|
+
.acrylic::after {
|
|
72
|
+
border-radius: var(--fds-overlay-corner-radius);
|
|
73
|
+
content: "";
|
|
74
|
+
position: absolute;
|
|
75
|
+
|
|
76
|
+
inset: 0;
|
|
77
|
+
background-image: url(data:image/png;base64,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);
|
|
78
|
+
opacity: 0.4;
|
|
42
79
|
}
|
|
@@ -3,6 +3,7 @@ let className = "";
|
|
|
3
3
|
export { className as class };
|
|
4
4
|
/** Obtains a bound DOM reference to the surface element. */
|
|
5
5
|
export let element = null;
|
|
6
|
+
export let acrylic = true;
|
|
6
7
|
let animationComplete = false;
|
|
7
8
|
</script>
|
|
8
9
|
|
|
@@ -13,11 +14,16 @@ let animationComplete = false;
|
|
|
13
14
|
<ul
|
|
14
15
|
on:animationend|once={() => (animationComplete = true)}
|
|
15
16
|
class="menu-flyout {className}"
|
|
17
|
+
class:acrylic
|
|
16
18
|
bind:this={element}
|
|
17
19
|
{...$$restProps}
|
|
18
20
|
>
|
|
19
|
-
<
|
|
21
|
+
<div class="menu-flyout-background"></div>
|
|
22
|
+
|
|
23
|
+
<div class="menu-flyout-items">
|
|
24
|
+
<slot />
|
|
25
|
+
</div>
|
|
20
26
|
</ul>
|
|
21
27
|
</div>
|
|
22
28
|
|
|
23
|
-
<style >@-webkit-keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@-webkit-keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}@keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}.menu-flyout{-webkit-animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;background-clip:padding-box;
|
|
29
|
+
<style >@-webkit-keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@-webkit-keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}@keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}.menu-flyout{-webkit-animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;background-clip:padding-box;border-radius:var(--fds-overlay-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:flex;flex-direction:column;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;margin:0;max-block-size:100vh;max-inline-size:100%;min-inline-size:120px;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-flyout-surface-container{overflow:hidden}.menu-flyout-background{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-overlay-corner-radius);height:100%;position:absolute;width:100%;z-index:-1}.acrylic .menu-flyout-background{background:linear-gradient(0deg,rgba(44,44,44,.15),rgba(44,44,44,.15)),rgba(44,44,44,.8);background-blend-mode:luminosity;background-color:unset!important}.menu-flyout-items{padding:1px;padding-block:2px;z-index:1}.acrylic:before{backdrop-filter:blur(64px);-webkit-backdrop-filter:blur(64px);height:100%;width:100%}.acrylic:after,.acrylic:before{border-radius:var(--fds-overlay-corner-radius);content:"";position:absolute}.acrylic:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);inset:0;opacity:.4}</style>
|
package/package.json
CHANGED