fluent-svelte-extra 2.1.9 → 2.2.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.
|
@@ -69,6 +69,10 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&anchor {
|
|
72
|
+
position: absolute;
|
|
73
|
+
z-index: 10000;
|
|
74
|
+
transform: var(--teaching-tip-transform);
|
|
75
|
+
|
|
72
76
|
:global(.teaching-tip-close-button) {
|
|
73
77
|
position: absolute;
|
|
74
78
|
inset-block-start: 6px;
|
|
@@ -82,58 +86,68 @@
|
|
|
82
86
|
}
|
|
83
87
|
}
|
|
84
88
|
|
|
85
|
-
position: absolute;
|
|
86
|
-
z-index: 10000;
|
|
87
|
-
transform: var(--teaching-tip-transform);
|
|
88
|
-
|
|
89
89
|
&.placement- {
|
|
90
90
|
--teaching-tip-transform: translateX(0%);
|
|
91
91
|
|
|
92
|
+
--caret-left: 50%;
|
|
93
|
+
--caret-right: auto;
|
|
94
|
+
--caret-top: 50%;
|
|
95
|
+
--caret-bottom: auto;
|
|
96
|
+
--caret-translate-x: -50%;
|
|
97
|
+
--caret-translate-y: -50%;
|
|
98
|
+
|
|
99
|
+
--transform-origin-x: 50%;
|
|
100
|
+
--transform-origin-y: 50%;
|
|
101
|
+
|
|
92
102
|
&top {
|
|
93
103
|
& .teaching-tip-caret {
|
|
94
104
|
bottom: -8px;
|
|
95
|
-
left:
|
|
96
|
-
|
|
105
|
+
left: var(--caret-left);
|
|
106
|
+
right: var(--caret-right);
|
|
107
|
+
transform: translate(var(--caret-translate-x), 0%) rotate(0deg);
|
|
97
108
|
}
|
|
98
109
|
|
|
99
|
-
transform-origin: bottom;
|
|
100
|
-
bottom: calc(100% + var(--teaching-tip-offset));
|
|
110
|
+
transform-origin: var(--transform-origin-x) bottom;
|
|
111
|
+
bottom: calc(100% + var(--fds-teaching-tip-offset));
|
|
101
112
|
--teaching-tip-transition-offset: translateY(12px);
|
|
102
113
|
}
|
|
103
114
|
|
|
104
115
|
&bottom {
|
|
105
116
|
& .teaching-tip-caret {
|
|
106
117
|
top: -8px;
|
|
107
|
-
left:
|
|
108
|
-
|
|
118
|
+
left: var(--caret-left);
|
|
119
|
+
right: var(--caret-right);
|
|
120
|
+
transform: translate(var(--caret-translate-x), 0%) rotate(180deg);
|
|
109
121
|
}
|
|
110
122
|
|
|
111
|
-
transform-origin: top;
|
|
112
|
-
top: calc(100% + var(--teaching-tip-offset));
|
|
123
|
+
transform-origin: var(--transform-origin-x) top;
|
|
124
|
+
top: calc(100% + var(--fds-teaching-tip-offset));
|
|
113
125
|
--teaching-tip-transition-offset: translateY(-12px);
|
|
114
126
|
}
|
|
115
127
|
|
|
116
128
|
&left {
|
|
117
129
|
& .teaching-tip-caret {
|
|
118
130
|
right: -11px;
|
|
119
|
-
top:
|
|
120
|
-
|
|
131
|
+
top: var(--caret-top);
|
|
132
|
+
bottom: var(--caret-bottom);
|
|
133
|
+
transform: translate(0%, var(--caret-translate-y)) rotate(270deg);
|
|
121
134
|
}
|
|
122
135
|
|
|
123
|
-
transform-origin: right;
|
|
124
|
-
right: calc(100% + var(--teaching-tip-offset));
|
|
136
|
+
transform-origin: right var(--transform-origin-y);
|
|
137
|
+
right: calc(100% + var(--fds-teaching-tip-offset));
|
|
125
138
|
--teaching-tip-transition-offset: translateX(12px);
|
|
126
139
|
}
|
|
127
140
|
|
|
128
141
|
&right {
|
|
129
142
|
& .teaching-tip-caret {
|
|
130
143
|
left: -11px;
|
|
131
|
-
top:
|
|
132
|
-
|
|
144
|
+
top: var(--caret-top);
|
|
145
|
+
bottom: var(--caret-bottom);
|
|
146
|
+
transform: translate(0%, var(--caret-translate-y)) rotate(90deg);
|
|
133
147
|
}
|
|
134
148
|
|
|
135
|
-
transform-origin: left;
|
|
136
|
-
left: calc(100% + var(--teaching-tip-offset));
|
|
149
|
+
transform-origin: left var(--transform-origin-y);
|
|
150
|
+
left: calc(100% + var(--fds-teaching-tip-offset));
|
|
137
151
|
--teaching-tip-transition-offset: translateX(-12px);
|
|
138
152
|
}
|
|
139
153
|
|
|
@@ -143,16 +157,31 @@
|
|
|
143
157
|
&start {
|
|
144
158
|
inset-inline-start: 0;
|
|
145
159
|
--teaching-tip-transform: translateX(0%);
|
|
160
|
+
--caret-left: calc(var(--fds-trigger-width, 32px) / 2);
|
|
161
|
+
--caret-right: auto;
|
|
162
|
+
--caret-translate-x: -50%;
|
|
163
|
+
|
|
164
|
+
--transform-origin-x: calc(var(--fds-trigger-width, 32px) / 2);
|
|
146
165
|
}
|
|
147
166
|
|
|
148
167
|
&end {
|
|
149
168
|
inset-inline-end: 0;
|
|
150
169
|
--teaching-tip-transform: translateX(0%);
|
|
170
|
+
--caret-left: auto;
|
|
171
|
+
--caret-right: calc(var(--fds-trigger-width, 32px) / 2);
|
|
172
|
+
--caret-translate-x: 50%;
|
|
173
|
+
|
|
174
|
+
--transform-origin-x: calc(100% - (var(--fds-trigger-width, 32px) / 2));
|
|
151
175
|
}
|
|
152
176
|
|
|
153
177
|
¢er {
|
|
154
178
|
inset-inline-start: 50%;
|
|
155
179
|
--teaching-tip-transform: translateX(-50%);
|
|
180
|
+
--caret-left: 50%;
|
|
181
|
+
--caret-right: auto;
|
|
182
|
+
--caret-translate-x: -50%;
|
|
183
|
+
|
|
184
|
+
--transform-origin-x: 50%;
|
|
156
185
|
}
|
|
157
186
|
}
|
|
158
187
|
}
|
|
@@ -163,16 +192,31 @@
|
|
|
163
192
|
&start {
|
|
164
193
|
inset-block-start: 0;
|
|
165
194
|
--teaching-tip-transform: translateY(0%);
|
|
195
|
+
--caret-top: calc(var(--fds-trigger-height, 32px) / 2);
|
|
196
|
+
--caret-bottom: auto;
|
|
197
|
+
--caret-translate-y: -50%;
|
|
198
|
+
|
|
199
|
+
--transform-origin-y: calc(var(--fds-trigger-height, 32px) / 2);
|
|
166
200
|
}
|
|
167
201
|
|
|
168
202
|
&end {
|
|
169
203
|
inset-block-end: 0;
|
|
170
204
|
--teaching-tip-transform: translateY(0%);
|
|
205
|
+
--caret-top: auto;
|
|
206
|
+
--caret-bottom: calc(var(--fds-trigger-height, 32px) / 2);
|
|
207
|
+
--caret-translate-y: 50%;
|
|
208
|
+
|
|
209
|
+
--transform-origin-y: calc(100% - (var(--fds-trigger-height, 32px) / 2));
|
|
171
210
|
}
|
|
172
211
|
|
|
173
212
|
¢er {
|
|
174
213
|
inset-block-start: 50%;
|
|
175
214
|
--teaching-tip-transform: translateY(-50%);
|
|
215
|
+
--caret-top: 50%;
|
|
216
|
+
--caret-bottom: auto;
|
|
217
|
+
--caret-translate-y: -50%;
|
|
218
|
+
|
|
219
|
+
--transform-origin-y: 50%;
|
|
176
220
|
}
|
|
177
221
|
}
|
|
178
222
|
}
|
|
@@ -47,6 +47,8 @@ export let backdropElement = null;
|
|
|
47
47
|
export let footerElement = null;
|
|
48
48
|
const dispatch = createEventDispatcher();
|
|
49
49
|
const menuId = uid("fds-teaching-tip-anchor-");
|
|
50
|
+
let wrapperWidth = 0;
|
|
51
|
+
let wrapperHeight = 0;
|
|
50
52
|
$: _focusTrap = trapFocus ? focusTrap : () => { };
|
|
51
53
|
$: if (open) {
|
|
52
54
|
dispatch("open");
|
|
@@ -138,6 +140,8 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
138
140
|
aria-controls={menuId}
|
|
139
141
|
on:keydown={handleKeyDown}
|
|
140
142
|
bind:this={wrapperElement}
|
|
143
|
+
bind:clientWidth={wrapperWidth}
|
|
144
|
+
bind:clientHeight={wrapperHeight}
|
|
141
145
|
>
|
|
142
146
|
<slot />
|
|
143
147
|
|
|
@@ -145,7 +149,7 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
145
149
|
<div
|
|
146
150
|
id={menuId}
|
|
147
151
|
class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
|
|
148
|
-
style="--fds-teaching-tip-offset: {offset}px;"
|
|
152
|
+
style="--fds-teaching-tip-offset: {offset}px; --fds-trigger-width: {wrapperWidth}px; --fds-trigger-height: {wrapperHeight}px;"
|
|
149
153
|
use:_focusTrap
|
|
150
154
|
in:customScale|local={{
|
|
151
155
|
duration: getCSSDuration("--fds-control-slow-duration"),
|
|
@@ -166,50 +170,50 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
166
170
|
on:click={e => e.stopPropagation()}
|
|
167
171
|
{...$$restProps}
|
|
168
172
|
>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
</div>
|
|
175
|
-
{/if}
|
|
176
|
-
<div class="teaching-tip-content">
|
|
177
|
-
{#if closeButton}
|
|
178
|
-
<IconButton
|
|
179
|
-
class="teaching-tip-close-button"
|
|
180
|
-
on:click={closeTeachingTip}
|
|
181
|
-
>
|
|
182
|
-
<svg
|
|
183
|
-
aria-hidden="true"
|
|
184
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
185
|
-
width="12"
|
|
186
|
-
height="12"
|
|
187
|
-
viewBox="0 0 1024 1024"
|
|
188
|
-
>
|
|
189
|
-
<path
|
|
190
|
-
fill="currentColor"
|
|
191
|
-
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"
|
|
192
|
-
/>
|
|
193
|
-
</svg>
|
|
194
|
-
</IconButton>
|
|
195
|
-
{/if}
|
|
196
|
-
{#if title}
|
|
197
|
-
<TextBlock class="teaching-tip-title" variant="bodyStrong">
|
|
198
|
-
{title}
|
|
199
|
-
</TextBlock>
|
|
200
|
-
{/if}
|
|
201
|
-
<slot name="flyout" />
|
|
202
|
-
{#if $$slots.footer}
|
|
203
|
-
<footer class="teaching-tip-footer" bind:this={footerElement}>
|
|
204
|
-
<slot name="footer" />
|
|
205
|
-
</footer>
|
|
206
|
-
{/if}
|
|
173
|
+
<slot name="override">
|
|
174
|
+
<TeachingTipSurface bind:element={menuElement} {acrylic}>
|
|
175
|
+
{#if src && imagePlacement === "top"}
|
|
176
|
+
<div bind:clientHeight={imageHeight}>
|
|
177
|
+
<img class="teaching-tip-image placement-top" {src} alt={title} />
|
|
207
178
|
</div>
|
|
208
|
-
|
|
209
|
-
|
|
179
|
+
{/if}
|
|
180
|
+
<div class="teaching-tip-content">
|
|
181
|
+
{#if closeButton}
|
|
182
|
+
<IconButton
|
|
183
|
+
class="teaching-tip-close-button"
|
|
184
|
+
on:click={closeTeachingTip}
|
|
185
|
+
>
|
|
186
|
+
<svg
|
|
187
|
+
aria-hidden="true"
|
|
188
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
189
|
+
width="12"
|
|
190
|
+
height="12"
|
|
191
|
+
viewBox="0 0 1024 1024"
|
|
192
|
+
>
|
|
193
|
+
<path
|
|
194
|
+
fill="currentColor"
|
|
195
|
+
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"
|
|
196
|
+
/>
|
|
197
|
+
</svg>
|
|
198
|
+
</IconButton>
|
|
199
|
+
{/if}
|
|
200
|
+
{#if title}
|
|
201
|
+
<TextBlock class="teaching-tip-title" variant="bodyStrong">
|
|
202
|
+
{title}
|
|
203
|
+
</TextBlock>
|
|
204
|
+
{/if}
|
|
205
|
+
<slot name="flyout" />
|
|
206
|
+
{#if $$slots.footer}
|
|
207
|
+
<footer class="teaching-tip-footer" bind:this={footerElement}>
|
|
208
|
+
<slot name="footer" />
|
|
209
|
+
</footer>
|
|
210
210
|
{/if}
|
|
211
|
-
</
|
|
212
|
-
|
|
211
|
+
</div>
|
|
212
|
+
{#if src && imagePlacement === "bottom"}
|
|
213
|
+
<img class="teaching-tip-image placement-bottom" {src} alt={title} />
|
|
214
|
+
{/if}
|
|
215
|
+
</TeachingTipSurface>
|
|
216
|
+
</slot>
|
|
213
217
|
|
|
214
218
|
<svg
|
|
215
219
|
width="16"
|
|
@@ -242,4 +246,4 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
242
246
|
{/if}
|
|
243
247
|
</div>
|
|
244
248
|
|
|
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{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:
|
|
249
|
+
<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%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-x:-50%;--fds-caret-translate-y:-50%;--fds-transform-origin-x:50%;--fds-transform-origin-y:50%}.teaching-tip-anchor.placement-top{--fds-teaching-tip-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-teaching-tip-offset));transform-origin:var(--fds-transform-origin-x) bottom}.teaching-tip-anchor.placement-top .teaching-tip-caret{bottom:-8px;left:var(--fds-caret-left);right:var(--fds-caret-right);transform:translate(var(--fds-caret-translate-x)) rotate(0deg)}.teaching-tip-anchor.placement-bottom{--fds-teaching-tip-transition-offset:translateY(-12px);top:calc(100% + var(--fds-teaching-tip-offset));transform-origin:var(--fds-transform-origin-x) top}.teaching-tip-anchor.placement-bottom .teaching-tip-caret{left:var(--fds-caret-left);right:var(--fds-caret-right);top:-8px;transform:translate(var(--fds-caret-translate-x)) 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 var(--fds-transform-origin-y)}.teaching-tip-anchor.placement-left .teaching-tip-caret{bottom:var(--fds-caret-bottom);right:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) 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 var(--fds-transform-origin-y)}.teaching-tip-anchor.placement-right .teaching-tip-caret{bottom:var(--fds-caret-bottom);left:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-right:auto;--fds-caret-translate-x:-50%;--fds-transform-origin-x:calc(var(--fds-trigger-width, 32px)/2);inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:auto;--fds-caret-right:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-translate-x:50%;--fds-transform-origin-x:calc(100% - var(--fds-trigger-width, 32px)/2);inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-50%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-translate-x:-50%;--fds-transform-origin-x: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%);--fds-caret-top:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;--fds-transform-origin-y:calc(var(--fds-trigger-height, 32px)/2);inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:auto;--fds-caret-bottom:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-translate-y:50%;--fds-transform-origin-y:calc(100% - var(--fds-trigger-height, 32px)/2);inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;--fds-transform-origin-y:50%;inset-block-start:50%}</style>
|
package/package.json
CHANGED