tecitheme 0.11.20 → 0.12.0
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/dist/components/BentoBox.svelte +140 -0
- package/dist/components/BentoBox.svelte.d.ts +25 -0
- package/dist/components/Button.svelte.d.ts +2 -2
- package/dist/components/FeatureAlternatingWithTestimonial.svelte +130 -0
- package/dist/components/FeatureAlternatingWithTestimonial.svelte.d.ts +25 -0
- package/dist/layouts/blocks.svelte +5 -1
- package/dist/utils.js +134 -134
- package/package.json +1 -1
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getColorStyles } from "../utils";
|
|
3
|
+
import Button from "./Button.svelte";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
export let data = {};
|
|
7
|
+
|
|
8
|
+
let {
|
|
9
|
+
cols,
|
|
10
|
+
rows,
|
|
11
|
+
items,
|
|
12
|
+
heading,
|
|
13
|
+
eyebrowText,
|
|
14
|
+
color
|
|
15
|
+
} = data;
|
|
16
|
+
|
|
17
|
+
let bentoCols = "lg:grid-cols-3";
|
|
18
|
+
switch (cols) {
|
|
19
|
+
case 1:
|
|
20
|
+
bentoCols = "lg:grid-cols-1"
|
|
21
|
+
break;
|
|
22
|
+
case 2:
|
|
23
|
+
bentoCols = "lg:grid-cols-2"
|
|
24
|
+
break;
|
|
25
|
+
case 3:
|
|
26
|
+
bentoCols = "lg:grid-cols-3"
|
|
27
|
+
break;
|
|
28
|
+
case 4:
|
|
29
|
+
bentoCols = "lg:grid-cols-4"
|
|
30
|
+
break;
|
|
31
|
+
case 5:
|
|
32
|
+
bentoCols = "lg:grid-cols-5"
|
|
33
|
+
break;
|
|
34
|
+
case 6:
|
|
35
|
+
bentoCols = "lg:grid-cols-6"
|
|
36
|
+
break;
|
|
37
|
+
case 7:
|
|
38
|
+
bentoCols = "lg:grid-cols-7"
|
|
39
|
+
break;
|
|
40
|
+
case 8:
|
|
41
|
+
bentoCols = "lg:grid-cols-8"
|
|
42
|
+
break;
|
|
43
|
+
case 9:
|
|
44
|
+
bentoCols = "lg:grid-cols-9"
|
|
45
|
+
break;
|
|
46
|
+
default:
|
|
47
|
+
bentoCols = "lg:grid-cols-3"
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
let bentoRows = "lg:grid-rows-2";
|
|
52
|
+
switch (rows) {
|
|
53
|
+
case 1:
|
|
54
|
+
bentoRows = "lg:grid-rows-1"
|
|
55
|
+
break;
|
|
56
|
+
case 2:
|
|
57
|
+
bentoRows = "lg:grid-rows-2"
|
|
58
|
+
break;
|
|
59
|
+
case 3:
|
|
60
|
+
bentoRows = "lg:grid-rows-3"
|
|
61
|
+
break;
|
|
62
|
+
case 4:
|
|
63
|
+
bentoRows = "lg:grid-rows-4"
|
|
64
|
+
break;
|
|
65
|
+
case 5:
|
|
66
|
+
bentoRows = "lg:grid-rows-5"
|
|
67
|
+
break;
|
|
68
|
+
case 6:
|
|
69
|
+
bentoRows = "lg:grid-rows-6"
|
|
70
|
+
break;
|
|
71
|
+
case 7:
|
|
72
|
+
bentoRows = "lg:grid-rows-7"
|
|
73
|
+
break;
|
|
74
|
+
case 8:
|
|
75
|
+
bentoRows = "lg:grid-rows-8"
|
|
76
|
+
break;
|
|
77
|
+
case 9:
|
|
78
|
+
bentoRows = "lg:grid-rows-9"
|
|
79
|
+
break;
|
|
80
|
+
default:
|
|
81
|
+
bentoRows = "lg:grid-rows-2"
|
|
82
|
+
break;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<div class="bg-gray-50 py-24 sm:py-32">
|
|
88
|
+
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
|
89
|
+
|
|
90
|
+
<!-- Heading -->
|
|
91
|
+
<h2 class="text-center text-base/7 font-semibold {getColorStyles("text", color)}">{heading}</h2>
|
|
92
|
+
|
|
93
|
+
<!-- Eyebrow Text -->
|
|
94
|
+
<p class="mx-auto mt-2 max-w-lg text-balance text-center text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl">{eyebrowText}</p>
|
|
95
|
+
|
|
96
|
+
<!-- Bento -->
|
|
97
|
+
<div class="mt-10 grid gap-4 sm:mt-16 {bentoCols} {bentoRows}">
|
|
98
|
+
|
|
99
|
+
{#each items as item}
|
|
100
|
+
{@const imageUrl = item.image.url.startsWith("http") ? item.image.url : `https://files.thunderheadeng.com/www/images/${item.image.url}?fmt=auto`}
|
|
101
|
+
<!-- Card -->
|
|
102
|
+
<a class="relative {item.gridClasses}" href={item.url}>
|
|
103
|
+
<!-- White Background -->
|
|
104
|
+
<div class="absolute inset-px bg-white"></div>
|
|
105
|
+
|
|
106
|
+
<!-- Foreground -->
|
|
107
|
+
<div class="relative flex h-full flex-col overflow-hidden">
|
|
108
|
+
|
|
109
|
+
<!-- Heading and Text -->
|
|
110
|
+
<div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
|
|
111
|
+
<p class="mt-2 text-lg font-medium tracking-tight max-lg:text-center">{item.heading}</p>
|
|
112
|
+
<p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">{item.text}</p>
|
|
113
|
+
{#if item.buttonText}
|
|
114
|
+
<div class="mt-2 mb-2 hidden lg:flex">
|
|
115
|
+
<Button text={item.buttonText} color={color} justify="left"/>
|
|
116
|
+
</div>
|
|
117
|
+
{/if}
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<!-- Image -->
|
|
121
|
+
<div class="{item.image.containerClasses}">
|
|
122
|
+
<div class="{item.image.innerContainerClasses}">
|
|
123
|
+
<img
|
|
124
|
+
class={item.image.classes}
|
|
125
|
+
src={imageUrl}
|
|
126
|
+
alt="{item.image.alt}"
|
|
127
|
+
title="{item.image.alt}"
|
|
128
|
+
/>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<!-- Something that I don't understand. Focus element? -->
|
|
135
|
+
<div class="pointer-events-none absolute inset-px shadow ring-1 ring-black/5"></div>
|
|
136
|
+
</a>
|
|
137
|
+
{/each}
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} BentoBoxProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} BentoBoxEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} BentoBoxSlots */
|
|
4
|
+
export default class BentoBox extends SvelteComponent<{
|
|
5
|
+
data?: {};
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type BentoBoxProps = typeof __propDef.props;
|
|
11
|
+
export type BentoBoxEvents = typeof __propDef.events;
|
|
12
|
+
export type BentoBoxSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
data?: {};
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
exports?: {};
|
|
23
|
+
bindings?: string;
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
/** @typedef {typeof __propDef.slots} ButtonSlots */
|
|
4
4
|
export default class Button extends SvelteComponent<{
|
|
5
5
|
text?: any;
|
|
6
|
-
fullwidth?: any;
|
|
7
6
|
action?: any;
|
|
8
7
|
url?: any;
|
|
9
8
|
color?: any;
|
|
10
9
|
justify?: any;
|
|
10
|
+
fullwidth?: any;
|
|
11
11
|
}, {
|
|
12
12
|
click: MouseEvent;
|
|
13
13
|
} & {
|
|
@@ -21,11 +21,11 @@ import { SvelteComponent } from "svelte";
|
|
|
21
21
|
declare const __propDef: {
|
|
22
22
|
props: {
|
|
23
23
|
text?: any;
|
|
24
|
-
fullwidth?: any;
|
|
25
24
|
action?: any;
|
|
26
25
|
url?: any;
|
|
27
26
|
color?: any;
|
|
28
27
|
justify?: any;
|
|
28
|
+
fullwidth?: any;
|
|
29
29
|
};
|
|
30
30
|
events: {
|
|
31
31
|
click: MouseEvent;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getColorStyles, makeIdString } from "../utils";
|
|
3
|
+
import { onMount } from "svelte";
|
|
4
|
+
import { fly, fade } from "svelte/transition";
|
|
5
|
+
import Button from "./Button.svelte";
|
|
6
|
+
import Icon from "./Icon.svelte";
|
|
7
|
+
import { writable } from "svelte/store";
|
|
8
|
+
import { cubicInOut } from "svelte/easing";
|
|
9
|
+
|
|
10
|
+
export let data = {};
|
|
11
|
+
let id = makeIdString(data.name);
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
heading,
|
|
15
|
+
text,
|
|
16
|
+
color,
|
|
17
|
+
image,
|
|
18
|
+
button, //Follows format of Button.svelte
|
|
19
|
+
icon,
|
|
20
|
+
testimonial,
|
|
21
|
+
textPosition
|
|
22
|
+
} = data;
|
|
23
|
+
|
|
24
|
+
// Initialize Text Position if left undefined
|
|
25
|
+
textPosition = textPosition ? textPosition : "left"
|
|
26
|
+
|
|
27
|
+
// Detect if the heading is visible, then trigger animations
|
|
28
|
+
let scrollTargetVisible = writable(false);
|
|
29
|
+
onMount(() => {
|
|
30
|
+
let scrollTarget = document.getElementById(id + "image");
|
|
31
|
+
|
|
32
|
+
function updateVisibility() {
|
|
33
|
+
var rect = scrollTarget.getBoundingClientRect();
|
|
34
|
+
|
|
35
|
+
let topVisible = (rect.top >= 0) && (rect.top <= window.innerHeight);
|
|
36
|
+
let bottomVisible = rect.bottom <= window.innerHeight
|
|
37
|
+
|
|
38
|
+
console.log()
|
|
39
|
+
scrollTargetVisible.update(_ => (topVisible) || (bottomVisible));
|
|
40
|
+
}
|
|
41
|
+
updateVisibility();
|
|
42
|
+
|
|
43
|
+
addEventListener("scroll", (event) => {
|
|
44
|
+
updateVisibility()
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
</script>
|
|
49
|
+
|
|
50
|
+
<div id={id} class="relative overflow-hidden pb-32 pt-16">
|
|
51
|
+
|
|
52
|
+
<div class="relative">
|
|
53
|
+
<div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
|
|
54
|
+
|
|
55
|
+
<!-- Text -->
|
|
56
|
+
<div class="mx-auto max-w-xl px-6 lg:mx-0 lg:max-w-none lg:px-0 lg:py-16 {textPosition == "left" ? "" : "lg-col-start-2"}">
|
|
57
|
+
<div>
|
|
58
|
+
|
|
59
|
+
<!-- Icon -->
|
|
60
|
+
{#if icon && $scrollTargetVisible}
|
|
61
|
+
<div
|
|
62
|
+
class="hidden sm:flex size-16 items-center justify-center sm:shrink-0 flex-shrink-0 {getColorStyles("background", color)} text-3xl"
|
|
63
|
+
in:fade={{delay: 200, duration: 500, easing:cubicInOut}}
|
|
64
|
+
out:fade={{delay: 200, duration: 500, easing:cubicInOut}}
|
|
65
|
+
>
|
|
66
|
+
<Icon icon={icon.name} classes={"m-8 " + (icon.classes != undefined ? icon.classes : "")}/>
|
|
67
|
+
</div>
|
|
68
|
+
{/if}
|
|
69
|
+
|
|
70
|
+
<!-- Heading, Text, and Button -->
|
|
71
|
+
{#if $scrollTargetVisible}
|
|
72
|
+
<div
|
|
73
|
+
class="mt-6"
|
|
74
|
+
in:fade={{delay: 200, duration: 500, easing:cubicInOut}}
|
|
75
|
+
out:fade={{delay: 200, duration: 500, easing:cubicInOut}}
|
|
76
|
+
>
|
|
77
|
+
<h2 class="text-3xl font-bold tracking-tight text-gray-900">{heading}</h2>
|
|
78
|
+
<p class="mt-4 text-lg text-gray-500">{text}</p>
|
|
79
|
+
<div class="mt-6">
|
|
80
|
+
<Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
{/if}
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<!-- Testimonial -->
|
|
87
|
+
{#if testimonial && $scrollTargetVisible}
|
|
88
|
+
<div
|
|
89
|
+
class="mt-8 border-t border-gray-200 pt-6"
|
|
90
|
+
in:fly={{ delay: 300, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
|
|
91
|
+
out:fly={{ delay: 300, duration: 1250, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '100%' }}
|
|
92
|
+
>
|
|
93
|
+
<blockquote>
|
|
94
|
+
<div>
|
|
95
|
+
<p class="text-base text-gray-500">{testimonial.text}</p>
|
|
96
|
+
</div>
|
|
97
|
+
<footer class="mt-3">
|
|
98
|
+
<div class="flex items-center space-x-3">
|
|
99
|
+
<img
|
|
100
|
+
class="size-6 rounded-full"
|
|
101
|
+
src="https://files.thunderheadeng.com/www/images/{testimonial.image}?w=320&fit=facearea,crop&facepad=3&monochrome=9B9B9B&auto=compress&auto=format"
|
|
102
|
+
alt="Image of {testimonial.name}"
|
|
103
|
+
title="{testimonial.name}"
|
|
104
|
+
/>
|
|
105
|
+
<div class="text-base font-medium text-gray-700">{testimonial.name}</div>
|
|
106
|
+
</div>
|
|
107
|
+
</footer>
|
|
108
|
+
</blockquote>
|
|
109
|
+
</div>
|
|
110
|
+
{/if}
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
<!-- Image -->
|
|
115
|
+
<div id={id + "image"} class="mt-12 sm:mt-16 lg:mt-0 {textPosition == "left" ? "" : "lg:col-start-1"}"
|
|
116
|
+
>
|
|
117
|
+
{#if $scrollTargetVisible}
|
|
118
|
+
<div
|
|
119
|
+
class="{textPosition == "left" ? "-mr-48 pl-6 md:-mr-16" : "-ml-48 pr-6 md:-ml-16"} lg:relative lg:m-0 lg:h-full lg:px-0"
|
|
120
|
+
in:fly={{ delay: 200, duration: 750, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
|
|
121
|
+
out:fly={{ delay: 200, duration: 750, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
|
|
122
|
+
>
|
|
123
|
+
<img class="w-full shadow-xl ring-1 ring-black/5 lg:absolute {textPosition == "left" ? "lg:left-0" : "right-0"} lg:h-full lg:w-auto lg:max-w-none" src={image.url} alt={image.alt}>
|
|
124
|
+
</div>
|
|
125
|
+
{/if}
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} FeatureAlternatingWithTestimonialProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} FeatureAlternatingWithTestimonialEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} FeatureAlternatingWithTestimonialSlots */
|
|
4
|
+
export default class FeatureAlternatingWithTestimonial extends SvelteComponent<{
|
|
5
|
+
data?: {};
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type FeatureAlternatingWithTestimonialProps = typeof __propDef.props;
|
|
11
|
+
export type FeatureAlternatingWithTestimonialEvents = typeof __propDef.events;
|
|
12
|
+
export type FeatureAlternatingWithTestimonialSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
data?: {};
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
exports?: {};
|
|
23
|
+
bindings?: string;
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Accordion from "../components/Accordion.svelte";
|
|
3
|
+
import BentoBox from "../components/BentoBox.svelte";
|
|
3
4
|
import CTA from "../components/CTA.svelte";
|
|
4
5
|
import HeadingCentered from "../components/HeadingCentered.svelte";
|
|
5
6
|
import MediaFeature from "../components/MediaFeature.svelte";
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
import Hero from "../components/Hero.svelte";
|
|
13
14
|
import FeatureGrid from "../components/FeatureGrid.svelte";
|
|
14
15
|
import FeatureTable from "../components/FeatureTable.svelte";
|
|
16
|
+
import FeatureAlternatingWithTestimonial from "../components/FeatureAlternatingWithTestimonial.svelte";
|
|
15
17
|
import LogoCloud from "../components/LogoCloud.svelte";
|
|
16
18
|
import CTASplitImage from "../components/CTASplitImage.svelte";
|
|
17
19
|
import ContentTwoColumns from "../components/ContentTwoColumns.svelte";
|
|
@@ -24,7 +26,8 @@
|
|
|
24
26
|
import Carousel from "../components/Carousel.svelte";
|
|
25
27
|
|
|
26
28
|
let blocks = [
|
|
27
|
-
{ ref: "accordion", component: Accordion},
|
|
29
|
+
{ ref: "accordion", component: Accordion },
|
|
30
|
+
{ ref: "bento", component: BentoBox },
|
|
28
31
|
{ ref: "cta", component: CTA },
|
|
29
32
|
{ ref: "heading-centered", component: HeadingCentered },
|
|
30
33
|
{ ref: "media-feature", component: MediaFeature },
|
|
@@ -37,6 +40,7 @@
|
|
|
37
40
|
{ ref: "hero", component: Hero },
|
|
38
41
|
{ ref: "feature-grid", component: FeatureGrid },
|
|
39
42
|
{ ref: "feature-table", component: FeatureTable },
|
|
43
|
+
{ ref: "feature-alternating", component: FeatureAlternatingWithTestimonial },
|
|
40
44
|
{ ref: "logo-cloud", component: LogoCloud },
|
|
41
45
|
{ ref: "cta-split-image", component: CTASplitImage },
|
|
42
46
|
{ ref: "content-two-columns", component: ContentTwoColumns },
|
package/dist/utils.js
CHANGED
|
@@ -48,140 +48,140 @@ export function getColorStyles(type, color){
|
|
|
48
48
|
break;
|
|
49
49
|
}
|
|
50
50
|
break;
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
51
|
+
case 'background':
|
|
52
|
+
switch (color) {
|
|
53
|
+
case 'pyrosim':
|
|
54
|
+
classes = "bg-pyrosim text-white"
|
|
55
|
+
break;
|
|
56
|
+
case 'pathfinder':
|
|
57
|
+
classes = "bg-pathfinder text-white"
|
|
58
|
+
break;
|
|
59
|
+
case 'ventus':
|
|
60
|
+
classes = "bg-ventus text-white"
|
|
61
|
+
break;
|
|
62
|
+
case 'teci':
|
|
63
|
+
classes = "bg-teci-blue-light text-white"
|
|
64
|
+
break;
|
|
65
|
+
default:
|
|
66
|
+
classes = "bg-white"
|
|
67
|
+
break;
|
|
68
|
+
}
|
|
69
|
+
break;
|
|
70
|
+
case 'border':
|
|
71
|
+
switch (color) {
|
|
72
|
+
case 'pyrosim':
|
|
73
|
+
classes = "border-pyrosim"
|
|
74
|
+
break;
|
|
75
|
+
case 'pathfinder':
|
|
76
|
+
classes = "border-pathfinder"
|
|
77
|
+
break;
|
|
78
|
+
case 'ventus':
|
|
79
|
+
classes = "border-ventus"
|
|
80
|
+
break;
|
|
81
|
+
case 'teci':
|
|
82
|
+
classes = "border-teci-blue-light"
|
|
83
|
+
break;
|
|
84
|
+
default:
|
|
85
|
+
classes = "border-white"
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
88
|
+
break;
|
|
89
|
+
case 'border-t':
|
|
90
|
+
switch (color) {
|
|
91
|
+
case 'pyrosim':
|
|
92
|
+
classes = "border-t-pyrosim"
|
|
93
|
+
break;
|
|
94
|
+
case 'pathfinder':
|
|
95
|
+
classes = "border-t-pathfinder"
|
|
96
|
+
break;
|
|
97
|
+
case 'ventus':
|
|
98
|
+
classes = "border-t-ventus"
|
|
99
|
+
break;
|
|
100
|
+
case 'teci':
|
|
101
|
+
classes = "border-t-teci-blue-light"
|
|
102
|
+
break;
|
|
103
|
+
default:
|
|
104
|
+
classes = "border-t-white"
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
break;
|
|
108
|
+
case 'border-b':
|
|
109
|
+
switch (color) {
|
|
110
|
+
case 'pyrosim':
|
|
111
|
+
classes = "border-b-pyrosim"
|
|
112
|
+
break;
|
|
113
|
+
case 'pathfinder':
|
|
114
|
+
classes = "border-b-pathfinder"
|
|
115
|
+
break;
|
|
116
|
+
case 'ventus':
|
|
117
|
+
classes = "border-b-ventus"
|
|
118
|
+
break;
|
|
119
|
+
case 'teci':
|
|
120
|
+
classes = "border-b-teci-blue-light"
|
|
121
|
+
break;
|
|
122
|
+
default:
|
|
123
|
+
classes = "border-b-white"
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
break;
|
|
127
|
+
case 'border-x':
|
|
128
|
+
switch (color) {
|
|
129
|
+
case 'pyrosim':
|
|
130
|
+
classes = "border-x-pyrosim"
|
|
131
|
+
break;
|
|
132
|
+
case 'pathfinder':
|
|
133
|
+
classes = "border-x-pathfinder"
|
|
134
|
+
break;
|
|
135
|
+
case 'ventus':
|
|
136
|
+
classes = "border-x-ventus"
|
|
137
|
+
break;
|
|
138
|
+
case 'teci':
|
|
139
|
+
classes = "border-x-teci-blue-light"
|
|
140
|
+
break;
|
|
141
|
+
default:
|
|
142
|
+
classes = "border-x-white"
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
break;
|
|
146
|
+
case 'gradient':
|
|
147
|
+
switch (color) {
|
|
148
|
+
case 'pyrosim':
|
|
149
|
+
classes = "from-pyrosim to-white"
|
|
150
|
+
break;
|
|
151
|
+
case 'pathfinder':
|
|
152
|
+
classes = "from-pathfinder to-white"
|
|
153
|
+
break;
|
|
154
|
+
case 'ventus':
|
|
155
|
+
classes = "from-ventus to-white"
|
|
156
|
+
break;
|
|
157
|
+
case 'teci':
|
|
158
|
+
classes = "from-teci-blue-light to-white"
|
|
159
|
+
break;
|
|
160
|
+
default:
|
|
161
|
+
classes = "bg-white"
|
|
162
|
+
break;
|
|
163
|
+
}
|
|
164
|
+
break;
|
|
165
|
+
case 'gradient-dark':
|
|
166
|
+
switch (color) {
|
|
167
|
+
case 'pyrosim':
|
|
168
|
+
classes = "from-pyrosim-dark to-gray-800/30"
|
|
169
|
+
break;
|
|
170
|
+
case 'pathfinder':
|
|
171
|
+
classes = "from-pathfinder-dark to-gray-800/30"
|
|
172
|
+
break;
|
|
173
|
+
case 'ventus':
|
|
174
|
+
classes = "from-ventus-dark to-gray-800/30"
|
|
175
|
+
break;
|
|
176
|
+
case 'teci':
|
|
177
|
+
classes = "from-teci-blue-dark to-gray-800/30"
|
|
178
|
+
break;
|
|
179
|
+
default:
|
|
180
|
+
classes = "bg-white"
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
break;
|
|
184
|
+
case 'ring':
|
|
185
185
|
switch (color) {
|
|
186
186
|
case 'pyrosim':
|
|
187
187
|
classes = "ring-pyrosim"
|