@likable-hair/svelte 3.1.7 → 3.1.8

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 (4) hide show
  1. package/dist/components/simple/forms/Checkbox.css +11 -0
  2. package/dist/components/simple/forms/Checkbox.svelte +58 -23
  3. package/dist/components/simple/forms/Checkbox.svelte.d.ts +2 -8
  4. package/package.json +1 -1
package/dist/components/simple/forms/Checkbox.css ADDED
@@ -0,0 +1,11 @@
1
+ :root {
2
+ --checkbox-default-active-color: rgb(var(--global-color-primary-500));
3
+ --checkbox-default-active-inner-color: rgb(var(--global-color-grey-50));
4
+ --checkbox-default-focus-shadow: 2px rgb(var(--global-color-primary-500), .3);
5
+ --checkbox-default-border-color: rgb(var(--global-color-contrast-300), .2);
6
+ --checkbox-default-border-hover-color: #275efe;
7
+ --checkbox-default-background-color: rgb(var(--global-color-background-200));
8
+ --checkbox-default-disabled-color: rgb(var(--global-color-background-200), .5);
9
+ --checkbox-default-disabled-active-color: rgb(var(--global-color-primary-500));
10
+ --checkbox-default-disabled-inner-color: rgb(var(--global-color-grey-50));
11
+ }
package/dist/components/simple/forms/Checkbox.svelte CHANGED
@@ -1,15 +1,9 @@
1
- <script>export let value = false, id = void 0, disabled = false, activeColor = "#275efe", activeInnerColor = "#fff", focusShadow = "2px rgba(39, 94, 254, 0.3)", borderColor = "#bbc1e1", borderHoverColor = "#275efe", backgroundColor = "#fff", disabledColor = "#f6f8ff", disabledInnerColor = "#e1e6f9";
1
+ <script>import "./Checkbox.css";
2
+ import "../../../css/main.css";
3
+ export let value = false, id = void 0, disabled = false;
2
4
  </script>
3
5
 
4
6
  <input
5
- style:--checkbox-active-color={activeColor}
6
- style:--checkbox-active-inner-color={activeInnerColor}
7
- style:--checkbox-focus-shadow={focusShadow}
8
- style:--checkbox-border-color={borderColor}
9
- style:--checkbox-border-hover-color={borderHoverColor}
10
- style:--checkbox-background-color={backgroundColor}
11
- style:--checkbox-disabled-color={disabledColor}
12
- style:--checkbox-disabled-inner-color={disabledInnerColor}
13
7
  {id}
14
8
  type="checkbox"
15
9
  bind:checked={value}
@@ -29,8 +23,14 @@
29
23
  position: relative;
30
24
  margin: 0;
31
25
  cursor: pointer;
32
- border: 1px solid var(--bc, var(--checkbox-border-color));
33
- background: var(--b, var(--checkbox-background-color));
26
+ border: 1px solid var(--bc, var(
27
+ --checkbox-border-color,
28
+ var(--checkbox-default-border-color)
29
+ ));
30
+ background: var(--b, var(
31
+ --checkbox-background-color,
32
+ var(--checkbox-default-background-color)
33
+ ));
34
34
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
35
35
  width: 21px;
36
36
  border-radius: 7px;
@@ -45,7 +45,10 @@
45
45
  opacity var(--d-o, 0.2s);
46
46
  width: 5px;
47
47
  height: 9px;
48
- border: 2px solid var(--checkbox-active-inner-color);
48
+ border: 2px solid var(
49
+ --checkbox-active-inner-color,
50
+ var(--checkbox-default-active-inner-color)
51
+ );
49
52
  border-top: 0;
50
53
  border-left: 0;
51
54
  left: 7px;
@@ -54,9 +57,15 @@
54
57
  box-sizing: border-box;
55
58
  }
56
59
 
