fluent-svelte-extra 1.8.0 → 1.8.1
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.
|
@@ -21,26 +21,35 @@
|
|
|
21
21
|
inline-size: 540px;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
-
|
|
24
|
+
|
|
25
25
|
&-container {
|
|
26
26
|
@include flex($direction: row, $align: start);
|
|
27
27
|
#close-button {
|
|
28
28
|
@include flex($direction: column, $align: center, $justify: center);
|
|
29
|
+
color: var(--text-primary);
|
|
29
30
|
top: 0;
|
|
30
31
|
margin-inline-start: 8px;
|
|
31
|
-
block-size:
|
|
32
|
-
inline-size:
|
|
32
|
+
block-size: 48px;
|
|
33
|
+
inline-size: 48px;
|
|
34
|
+
padding: 0;
|
|
33
35
|
border-radius: var(--overlay-corner-radius);
|
|
34
|
-
outline: none;
|
|
35
36
|
border: 1px solid var(--surface-stroke-default);
|
|
36
37
|
background-clip: padding-box;
|
|
37
38
|
background-color: var(--control-on-image-fill-default);
|
|
38
|
-
transition: background-color var(--control-fast-duration)
|
|
39
|
+
transition: background-color var(--control-fast-duration)
|
|
40
|
+
var(--control-fast-out-slow-in-easing),
|
|
41
|
+
color var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
|
|
39
42
|
&:hover {
|
|
40
43
|
background-color: var(--control-on-image-fill-secondary);
|
|
41
|
-
}
|
|
44
|
+
}
|
|
45
|
+
&:active {
|
|
42
46
|
background-color: var(--control-on-image-fill-tertiary);
|
|
43
47
|
}
|
|
48
|
+
&.disabled {
|
|
49
|
+
pointer-events: none;
|
|
50
|
+
color: var(--text-disabled);
|
|
51
|
+
background-color: var(--control-on-image-fill-default) !important;
|
|
52
|
+
}
|
|
44
53
|
}
|
|
45
54
|
}
|
|
46
55
|
|
|
@@ -34,6 +34,7 @@ export let footerElement = null;
|
|
|
34
34
|
const forwardEvents = createEventForwarder(get_current_component(), [
|
|
35
35
|
"open",
|
|
36
36
|
"close",
|
|
37
|
+
"closeByButton",
|
|
37
38
|
"backdropclick",
|
|
38
39
|
"backdropmousedown"
|
|
39
40
|
]);
|
|
@@ -52,6 +53,12 @@ function mountDialog(node) {
|
|
|
52
53
|
function close() {
|
|
53
54
|
open = false;
|
|
54
55
|
}
|
|
56
|
+
function closeByButton() {
|
|
57
|
+
if (closable) {
|
|
58
|
+
close();
|
|
59
|
+
dispatch("closeByButton");
|
|
60
|
+
}
|
|
61
|
+
}
|
|
55
62
|
function handleEscapeKey({ key }) {
|
|
56
63
|
if (key === "Escape" && open && closable)
|
|
57
64
|
close();
|
|
@@ -104,7 +111,13 @@ function handleEscapeKey({ key }) {
|
|
|
104
111
|
{/if}
|
|
105
112
|
</div>
|
|
106
113
|
{#if closeButton}
|
|
107
|
-
<button
|
|
114
|
+
<button
|
|
115
|
+
id="close-button"
|
|
116
|
+
aria-label="Close dialog"
|
|
117
|
+
tabindex="0"
|
|
118
|
+
class:disabled={!closable}
|
|
119
|
+
on:click={closeByButton}
|
|
120
|
+
>
|
|
108
121
|
<svg
|
|
109
122
|
aria-hidden="true"
|
|
110
123
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -124,4 +137,4 @@ function handleEscapeKey({ key }) {
|
|
|
124
137
|
</div>
|
|
125
138
|
{/if}
|
|
126
139
|
|
|
127
|
-
<style >.content-dialog{-webkit-animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);background-clip:padding-box;background-color:var(--fds-solid-background-base);border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-dialog-shadow);box-sizing:border-box;max-inline-size:calc(100% - 24px);overflow:hidden}.content-dialog.size-min{inline-size:320px}.content-dialog.size-standard{inline-size:448px}.content-dialog.size-max{inline-size:540px}.content-dialog-container{align-items:flex-start;display:flex;flex-direction:row}.content-dialog-container #close-button{-webkit-margin-start:8px;align-items:center;background-clip:padding-box;background-color:var(--fds-control-on-image-fill-default);block-size:
|
|
140
|
+
<style >.content-dialog{-webkit-animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);animation:dialog-inner var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing);background-clip:padding-box;background-color:var(--fds-solid-background-base);border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-dialog-shadow);box-sizing:border-box;max-inline-size:calc(100% - 24px);overflow:hidden}.content-dialog.size-min{inline-size:320px}.content-dialog.size-standard{inline-size:448px}.content-dialog.size-max{inline-size:540px}.content-dialog-container{align-items:flex-start;display:flex;flex-direction:row}.content-dialog-container #close-button{-webkit-margin-start:8px;align-items:center;background-clip:padding-box;background-color:var(--fds-control-on-image-fill-default);block-size:48px;border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:48px;justify-content:center;margin-inline-start:8px;padding:0;top:0;transition:background-color var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing),color var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing)}.content-dialog-container #close-button:hover{background-color:var(--fds-control-on-image-fill-secondary)}.content-dialog-container #close-button:active{background-color:var(--fds-control-on-image-fill-tertiary)}.content-dialog-container #close-button.disabled{background-color:var(--fds-control-on-image-fill-default)!important;color:var(--fds-text-disabled);pointer-events:none}.content-dialog-smoke{align-items:center;block-size:100%;display:flex;flex-direction:column;inline-size:100%;inset-block-start:0;inset-inline-start:0;justify-content:center;position:fixed;z-index:101}.content-dialog-smoke.darken{background-color:var(--fds-smoke-background-default)}.content-dialog :global(.content-dialog-title){color:var(--fds-text-primary);display:block;margin-bottom:12px}.content-dialog-body,.content-dialog-footer{padding:24px}.content-dialog-body{background-color:var(--fds-layer-background-default);color:var(--fds-text-primary);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.content-dialog-footer{grid-gap:8px;-webkit-border-before:1px solid var(--fds-card-stroke-default);border-block-start:1px solid var(--fds-card-stroke-default);display:grid;grid-auto-flow:column;grid-auto-rows:1fr;white-space:nowrap}.content-dialog-footer>:global(.button:only-child){inline-size:50%;justify-self:end}</style>
|
package/TextArea/TextArea.svelte
CHANGED
package/package.json
CHANGED