cclkit4svelte 0.1.5 → 0.1.6
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/Card.svelte +69 -0
- package/dist/Card.svelte.d.ts +41 -0
- package/dist/const/config.d.ts +1 -1
- package/dist/const/config.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/dist/Card.svelte
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<script>export let borderColor;
|
|
2
|
+
export let bgColor;
|
|
3
|
+
export let src;
|
|
4
|
+
export let altText;
|
|
5
|
+
export let title;
|
|
6
|
+
export let cardText;
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<div class="CardWrapper" style="--border-color: var({borderColor})">
|
|
10
|
+
<img class="CardImage" src={src} alt={altText} />
|
|
11
|
+
<div class="CardInfo" style="--background-color: var({bgColor});">
|
|
12
|
+
<div class="CardTextWrapper">
|
|
13
|
+
<h2 class="CardTitle">{title}</h2>
|
|
14
|
+
<span class="CardText">{cardText}</span>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
.CardWrapper {
|
|
22
|
+
height: 500px;
|
|
23
|
+
width: 300px;
|
|
24
|
+
position: relative;
|
|
25
|
+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); border-radius: 25px;
|
|
26
|
+
border: 5px solid var(--border-color);
|
|
27
|
+
z-index: -1;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.CardImage {
|
|
31
|
+
height: auto;
|
|
32
|
+
max-width: 100%;
|
|
33
|
+
top: 0;
|
|
34
|
+
position: absolute;
|
|
35
|
+
border-top-left-radius: 20px;
|
|
36
|
+
border-top-right-radius: 20px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.CardInfo {
|
|
40
|
+
height: 195px;
|
|
41
|
+
width: 300px;
|
|
42
|
+
position: absolute;
|
|
43
|
+
background: var(--background-color);
|
|
44
|
+
top: 300px;
|
|
45
|
+
border-bottom-left-radius: 20px;
|
|
46
|
+
border-bottom-right-radius: 20px;
|
|
47
|
+
border-top: 5px solid var(--border-color);
|
|
48
|
+
z-index: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.CardTextWrapper {
|
|
52
|
+
height: auto;
|
|
53
|
+
max-width: 95%;
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: -5%;
|
|
56
|
+
left: 5%;
|
|
57
|
+
overflow-wrap: break-word;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.CardTitle {
|
|
61
|
+
color: var(--border-color);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.CardText {
|
|
65
|
+
color: var(--wrap-grey);
|
|
66
|
+
text-overflow: ellipsis;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
</style>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
/**
|
|
5
|
+
* 枠線の色
|
|
6
|
+
* @default --strawberry-pink
|
|
7
|
+
* @type string
|
|
8
|
+
*/ borderColor: string;
|
|
9
|
+
/**
|
|
10
|
+
* 説明文の背景色
|
|
11
|
+
* @default --peach-pink
|
|
12
|
+
* @type string
|
|
13
|
+
*/ bgColor: string;
|
|
14
|
+
/**
|
|
15
|
+
* 画像ソース
|
|
16
|
+
* @type string
|
|
17
|
+
*/ src: string;
|
|
18
|
+
/**
|
|
19
|
+
* alt属性に指定する値
|
|
20
|
+
* @type string
|
|
21
|
+
*/ altText: string;
|
|
22
|
+
/**
|
|
23
|
+
* 記事の見出し
|
|
24
|
+
* @type string
|
|
25
|
+
*/ title: string;
|
|
26
|
+
/**
|
|
27
|
+
* カードの詳細テキスト(140字程度推奨)
|
|
28
|
+
* @type string
|
|
29
|
+
*/ cardText: string;
|
|
30
|
+
};
|
|
31
|
+
events: {
|
|
32
|
+
[evt: string]: CustomEvent<any>;
|
|
33
|
+
};
|
|
34
|
+
slots: {};
|
|
35
|
+
};
|
|
36
|
+
export type CardProps = typeof __propDef.props;
|
|
37
|
+
export type CardEvents = typeof __propDef.events;
|
|
38
|
+
export type CardSlots = typeof __propDef.slots;
|
|
39
|
+
export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
|
|
40
|
+
}
|
|
41
|
+
export {};
|
package/dist/const/config.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export declare const CCLVividColor: {
|
|
|
7
7
|
readonly WRAP_GREY: "--wrap-grey";
|
|
8
8
|
};
|
|
9
9
|
export declare const CCLPastelColor: {
|
|
10
|
-
readonly PEACH_PINK: "--peach-
|
|
10
|
+
readonly PEACH_PINK: "--peach-pink";
|
|
11
11
|
readonly LEMON_YELLOW: "--lemon-yellow";
|
|
12
12
|
readonly SUGAR_BLUE: "--sugar-blue";
|
|
13
13
|
readonly MATCHA_GREEN: "--matcha-green";
|
package/dist/const/config.js
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED