fluent-svelte-extra 1.9.6 → 1.9.7
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/TeachingTip/TeachingTipWrapper.svelte +141 -140
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script >import { createEventDispatcher } from "svelte";
|
|
2
2
|
import { uid, focusTrap, getCSSDuration } from "../internal";
|
|
3
|
-
import
|
|
3
|
+
import IconButton from "../IconButton/IconButton.svelte";
|
|
4
|
+
import TextBlock from "../TextBlock/TextBlock.svelte";
|
|
4
5
|
import { scale } from "svelte/transition";
|
|
5
6
|
import { expoIn, expoOut } from "svelte/easing";
|
|
6
7
|
import TeachingTipSurface from "./TeachingTipSurface.svelte";
|
|
@@ -103,142 +104,142 @@ $: {
|
|
|
103
104
|
}
|
|
104
105
|
}
|
|
105
106
|
let resizeTimeout;
|
|
106
|
-
</script>
|
|
107
|
-
|
|
108
|
-
<!--
|
|
109
|
-
@component
|
|
110
|
-
TeachingTips represent a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a TeachingTip can be dismissed by clicking or tapping outside of it, or pressing the Esc key. [Docs](https://fluent-svelte.vercel.app/docs/components/teaching-tip)
|
|
111
|
-
- Usage:
|
|
112
|
-
```tsx
|
|
113
|
-
<TeachingTip>
|
|
114
|
-
<Button>Trigger Button</Button>
|
|
115
|
-
<svelte:fragment slot="teaching-tip">
|
|
116
|
-
TeachingTip Contents
|
|
117
|
-
</svelte:fragment>
|
|
118
|
-
</TeachingTip>
|
|
119
|
-
```
|
|
120
|
-
-->
|
|
121
|
-
|
|
122
|
-
<svelte:window
|
|
123
|
-
on:keydown={handleEscapeKey}
|
|
124
|
-
on:resize={() => {
|
|
125
|
-
clearTimeout(resizeTimeout);
|
|
126
|
-
|
|
127
|
-
resizeTimeout = setTimeout(handleResize, 100);
|
|
128
|
-
}}
|
|
129
|
-
/>
|
|
130
|
-
|
|
131
|
-
<div
|
|
132
|
-
class="teaching-tip-wrapper {className}"
|
|
133
|
-
aria-expanded={open}
|
|
134
|
-
aria-haspopup={open}
|
|
135
|
-
aria-controls={menuId}
|
|
136
|
-
on:click={() => {
|
|
137
|
-
enableClick && (open = !open);
|
|
138
|
-
}}
|
|
139
|
-
on:keydown={handleKeyDown}
|
|
140
|
-
bind:this={wrapperElement}
|
|
141
|
-
>
|
|
142
|
-
<slot />
|
|
143
|
-
|
|
144
|
-
{#if open}
|
|
145
|
-
<div
|
|
146
|
-
id={menuId}
|
|
147
|
-
class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
|
|
148
|
-
style="--fds-teaching-tip-offset: {offset}px;"
|
|
149
|
-
use:_focusTrap
|
|
150
|
-
in:customScale|local={{
|
|
151
|
-
duration: getCSSDuration("--fds-control-slow-duration"),
|
|
152
|
-
easing: expoOut,
|
|
153
|
-
opacity: 1,
|
|
154
|
-
start: 0.1,
|
|
155
|
-
intro: true
|
|
156
|
-
}}
|
|
157
|
-
out:customScale|local={{
|
|
158
|
-
duration: getCSSDuration("--fds-control-slow-duration"),
|
|
159
|
-
easing: expoIn,
|
|
160
|
-
opacity: 1,
|
|
161
|
-
start: 0.1
|
|
162
|
-
}}
|
|
163
|
-
bind:this={anchorElement}
|
|
164
|
-
bind:clientHeight={anchorElementHeight}
|
|
165
|
-
bind:clientWidth={anchorElementWidth}
|
|
166
|
-
on:click={e => e.stopPropagation()}
|
|
167
|
-
{...$$restProps}
|
|
168
|
-
>
|
|
169
|
-
<slot name="override">
|
|
170
|
-
<TeachingTipSurface bind:element={menuElement}>
|
|
171
|
-
{#if src && imagePlacement === "top"}
|
|
172
|
-
<div bind:clientHeight={imageHeight}>
|
|
173
|
-
<img class="teaching-tip-image placement-top" {src} alt={title} />
|
|
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}
|
|
207
|
-
</div>
|
|
208
|
-
{#if src && imagePlacement === "bottom"}
|
|
209
|
-
<img class="teaching-tip-image placement-bottom" {src} alt={title} />
|
|
210
|
-
{/if}
|
|
211
|
-
</TeachingTipSurface>
|
|
212
|
-
</slot>
|
|
213
|
-
<svg
|
|
214
|
-
width="16"
|
|
215
|
-
height="10"
|
|
216
|
-
viewBox="0 0 16 10"
|
|
217
|
-
class="teaching-tip-caret"
|
|
218
|
-
fill="none"
|
|
219
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
220
|
-
>
|
|
221
|
-
<path
|
|
222
|
-
d="M7.99902 7.79297L14.999 0.792969H0.999023L7.99902 7.79297Z"
|
|
223
|
-
fill="currentColor"
|
|
224
|
-
/>
|
|
225
|
-
<path
|
|
226
|
-
d="M7.99917 9.20718L0.584961 1.79297H1.99917L7.99917 7.79297L13.9992 1.79297H15.4134L7.99917 9.20718Z"
|
|
227
|
-
class="stroke"
|
|
228
|
-
fill="currentColor"
|
|
229
|
-
/>
|
|
230
|
-
</svg>
|
|
231
|
-
</div>
|
|
232
|
-
{#if closeOnBackdropClick}
|
|
233
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
234
|
-
<div
|
|
235
|
-
class="teaching-tip-backdrop"
|
|
236
|
-
bind:this={backdropElement}
|
|
237
|
-
on:click={e => e.stopPropagation()}
|
|
238
|
-
on:mousedown={backdropClick}
|
|
239
|
-
/>
|
|
240
|
-
{/if}
|
|
241
|
-
{/if}
|
|
242
|
-
</div>
|
|
243
|
-
|
|
244
|
-
<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;-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;margin-block-start:8px;white-space:nowrap}.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>
|
|
107
|
+
</script>
|
|
108
|
+
|
|
109
|
+
<!--
|
|
110
|
+
@component
|
|
111
|
+
TeachingTips represent a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a TeachingTip can be dismissed by clicking or tapping outside of it, or pressing the Esc key. [Docs](https://fluent-svelte.vercel.app/docs/components/teaching-tip)
|
|
112
|
+
- Usage:
|
|
113
|
+
```tsx
|
|
114
|
+
<TeachingTip>
|
|
115
|
+
<Button>Trigger Button</Button>
|
|
116
|
+
<svelte:fragment slot="teaching-tip">
|
|
117
|
+
TeachingTip Contents
|
|
118
|
+
</svelte:fragment>
|
|
119
|
+
</TeachingTip>
|
|
120
|
+
```
|
|
121
|
+
-->
|
|
122
|
+
|
|
123
|
+
<svelte:window
|
|
124
|
+
on:keydown={handleEscapeKey}
|
|
125
|
+
on:resize={() => {
|
|
126
|
+
clearTimeout(resizeTimeout);
|
|
127
|
+
|
|
128
|
+
resizeTimeout = setTimeout(handleResize, 100);
|
|
129
|
+
}}
|
|
130
|
+
/>
|
|
131
|
+
|
|
132
|
+
<div
|
|
133
|
+
class="teaching-tip-wrapper {className}"
|
|
134
|
+
aria-expanded={open}
|
|
135
|
+
aria-haspopup={open}
|
|
136
|
+
aria-controls={menuId}
|
|
137
|
+
on:click={() => {
|
|
138
|
+
enableClick && (open = !open);
|
|
139
|
+
}}
|
|
140
|
+
on:keydown={handleKeyDown}
|
|
141
|
+
bind:this={wrapperElement}
|
|
142
|
+
>
|
|
143
|
+
<slot />
|
|
144
|
+
|
|
145
|
+
{#if open}
|
|
146
|
+
<div
|
|
147
|
+
id={menuId}
|
|
148
|
+
class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
|
|
149
|
+
style="--fds-teaching-tip-offset: {offset}px;"
|
|
150
|
+
use:_focusTrap
|
|
151
|
+
in:customScale|local={{
|
|
152
|
+
duration: getCSSDuration("--fds-control-slow-duration"),
|
|
153
|
+
easing: expoOut,
|
|
154
|
+
opacity: 1,
|
|
155
|
+
start: 0.1,
|
|
156
|
+
intro: true
|
|
157
|
+
}}
|
|
158
|
+
out:customScale|local={{
|
|
159
|
+
duration: getCSSDuration("--fds-control-slow-duration"),
|
|
160
|
+
easing: expoIn,
|
|
161
|
+
opacity: 1,
|
|
162
|
+
start: 0.1
|
|
163
|
+
}}
|
|
164
|
+
bind:this={anchorElement}
|
|
165
|
+
bind:clientHeight={anchorElementHeight}
|
|
166
|
+
bind:clientWidth={anchorElementWidth}
|
|
167
|
+
on:click={e => e.stopPropagation()}
|
|
168
|
+
{...$$restProps}
|
|
169
|
+
>
|
|
170
|
+
<slot name="override">
|
|
171
|
+
<TeachingTipSurface bind:element={menuElement}>
|
|
172
|
+
{#if src && imagePlacement === "top"}
|
|
173
|
+
<div bind:clientHeight={imageHeight}>
|
|
174
|
+
<img class="teaching-tip-image placement-top" {src} alt={title} />
|
|
175
|
+
</div>
|
|
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>
|
|
201
|
+
{/if}
|
|
202
|
+
<slot name="flyout" />
|
|
203
|
+
{#if $$slots.footer}
|
|
204
|
+
<footer class="teaching-tip-footer" bind:this={footerElement}>
|
|
205
|
+
<slot name="footer" />
|
|
206
|
+
</footer>
|
|
207
|
+
{/if}
|
|
208
|
+
</div>
|
|
209
|
+
{#if src && imagePlacement === "bottom"}
|
|
210
|
+
<img class="teaching-tip-image placement-bottom" {src} alt={title} />
|
|
211
|
+
{/if}
|
|
212
|
+
</TeachingTipSurface>
|
|
213
|
+
</slot>
|
|
214
|
+
<svg
|
|
215
|
+
width="16"
|
|
216
|
+
height="10"
|
|
217
|
+
viewBox="0 0 16 10"
|
|
218
|
+
class="teaching-tip-caret"
|
|
219
|
+
fill="none"
|
|
220
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
221
|
+
>
|
|
222
|
+
<path
|
|
223
|
+
d="M7.99902 7.79297L14.999 0.792969H0.999023L7.99902 7.79297Z"
|
|
224
|
+
fill="currentColor"
|
|
225
|
+
/>
|
|
226
|
+
<path
|
|
227
|
+
d="M7.99917 9.20718L0.584961 1.79297H1.99917L7.99917 7.79297L13.9992 1.79297H15.4134L7.99917 9.20718Z"
|
|
228
|
+
class="stroke"
|
|
229
|
+
fill="currentColor"
|
|
230
|
+
/>
|
|
231
|
+
</svg>
|
|
232
|
+
</div>
|
|
233
|
+
{#if closeOnBackdropClick}
|
|
234
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
235
|
+
<div
|
|
236
|
+
class="teaching-tip-backdrop"
|
|
237
|
+
bind:this={backdropElement}
|
|
238
|
+
on:click={e => e.stopPropagation()}
|
|
239
|
+
on:mousedown={backdropClick}
|
|
240
|
+
/>
|
|
241
|
+
{/if}
|
|
242
|
+
{/if}
|
|
243
|
+
</div>
|
|
244
|
+
|
|
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;-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;margin-block-start:8px;white-space:nowrap}.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>
|
package/package.json
CHANGED