@neovici/cosmoz-input 6.2.0 → 6.3.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/dist/styles.js +26 -5
- package/package.json +1 -1
package/dist/styles.js
CHANGED
|
@@ -22,14 +22,21 @@ export const styles = css `
|
|
|
22
22
|
|
|
23
23
|
:host([disabled]) .wrap {
|
|
24
24
|
color: var(--cz-color-text-disabled);
|
|
25
|
-
|
|
25
|
+
background: var(--cz-color-bg-disabled-subtle);
|
|
26
|
+
box-shadow: inset 0 0 0 1px var(--cz-color-border-disabled);
|
|
26
27
|
cursor: not-allowed;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
:host([disabled]) #input {
|
|
31
|
+
color: var(--cz-color-text-disabled);
|
|
30
32
|
cursor: not-allowed;
|
|
31
33
|
}
|
|
32
34
|
|
|
35
|
+
:host([readonly]) .wrap {
|
|
36
|
+
background: var(--cz-color-bg-secondary);
|
|
37
|
+
box-shadow: inset 0 0 0 1px var(--cz-color-border-secondary);
|
|
38
|
+
}
|
|
39
|
+
|
|
33
40
|
:host([invalid]) {
|
|
34
41
|
caret-color: var(--cz-color-text-error);
|
|
35
42
|
}
|
|
@@ -47,7 +54,10 @@ export const styles = css `
|
|
|
47
54
|
position: relative;
|
|
48
55
|
width: 100%;
|
|
49
56
|
border-radius: var(--cz-radius-md);
|
|
50
|
-
|
|
57
|
+
background: var(--cz-color-bg-primary);
|
|
58
|
+
box-shadow:
|
|
59
|
+
inset 0 0 0 1px var(--cz-color-border-primary),
|
|
60
|
+
var(--cz-shadow-xs);
|
|
51
61
|
overflow: hidden;
|
|
52
62
|
transition-duration: 0.1s;
|
|
53
63
|
transition-timing-function: linear;
|
|
@@ -55,15 +65,17 @@ export const styles = css `
|
|
|
55
65
|
}
|
|
56
66
|
|
|
57
67
|
.wrap:has(#input:focus) {
|
|
58
|
-
box-shadow: var(--cz-focus-ring);
|
|
68
|
+
box-shadow: var(--cz-focus-ring), var(--cz-shadow-xs);
|
|
59
69
|
}
|
|
60
70
|
|
|
61
71
|
:host([invalid]) .wrap {
|
|
62
|
-
box-shadow:
|
|
72
|
+
box-shadow:
|
|
73
|
+
inset 0 0 0 1px var(--cz-color-border-error),
|
|
74
|
+
var(--cz-shadow-xs);
|
|
63
75
|
}
|
|
64
76
|
|
|
65
77
|
:host([invalid]) .wrap:has(#input:focus) {
|
|
66
|
-
box-shadow: var(--cz-focus-ring-error);
|
|
78
|
+
box-shadow: var(--cz-focus-ring-error), var(--cz-shadow-xs);
|
|
67
79
|
}
|
|
68
80
|
|
|
69
81
|
.control {
|
|
@@ -94,6 +106,12 @@ export const styles = css `
|
|
|
94
106
|
color: var(--cz-color-text-placeholder);
|
|
95
107
|
}
|
|
96
108
|
|
|
109
|
+
/* Paint over the browser's autofill background, which can't be overridden. */
|
|
110
|
+
#input:autofill {
|
|
111
|
+
box-shadow: inset 0 0 0 100vmax var(--cz-color-bg-primary);
|
|
112
|
+
-webkit-text-fill-color: var(--cz-color-text-primary);
|
|
113
|
+
}
|
|
114
|
+
|
|
97
115
|
#input::-webkit-inner-spin-button {
|
|
98
116
|
z-index: 1;
|
|
99
117
|
}
|
|
@@ -103,6 +121,7 @@ export const styles = css `
|
|
|
103
121
|
label {
|
|
104
122
|
position: relative;
|
|
105
123
|
font-size: var(--cz-text-sm);
|
|
124
|
+
font-weight: var(--cz-font-weight-medium);
|
|
106
125
|
color: var(--cz-color-text-secondary);
|
|
107
126
|
}
|
|
108
127
|
|
|
@@ -161,6 +180,7 @@ export const styles = css `
|
|
|
161
180
|
|
|
162
181
|
:host([variant='inline']) .wrap {
|
|
163
182
|
border-radius: 0;
|
|
183
|
+
background: transparent;
|
|
164
184
|
box-shadow: none;
|
|
165
185
|
padding-inline: 0;
|
|
166
186
|
}
|
|
@@ -180,6 +200,7 @@ export const styles = css `
|
|
|
180
200
|
}
|
|
181
201
|
:host([variant='inline']) label {
|
|
182
202
|
position: absolute;
|
|
203
|
+
font-weight: var(--cz-font-weight-regular);
|
|
183
204
|
top: 25%;
|
|
184
205
|
left: 0;
|
|
185
206
|
width: 100%;
|