cclkit4svelte 0.1.4-c → 0.1.5
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/Button.svelte +2 -1
- package/dist/Footer.svelte +3 -1
- package/dist/Header.svelte +3 -1
- package/dist/Thumbnail.svelte +23 -0
- package/dist/Thumbnail.svelte.d.ts +32 -0
- package/dist/const/variables.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/dist/Button.svelte
CHANGED
|
@@ -3,7 +3,7 @@ export let label;
|
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
5
|
<!--汎用ボタン-->
|
|
6
|
-
<button class="buttonWrapper" style="
|
|
6
|
+
<button class="buttonWrapper" style="--bgColor: var({bgColor})"><span class="btLabel">{label}</span></button>
|
|
7
7
|
|
|
8
8
|
<style>
|
|
9
9
|
.buttonWrapper {
|
|
@@ -11,6 +11,7 @@ export let label;
|
|
|
11
11
|
border-radius: 50px;
|
|
12
12
|
border: none;
|
|
13
13
|
padding: 15px 45px;
|
|
14
|
+
background: var(--bgColor);
|
|
14
15
|
}
|
|
15
16
|
.btLabel {
|
|
16
17
|
flex-direction: column;
|
package/dist/Footer.svelte
CHANGED
|
@@ -5,18 +5,20 @@ const year = date.getFullYear();
|
|
|
5
5
|
|
|
6
6
|
<!--汎用フッター-->
|
|
7
7
|
<footer>
|
|
8
|
-
<div class="wrapper" style="
|
|
8
|
+
<div class="wrapper" style="--bgColor: var({bgColor});">
|
|
9
9
|
<span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
|
|
10
10
|
</div>
|
|
11
11
|
</footer>
|
|
12
12
|
|
|
13
13
|
<style>
|
|
14
|
+
|
|
14
15
|
.wrapper {
|
|
15
16
|
display: flex;
|
|
16
17
|
padding: 0 298px;
|
|
17
18
|
height: 30px;
|
|
18
19
|
justify-content: center;
|
|
19
20
|
align-items: center;
|
|
21
|
+
background: var(--bgColor);
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
.copy {
|
package/dist/Header.svelte
CHANGED
|
@@ -4,7 +4,7 @@ export let height;
|
|
|
4
4
|
|
|
5
5
|
<!--汎用ヘッダー-->
|
|
6
6
|
<header>
|
|
7
|
-
<div class="wrapper" style="
|
|
7
|
+
<div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
|
|
8
8
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
|
|
9
9
|
<title>CANDY CHUPS Lab.</title>
|
|
10
10
|
<path class="a"
|
|
@@ -45,6 +45,8 @@ export let height;
|
|
|
45
45
|
padding: 0 298px;
|
|
46
46
|
justify-content: center;
|
|
47
47
|
align-items: center;
|
|
48
|
+
background: var(--bgColor);
|
|
49
|
+
height: var(--height);
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
svg {
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script>export let imageSize;
|
|
2
|
+
export let borderColor;
|
|
3
|
+
export let src;
|
|
4
|
+
export let altText;
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div class="ThumbnailWrapper" style="--imageSize: {imageSize}">
|
|
8
|
+
<img src={src} alt={altText} class="Thumbnail" style="--borderColor: var({borderColor})" />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
.ThumbnailWrapper {
|
|
13
|
+
height: var(--imageSize);
|
|
14
|
+
width: var(--imageSize);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.Thumbnail {
|
|
18
|
+
height: var(--imageSize);
|
|
19
|
+
width: var(--imageSize);
|
|
20
|
+
border-radius: 320px;
|
|
21
|
+
border: 5px solid var(--borderColor);
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
/**
|
|
5
|
+
* サムネイル画像の大きさ
|
|
6
|
+
* @type number
|
|
7
|
+
*/ imageSize: string;
|
|
8
|
+
/**
|
|
9
|
+
* 枠線の色
|
|
10
|
+
* @default --strawberry-pink
|
|
11
|
+
* @type string
|
|
12
|
+
*/ borderColor: string;
|
|
13
|
+
/**
|
|
14
|
+
* 画像ソース
|
|
15
|
+
* @type string
|
|
16
|
+
*/ src: string;
|
|
17
|
+
/**
|
|
18
|
+
* alt属性に指定する値
|
|
19
|
+
* @type string
|
|
20
|
+
*/ altText: string;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {};
|
|
26
|
+
};
|
|
27
|
+
export type ThumbnailProps = typeof __propDef.props;
|
|
28
|
+
export type ThumbnailEvents = typeof __propDef.events;
|
|
29
|
+
export type ThumbnailSlots = typeof __propDef.slots;
|
|
30
|
+
export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
|
|
31
|
+
}
|
|
32
|
+
export {};
|
package/dist/const/variables.css
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED