@umbraco-ui/uui-checkbox 1.2.1 → 1.3.0-rc.0
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/lib/index.js +21 -17
- package/package.json +6 -6
package/lib/index.js
CHANGED
|
@@ -24,6 +24,10 @@ let UUICheckboxElement = class extends UUIBooleanInputElement {
|
|
|
24
24
|
`;
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
+
/**
|
|
28
|
+
* This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/
|
|
29
|
+
* @type {boolean}
|
|
30
|
+
*/
|
|
27
31
|
UUICheckboxElement.formAssociated = true;
|
|
28
32
|
UUICheckboxElement.styles = [
|
|
29
33
|
...UUIBooleanInputElement.styles,
|
|
@@ -46,7 +50,7 @@ UUICheckboxElement.styles = [
|
|
|
46
50
|
height: var(--uui-checkbox-size);
|
|
47
51
|
border-radius: var(
|
|
48
52
|
--uui-checkbox-border-radius,
|
|
49
|
-
var(--uui-border-radius,
|
|
53
|
+
var(--uui-border-radius,var(--uui-size-1))
|
|
50
54
|
);
|
|
51
55
|
|
|
52
56
|
color: var(--uui-toggle-color, var(--uui-color-selected-contrast,#fff));
|
|
@@ -65,7 +69,7 @@ UUICheckboxElement.styles = [
|
|
|
65
69
|
);
|
|
66
70
|
background-color: var(
|
|
67
71
|
--uui-checkbox-background-color-hover,
|
|
68
|
-
var(--uui-color-surface-emphasis,
|
|
72
|
+
var(--uui-color-surface-emphasis,var(--uui-palette-white-dark))
|
|
69
73
|
);
|
|
70
74
|
}
|
|
71
75
|
label:focus #ticker {
|
|
@@ -75,17 +79,17 @@ UUICheckboxElement.styles = [
|
|
|
75
79
|
);
|
|
76
80
|
background-color: var(
|
|
77
81
|
--uui-checkbox-background-color-focus,
|
|
78
|
-
var(--uui-color-surface-emphasis,
|
|
82
|
+
var(--uui-color-surface-emphasis,var(--uui-palette-white-dark))
|
|
79
83
|
);
|
|
80
84
|
}
|
|
81
85
|
input:checked:not([disabled]) + #ticker {
|
|
82
|
-
border-color: var(--uui-color-selected
|
|
86
|
+
border-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
|
|
83
87
|
}
|
|
84
88
|
label:hover input:checked:not([disabled]) + #ticker {
|
|
85
|
-
border-color: var(--uui-color-selected-emphasis,
|
|
89
|
+
border-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
|
|
86
90
|
}
|
|
87
91
|
label:focus input:checked + #ticker {
|
|
88
|
-
border-color: var(--uui-color-selected-emphasis,
|
|
92
|
+
border-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
|
|
89
93
|
}
|
|
90
94
|
|
|
91
95
|
#icon-check {
|
|
@@ -107,15 +111,15 @@ UUICheckboxElement.styles = [
|
|
|
107
111
|
bottom: 0;
|
|
108
112
|
right: 0;
|
|
109
113
|
border-radius: calc(
|
|
110
|
-
var(--uui-checkbox-border-radius, var(--uui-border-radius,
|
|
114
|
+
var(--uui-checkbox-border-radius, var(--uui-border-radius,var(--uui-size-1))) * 0.5
|
|
111
115
|
);
|
|
112
|
-
background-color: var(--uui-color-selected
|
|
116
|
+
background-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
|
|
113
117
|
transition: transform 120ms ease, opacity 120ms, background-color 120ms;
|
|
114
118
|
transform: scale(0);
|
|
115
119
|
opacity: 0;
|
|
116
120
|
}
|
|
117
121
|
label:hover input:checked:not([disabled]) + #ticker::before {
|
|
118
|
-
background-color: var(--uui-color-selected-emphasis,
|
|
122
|
+
background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
|
|
119
123
|
}
|
|
120
124
|
|
|
121
125
|
input:checked + #ticker::before {
|
|
@@ -126,12 +130,12 @@ UUICheckboxElement.styles = [
|
|
|
126
130
|
opacity: 1;
|
|
127
131
|
}
|
|
128
132
|
label:focus input:checked + #ticker {
|
|
129
|
-
background-color: var(--uui-color-selected-emphasis,
|
|
133
|
+
background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
input:focus + #ticker {
|
|
133
137
|
outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
|
|
134
|
-
var(--uui-color-focus
|
|
138
|
+
var(--uui-color-focus,var(--uui-palette-malibu));
|
|
135
139
|
}
|
|
136
140
|
|
|
137
141
|
:host(:not([disabled])) label:active input:checked + #ticker::before {
|
|
@@ -148,26 +152,26 @@ UUICheckboxElement.styles = [
|
|
|
148
152
|
:host(:not([pristine])[internals-invalid]) label:hover #ticker,
|
|
149
153
|
:host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,
|
|
150
154
|
:host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker {
|
|
151
|
-
border: 1px solid var(--uui-color-danger-standalone,
|
|
155
|
+
border: 1px solid var(--uui-color-danger-standalone,var(--uui-palette-maroon-flush-dark));
|
|
152
156
|
}
|
|
153
157
|
|
|
154
158
|
:host([disabled]) #ticker {
|
|
155
|
-
background-color: var(--uui-color-disabled
|
|
159
|
+
background-color: var(--uui-color-disabled,var(--uui-palette-sand));
|
|
156
160
|
}
|
|
157
161
|
:host([disabled]) input:checked + #ticker {
|
|
158
|
-
background-color: var(--uui-color-disabled
|
|
162
|
+
background-color: var(--uui-color-disabled,var(--uui-palette-sand));
|
|
159
163
|
}
|
|
160
164
|
:host([disabled]) #ticker::before {
|
|
161
|
-
background-color: var(--uui-color-disabled
|
|
165
|
+
background-color: var(--uui-color-disabled,var(--uui-palette-sand));
|
|
162
166
|
}
|
|
163
167
|
:host([disabled]) #ticker #icon-check {
|
|
164
|
-
fill: var(--uui-color-disabled-contrast
|
|
168
|
+
fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
|
|
165
169
|
}
|
|
166
170
|
:host([disabled]) label:active #ticker {
|
|
167
171
|
animation: ${UUIHorizontalShakeAnimationValue};
|
|
168
172
|
}
|
|
169
173
|
:host([disabled]) input:checked + #ticker #icon-check {
|
|
170
|
-
fill: var(--uui-color-disabled-contrast
|
|
174
|
+
fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
|
|
171
175
|
}
|
|
172
176
|
`
|
|
173
177
|
];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-checkbox",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -33,18 +33,18 @@
|
|
|
33
33
|
"custom-elements.json"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@umbraco-ui/uui-base": "1.
|
|
37
|
-
"@umbraco-ui/uui-boolean-input": "1.
|
|
38
|
-
"@umbraco-ui/uui-icon-registry-essential": "1.
|
|
36
|
+
"@umbraco-ui/uui-base": "1.3.0-rc.0",
|
|
37
|
+
"@umbraco-ui/uui-boolean-input": "1.3.0-rc.0",
|
|
38
|
+
"@umbraco-ui/uui-icon-registry-essential": "1.3.0-rc.0"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
42
|
-
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
|
|
42
|
+
"clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
|
|
43
43
|
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-checkbox",
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
|
|
50
50
|
}
|