sveltacular 0.0.12 → 0.0.14
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/forms/button/button.svelte +46 -39
- package/dist/forms/check-box/check-box.svelte +50 -22
- package/dist/forms/date-box/date-box.svelte +7 -4
- package/dist/forms/file-box/file-box.svelte +5 -5
- package/dist/forms/list-box/list-box.svelte +5 -5
- package/dist/forms/number-box/number-box.svelte +6 -6
- package/dist/forms/radio-group/radio-box.svelte +46 -9
- package/dist/forms/switch-box/switch-box.svelte +6 -3
- package/dist/forms/text-area/text-area.svelte +6 -3
- package/dist/forms/text-box/text-box.svelte +6 -6
- package/dist/generic/link/link.svelte +1 -8
- package/dist/images/image.svelte +2 -1
- package/dist/navigation/app-bar/app-branding.svelte +20 -0
- package/dist/navigation/app-bar/app-branding.svelte.d.ts +16 -0
- package/dist/navigation/app-bar/app-logo.svelte +12 -1
- package/dist/navigation/app-bar/app-nav-item.svelte +4 -2
- package/dist/navigation/breadcrumbs/breadcrumbs.svelte +17 -8
- package/dist/navigation/side-bar/side-bar.svelte +6 -4
- package/dist/types/form.d.ts +1 -1
- package/package.json +1 -1
|
@@ -26,8 +26,8 @@ const click = () => {
|
|
|
26
26
|
cursor: pointer;
|
|
27
27
|
margin-top: 0.5rem;
|
|
28
28
|
margin-bottom: 0.5rem;
|
|
29
|
-
|
|
30
|
-
border:
|
|
29
|
+
border-width: 1px;
|
|
30
|
+
border-style: solid;
|
|
31
31
|
border-radius: 0.25rem;
|
|
32
32
|
color: #e2e2e2;
|
|
33
33
|
cursor: pointer;
|
|
@@ -38,7 +38,7 @@ const click = () => {
|
|
|
38
38
|
padding: 0.5rem 1rem;
|
|
39
39
|
text-align: center;
|
|
40
40
|
text-decoration: none;
|
|
41
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out
|
|
41
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
42
42
|
user-select: none;
|
|
43
43
|
white-space: nowrap;
|
|
44
44
|
}
|
|
@@ -75,59 +75,66 @@ button:hover {
|
|
|
75
75
|
background-color: #4c4c4c;
|
|
76
76
|
}
|
|
77
77
|
button.primary {
|
|
78
|
-
background-color: #1e88e5;
|
|
79
|
-
border-color: #1e88e5;
|
|
80
|
-
color: #fff;
|
|
78
|
+
background-color: var(--button-primary-bg, #1e88e5);
|
|
79
|
+
border-color: var(--button-primary-border, #1e88e5);
|
|
80
|
+
color: var(--button-primary-fg, #fff);
|
|
81
81
|
}
|
|
82
82
|
button.primary:hover {
|
|
83
|
-
background-color: #1976d2;
|
|
84
|
-
|
|
83
|
+
background-color: var(--button-primary-hover-bg, #1976d2);
|
|
84
|
+
color: var(--button-primary-hover-fg, #fff);
|
|
85
85
|
}
|
|
86
|
-
button.
|
|
87
|
-
background-color:
|
|
88
|
-
border-color:
|
|
89
|
-
color: var(--
|
|
90
|
-
text-decoration: underline;
|
|
86
|
+
button.secondary {
|
|
87
|
+
background-color: var(--button-secondary-bg, #e2e2e2);
|
|
88
|
+
border-color: var(--button-secondary-border, #e2e2e2);
|
|
89
|
+
color: var(--button-secondary-fg, #000);
|
|
91
90
|
}
|
|
92
|
-
button.
|
|
91
|
+
button.secondary:hover {
|
|
92
|
+
background-color: var(--button-secondary-hover-bg, #d5d5d5);
|
|
93
|
+
color: var(--button-secondary-hover-fg, #000);
|
|
94
|
+
}
|
|
95
|
+
button.ghost {
|
|
93
96
|
background-color: transparent;
|
|
94
97
|
border-color: transparent;
|
|
95
|
-
color: var(--
|
|
98
|
+
color: var(--base-fg, #ccc);
|
|
99
|
+
text-decoration: none;
|
|
100
|
+
}
|
|
101
|
+
button.ghost:hover {
|
|
102
|
+
background-color: var(--button-ghost-hover-bg, #e0e0e0);
|
|
103
|
+
color: var(--button-ghost-hover-fg, #1e88e5);
|
|
96
104
|
}
|
|
97
105
|
button.positive {
|
|
98
|
-
background-color: #43a047;
|
|
99
|
-
border-color: #43a047;
|
|
100
|
-
color: #fff;
|
|
106
|
+
background-color: var(--button-positive-bg, #43a047);
|
|
107
|
+
border-color: var(--button-positive-border, #43a047);
|
|
108
|
+
color: var(--button-positive-fg, #fff);
|
|
101
109
|
}
|
|
102
110
|
button.positive:hover {
|
|
103
|
-
background-color: #388e3c;
|
|
104
|
-
|
|
111
|
+
background-color: var(--button-positive-hover-bg, #388e3c);
|
|
112
|
+
color: var(--button-positive-hover-fg, #388e3c);
|
|
105
113
|
}
|
|
106
114
|
button.danger {
|
|
107
|
-
background-color: #
|
|
108
|
-
border-color: #
|
|
109
|
-
color: #fff;
|
|
115
|
+
background-color: var(--button-danger-bg, #e53935);
|
|
116
|
+
border-color: var(--button-danger-border, #e53935);
|
|
117
|
+
color: var(--button-danger-fg, #fff);
|
|
110
118
|
}
|
|
111
119
|
button.danger:hover {
|
|
112
|
-
background-color: #c62828;
|
|
113
|
-
|
|
120
|
+
background-color: var(--button-danger-hover-bg, #c62828);
|
|
121
|
+
color: var(--button-danger-hover-fg, #fff);
|
|
114
122
|
}
|
|
115
|
-
button.
|
|
116
|
-
background-color:
|
|
117
|
-
border-color: #
|
|
118
|
-
color: #
|
|
123
|
+
button.outline {
|
|
124
|
+
background-color: transparent;
|
|
125
|
+
border-color: var(--button-outline-border, #e2e2e2);
|
|
126
|
+
color: var(--button-outline-fg, #e2e2e2);
|
|
119
127
|
}
|
|
120
|
-
button.
|
|
121
|
-
background-color: #
|
|
122
|
-
|
|
128
|
+
button.outline:hover {
|
|
129
|
+
background-color: var(--button-outline-hover-bg, #e2e2e2);
|
|
130
|
+
color: var(--button-outline-hover-fg, #000);
|
|
123
131
|
}
|
|
124
|
-
button.
|
|
132
|
+
button.link {
|
|
125
133
|
background-color: transparent;
|
|
126
|
-
border-color:
|
|
127
|
-
color: var(--
|
|
134
|
+
border-color: transparent;
|
|
135
|
+
color: var(--base-link-fg, #1e88e5);
|
|
136
|
+
text-decoration: underline;
|
|
128
137
|
}
|
|
129
|
-
button.
|
|
130
|
-
|
|
131
|
-
color: var(--sv-color-bg);
|
|
132
|
-
border-color: var(--sv-color-bg);
|
|
138
|
+
button.link:hover {
|
|
139
|
+
color: var(--base-link-hover-fg, #1e88e5);
|
|
133
140
|
}</style>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script>import { uniqueId } from "../../helpers/unique-id.js";
|
|
2
|
+
import CheckIcon from "../../icons/check-icon.svelte";
|
|
2
3
|
import { createEventDispatcher } from "svelte";
|
|
3
4
|
export let value = "";
|
|
4
5
|
export let isChecked = false;
|
|
@@ -13,7 +14,7 @@ const onChecked = (event) => {
|
|
|
13
14
|
};
|
|
14
15
|
</script>
|
|
15
16
|
|
|
16
|
-
<
|
|
17
|
+
<label>
|
|
17
18
|
<input
|
|
18
19
|
type="checkbox"
|
|
19
20
|
{id}
|
|
@@ -23,34 +24,61 @@ const onChecked = (event) => {
|
|
|
23
24
|
bind:checked={isChecked}
|
|
24
25
|
on:change={onChecked}
|
|
25
26
|
/>
|
|
27
|
+
<span class="checkbox">
|
|
28
|
+
<span class="checkmark"><CheckIcon /></span>
|
|
29
|
+
</span>
|
|
26
30
|
{#if $$slots.default}
|
|
27
|
-
<
|
|
31
|
+
<div class="text">
|
|
28
32
|
<slot />
|
|
29
|
-
</
|
|
33
|
+
</div>
|
|
30
34
|
{/if}
|
|
31
|
-
</
|
|
35
|
+
</label>
|
|
32
36
|
|
|
33
|
-
<style>
|
|
34
|
-
display:
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
<style>label {
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: flex-start;
|
|
37
41
|
cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
label .text {
|
|
44
|
+
display: block;
|
|
45
|
+
margin-left: 0.5em;
|
|
38
46
|
font-size: 1rem;
|
|
39
47
|
line-height: 2rem;
|
|
40
48
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
border-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
label .checkbox {
|
|
50
|
+
position: relative;
|
|
51
|
+
display: block;
|
|
52
|
+
width: 1rem;
|
|
53
|
+
height: 1rem;
|
|
54
|
+
border: 1px solid var(--form-input-border, black);
|
|
55
|
+
background-color: var(--form-input-bg, white);
|
|
56
|
+
color: var(--form-input-fg, black);
|
|
57
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
58
|
+
user-select: none;
|
|
59
|
+
}
|
|
60
|
+
label .checkbox .checkmark {
|
|
61
|
+
display: block;
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 0;
|
|
64
|
+
left: 0;
|
|
65
|
+
width: 0;
|
|
66
|
+
height: 0;
|
|
67
|
+
background-color: var(--form-input-checked-bg, #3182ce);
|
|
68
|
+
color: var(--form-input-checked-fg, white);
|
|
69
|
+
fill: var(--form-input-checked-bg, #3182ce);
|
|
70
|
+
stroke: var(--form-input-checked-fg, white);
|
|
71
|
+
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
|
|
72
|
+
}
|
|
73
|
+
label input {
|
|
74
|
+
width: 0;
|
|
75
|
+
height: 0;
|
|
76
|
+
}
|
|
77
|
+
label input:checked + .checkbox {
|
|
78
|
+
background-color: var(--form-input-bg, white);
|
|
79
|
+
border-color: var(--form-input-border, black);
|
|
53
80
|
}
|
|
54
|
-
|
|
55
|
-
|
|
81
|
+
label input:checked + .checkbox .checkmark {
|
|
82
|
+
width: 100%;
|
|
83
|
+
height: 100%;
|
|
56
84
|
}</style>
|
|
@@ -43,16 +43,19 @@ $:
|
|
|
43
43
|
width: 100%;
|
|
44
44
|
padding: 0.5rem 1rem;
|
|
45
45
|
border-radius: 0.25rem;
|
|
46
|
-
border: 1px solid
|
|
47
|
-
background-color:
|
|
48
|
-
color:
|
|
46
|
+
border: 1px solid var(--form-input-border, black);
|
|
47
|
+
background-color: var(--form-input-bg, white);
|
|
48
|
+
color: var(--form-input-fg, black);
|
|
49
49
|
font-size: 0.875rem;
|
|
50
50
|
font-weight: 500;
|
|
51
51
|
line-height: 1.25rem;
|
|
52
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out
|
|
52
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
53
53
|
user-select: none;
|
|
54
54
|
white-space: nowrap;
|
|
55
55
|
}
|
|
56
|
+
input::placeholder {
|
|
57
|
+
color: var(--form-input-placeholder, #a0aec0);
|
|
58
|
+
}
|
|
56
59
|
|
|
57
60
|
div {
|
|
58
61
|
display: block;
|
|
@@ -37,17 +37,17 @@ export let capture = void 0;
|
|
|
37
37
|
width: 100%;
|
|
38
38
|
padding: 0.5rem 1rem;
|
|
39
39
|
border-radius: 0.25rem;
|
|
40
|
-
border: 1px solid
|
|
41
|
-
background-color:
|
|
42
|
-
color:
|
|
40
|
+
border: 1px solid var(--form-input-border, black);
|
|
41
|
+
background-color: var(--form-input-bg, white);
|
|
42
|
+
color: var(--form-input-fg, black);
|
|
43
43
|
font-size: 0.875rem;
|
|
44
44
|
font-weight: 500;
|
|
45
45
|
line-height: 1.25rem;
|
|
46
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out
|
|
46
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
47
47
|
user-select: none;
|
|
48
48
|
white-space: nowrap;
|
|
49
49
|
}
|
|
50
50
|
input::placeholder {
|
|
51
|
-
color: #
|
|
51
|
+
color: var(--form-input-placeholder, #888);
|
|
52
52
|
font-style: italic;
|
|
53
53
|
}</style>
|
|
@@ -106,13 +106,13 @@ div input {
|
|
|
106
106
|
width: 100%;
|
|
107
107
|
padding: 0.5rem 1rem;
|
|
108
108
|
border-radius: 0.25rem;
|
|
109
|
-
border: 1px solid
|
|
110
|
-
background-color:
|
|
111
|
-
color:
|
|
109
|
+
border: 1px solid var(--form-input-border, black);
|
|
110
|
+
background-color: var(--form-input-bg, white);
|
|
111
|
+
color: var(--form-input-fg, black);
|
|
112
112
|
font-size: 0.875rem;
|
|
113
113
|
font-weight: 500;
|
|
114
114
|
line-height: 1.25rem;
|
|
115
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out
|
|
115
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
116
116
|
user-select: none;
|
|
117
117
|
white-space: nowrap;
|
|
118
118
|
}
|
|
@@ -129,7 +129,7 @@ div button.icon {
|
|
|
129
129
|
height: 1rem;
|
|
130
130
|
transition: transform 0.3s linear;
|
|
131
131
|
z-index: 2;
|
|
132
|
-
color: black;
|
|
132
|
+
color: var(--form-input-fg, black);
|
|
133
133
|
transform: rotate(180deg);
|
|
134
134
|
}
|
|
135
135
|
div.open .icon {
|
|
@@ -51,7 +51,7 @@ div .symbol {
|
|
|
51
51
|
position: absolute;
|
|
52
52
|
top: 0.32rem;
|
|
53
53
|
left: 0.5rem;
|
|
54
|
-
color:
|
|
54
|
+
color: var(--form-input-fg, black);
|
|
55
55
|
font-size: 1.125rem;
|
|
56
56
|
line-height: 1.75rem;
|
|
57
57
|
}
|
|
@@ -59,7 +59,7 @@ div .units {
|
|
|
59
59
|
position: absolute;
|
|
60
60
|
top: 0.32rem;
|
|
61
61
|
right: 2.5rem;
|
|
62
|
-
color:
|
|
62
|
+
color: var(--form-input-fg, black);
|
|
63
63
|
font-size: 1rem;
|
|
64
64
|
line-height: 1.75rem;
|
|
65
65
|
text-align: right;
|
|
@@ -68,13 +68,13 @@ div input {
|
|
|
68
68
|
width: 100%;
|
|
69
69
|
padding: 0.5rem 1rem;
|
|
70
70
|
border-radius: 0.25rem;
|
|
71
|
-
border: 1px solid
|
|
72
|
-
background-color:
|
|
73
|
-
color:
|
|
71
|
+
border: 1px solid var(--form-input-border, black);
|
|
72
|
+
background-color: var(--form-input-bg, white);
|
|
73
|
+
color: var(--form-input-fg, black);
|
|
74
74
|
font-size: 0.875rem;
|
|
75
75
|
font-weight: 500;
|
|
76
76
|
line-height: 1.25rem;
|
|
77
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out
|
|
77
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
78
78
|
user-select: none;
|
|
79
79
|
white-space: nowrap;
|
|
80
80
|
}
|
|
@@ -1,29 +1,66 @@
|
|
|
1
1
|
<script>import { uniqueId } from "../../helpers/unique-id.js";
|
|
2
|
+
import CheckIcon from "../../icons/check-icon.svelte";
|
|
2
3
|
export let value = void 0;
|
|
3
4
|
export let group = void 0;
|
|
4
5
|
export let disabled = false;
|
|
5
6
|
const id = uniqueId();
|
|
6
7
|
</script>
|
|
7
8
|
|
|
8
|
-
<
|
|
9
|
+
<label>
|
|
9
10
|
<input type="radio" bind:group {value} {disabled} {id} />
|
|
11
|
+
<span class="checkbox">
|
|
12
|
+
<span class="checkmark"><CheckIcon /></span>
|
|
13
|
+
</span>
|
|
10
14
|
{#if $$slots.default}
|
|
11
|
-
<
|
|
15
|
+
<div class="text">
|
|
12
16
|
<slot />
|
|
13
|
-
</
|
|
17
|
+
</div>
|
|
14
18
|
{/if}
|
|
15
|
-
</
|
|
19
|
+
</label>
|
|
16
20
|
|
|
17
|
-
<style>
|
|
21
|
+
<style>label {
|
|
18
22
|
display: flex;
|
|
19
23
|
align-items: center;
|
|
20
24
|
gap: 0.5rem;
|
|
21
25
|
line-height: 2rem;
|
|
22
26
|
font-size: 1rem;
|
|
23
|
-
}
|
|
24
|
-
div input {
|
|
25
27
|
cursor: pointer;
|
|
26
28
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
label .checkbox {
|
|
30
|
+
position: relative;
|
|
31
|
+
width: 1.2rem;
|
|
32
|
+
height: 1.2rem;
|
|
33
|
+
border-radius: 0.6rem;
|
|
34
|
+
border: 1px solid var(--form-input-border, black);
|
|
35
|
+
background-color: var(--form-input-bg, white);
|
|
36
|
+
color: var(--form-input-fg, black);
|
|
37
|
+
font-size: 0.875rem;
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
line-height: 1.25rem;
|
|
40
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
41
|
+
user-select: none;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
padding-top: 0.1rem;
|
|
46
|
+
}
|
|
47
|
+
label .checkbox .checkmark {
|
|
48
|
+
display: block;
|
|
49
|
+
width: 0;
|
|
50
|
+
height: 0;
|
|
51
|
+
color: var(--form-input-checked-fg, white);
|
|
52
|
+
fill: var(--form-input-checked-bg, #3182ce);
|
|
53
|
+
stroke: var(--form-input-checked-fg, white);
|
|
54
|
+
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
|
|
55
|
+
}
|
|
56
|
+
label input {
|
|
57
|
+
width: 0;
|
|
58
|
+
height: 0;
|
|
59
|
+
}
|
|
60
|
+
label input:checked + .checkbox {
|
|
61
|
+
background-color: var(--form-input-checked-bg, #3182ce);
|
|
62
|
+
}
|
|
63
|
+
label input:checked + .checkbox .checkmark {
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
29
66
|
}</style>
|
|
@@ -35,7 +35,7 @@ label input {
|
|
|
35
35
|
height: 0;
|
|
36
36
|
}
|
|
37
37
|
label .switch {
|
|
38
|
-
background-color: var(--
|
|
38
|
+
background-color: var(--form-input-bg, white);
|
|
39
39
|
position: relative;
|
|
40
40
|
cursor: pointer;
|
|
41
41
|
transition: background-color 0.2s ease-in-out;
|
|
@@ -45,10 +45,13 @@ label .slider {
|
|
|
45
45
|
border-radius: 50%;
|
|
46
46
|
position: absolute;
|
|
47
47
|
transition: left 0.2s ease-in-out;
|
|
48
|
-
background:
|
|
48
|
+
background-color: var(--form-input-fg, black);
|
|
49
49
|
}
|
|
50
50
|
label.checked .switch {
|
|
51
|
-
background-color: var(--checked-
|
|
51
|
+
background-color: var(--form-input-checked-bg, #3182ce);
|
|
52
|
+
}
|
|
53
|
+
label.checked .slider {
|
|
54
|
+
background-color: var(--form-input-checked-fg, white);
|
|
52
55
|
}
|
|
53
56
|
label.xl .switch {
|
|
54
57
|
width: 4rem;
|
|
@@ -22,13 +22,16 @@ export let readonly = false;
|
|
|
22
22
|
width: 100%;
|
|
23
23
|
padding: 0.5rem 1rem;
|
|
24
24
|
border-radius: 0.25rem;
|
|
25
|
-
border: 1px solid
|
|
26
|
-
background-color:
|
|
27
|
-
color:
|
|
25
|
+
border: 1px solid var(--form-input-border, black);
|
|
26
|
+
background-color: var(--form-input-bg, white);
|
|
27
|
+
color: var(--form-input-fg, black);
|
|
28
28
|
font-size: 0.875rem;
|
|
29
29
|
font-weight: 500;
|
|
30
30
|
line-height: 1.25rem;
|
|
31
31
|
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
32
32
|
user-select: none;
|
|
33
33
|
white-space: nowrap;
|
|
34
|
+
}
|
|
35
|
+
textarea::placeholder {
|
|
36
|
+
color: var(--form-input-placeholder, #a0aec0);
|
|
34
37
|
}</style>
|
|
@@ -49,25 +49,25 @@ div input {
|
|
|
49
49
|
width: 100%;
|
|
50
50
|
padding: 0.5rem 1rem;
|
|
51
51
|
border-radius: 0.25rem;
|
|
52
|
-
border: 1px solid
|
|
53
|
-
background-color:
|
|
54
|
-
color:
|
|
52
|
+
border: 1px solid var(--form-input-border, black);
|
|
53
|
+
background-color: var(--form-input-bg, white);
|
|
54
|
+
color: var(--form-input-fg, black);
|
|
55
55
|
font-size: 0.875rem;
|
|
56
56
|
font-weight: 500;
|
|
57
57
|
line-height: 1.25rem;
|
|
58
|
-
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out
|
|
58
|
+
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
|
|
59
59
|
user-select: none;
|
|
60
60
|
white-space: nowrap;
|
|
61
61
|
}
|
|
62
62
|
div input::placeholder {
|
|
63
|
-
color: #
|
|
63
|
+
color: var(--form-input-placeholder, #888);
|
|
64
64
|
font-style: italic;
|
|
65
65
|
}
|
|
66
66
|
div .units {
|
|
67
67
|
position: absolute;
|
|
68
68
|
top: 0.32rem;
|
|
69
69
|
right: 1rem;
|
|
70
|
-
color:
|
|
70
|
+
color: var(--form-input-fg, black);
|
|
71
71
|
font-size: 1rem;
|
|
72
72
|
line-height: 1.75rem;
|
|
73
73
|
text-align: right;
|
|
@@ -17,7 +17,6 @@ export let display = "inline";
|
|
|
17
17
|
|
|
18
18
|
<style>.link {
|
|
19
19
|
text-decoration: underline;
|
|
20
|
-
color: inherit;
|
|
21
20
|
cursor: pointer;
|
|
22
21
|
}
|
|
23
22
|
.link.underline-none, .link.underline-hover {
|
|
@@ -30,12 +29,6 @@ export let display = "inline";
|
|
|
30
29
|
.link.inline-block {
|
|
31
30
|
display: inline-block;
|
|
32
31
|
}
|
|
33
|
-
|
|
34
|
-
a.link.underline-hover:hover {
|
|
32
|
+
.link[href].underline-hover:hover {
|
|
35
33
|
text-decoration: underline;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
span.link {
|
|
39
|
-
cursor: default;
|
|
40
|
-
color: rgba(255, 255, 255, 0.5);
|
|
41
34
|
}</style>
|
package/dist/images/image.svelte
CHANGED
|
@@ -8,7 +8,7 @@ $:
|
|
|
8
8
|
finalSource = sources[sources.length - 1];
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
|
-
<div class={align}>
|
|
11
|
+
<div class="image {align}">
|
|
12
12
|
{#if href}
|
|
13
13
|
<a {href}>
|
|
14
14
|
<picture>
|
|
@@ -37,6 +37,7 @@ $:
|
|
|
37
37
|
position: relative;
|
|
38
38
|
width: 100%;
|
|
39
39
|
height: 100%;
|
|
40
|
+
flex-grow: 1;
|
|
40
41
|
}
|
|
41
42
|
div .caption {
|
|
42
43
|
position: absolute;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script>import { setContext } from "svelte";
|
|
2
|
+
setContext("app-branding", true);
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="branding">
|
|
6
|
+
<slot />
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
div {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
padding-left: 0.5rem;
|
|
18
|
+
padding-right: 0.5rem;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {
|
|
8
|
+
default: {};
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export type AppBrandingProps = typeof __propDef.props;
|
|
12
|
+
export type AppBrandingEvents = typeof __propDef.events;
|
|
13
|
+
export type AppBrandingSlots = typeof __propDef.slots;
|
|
14
|
+
export default class AppBranding extends SvelteComponent<AppBrandingProps, AppBrandingEvents, AppBrandingSlots> {
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -4,4 +4,15 @@ export let alt;
|
|
|
4
4
|
export let href;
|
|
5
5
|
</script>
|
|
6
6
|
|
|
7
|
-
<
|
|
7
|
+
<div class="logo">
|
|
8
|
+
<Image {src} {alt} {href} align="left" />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<style>
|
|
12
|
+
div {
|
|
13
|
+
display: block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
@@ -28,7 +28,7 @@ const click = () => {
|
|
|
28
28
|
gap: 0.2rem;
|
|
29
29
|
align-items: center;
|
|
30
30
|
height: 100%;
|
|
31
|
-
color: var(--nav-link-
|
|
31
|
+
color: var(--nav-link-fg, black);
|
|
32
32
|
text-decoration: none;
|
|
33
33
|
appearance: none;
|
|
34
34
|
border: none;
|
|
@@ -36,12 +36,14 @@ const click = () => {
|
|
|
36
36
|
cursor: pointer;
|
|
37
37
|
}
|
|
38
38
|
button:hover {
|
|
39
|
-
color: var(--nav-link-hover-
|
|
39
|
+
color: var(--nav-link-hover-fg, black);
|
|
40
40
|
text-decoration: underline;
|
|
41
41
|
}
|
|
42
42
|
button .icon {
|
|
43
43
|
width: 100%;
|
|
44
44
|
height: 1.5rem;
|
|
45
|
+
fill: var(--nav-link-fg, black);
|
|
46
|
+
stroke: var(--nav-link-fg, black);
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
@media (max-width: 640px) {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import AngleRightIcon from "../../icons/angle-right-icon.svelte";
|
|
1
|
+
<script>import AngleRightIcon from "../../icons/angle-right-icon.svelte";
|
|
3
2
|
import HomeIcon from "../../icons/home-icon.svelte";
|
|
4
3
|
export let homeUrl = null;
|
|
5
4
|
export let crumbs = [];
|
|
@@ -14,9 +13,7 @@ const getCrumLabel = (crumb) => {
|
|
|
14
13
|
<nav class={size}>
|
|
15
14
|
{#if homeUrl}
|
|
16
15
|
<li class="icon">
|
|
17
|
-
<
|
|
18
|
-
<HomeIcon />
|
|
19
|
-
</Link>
|
|
16
|
+
<a href={homeUrl} class="home"><HomeIcon /></a>
|
|
20
17
|
</li>
|
|
21
18
|
{/if}
|
|
22
19
|
{#each crumbs as crumb, i}
|
|
@@ -24,9 +21,9 @@ const getCrumLabel = (crumb) => {
|
|
|
24
21
|
<li>{getCrumLabel(crumb)}</li>
|
|
25
22
|
{:else}
|
|
26
23
|
<li>
|
|
27
|
-
<
|
|
24
|
+
<a href={crumb.href}>
|
|
28
25
|
{crumb.label}
|
|
29
|
-
</
|
|
26
|
+
</a>
|
|
30
27
|
</li>
|
|
31
28
|
{/if}
|
|
32
29
|
{#if i < crumbs.length - 1}
|
|
@@ -44,13 +41,25 @@ const getCrumLabel = (crumb) => {
|
|
|
44
41
|
padding: 0;
|
|
45
42
|
margin: 0;
|
|
46
43
|
line-height: 1.5rem;
|
|
44
|
+
font-family: sans-serif;
|
|
47
45
|
}
|
|
48
46
|
nav li {
|
|
49
47
|
display: flex;
|
|
50
48
|
align-items: center;
|
|
51
49
|
vertical-align: middle;
|
|
52
50
|
margin-left: 0.5rem;
|
|
53
|
-
color:
|
|
51
|
+
color: var(--breadcrumbs-fg, #333);
|
|
52
|
+
}
|
|
53
|
+
nav li a {
|
|
54
|
+
color: var(--breadcrumbs-link-fg, #333);
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
}
|
|
57
|
+
nav li a:hover {
|
|
58
|
+
color: var(--breadcrumbs-link-hover-fg, black);
|
|
59
|
+
text-decoration: underline;
|
|
60
|
+
}
|
|
61
|
+
nav li a.home {
|
|
62
|
+
width: 100%;
|
|
54
63
|
}
|
|
55
64
|
nav li:first-child {
|
|
56
65
|
margin-left: 0;
|
|
@@ -11,19 +11,21 @@ export let open = false;
|
|
|
11
11
|
|
|
12
12
|
<style>div aside {
|
|
13
13
|
width: 300px;
|
|
14
|
-
padding: 0
|
|
15
|
-
margin: 0
|
|
14
|
+
padding: 0;
|
|
15
|
+
margin: 0;
|
|
16
16
|
box-sizing: border-box;
|
|
17
17
|
position: fixed;
|
|
18
18
|
top: 0;
|
|
19
19
|
left: -300px;
|
|
20
20
|
bottom: 0;
|
|
21
|
-
background:
|
|
22
|
-
color:
|
|
21
|
+
background: var(--nav-bg, white);
|
|
22
|
+
color: var(--nav-fg, black);
|
|
23
23
|
z-index: 9999;
|
|
24
24
|
transition: left 0.3s ease-in-out;
|
|
25
25
|
border-right: solid 1px #e5e5e5;
|
|
26
26
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
27
29
|
}
|
|
28
30
|
div.open {
|
|
29
31
|
display: block;
|
package/dist/types/form.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export type FormFieldSizeOptions = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
2
|
-
export type ButtonStyle = '
|
|
2
|
+
export type ButtonStyle = 'primary' | 'secondary' | 'positive' | 'negative' | 'danger' | 'ghost' | 'outline' | 'link';
|
|
3
3
|
export type DropdownOption = {
|
|
4
4
|
value: string;
|
|
5
5
|
name: string;
|