fluent-svelte-extra 1.9.7 → 1.9.8
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.
|
@@ -1,181 +1,181 @@
|
|
|
1
|
-
@use "../mixins" as *;
|
|
2
|
-
|
|
3
|
-
.teaching-tip- {
|
|
4
|
-
&wrapper {
|
|
5
|
-
display: inline-block;
|
|
6
|
-
inline-size: fit-content;
|
|
7
|
-
block-size: fit-content;
|
|
8
|
-
position: relative;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&backdrop {
|
|
12
|
-
position: fixed;
|
|
13
|
-
top: 0;
|
|
14
|
-
left: 0;
|
|
15
|
-
inline-size: 100%;
|
|
16
|
-
block-size: 100%;
|
|
17
|
-
z-index: 9999;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&content {
|
|
21
|
-
position: relative;
|
|
22
|
-
@include flex($direction: column, $justify:
|
|
23
|
-
padding: 9px 12px 11px 12px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&footer {
|
|
27
|
-
margin-block-start: 8px;
|
|
28
|
-
display: grid;
|
|
29
|
-
grid-auto-rows: 1fr;
|
|
30
|
-
grid-auto-flow: column;
|
|
31
|
-
grid-gap: 8px;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
> :global(.button:only-child) {
|
|
36
|
-
inline-size: 50%;
|
|
37
|
-
justify-self: end;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&image {
|
|
42
|
-
display: block;
|
|
43
|
-
max-inline-size: 100%;
|
|
44
|
-
max-block-size: 100%;
|
|
45
|
-
position: relative;
|
|
46
|
-
z-index: 10;
|
|
47
|
-
|
|
48
|
-
&.placement- {
|
|
49
|
-
&top {
|
|
50
|
-
margin-block-end: 4px;
|
|
51
|
-
border-radius: var(--overlay-corner-radius) var(--overlay-corner-radius) 0 0;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&bottom {
|
|
55
|
-
margin-block-start: 4px;
|
|
56
|
-
border-radius: 0 0 var(--overlay-corner-radius) var(--overlay-corner-radius);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&caret {
|
|
62
|
-
position: absolute;
|
|
63
|
-
z-index: 10000;
|
|
64
|
-
color: var(--solid-background-quarternary);
|
|
65
|
-
|
|
66
|
-
& .stroke {
|
|
67
|
-
color: var(--surface-stroke-default);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&anchor {
|
|
72
|
-
:global(.teaching-tip-close-button) {
|
|
73
|
-
position: absolute;
|
|
74
|
-
inset-block-start: 6px;
|
|
75
|
-
inset-inline-end: 6px;
|
|
76
|
-
color: var(--text-primary);
|
|
77
|
-
z-index: 5;
|
|
78
|
-
|
|
79
|
-
& :global(svg) {
|
|
80
|
-
inline-size: 12px;
|
|
81
|
-
block-size: 12px;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
position: absolute;
|
|
86
|
-
z-index: 10000;
|
|
87
|
-
transform: var(--teaching-tip-transform);
|
|
88
|
-
|
|
89
|
-
&.placement- {
|
|
90
|
-
--teaching-tip-transform: translateX(0%);
|
|
91
|
-
|
|
92
|
-
&top {
|
|
93
|
-
& .teaching-tip-caret {
|
|
94
|
-
bottom: -8px;
|
|
95
|
-
left: 50%;
|
|
96
|
-
transform: translate(-50%, 0%);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
transform-origin: bottom;
|
|
100
|
-
bottom: calc(100% + var(--teaching-tip-offset));
|
|
101
|
-
--teaching-tip-transition-offset: translateY(12px);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
&bottom {
|
|
105
|
-
& .teaching-tip-caret {
|
|
106
|
-
top: -8px;
|
|
107
|
-
left: 50%;
|
|
108
|
-
transform: translate(-50%, 0%) rotate(180deg);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
transform-origin: top;
|
|
112
|
-
top: calc(100% + var(--teaching-tip-offset));
|
|
113
|
-
--teaching-tip-transition-offset: translateY(-12px);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
&left {
|
|
117
|
-
& .teaching-tip-caret {
|
|
118
|
-
right: -11px;
|
|
119
|
-
top: 50%;
|
|
120
|
-
transform: translate(0%, -50%) rotate(270deg);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
transform-origin: right;
|
|
124
|
-
right: calc(100% + var(--teaching-tip-offset));
|
|
125
|
-
--teaching-tip-transition-offset: translateX(12px);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
&right {
|
|
129
|
-
& .teaching-tip-caret {
|
|
130
|
-
left: -11px;
|
|
131
|
-
top: 50%;
|
|
132
|
-
transform: translate(0%, -50%) rotate(90deg);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
transform-origin: left;
|
|
136
|
-
left: calc(100% + var(--teaching-tip-offset));
|
|
137
|
-
--teaching-tip-transition-offset: translateX(-12px);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
&top,
|
|
141
|
-
&bottom {
|
|
142
|
-
&.alignment- {
|
|
143
|
-
&start {
|
|
144
|
-
inset-inline-start: 0;
|
|
145
|
-
--teaching-tip-transform: translateX(0%);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
&end {
|
|
149
|
-
inset-inline-end: 0;
|
|
150
|
-
--teaching-tip-transform: translateX(0%);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
¢er {
|
|
154
|
-
inset-inline-start: 50%;
|
|
155
|
-
--teaching-tip-transform: translateX(-50%);
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
&left,
|
|
161
|
-
&right {
|
|
162
|
-
&.alignment- {
|
|
163
|
-
&start {
|
|
164
|
-
inset-block-start: 0;
|
|
165
|
-
--teaching-tip-transform: translateY(0%);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&end {
|
|
169
|
-
inset-block-end: 0;
|
|
170
|
-
--teaching-tip-transform: translateY(0%);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
¢er {
|
|
174
|
-
inset-block-start: 50%;
|
|
175
|
-
--teaching-tip-transform: translateY(-50%);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
1
|
+
@use "../mixins" as *;
|
|
2
|
+
|
|
3
|
+
.teaching-tip- {
|
|
4
|
+
&wrapper {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
inline-size: fit-content;
|
|
7
|
+
block-size: fit-content;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&backdrop {
|
|
12
|
+
position: fixed;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
inline-size: 100%;
|
|
16
|
+
block-size: 100%;
|
|
17
|
+
z-index: 9999;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&content {
|
|
21
|
+
position: relative;
|
|
22
|
+
@include flex($direction: column, $justify: start, $align: start);
|
|
23
|
+
padding: 9px 12px 11px 12px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&footer {
|
|
27
|
+
margin-block-start: 8px;
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-auto-rows: 1fr;
|
|
30
|
+
grid-auto-flow: column;
|
|
31
|
+
grid-gap: 8px;
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
width: 100%;
|
|
34
|
+
|
|
35
|
+
> :global(.button:only-child) {
|
|
36
|
+
inline-size: 50%;
|
|
37
|
+
justify-self: end;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&image {
|
|
42
|
+
display: block;
|
|
43
|
+
max-inline-size: 100%;
|
|
44
|
+
max-block-size: 100%;
|
|
45
|
+
position: relative;
|
|
46
|
+
z-index: 10;
|
|
47
|
+
|
|
48
|
+
&.placement- {
|
|
49
|
+
&top {
|
|
50
|
+
margin-block-end: 4px;
|
|
51
|
+
border-radius: var(--overlay-corner-radius) var(--overlay-corner-radius) 0 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&bottom {
|
|
55
|
+
margin-block-start: 4px;
|
|
56
|
+
border-radius: 0 0 var(--overlay-corner-radius) var(--overlay-corner-radius);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&caret {
|
|
62
|
+
position: absolute;
|
|
63
|
+
z-index: 10000;
|
|
64
|
+
color: var(--solid-background-quarternary);
|
|
65
|
+
|
|
66
|
+
& .stroke {
|
|
67
|
+
color: var(--surface-stroke-default);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&anchor {
|
|
72
|
+
:global(.teaching-tip-close-button) {
|
|
73
|
+
position: absolute;
|
|
74
|
+
inset-block-start: 6px;
|
|
75
|
+
inset-inline-end: 6px;
|
|
76
|
+
color: var(--text-primary);
|
|
77
|
+
z-index: 5;
|
|
78
|
+
|
|
79
|
+
& :global(svg) {
|
|
80
|
+
inline-size: 12px;
|
|
81
|
+
block-size: 12px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
position: absolute;
|
|
86
|
+
z-index: 10000;
|
|
87
|
+
transform: var(--teaching-tip-transform);
|
|
88
|
+
|
|
89
|
+
&.placement- {
|
|
90
|
+
--teaching-tip-transform: translateX(0%);
|
|
91
|
+
|
|
92
|
+
&top {
|
|
93
|
+
& .teaching-tip-caret {
|
|
94
|
+
bottom: -8px;
|
|
95
|
+
left: 50%;
|
|
96
|
+
transform: translate(-50%, 0%);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
transform-origin: bottom;
|
|
100
|
+
bottom: calc(100% + var(--teaching-tip-offset));
|
|
101
|
+
--teaching-tip-transition-offset: translateY(12px);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&bottom {
|
|
105
|
+
& .teaching-tip-caret {
|
|
106
|
+
top: -8px;
|
|
107
|
+
left: 50%;
|
|
108
|
+
transform: translate(-50%, 0%) rotate(180deg);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
transform-origin: top;
|
|
112
|
+
top: calc(100% + var(--teaching-tip-offset));
|
|
113
|
+
--teaching-tip-transition-offset: translateY(-12px);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&left {
|
|
117
|
+
& .teaching-tip-caret {
|
|
118
|
+
right: -11px;
|
|
119
|
+
top: 50%;
|
|
120
|
+
transform: translate(0%, -50%) rotate(270deg);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
transform-origin: right;
|
|
124
|
+
right: calc(100% + var(--teaching-tip-offset));
|
|
125
|
+
--teaching-tip-transition-offset: translateX(12px);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&right {
|
|
129
|
+
& .teaching-tip-caret {
|
|
130
|
+
left: -11px;
|
|
131
|
+
top: 50%;
|
|
132
|
+
transform: translate(0%, -50%) rotate(90deg);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
transform-origin: left;
|
|
136
|
+
left: calc(100% + var(--teaching-tip-offset));
|
|
137
|
+
--teaching-tip-transition-offset: translateX(-12px);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&top,
|
|
141
|
+
&bottom {
|
|
142
|
+
&.alignment- {
|
|
143
|
+
&start {
|
|
144
|
+
inset-inline-start: 0;
|
|
145
|
+
--teaching-tip-transform: translateX(0%);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&end {
|
|
149
|
+
inset-inline-end: 0;
|
|
150
|
+
--teaching-tip-transform: translateX(0%);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
¢er {
|
|
154
|
+
inset-inline-start: 50%;
|
|
155
|
+
--teaching-tip-transform: translateX(-50%);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&left,
|
|
161
|
+
&right {
|
|
162
|
+
&.alignment- {
|
|
163
|
+
&start {
|
|
164
|
+
inset-block-start: 0;
|
|
165
|
+
--teaching-tip-transform: translateY(0%);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&end {
|
|
169
|
+
inset-block-end: 0;
|
|
170
|
+
--teaching-tip-transform: translateY(0%);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
¢er {
|
|
174
|
+
inset-block-start: 50%;
|
|
175
|
+
--teaching-tip-transform: translateY(-50%);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
@@ -112,7 +112,7 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
112
112
|
- Usage:
|
|
113
113
|
```tsx
|
|
114
114
|
<TeachingTip>
|
|
115
|
-
<Button>
|
|
115
|
+
<Button>Button</Button>
|
|
116
116
|
<svelte:fragment slot="teaching-tip">
|
|
117
117
|
TeachingTip Contents
|
|
118
118
|
</svelte:fragment>
|
|
@@ -134,9 +134,6 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
134
134
|
aria-expanded={open}
|
|
135
135
|
aria-haspopup={open}
|
|
136
136
|
aria-controls={menuId}
|
|
137
|
-
on:click={() => {
|
|
138
|
-
enableClick && (open = !open);
|
|
139
|
-
}}
|
|
140
137
|
on:keydown={handleKeyDown}
|
|
141
138
|
bind:this={wrapperElement}
|
|
142
139
|
>
|
|
@@ -167,50 +164,51 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
167
164
|
on:click={e => e.stopPropagation()}
|
|
168
165
|
{...$$restProps}
|
|
169
166
|
>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
{/if}
|
|
177
|
-
<div class="teaching-tip-content">
|
|
178
|
-
{#if closeButton}
|
|
179
|
-
<IconButton
|
|
180
|
-
class="teaching-tip-close-button"
|
|
181
|
-
on:click={closeTeachingTip}
|
|
182
|
-
>
|
|
183
|
-
<svg
|
|
184
|
-
aria-hidden="true"
|
|
185
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
186
|
-
width="12"
|
|
187
|
-
height="12"
|
|
188
|
-
viewBox="0 0 1024 1024"
|
|
189
|
-
>
|
|
190
|
-
<path
|
|
191
|
-
fill="currentColor"
|
|
192
|
-
d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
|
|
193
|
-
/>
|
|
194
|
-
</svg>
|
|
195
|
-
</IconButton>
|
|
196
|
-
{/if}
|
|
197
|
-
{#if title}
|
|
198
|
-
<TextBlock class="teaching-tip-title" variant="bodyStrong">
|
|
199
|
-
{title}
|
|
200
|
-
</TextBlock>
|
|
167
|
+
<slot name="override">
|
|
168
|
+
<TeachingTipSurface bind:element={menuElement}>
|
|
169
|
+
{#if src && imagePlacement === "top"}
|
|
170
|
+
<div bind:clientHeight={imageHeight}>
|
|
171
|
+
<img class="teaching-tip-image placement-top" {src} alt={title} />
|
|
172
|
+
</div>
|
|
201
173
|
{/if}
|
|
202
|
-
<
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
174
|
+
<div class="teaching-tip-content">
|
|
175
|
+
{#if closeButton}
|
|
176
|
+
<IconButton
|
|
177
|
+
class="teaching-tip-close-button"
|
|
178
|
+
on:click={closeTeachingTip}
|
|
179
|
+
>
|
|
180
|
+
<svg
|
|
181
|
+
aria-hidden="true"
|
|
182
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
183
|
+
width="12"
|
|
184
|
+
height="12"
|
|
185
|
+
viewBox="0 0 1024 1024"
|
|
186
|
+
>
|
|
187
|
+
<path
|
|
188
|
+
fill="currentColor"
|
|
189
|
+
d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
|
|
190
|
+
/>
|
|
191
|
+
</svg>
|
|
192
|
+
</IconButton>
|
|
193
|
+
{/if}
|
|
194
|
+
{#if title}
|
|
195
|
+
<TextBlock class="teaching-tip-title" variant="bodyStrong">
|
|
196
|
+
{title}
|
|
197
|
+
</TextBlock>
|
|
198
|
+
{/if}
|
|
199
|
+
<slot name="flyout" />
|
|
200
|
+
{#if $$slots.footer}
|
|
201
|
+
<footer class="teaching-tip-footer" bind:this={footerElement}>
|
|
202
|
+
<slot name="footer" />
|
|
203
|
+
</footer>
|
|
204
|
+
{/if}
|
|
205
|
+
</div>
|
|
206
|
+
{#if src && imagePlacement === "bottom"}
|
|
207
|
+
<img class="teaching-tip-image placement-bottom" {src} alt={title} />
|
|
207
208
|
{/if}
|
|
208
|
-
</
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
{/if}
|
|
212
|
-
</TeachingTipSurface>
|
|
213
|
-
</slot>
|
|
209
|
+
</TeachingTipSurface>
|
|
210
|
+
</slot>
|
|
211
|
+
|
|
214
212
|
<svg
|
|
215
213
|
width="16"
|
|
216
214
|
height="10"
|
|
@@ -242,4 +240,4 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
242
240
|
{/if}
|
|
243
241
|
</div>
|
|
244
242
|
|
|
245
|
-
<style >.teaching-tip-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.teaching-tip-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.teaching-tip-content{display:flex;flex-direction:column;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px
|
|
243
|
+
<style >.teaching-tip-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.teaching-tip-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.teaching-tip-content{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px;display:grid;grid-auto-flow:column;grid-auto-rows:1fr;margin-block-start:8px;white-space:nowrap;width:100%}.teaching-tip-footer>:global(.button:only-child){inline-size:50%;justify-self:end}.teaching-tip-image{display:block;max-block-size:100%;max-inline-size:100%;position:relative;z-index:10}.teaching-tip-image.placement-top{-webkit-margin-after:4px;border-radius:var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius) 0 0;margin-block-end:4px}.teaching-tip-image.placement-bottom{-webkit-margin-before:4px;border-radius:0 0 var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius);margin-block-start:4px}.teaching-tip-caret{color:var(--fds-solid-background-quarternary);position:absolute;z-index:10000}.teaching-tip-caret .stroke{color:var(--fds-surface-stroke-default)}.teaching-tip-anchor{position:absolute;transform:var(--fds-teaching-tip-transform);z-index:10000}.teaching-tip-anchor :global(.teaching-tip-close-button){color:var(--fds-text-primary);inset-block-start:6px;inset-inline-end:6px;position:absolute;z-index:5}.teaching-tip-anchor :global(.teaching-tip-close-button) :global(svg){block-size:12px;inline-size:12px}.teaching-tip-anchor.placement-{--fds-teaching-tip-transform:translateX(0%)}.teaching-tip-anchor.placement-top{--fds-teaching-tip-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-teaching-tip-offset));transform-origin:bottom}.teaching-tip-anchor.placement-top .teaching-tip-caret{bottom:-8px;left:50%;transform:translate(-50%)}.teaching-tip-anchor.placement-bottom{--fds-teaching-tip-transition-offset:translateY(-12px);top:calc(100% + var(--fds-teaching-tip-offset));transform-origin:top}.teaching-tip-anchor.placement-bottom .teaching-tip-caret{left:50%;top:-8px;transform:translate(-50%) rotate(180deg)}.teaching-tip-anchor.placement-left{--fds-teaching-tip-transition-offset:translateX(12px);right:calc(100% + var(--fds-teaching-tip-offset));transform-origin:right}.teaching-tip-anchor.placement-left .teaching-tip-caret{right:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}.teaching-tip-anchor.placement-right{--fds-teaching-tip-transition-offset:translateX(-12px);left:calc(100% + var(--fds-teaching-tip-offset));transform-origin:left}.teaching-tip-anchor.placement-right .teaching-tip-caret{left:-11px;top:50%;transform:translateY(-50%) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-50%);inset-inline-start:50%}.teaching-tip-anchor.placement-left.alignment-start,.teaching-tip-anchor.placement-right.alignment-start{--fds-teaching-tip-transform:translateY(0%);inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);inset-block-start:50%}</style>
|
|
@@ -42,7 +42,7 @@ export declare type TeachingTipWrapperSlots = typeof __propDef.slots;
|
|
|
42
42
|
* - Usage:
|
|
43
43
|
* ```tsx
|
|
44
44
|
* <TeachingTip>
|
|
45
|
-
* <Button>
|
|
45
|
+
* <Button>Button</Button>
|
|
46
46
|
* <svelte:fragment slot="teaching-tip">
|
|
47
47
|
* TeachingTip Contents
|
|
48
48
|
* </svelte:fragment>
|
package/package.json
CHANGED