sveltacular 0.0.33 → 0.0.34
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 +8 -7
- package/dist/generic/card/card.svelte +2 -0
- package/dist/generic/link/link.svelte +15 -2
- package/dist/navigation/breadcrumbs/breadcrumbs.svelte +4 -3
- package/dist/navigation/tabs/tab.svelte +13 -11
- package/dist/tables/table-footer.svelte +5 -3
- package/dist/tables/table-header.svelte +4 -4
- package/dist/tables/table-row.svelte +5 -4
- package/package.json +1 -1
|
@@ -42,6 +42,7 @@ const click = () => {
|
|
|
42
42
|
user-select: none;
|
|
43
43
|
white-space: nowrap;
|
|
44
44
|
font-family: var(--base-font-family, sans-serif);
|
|
45
|
+
text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
|
|
45
46
|
}
|
|
46
47
|
button.flex {
|
|
47
48
|
flex-grow: 1;
|
|
@@ -81,17 +82,17 @@ button.primary {
|
|
|
81
82
|
color: var(--button-primary-fg, #fff);
|
|
82
83
|
}
|
|
83
84
|
button.primary:hover {
|
|
84
|
-
background-color: var(--button-primary-hover-bg, #
|
|
85
|
+
background-color: var(--button-primary-hover-bg, #0052a3);
|
|
85
86
|
color: var(--button-primary-hover-fg, #fff);
|
|
86
87
|
}
|
|
87
88
|
button.secondary {
|
|
88
|
-
background-color: var(--button-secondary-bg, #
|
|
89
|
-
border-color: var(--button-secondary-border, #
|
|
90
|
-
color: var(--button-secondary-fg, #
|
|
89
|
+
background-color: var(--button-secondary-bg, #555);
|
|
90
|
+
border-color: var(--button-secondary-border, #aaa);
|
|
91
|
+
color: var(--button-secondary-fg, #fff);
|
|
91
92
|
}
|
|
92
93
|
button.secondary:hover {
|
|
93
|
-
background-color: var(--button-secondary-hover-bg, #
|
|
94
|
-
color: var(--button-secondary-hover-fg, #
|
|
94
|
+
background-color: var(--button-secondary-hover-bg, #333);
|
|
95
|
+
color: var(--button-secondary-hover-fg, #fff);
|
|
95
96
|
}
|
|
96
97
|
button.ghost {
|
|
97
98
|
background-color: transparent;
|
|
@@ -110,7 +111,7 @@ button.positive {
|
|
|
110
111
|
}
|
|
111
112
|
button.positive:hover {
|
|
112
113
|
background-color: var(--button-positive-hover-bg, #388e3c);
|
|
113
|
-
color: var(--button-positive-hover-fg, #
|
|
114
|
+
color: var(--button-positive-hover-fg, #fff);
|
|
114
115
|
}
|
|
115
116
|
button.danger {
|
|
116
117
|
background-color: var(--button-danger-bg, #e53935);
|
|
@@ -27,6 +27,8 @@ const onClick = () => {
|
|
|
27
27
|
margin-bottom: 1rem;
|
|
28
28
|
padding: 1rem;
|
|
29
29
|
border-radius: 0.5rem;
|
|
30
|
+
border: solid 1px rgba(100, 100, 100, 0.5);
|
|
31
|
+
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
|
|
30
32
|
background-color: #fff;
|
|
31
33
|
color: #555;
|
|
32
34
|
transition: transform 0.2s ease-in-out;
|
|
@@ -6,7 +6,7 @@ export let display = "inline";
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
{#if disabled}
|
|
9
|
-
<span class="link underline-{underline} {display}">
|
|
9
|
+
<span class="link disabled underline-{underline} {display}">
|
|
10
10
|
<slot />
|
|
11
11
|
</span>
|
|
12
12
|
{:else}
|
|
@@ -17,7 +17,9 @@ export let display = "inline";
|
|
|
17
17
|
|
|
18
18
|
<style>.link {
|
|
19
19
|
text-decoration: underline;
|
|
20
|
-
|
|
20
|
+
}
|
|
21
|
+
.link.disabled {
|
|
22
|
+
cursor: not-allowed;
|
|
21
23
|
}
|
|
22
24
|
.link.underline-none, .link.underline-hover {
|
|
23
25
|
text-decoration: none;
|
|
@@ -31,4 +33,15 @@ export let display = "inline";
|
|
|
31
33
|
}
|
|
32
34
|
.link[href].underline-hover:hover {
|
|
33
35
|
text-decoration: underline;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
a {
|
|
39
|
+
color: var(--link-fg, #77b9ff);
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
a:visited {
|
|
43
|
+
color: var(--link-visited-fg, #459fff);
|
|
44
|
+
}
|
|
45
|
+
a:hover {
|
|
46
|
+
color: var(--link-hover-fg, #d00);
|
|
34
47
|
}</style>
|
|
@@ -41,19 +41,20 @@ const getCrumLabel = (crumb) => {
|
|
|
41
41
|
margin: 0;
|
|
42
42
|
line-height: 1.5rem;
|
|
43
43
|
font-family: var(--breadcrumbs-font-family, sans-serif);
|
|
44
|
+
text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.5);
|
|
44
45
|
}
|
|
45
46
|
nav li {
|
|
46
|
-
color: var(--breadcrumbs-fg, #
|
|
47
|
+
color: var(--breadcrumbs-fg, #bbb);
|
|
47
48
|
padding: 0;
|
|
48
49
|
margin: 0;
|
|
49
50
|
}
|
|
50
51
|
nav li a {
|
|
51
|
-
color: var(--breadcrumbs-link-fg, #
|
|
52
|
+
color: var(--breadcrumbs-link-fg, #bbb);
|
|
52
53
|
text-decoration: none;
|
|
53
54
|
width: 100%;
|
|
54
55
|
}
|
|
55
56
|
nav li a:hover {
|
|
56
|
-
color: var(--breadcrumbs-link-hover-fg,
|
|
57
|
+
color: var(--breadcrumbs-link-hover-fg, white);
|
|
57
58
|
text-decoration: underline;
|
|
58
59
|
}
|
|
59
60
|
nav.sm li {
|
|
@@ -33,14 +33,9 @@ ctx.active.subscribe((value) => {
|
|
|
33
33
|
}
|
|
34
34
|
section header {
|
|
35
35
|
display: inline-block;
|
|
36
|
-
line-height: 2rem;
|
|
37
|
-
font-size: 0.8rem;
|
|
38
|
-
font-weight: 300;
|
|
39
36
|
cursor: pointer;
|
|
40
|
-
color: var(--sv-color-light);
|
|
41
37
|
height: 2rem;
|
|
42
38
|
overflow: hidden;
|
|
43
|
-
padding: 0 1rem;
|
|
44
39
|
border-width: 0.1rem 0.1rem 0 0.1rem;
|
|
45
40
|
border-style: solid;
|
|
46
41
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
@@ -48,23 +43,29 @@ section header {
|
|
|
48
43
|
border-color: transparent;
|
|
49
44
|
position: relative;
|
|
50
45
|
z-index: 2;
|
|
46
|
+
background: var(--tab-bg, transparent);
|
|
47
|
+
color: var(--tab-fg, #fff);
|
|
51
48
|
}
|
|
52
49
|
section header button {
|
|
53
50
|
appearance: none;
|
|
54
51
|
background: transparent;
|
|
55
52
|
border: none;
|
|
56
53
|
color: inherit;
|
|
57
|
-
font-size: 0.8rem;
|
|
58
54
|
padding: 0;
|
|
59
55
|
cursor: pointer;
|
|
60
56
|
width: 100%;
|
|
61
57
|
height: 100%;
|
|
58
|
+
font-size: 1rem;
|
|
59
|
+
line-height: 2rem;
|
|
60
|
+
font-weight: 300;
|
|
61
|
+
padding: 0 1rem;
|
|
62
62
|
}
|
|
63
63
|
section header button:focus {
|
|
64
64
|
outline: none;
|
|
65
65
|
}
|
|
66
66
|
section header:hover {
|
|
67
|
-
|
|
67
|
+
background: var(--tab-hover-bg, transparent);
|
|
68
|
+
color: var(--tab-hover-fg, #fbb);
|
|
68
69
|
}
|
|
69
70
|
section div {
|
|
70
71
|
display: none;
|
|
@@ -72,15 +73,16 @@ section div {
|
|
|
72
73
|
position: absolute;
|
|
73
74
|
top: 2rem;
|
|
74
75
|
left: 0;
|
|
75
|
-
border-top: solid 0.2rem #
|
|
76
|
+
border-top: solid 0.2rem var(--tab-active-bg, #eee);
|
|
76
77
|
padding-top: 1rem;
|
|
77
78
|
z-index: 1;
|
|
78
|
-
|
|
79
|
+
font-size: 1rem;
|
|
79
80
|
}
|
|
80
81
|
section.active header {
|
|
81
82
|
font-weight: 700;
|
|
82
|
-
background: #
|
|
83
|
-
color: #000;
|
|
83
|
+
background: var(--tab-active-bg, #eee);
|
|
84
|
+
color: var(--tab-active-fg, #000);
|
|
85
|
+
cursor: default;
|
|
84
86
|
}
|
|
85
87
|
section.active div {
|
|
86
88
|
display: block;
|
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
<style>
|
|
6
6
|
tfoot {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
background: var(--table-footer-bg, #333);
|
|
8
|
+
color: var(--table-footer-fg, #fff);
|
|
9
|
+
border-top: solid 0.1rem var(--table-footer-border, #000);
|
|
10
|
+
border-bottom: solid 0.1rem var(--table-footer-border, #000);
|
|
11
|
+
font-size: 0.8rem;
|
|
10
12
|
}
|
|
11
13
|
</style>
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
thead {
|
|
7
7
|
display: table-header-group;
|
|
8
8
|
vertical-align: middle;
|
|
9
|
-
background: #333;
|
|
10
|
-
color: #fff;
|
|
11
|
-
border-top: solid 0.1rem #000;
|
|
12
|
-
border-bottom: solid 0.1rem #000;
|
|
9
|
+
background: var(--table-header-bg, #333);
|
|
10
|
+
color: var(--table-header-fg, #fff);
|
|
11
|
+
border-top: solid 0.1rem var(--table-header-border, #000);
|
|
12
|
+
border-bottom: solid 0.1rem var(--table-header-border, #000);
|
|
13
13
|
}
|
|
14
14
|
</style>
|
|
@@ -4,12 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
<style>
|
|
6
6
|
tr {
|
|
7
|
-
background-color: #fff;
|
|
8
|
-
color: #
|
|
9
|
-
border-bottom: solid 1px #000;
|
|
7
|
+
background-color: var(--table-row-bg, #fff);
|
|
8
|
+
color: var(--table-row-fg, #000);
|
|
9
|
+
border-bottom: solid 1px var(--table-row-border, #000);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
tr:nth-of-type(odd) {
|
|
13
|
-
background-color: #
|
|
13
|
+
background-color: var(--table-row-alt-bg, #ccc);
|
|
14
|
+
color: var(--table-row-alt-fg, #000);
|
|
14
15
|
}
|
|
15
16
|
</style>
|