@neovici/cosmoz-input 4.2.0 → 4.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 +12 -9
- package/package.json +1 -1
package/dist/styles.js
CHANGED
|
@@ -36,14 +36,13 @@ export const styles = css `
|
|
|
36
36
|
);
|
|
37
37
|
--contour-color: var(--line-color);
|
|
38
38
|
--contour-size: var(--cosmoz-input-contour-size);
|
|
39
|
+
--label-translate-y: var(--cosmoz-input-label-translate-y, 0%);
|
|
39
40
|
display: block;
|
|
40
41
|
padding: var(--cosmoz-input-padding, 8px 0);
|
|
41
42
|
padding-top: var(--paper-input-container_-_padding-top, 8px);
|
|
42
43
|
padding-bottom: var(--paper-input-container_-_padding-bottom, 8px);
|
|
43
44
|
position: relative;
|
|
44
|
-
transition:
|
|
45
|
-
transform 0.25s,
|
|
46
|
-
width 0.25s;
|
|
45
|
+
transition: transform 0.25s, width 0.25s;
|
|
47
46
|
transform-origin: left top;
|
|
48
47
|
max-height: var(--cosmoz-input-max-height);
|
|
49
48
|
font-size: var(--font-size);
|
|
@@ -100,9 +99,7 @@ export const styles = css `
|
|
|
100
99
|
top: 0;
|
|
101
100
|
left: 0;
|
|
102
101
|
width: var(--cosmoz-input-label-width, 100%);
|
|
103
|
-
transition:
|
|
104
|
-
transform 0.25s,
|
|
105
|
-
width 0.25s;
|
|
102
|
+
transition: transform 0.25s, width 0.25s;
|
|
106
103
|
transform-origin: left top;
|
|
107
104
|
color: var(--color);
|
|
108
105
|
white-space: nowrap;
|
|
@@ -110,16 +107,22 @@ export const styles = css `
|
|
|
110
107
|
text-overflow: ellipsis;
|
|
111
108
|
text-transform: var(--cosmoz-input-label-text-transform);
|
|
112
109
|
font-weight: var(--cosmoz-input-label-font-weight);
|
|
113
|
-
padding: var(--cosmoz-input-label-padding);
|
|
114
110
|
}
|
|
115
111
|
|
|
116
112
|
:host([always-float-label]) label,
|
|
117
113
|
#input:not(:placeholder-shown) + label {
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
transform: translateY(
|
|
115
|
+
calc(var(--label-scale) * -100% + var(--label-translate-y))
|
|
116
|
+
)
|
|
120
117
|
scale(var(--label-scale));
|
|
121
118
|
background-color: var(--cosmoz-input-floating-label-bg, var(--bg));
|
|
122
119
|
}
|
|
120
|
+
|
|
121
|
+
:host([always-float-label]) input,
|
|
122
|
+
#input:not(:placeholder-shown) {
|
|
123
|
+
transform: translateY(var(--label-translate-y));
|
|
124
|
+
}
|
|
125
|
+
|
|
123
126
|
:host(:not(always-float-label):focus-within) #input::placeholder,
|
|
124
127
|
:host(:focus-within) label {
|
|
125
128
|
color: var(--focused-color);
|