fluent-svelte-extra 2.1.1 → 2.1.2
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.
|
@@ -11,22 +11,71 @@
|
|
|
11
11
|
color: var(--text-primary);
|
|
12
12
|
border-radius: var(--control-corner-radius);
|
|
13
13
|
background-color: var(--subtle-fill-transparent);
|
|
14
|
+
|
|
14
15
|
&:focus-visible {
|
|
15
16
|
box-shadow: var(--focus-stroke);
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
+
|
|
19
|
+
&:not(.animated):not(:disabled):not(.disabled):hover {
|
|
18
20
|
background-color: var(--subtle-fill-secondary);
|
|
19
21
|
}
|
|
22
|
+
|
|
20
23
|
&:active {
|
|
21
24
|
color: var(--text-secondary);
|
|
22
25
|
background-color: var(--subtle-fill-tertiary);
|
|
23
26
|
}
|
|
27
|
+
|
|
24
28
|
&:disabled,
|
|
25
29
|
&.disabled {
|
|
26
30
|
background-color: var(--subtle-fill-disabled);
|
|
27
31
|
color: var(--text-disabled);
|
|
32
|
+
|
|
33
|
+
&::before {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
28
36
|
}
|
|
37
|
+
|
|
29
38
|
:global(svg) {
|
|
30
39
|
@include icon($size: 16px);
|
|
31
40
|
}
|
|
41
|
+
|
|
42
|
+
&.animated {
|
|
43
|
+
position: relative;
|
|
44
|
+
background-color: transparent;
|
|
45
|
+
isolation: isolate;
|
|
46
|
+
|
|
47
|
+
&:active {
|
|
48
|
+
background-color: transparent;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&::before {
|
|
52
|
+
position: absolute;
|
|
53
|
+
content: "";
|
|
54
|
+
inset: 0;
|
|
55
|
+
z-index: -1;
|
|
56
|
+
border-radius: var(--control-corner-radius);
|
|
57
|
+
border: 1px solid transparent;
|
|
58
|
+
transform: scale(0.99);
|
|
59
|
+
background-clip: padding-box;
|
|
60
|
+
transition: transform var(--control-fast-duration),
|
|
61
|
+
background-color var(--control-fast-duration), border-color 0ms;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&:hover {
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
|
|
67
|
+
&::before {
|
|
68
|
+
background-color: var(--control-fill-default);
|
|
69
|
+
border-color: var(--control-border-default);
|
|
70
|
+
transform: scale(1);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&:active::before {
|
|
75
|
+
background-color: var(--subtle-fill-tertiary);
|
|
76
|
+
border-color: transparent;
|
|
77
|
+
transform: scale(1);
|
|
78
|
+
background-clip: border-box;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
32
81
|
}
|
|
@@ -5,6 +5,7 @@ import { createEventForwarder } from "../internal";
|
|
|
5
5
|
export let href = "";
|
|
6
6
|
/** Controls whether the button is intended for user interaction, and styles it accordingly. */
|
|
7
7
|
export let disabled = false;
|
|
8
|
+
export let animated = false;
|
|
8
9
|
/** Specifies a custom class name for the button. */
|
|
9
10
|
let className = "";
|
|
10
11
|
export { className as class };
|
|
@@ -32,10 +33,11 @@ An Icon Button is a clickable control that triggers an immediate action. Unlike
|
|
|
32
33
|
role={href && !disabled ? "button" : undefined}
|
|
33
34
|
href={href && !disabled ? href : undefined}
|
|
34
35
|
class="icon-button {className}"
|
|
36
|
+
class:animated
|
|
35
37
|
class:disabled
|
|
36
38
|
{...$$restProps}
|
|
37
39
|
>
|
|
38
40
|
<slot />
|
|
39
41
|
</svelte:element>
|
|
40
42
|
|
|
41
|
-
<style >.icon-button{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:inline-flex;justify-content:center;min-block-size:30px;min-inline-size:30px;outline:none;padding:8px}.icon-button:focus-visible{box-shadow:var(--fds-focus-stroke)}.icon-button:hover{background-color:var(--fds-subtle-fill-secondary)}.icon-button:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.icon-button.disabled,.icon-button:disabled{background-color:var(--fds-subtle-fill-disabled);color:var(--fds-text-disabled)}.icon-button :global(svg){fill:currentColor;block-size:auto;inline-size:16px}</style>
|
|
43
|
+
<style >.icon-button{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:inline-flex;justify-content:center;min-block-size:30px;min-inline-size:30px;outline:none;padding:8px}.icon-button:focus-visible{box-shadow:var(--fds-focus-stroke)}.icon-button:not(.animated):not(:disabled):not(.disabled):hover{background-color:var(--fds-subtle-fill-secondary)}.icon-button:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.icon-button.disabled,.icon-button:disabled{background-color:var(--fds-subtle-fill-disabled);color:var(--fds-text-disabled)}.icon-button.disabled:before,.icon-button:disabled:before{display:none}.icon-button :global(svg){fill:currentColor;block-size:auto;inline-size:16px}.icon-button.animated{isolation:isolate;position:relative}.icon-button.animated,.icon-button.animated:active{background-color:transparent}.icon-button.animated:before{background-clip:padding-box;border:1px solid transparent;border-radius:var(--fds-control-corner-radius);content:"";inset:0;position:absolute;transform:scale(.99);transition:transform var(--fds-control-fast-duration),background-color var(--fds-control-fast-duration),border-color 0ms;z-index:-1}.icon-button.animated:hover{background-color:transparent}.icon-button.animated:hover:before{background-color:var(--fds-control-fill-default);border-color:var(--fds-control-border-default);transform:scale(1)}.icon-button.animated:active:before{background-clip:border-box;background-color:var(--fds-subtle-fill-tertiary);border-color:transparent;transform:scale(1)}</style>
|
package/package.json
CHANGED