sveltacular 0.0.32 → 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.
Files changed (13) hide show
  1. package/dist/forms/button/button.svelte +8 -7
  2. package/dist/generic/card/card-container.svelte +18 -0
  3. package/dist/generic/card/card-container.svelte.d.ts +27 -0
  4. package/dist/generic/card/card.svelte +2 -0
  5. package/dist/generic/link/link.svelte +15 -2
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +1 -0
  8. package/dist/navigation/breadcrumbs/breadcrumbs.svelte +4 -3
  9. package/dist/navigation/tabs/tab.svelte +13 -11
  10. package/dist/tables/table-footer.svelte +5 -3
  11. package/dist/tables/table-header.svelte +4 -4
  12. package/dist/tables/table-row.svelte +5 -4
  13. package/package.json +1 -1
package/dist/forms/button/button.svelte CHANGED
@@ -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, #1976d2);
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, #e2e2e2);
89
- border-color: var(--button-secondary-border, #e2e2e2);
90
- color: var(--button-secondary-fg, #000);
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, #d5d5d5);
94
- color: var(--button-secondary-hover-fg, #000);
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, #388e3c);
114
+ color: var(--button-positive-hover-fg, #fff);
114
115
  }
115
116
  button.danger {
116
117
  background-color: var(--button-danger-bg, #e53935);
package/dist/generic/card/card-container.svelte ADDED
@@ -0,0 +1,18 @@
1
+ <ul>
2
+ <slot />
3
+ </ul>
4
+
5
+ <style>
6
+ ul {
7
+ list-style: none;
8
+ padding: 0;
9
+ margin: 0;
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ flex-direction: row;
13
+ align-items: stretch;
14
+ justify-content: space-around;
15
+ align-content: stretch;
16
+ row-gap: 1rem;
17
+ }
18
+ </style>
package/dist/generic/card/card-container.svelte.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ /** @typedef {typeof __propDef.props} CardContainerProps */
2
+ /** @typedef {typeof __propDef.events} CardContainerEvents */
3
+ /** @typedef {typeof __propDef.slots} CardContainerSlots */
4
+ export default class CardContainer extends SvelteComponent<{
5
+ [x: string]: never;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {
9
+ default: {};
10
+ }> {
11
+ }
12
+ export type CardContainerProps = typeof __propDef.props;
13
+ export type CardContainerEvents = typeof __propDef.events;
14
+ export type CardContainerSlots = typeof __propDef.slots;
15
+ import { SvelteComponent } from "svelte";
16
+ declare const __propDef: {
17
+ props: {
18
+ [x: string]: never;
19
+ };
20
+ events: {
21
+ [evt: string]: CustomEvent<any>;
22
+ };
23
+ slots: {
24
+ default: {};
25
+ };
26
+ };
27
+ export {};
package/dist/generic/card/card.svelte CHANGED
@@ -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;
package/dist/generic/link/link.svelte CHANGED
@@ -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
- cursor: pointer;
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>
package/dist/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export { default as FormSection } from './forms/form-section.svelte';
20
20
  export { default as InfoBox } from './forms/info-box/info-box.svelte';
21
21
  export { default as UrlBox } from './forms/url-box/url-box.svelte';
22
22
  export { default as Card } from './generic/card/card.svelte';
23
+ export { default as CardContainer } from './generic/card/card-container.svelte';
23
24
  export { default as Divider } from './generic/divider/divider.svelte';
24
25
  export { default as Link } from './generic/link/link.svelte';
25
26
  export { default as Pill } from './generic/pill/pill.svelte';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ export { default as InfoBox } from './forms/info-box/info-box.svelte';
22
22
  export { default as UrlBox } from './forms/url-box/url-box.svelte';
23
23
  // Generic
24
24
  export { default as Card } from './generic/card/card.svelte';
25
+ export { default as CardContainer } from './generic/card/card-container.svelte';
25
26
  export { default as Divider } from './generic/divider/divider.svelte';
26
27
  export { default as Link } from './generic/link/link.svelte';
27
28
  export { default as Pill } from './generic/pill/pill.svelte';
package/dist/navigation/breadcrumbs/breadcrumbs.svelte CHANGED
@@ -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, #333);
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, #333);
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, black);
57
+ color: var(--breadcrumbs-link-hover-fg, white);
57
58
  text-decoration: underline;
58
59
  }
59
60
  nav.sm li {
package/dist/navigation/tabs/tab.svelte CHANGED
@@ -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
- color: #aaa;
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 #ccc;
76
+ border-top: solid 0.2rem var(--tab-active-bg, #eee);
76
77
  padding-top: 1rem;
77
78
  z-index: 1;
78
- color: var(--sv-color-fg);
79
+ font-size: 1rem;
79
80
  }
80
81
  section.active header {
81
82
  font-weight: 700;
82
- background: #ddd;
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;
package/dist/tables/table-footer.svelte CHANGED
@@ -4,8 +4,10 @@
4
4
 
5
5
  <style>
6
6
  tfoot {
7
- border-top: solid 0.1rem #000;
8
- border-bottom: solid 0.1rem #000;
9
- font-size: 0.75rem;
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>
package/dist/tables/table-header.svelte CHANGED
@@ -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>
package/dist/tables/table-row.svelte CHANGED
@@ -4,12 +4,13 @@
4
4
 
5
5
  <style>
6
6
  tr {
7
- background-color: #fff;
8
- color: #333;
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: #cecece;
13
+ background-color: var(--table-row-alt-bg, #ccc);
14
+ color: var(--table-row-alt-fg, #000);
14
15
  }
15
16
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sveltacular",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "scripts": {
5
5
  "watch": "npm run dev -- --open",
6
6
  "dev": "vite dev",