fluent-svelte-extra 1.6.2 → 1.6.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/Expander/Expander.scss
CHANGED
|
@@ -8,6 +8,9 @@
|
|
|
8
8
|
user-select: none;
|
|
9
9
|
.expander-header {
|
|
10
10
|
transition: var(--fds-control-faster-duration) ease background;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&.expandable .expander-header {
|
|
11
14
|
&:hover {
|
|
12
15
|
background-color: var(--control-fill-secondary);
|
|
13
16
|
border: 1px solid var(--fds-control-stroke-default);
|
|
@@ -17,6 +20,7 @@
|
|
|
17
20
|
border: 1px solid var(--fds-control-stroke-default);
|
|
18
21
|
}
|
|
19
22
|
}
|
|
23
|
+
|
|
20
24
|
&.direction- {
|
|
21
25
|
&down {
|
|
22
26
|
.expander-content {
|
|
@@ -83,7 +87,7 @@
|
|
|
83
87
|
padding-inline-start: 16px;
|
|
84
88
|
padding: 8px;
|
|
85
89
|
background-clip: padding-box;
|
|
86
|
-
background-color: var(--
|
|
90
|
+
background-color: var(--card-background-default);
|
|
87
91
|
border: 1px solid var(--card-stroke-default);
|
|
88
92
|
border-radius: var(--control-corner-radius);
|
|
89
93
|
&-title {
|
package/Expander/Expander.svelte
CHANGED
|
@@ -70,6 +70,7 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
70
70
|
role="region"
|
|
71
71
|
bind:this={containerElement}
|
|
72
72
|
class:expanded
|
|
73
|
+
class:expandable
|
|
73
74
|
{...$$restProps}
|
|
74
75
|
>
|
|
75
76
|
<svelte:element this="h">
|
|
@@ -128,7 +129,10 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
128
129
|
</div>
|
|
129
130
|
</svelte:element>
|
|
130
131
|
{#if expanded}
|
|
131
|
-
<div
|
|
132
|
+
<div
|
|
133
|
+
class="expander-content-anchor"
|
|
134
|
+
transition:fadeSlide={{ duration: 500, easing: expoOut }}
|
|
135
|
+
>
|
|
132
136
|
<div class="expander-content" bind:this={contentElement}>
|
|
133
137
|
<slot name="content" />
|
|
134
138
|
</div>
|
|
@@ -136,4 +140,4 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
136
140
|
{/if}
|
|
137
141
|
</div>
|
|
138
142
|
|
|
139
|
-
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none;transition:var(--fds-control-slow-duration) var(--fds-control-fast-out-slow-in-easing) transform}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-
|
|
143
|
+
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none;transition:var(--fds-control-slow-duration) var(--fds-control-fast-out-slow-in-easing) transform}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-faster-duration)*1.2) linear transform var(--fds-control-faster-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>
|
package/package.json
CHANGED