@functionalcms/svelte-components 2.1.0 → 2.1.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.
- package/dist/components/Card.svelte +137 -0
- package/dist/components/Card.svelte.d.ts +49 -0
- package/dist/css/properties.css +56 -13
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +1 -1
- package/dist/components/Box.svelte +0 -21
- package/dist/components/Box.svelte.d.ts +0 -27
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
/**
|
|
3
|
+
* Cards
|
|
4
|
+
*
|
|
5
|
+
* I drew some inspiration from the article on media-query less cards:
|
|
6
|
+
* https://css-tricks.com/how-to-make-a-media-query-less-card-component/
|
|
7
|
+
*/
|
|
8
|
+
.card,
|
|
9
|
+
.card-base {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-wrap: wrap;
|
|
12
|
+
align-items: center;
|
|
13
|
+
position: relative;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
width: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.card-border {
|
|
19
|
+
border: 1px solid var(--functional-card-border-color, var(--functional-gray-light));
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.card-rounded {
|
|
23
|
+
border-radius: var(--functional-radius, 0.25rem);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.card-shadow {
|
|
27
|
+
box-shadow:
|
|
28
|
+
var(--functional-card-boxshadow1-offset-x, 0)
|
|
29
|
+
var(--functional-card-boxshadow1-offset-y, 0.375rem)
|
|
30
|
+
var(--functional-card-boxshadow1-blur, 0.5625rem)
|
|
31
|
+
var(--functional-card-boxshadow1-color, rgb(6 6 6 / 7.5%)),
|
|
32
|
+
var(--functional-card-boxshadow2-offset-x, 0) var(--functional-card-boxshadow2-offset-y, 0)
|
|
33
|
+
var(--functional-card-boxshadow2-blur, 1px)
|
|
34
|
+
var(--functional-card-boxshadow2-color, rgb(5 5 5 / 10%));
|
|
35
|
+
border-radius: var(--functional-card-border-radius, var(--functional-radius, 0.25rem));
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.card-shadow:hover {
|
|
40
|
+
box-shadow:
|
|
41
|
+
var(--functional-card-boxshadow1-offset-x, 0)
|
|
42
|
+
var(--functional-card-boxshadow1-offset-y, 0.375rem)
|
|
43
|
+
var(--functional-card-boxshadow1-blur, 0.875rem)
|
|
44
|
+
var(--functional-card-boxshadow1-color, rgb(4 4 4 / 10%)),
|
|
45
|
+
var(--functional-card-boxshadow2-offset-x, 0) var(--functional-card-boxshadow2-offset-y, 0)
|
|
46
|
+
var(--functional-card-boxshadow2-blur, 2px)
|
|
47
|
+
var(--functional-card-boxshadow2-color, rgb(3 3 3 / 10%));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Animates the y position and box shadow on hover
|
|
52
|
+
*/
|
|
53
|
+
.card-animated {
|
|
54
|
+
transition:
|
|
55
|
+
box-shadow ease-out 5s,
|
|
56
|
+
transform var(--functional-timing-fast)
|
|
57
|
+
cubic-bezier(
|
|
58
|
+
var(--functional-card-cubic-1, 0.39),
|
|
59
|
+
var(--functional-card-cubic-2, 0.575),
|
|
60
|
+
var(--functional-card-cubic-3, 0.565),
|
|
61
|
+
var(--functional-card-cubic-4, 1)
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.card-animated:hover {
|
|
66
|
+
transform: translateY(var(--functional-card-translate-y-hover, -3px));
|
|
67
|
+
transition:
|
|
68
|
+
box-shadow ease-out var(--functional-timing-fast),
|
|
69
|
+
transform var(--functional-timing-slow)
|
|
70
|
+
cubic-bezier(
|
|
71
|
+
var(--functional-card-cubic-1, 0.39),
|
|
72
|
+
var(--functional-card-cubic-2, 0.575),
|
|
73
|
+
var(--functional-card-cubic-3, 0.565),
|
|
74
|
+
var(--functional-card-cubic-4, 1)
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@media (prefers-reduced-motion), (update: slow) {
|
|
79
|
+
.card-animated,
|
|
80
|
+
.card-animated:hover {
|
|
81
|
+
transition-duration: 0.001ms !important;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.card-stacked {
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.card-success {
|
|
90
|
+
background: var(--functional-action-light);
|
|
91
|
+
color: var(--functional-action-dark);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.card-info {
|
|
95
|
+
background: var(--functional-primary-light);
|
|
96
|
+
color: var(--functional-primary-dark);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.card-error {
|
|
100
|
+
background: var(--functional-error-light);
|
|
101
|
+
color: var(--functional-error-dark);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card-warning {
|
|
105
|
+
background: var(--functional-warning-light);
|
|
106
|
+
color: var(--functional-warning-dark);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
</style>
|
|
110
|
+
|
|
111
|
+
<script>
|
|
112
|
+
export let isAnimated = false;
|
|
113
|
+
export let isSkinned = true;
|
|
114
|
+
export let isStacked = false;
|
|
115
|
+
export let isShadow = false;
|
|
116
|
+
export let isBorder = false;
|
|
117
|
+
export let isRounded = false;
|
|
118
|
+
export let type = "";
|
|
119
|
+
export let css = "";
|
|
120
|
+
|
|
121
|
+
let klasses = [
|
|
122
|
+
isSkinned ? "card" : "card-base",
|
|
123
|
+
isAnimated ? "card-animated" : "",
|
|
124
|
+
isStacked ? "card-stacked" : "",
|
|
125
|
+
isShadow ? "card-shadow" : "",
|
|
126
|
+
isRounded ? "card-rounded" : "",
|
|
127
|
+
isBorder ? "card-border" : "",
|
|
128
|
+
type ? `card-${type}` : "",
|
|
129
|
+
css ? `${css}` : "",
|
|
130
|
+
]
|
|
131
|
+
.filter((klass) => klass.length)
|
|
132
|
+
.join(" ");
|
|
133
|
+
</script>
|
|
134
|
+
|
|
135
|
+
<div class={klasses} on:click on:focus on:blur>
|
|
136
|
+
<slot />
|
|
137
|
+
</div>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} CardProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} CardEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} CardSlots */
|
|
4
|
+
export default class Card extends SvelteComponent<{
|
|
5
|
+
type?: string | undefined;
|
|
6
|
+
css?: string | undefined;
|
|
7
|
+
isAnimated?: boolean | undefined;
|
|
8
|
+
isSkinned?: boolean | undefined;
|
|
9
|
+
isStacked?: boolean | undefined;
|
|
10
|
+
isShadow?: boolean | undefined;
|
|
11
|
+
isBorder?: boolean | undefined;
|
|
12
|
+
isRounded?: boolean | undefined;
|
|
13
|
+
}, {
|
|
14
|
+
click: MouseEvent;
|
|
15
|
+
focus: FocusEvent;
|
|
16
|
+
blur: FocusEvent;
|
|
17
|
+
} & {
|
|
18
|
+
[evt: string]: CustomEvent<any>;
|
|
19
|
+
}, {
|
|
20
|
+
default: {};
|
|
21
|
+
}> {
|
|
22
|
+
}
|
|
23
|
+
export type CardProps = typeof __propDef.props;
|
|
24
|
+
export type CardEvents = typeof __propDef.events;
|
|
25
|
+
export type CardSlots = typeof __propDef.slots;
|
|
26
|
+
import { SvelteComponent } from "svelte";
|
|
27
|
+
declare const __propDef: {
|
|
28
|
+
props: {
|
|
29
|
+
type?: string | undefined;
|
|
30
|
+
css?: string | undefined;
|
|
31
|
+
isAnimated?: boolean | undefined;
|
|
32
|
+
isSkinned?: boolean | undefined;
|
|
33
|
+
isStacked?: boolean | undefined;
|
|
34
|
+
isShadow?: boolean | undefined;
|
|
35
|
+
isBorder?: boolean | undefined;
|
|
36
|
+
isRounded?: boolean | undefined;
|
|
37
|
+
};
|
|
38
|
+
events: {
|
|
39
|
+
click: MouseEvent;
|
|
40
|
+
focus: FocusEvent;
|
|
41
|
+
blur: FocusEvent;
|
|
42
|
+
} & {
|
|
43
|
+
[evt: string]: CustomEvent<any>;
|
|
44
|
+
};
|
|
45
|
+
slots: {
|
|
46
|
+
default: {};
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
export {};
|
package/dist/css/properties.css
CHANGED
|
@@ -1,24 +1,39 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* In light mode we willl have white text against a dark green background. */
|
|
3
|
+
--functional-light-modelight: white;
|
|
4
|
+
--functional-primary-modelight: #053337;
|
|
5
|
+
--functional-primary-hover-modelight: #0a474c;
|
|
6
|
+
/* In dark mode we'll invert the text color and use a much lighter shade of green */
|
|
7
|
+
--functional-primary-modedark: #12adba;
|
|
8
|
+
--functional-light-modedark: black;
|
|
9
|
+
--functional-primary-hover-modedark: #1ec3d1;
|
|
10
|
+
}
|
|
1
11
|
:root {
|
|
2
12
|
--functional-content-width: 70%;
|
|
3
|
-
|
|
4
13
|
--functional-logo-display: inline-block;
|
|
5
|
-
|
|
6
|
-
--functional-primary-color: black;
|
|
7
|
-
--functional-secondary-color: #888;
|
|
8
|
-
--functional-background-color: #fff;
|
|
9
|
-
|
|
10
|
-
--agnostic-primary-modelight: var(--primary-colour);
|
|
11
|
-
--agnostic-primary-modedark: var(--primary-colour);
|
|
12
|
-
|
|
13
|
-
--agnostic-radius: 2em;
|
|
14
|
-
|
|
15
14
|
--well-margin-size: 15%;
|
|
15
|
+
--functional-radius: 2em;
|
|
16
|
+
--functional-timing-fast: 200ms;
|
|
17
|
+
}
|
|
18
|
+
:root {
|
|
19
|
+
[color-scheme="light"] {
|
|
20
|
+
color-scheme: light;
|
|
21
|
+
--functional-primary-color: var(--functional-light-modelight);
|
|
22
|
+
}
|
|
23
|
+
[color-scheme="dark"] {
|
|
24
|
+
color-scheme: dark;
|
|
25
|
+
--functional-primary-color: var(--functional-light-modelight);
|
|
26
|
+
}
|
|
16
27
|
}
|
|
17
28
|
/**
|
|
18
29
|
* define agnostic varaibles based on Functional ones
|
|
19
30
|
**/
|
|
20
|
-
:root {
|
|
21
|
-
--agnostic-
|
|
31
|
+
:root {
|
|
32
|
+
--agnostic-primary-modelight: var(--functional-primary-modelight);
|
|
33
|
+
--agnostic-primary-modedark: var(--functional-primary-modedark);
|
|
34
|
+
|
|
35
|
+
--agnostic-radius: var(--functional-radius);
|
|
36
|
+
--agnostic-timing-fast: var(--functional-timing-fast);
|
|
22
37
|
}
|
|
23
38
|
/**
|
|
24
39
|
* Banner variables
|
|
@@ -68,6 +83,34 @@
|
|
|
68
83
|
--functional-menu-item-selected-border-bottom: 6px solid var(--functional-primary-color);
|
|
69
84
|
--functional-menu-item-selected-border-left: none;
|
|
70
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* Card variables
|
|
88
|
+
**/
|
|
89
|
+
:root {
|
|
90
|
+
--functional-card-border-color: var(--functional-primary-color);
|
|
91
|
+
--functional-card-boxshadow1-offset-x: 0;
|
|
92
|
+
--functional-card-boxshadow1-offset-y: 0.375rem;
|
|
93
|
+
--functional-card-boxshadow1-blur: 0.5625rem;
|
|
94
|
+
--functional-card-boxshadow1-color: rgb(6 6 6 / 7.5%);
|
|
95
|
+
--functional-card-boxshadow2-offset-x: 0;
|
|
96
|
+
--functional-card-boxshadow2-offset-y: 0;
|
|
97
|
+
--functional-card-boxshadow2-blur: 1px;
|
|
98
|
+
--functional-card-boxshadow2-color: rgb(5 5 5 / 10%);
|
|
99
|
+
--functional-card-border-radius: var(--functional-radius: 0.25rem);
|
|
100
|
+
--functional-card-boxshadow1-offset-x: 0;
|
|
101
|
+
--functional-card-boxshadow1-offset-y: 0.375rem;
|
|
102
|
+
--functional-card-boxshadow1-blur: 0.875rem;
|
|
103
|
+
--functional-card-boxshadow1-color: rgb(4 4 4 / 10%);
|
|
104
|
+
--functional-card-boxshadow2-offset-x: 0;
|
|
105
|
+
--functional-card-boxshadow2-offset-y: 0;
|
|
106
|
+
--functional-card-boxshadow2-blur: 2px;
|
|
107
|
+
--functional-card-boxshadow2-color: rgb(3 3 3 / 10%);
|
|
108
|
+
--functional-card-cubic-1: 0.39;
|
|
109
|
+
--functional-card-cubic-2: 0.575;
|
|
110
|
+
--functional-card-cubic-3: 0.565;
|
|
111
|
+
--functional-card-cubic-4: 1;
|
|
112
|
+
--functional-card-translate-y-hover: -3px;
|
|
113
|
+
}
|
|
71
114
|
|
|
72
115
|
html, body, body > div { height: 100%; }
|
|
73
116
|
|
package/dist/index.d.ts
CHANGED
|
@@ -2,10 +2,11 @@ import FlatMenu from './components/menu/FlatMenu.svelte';
|
|
|
2
2
|
import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
|
|
3
3
|
import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
|
|
4
4
|
import Banner from './components/Banner.svelte';
|
|
5
|
+
import Card from './components/Card.svelte';
|
|
5
6
|
import Layout from './components/Layout.svelte';
|
|
6
7
|
import Logo from './components/Logo.svelte';
|
|
7
8
|
import SimpleFooter from './components/SimpleFooter.svelte';
|
|
8
9
|
import Spacer from './components/Spacer.svelte';
|
|
9
10
|
import Well from './components/Well.svelte';
|
|
10
11
|
import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
|
|
11
|
-
export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };
|
|
12
|
+
export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Card, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };
|
package/dist/index.js
CHANGED
|
@@ -3,10 +3,11 @@ import FlatMenu from './components/menu/FlatMenu.svelte';
|
|
|
3
3
|
import HamburgerMenu from './components/menu/HamburgerMenu.svelte';
|
|
4
4
|
import { Visiblity, HeaderNavigationItem } from './components/menu/Menu.js';
|
|
5
5
|
import Banner from './components/Banner.svelte';
|
|
6
|
+
import Card from './components/Card.svelte';
|
|
6
7
|
import Layout from './components/Layout.svelte';
|
|
7
8
|
import Logo from './components/Logo.svelte';
|
|
8
9
|
import SimpleFooter from './components/SimpleFooter.svelte';
|
|
9
10
|
import Spacer from './components/Spacer.svelte';
|
|
10
11
|
import Well from './components/Well.svelte';
|
|
11
12
|
import { Justify, Placement, Orientation, Position, Sizes } from './components/Styling.js';
|
|
12
|
-
export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };
|
|
13
|
+
export { FlatMenu, HamburgerMenu, Visiblity, HeaderNavigationItem, Banner, Card, Layout, Logo, SimpleFooter, Spacer, Well, Justify, Placement, Orientation, Position, Sizes };
|
package/package.json
CHANGED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<script>export let url;
|
|
2
|
-
export let logoSrc;
|
|
3
|
-
export let logoAlt;
|
|
4
|
-
</script>
|
|
5
|
-
|
|
6
|
-
<article class="box">
|
|
7
|
-
<a href={url}>
|
|
8
|
-
<img class="img" src={logoSrc} alt={logoAlt} />
|
|
9
|
-
</a>
|
|
10
|
-
<h1 class="pbs32 pbe32 pis32 pie32">
|
|
11
|
-
<a href={url}>
|
|
12
|
-
<slot name="header" />
|
|
13
|
-
</a>
|
|
14
|
-
</h1>
|
|
15
|
-
<p class="card-demo-desc mbe24">
|
|
16
|
-
<slot />
|
|
17
|
-
</p>
|
|
18
|
-
</article>
|
|
19
|
-
|
|
20
|
-
<style>
|
|
21
|
-
</style>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
|
2
|
-
declare const __propDef: {
|
|
3
|
-
props: {
|
|
4
|
-
/**
|
|
5
|
-
* @type {string}
|
|
6
|
-
*/ url: string;
|
|
7
|
-
/**
|
|
8
|
-
* @type {url}
|
|
9
|
-
*/ logoSrc: string;
|
|
10
|
-
/**
|
|
11
|
-
* @type {string}
|
|
12
|
-
*/ logoAlt: string;
|
|
13
|
-
};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {
|
|
18
|
-
header: {};
|
|
19
|
-
default: {};
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
export type BoxProps = typeof __propDef.props;
|
|
23
|
-
export type BoxEvents = typeof __propDef.events;
|
|
24
|
-
export type BoxSlots = typeof __propDef.slots;
|
|
25
|
-
export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {
|
|
26
|
-
}
|
|
27
|
-
export {};
|