aboutsummaryrefslogtreecommitdiff
path: root/src/lib/components/step.svelte
blob: 13c2f7cc36865156c60273031245b128507486fd (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script lang="ts">
	export let order: string | null = null
	export let fadeIn = false
	export let fadeOut = false
	export let fadeUp = false
	export let fadeDown = false
	export let fadeLeft = false
	export let fadeRight = false
	export let fadeInThenOut = false
	export let currentVisible = false
	export let fadeInThenSemiOut = false
	export let semiFadeOut = false
	export let highlightRed = false
	export let highlightGreen = false
	export let highlightBlue = false
	export let highlightCurrentRed = false
	export let highlightCurrentGreen = false
	export let highlightCurrentBlue = false
	export let grow = false
	export let shrink = false
	export let strike = false

	delete $$restProps.class
</script>

<p
	on:in
	on:out
	class:fade-in={fadeIn}
	class:fade-out={fadeOut}
	class:fade-up={fadeUp}
	class:fade-down={fadeDown}
	class:fade-left={fadeLeft}
	class:fade-right={fadeRight}
	class:fade-in-then-out={fadeInThenOut}
	class:current-visible={currentVisible}
	class:fade-in-then-semi-out={fadeInThenSemiOut}
	class:semi-fade-out={semiFadeOut}
	class:highlight-red={highlightRed}
	class:highlight-green={highlightGreen}
	class:highlight-blue={highlightBlue}
	class:highlight-current-red={highlightCurrentRed}
	class:highlight-current-green={highlightCurrentGreen}
	class:highlight-current-blue={highlightCurrentBlue}
	class:grow
	class:shrink
	class:strike
	class="fragment {$$props.class || ''}"
	data-fragment-index={order}
	{...$$restProps}
>
	<slot />
</p>