@neovici/cosmoz-input 4.0.0 → 4.1.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 +23 -8
- package/package.json +1 -1
package/dist/styles.js
CHANGED
|
@@ -34,13 +34,17 @@ export const styles = css `
|
|
|
34
34
|
--cosmoz-input-focused-color,
|
|
35
35
|
var(--primary-color, #3f51b5)
|
|
36
36
|
);
|
|
37
|
-
|
|
37
|
+
--contour-color: var(--line-color);
|
|
38
|
+
--contour-size: var(--cosmoz-input-contour-size);
|
|
38
39
|
display: block;
|
|
39
40
|
padding: var(--cosmoz-input-padding, 8px 0);
|
|
40
41
|
padding-top: var(--paper-input-container_-_padding-top, 8px);
|
|
41
42
|
padding-bottom: var(--paper-input-container_-_padding-bottom, 8px);
|
|
42
43
|
position: relative;
|
|
43
|
-
|
|
44
|
+
transition:
|
|
45
|
+
transform 0.25s,
|
|
46
|
+
width 0.25s;
|
|
47
|
+
transform-origin: left top;
|
|
44
48
|
max-height: var(--cosmoz-input-max-height);
|
|
45
49
|
font-size: var(--font-size);
|
|
46
50
|
line-height: var(--line-height);
|
|
@@ -62,8 +66,8 @@ export const styles = css `
|
|
|
62
66
|
align-items: center;
|
|
63
67
|
position: relative;
|
|
64
68
|
background: var(--bg);
|
|
65
|
-
border: var(--cosmoz-input-border
|
|
66
|
-
|
|
69
|
+
border-radius: var(--cosmoz-input-border-radius);
|
|
70
|
+
box-shadow: 0 0 0 var(--contour-size) var(--contour-color);
|
|
67
71
|
}
|
|
68
72
|
|
|
69
73
|
.control {
|
|
@@ -95,7 +99,9 @@ export const styles = css `
|
|
|
95
99
|
top: 0;
|
|
96
100
|
left: 0;
|
|
97
101
|
width: var(--cosmoz-input-label-width, 100%);
|
|
98
|
-
transition:
|
|
102
|
+
transition:
|
|
103
|
+
transform 0.25s,
|
|
104
|
+
width 0.25s;
|
|
99
105
|
transform-origin: left top;
|
|
100
106
|
color: var(--color);
|
|
101
107
|
white-space: nowrap;
|
|
@@ -103,13 +109,15 @@ export const styles = css `
|
|
|
103
109
|
text-overflow: ellipsis;
|
|
104
110
|
text-transform: var(--cosmoz-input-label-text-transform);
|
|
105
111
|
font-weight: var(--cosmoz-input-label-font-weight);
|
|
112
|
+
padding: var(--cosmoz-input-label-padding);
|
|
106
113
|
}
|
|
107
114
|
|
|
108
115
|
:host([always-float-label]) label,
|
|
109
116
|
#input:not(:placeholder-shown) + label {
|
|
117
|
+
--cosmoz-input-label-padding: 0 1px;
|
|
110
118
|
transform: translateY(calc(var(--label-scale) * -100%))
|
|
111
119
|
scale(var(--label-scale));
|
|
112
|
-
background-color: var(--cosmoz-input-
|
|
120
|
+
background-color: var(--cosmoz-input-floating-label-bg, transparent);
|
|
113
121
|
}
|
|
114
122
|
:host(:not(always-float-label):focus-within) #input::placeholder,
|
|
115
123
|
:host(:focus-within) label {
|
|
@@ -121,11 +129,11 @@ export const styles = css `
|
|
|
121
129
|
padding-top: 1px;
|
|
122
130
|
border-bottom: 1px solid var(--line-color);
|
|
123
131
|
position: relative;
|
|
132
|
+
display: var(--cosmoz-input-line-display, block);
|
|
124
133
|
}
|
|
125
134
|
.line::before {
|
|
126
135
|
content: '';
|
|
127
136
|
position: absolute;
|
|
128
|
-
display: var(--cosmoz-input-line-display, block);
|
|
129
137
|
border-bottom: 2px solid transparent;
|
|
130
138
|
border-bottom-color: inherit;
|
|
131
139
|
left: 0;
|
|
@@ -144,7 +152,8 @@ export const styles = css `
|
|
|
144
152
|
}
|
|
145
153
|
|
|
146
154
|
:host(:focus-within) {
|
|
147
|
-
|
|
155
|
+
--contour-color: var(--focused-color);
|
|
156
|
+
caret-color: var(--focused-color);
|
|
148
157
|
}
|
|
149
158
|
|
|
150
159
|
:host([disabled]) .line {
|
|
@@ -165,6 +174,12 @@ export const styles = css `
|
|
|
165
174
|
position: absolute;
|
|
166
175
|
max-width: 100%;
|
|
167
176
|
}
|
|
177
|
+
|
|
178
|
+
:host([invalid]) {
|
|
179
|
+
--contour-color: var(--invalid-color);
|
|
180
|
+
caret-color: var(--invalid-color);
|
|
181
|
+
}
|
|
182
|
+
|
|
168
183
|
:host([invalid]) label,
|
|
169
184
|
.error {
|
|
170
185
|
color: var(--invalid-color);
|