57
- input[type="checkbox"]:checked {
58
- --b: var(--checkbox-active-color);
59
- --bc: var(--checkbox-active-color);
60
+ input[type="checkbox"]:checked:not(:disabled) {
61
+ --b: var(
62
+ --checkbox-active-color,
63
+ var(--checkbox-default-active-color)
64
+ );
65
+ --bc: var(
66
+ --checkbox-active-color,
67
+ var(--checkbox-default-active-color)
68
+ );
60
69
  --d-o: 0.3s;
61
70
  --d-t: 0.6s;
62
71
  --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
@@ -65,14 +74,31 @@
65
74
  }
66
75
 
67
76
  input[type="checkbox"]:disabled {
68
- --b: var(--checkbox-disabled-color);
77
+ --b: var(
78
+ --checkbox-disabled-color,
79
+ var(--checkbox-default-disabled-color)
80
+ );
81
+ --bc: var(
82
+ --checkbox-disabled-active-color,
83
+ var(--checkbox-default-disabled-active-color)
84
+ );
69
85
  cursor: not-allowed;
70
- opacity: 0.9;
86
+ opacity: 0.5;
71
87
  }
72
88
 
73
89
  input[type="checkbox"]:disabled:checked {
74
- --b: var(--checkbox-disabled-inner-color);
75
- --bc: var(--checkbox-border-color);
90
+ --b: var(
91
+ --checkbox-disabled-active-color,
92
+ var(--checkbox-default-disabled-active-color)
93
+ );
94
+ --bc: var(
95
+ --checkbox-border-color,
96
+ var(--checkbox-default-border-color)
97
+ );
98
+ --d-o: 0.3s;
99
+ --d-t: 0.6s;
100
+ --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
101
+ --o: .7;
76
102
  --r: 43deg;
77
103
  }
78
104
 
@@ -81,16 +107,25 @@
81
107
  }
82
108
 
83
109
  input[type="checkbox"]:hover:not(:checked):not(:disabled) {
84
- --bc: var(--checkbox-border-hover-color);
110
+ --bc: var(
111
+ --checkbox-border-hover-color,
112
+ var(--checkbox-default-border-hover-color)
113
+ );
85
114
  }
86
115
  input[type="checkbox"]:focus {
87
- box-shadow: 0 0 0 var(--checkbox-focus-shadow);
116
+ box-shadow: 0 0 0 var(
117
+ --checkbox-focus-shadow,
118
+ var(--checkbox-default-focus-shadow)
119
+ );
88
120
  }
89
121
 
90
- input[type="checkbox"]:not(.switch):after {
122
+ input[type="checkbox"]:after {
91
123
  width: 5px;
92
124
  height: 9px;
93
- border: 2px solid var(--checkbox-active-inner-color);
125
+ border: 2px solid var(
126
+ --checkbox-active-inner-color,
127
+ var(--checkbox-default-active-inner-color)
128
+ );
94
129
  border-top: 0;
95
130
  border-left: 0;
96
131
  left: 7px;
package/dist/components/simple/forms/Checkbox.svelte.d.ts CHANGED
@@ -1,17 +1,11 @@
1
1
  import { SvelteComponent } from "svelte";
2
+ import './Checkbox.css';
3
+ import '../../../css/main.css';
2
4
  declare const __propDef: {
3
5
  props: {
4
6
  value?: boolean | undefined;
5
7
  id?: string | undefined;
6
8
  disabled?: boolean | undefined;
7
- activeColor?: string | undefined;
8
- activeInnerColor?: string | undefined;
9
- focusShadow?: string | undefined;
10
- borderColor?: string | undefined;
11
- borderHoverColor?: string | undefined;
12
- backgroundColor?: string | undefined;
13
- disabledColor?: string | undefined;
14
- disabledInnerColor?: string | undefined;
15
9
  };
16
10
  events: {
17
11
  change: Event;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@likable-hair/svelte",
3
3
  "description": "A Svelte component for likablehair and others",
4
- "version": "3.1.7",
4
+ "version": "3.1.8",
5
5
  "scripts": {
6
6
  "host": "vite --host",
7
7
  "dev": "vite dev",