@fluid-topics/ft-input-label 1.2.10 → 1.2.11
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.
|
@@ -103,17 +103,17 @@ Also for action icons.`,e.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
103
103
|
.ft-typography {
|
|
104
104
|
vertical-align: inherit;
|
|
105
105
|
}
|
|
106
|
-
`,Na=[Object.keys(G).map(i=>xt(i))];var Ct=u(C()),f=u(z());var l={fontSize:f.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:f.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:f.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:f.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:f.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:f.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:f.FtCssVariableFactory.extend("--ft-input-label-border-color","",f.designSystemVariables.colorOutline),textColor:f.FtCssVariableFactory.extend("--ft-input-label-text-color","",f.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:f.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",f.designSystemVariables.colorOnSurfaceDisabled),
|
|
106
|
+
`,Na=[Object.keys(G).map(i=>xt(i))];var Ct=u(C()),f=u(z());var l={fontSize:f.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:f.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:f.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:f.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:f.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:f.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:f.FtCssVariableFactory.extend("--ft-input-label-border-color","",f.designSystemVariables.colorOutline),textColor:f.FtCssVariableFactory.extend("--ft-input-label-text-color","",f.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:f.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",f.designSystemVariables.colorOnSurfaceDisabled),backgroundColor:f.FtCssVariableFactory.extend("--ft-input-label-background-color","",f.designSystemVariables.colorSurface),borderRadius:f.FtCssVariableFactory.extend("--ft-input-label-border-radius","",f.designSystemVariables.borderRadiusS),colorError:f.FtCssVariableFactory.external(f.designSystemVariables.colorError,"Design system")},Nt=Ct.css`
|
|
107
107
|
.ft-input-label {
|
|
108
108
|
position: absolute;
|
|
109
109
|
inset: 0;
|
|
110
110
|
display: flex;
|
|
111
|
-
background-color: ${l.
|
|
112
|
-
border-radius: ${l.
|
|
111
|
+
background-color: ${l.backgroundColor};
|
|
112
|
+
border-radius: ${l.borderRadius} ${l.borderRadius} 0 0;
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
.ft-input-label--outlined {
|
|
116
|
-
border-radius: ${l.
|
|
116
|
+
border-radius: ${l.borderRadius};
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.ft-input-label {
|
|
@@ -205,20 +205,20 @@ Also for action icons.`,e.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
205
205
|
.ft-input-label--outlined:before {
|
|
206
206
|
border-left-width: 1px;
|
|
207
207
|
border-left-style: solid;
|
|
208
|
-
border-radius: ${l.
|
|
208
|
+
border-radius: ${l.borderRadius} 0 0 ${l.borderRadius};
|
|
209
209
|
}
|
|
210
210
|
|
|
211
211
|
.ft-input-label--outlined:after {
|
|
212
212
|
border-right-width: 1px;
|
|
213
213
|
border-right-style: solid;
|
|
214
|
-
border-radius: 0 ${l.
|
|
214
|
+
border-radius: 0 ${l.borderRadius} ${l.borderRadius} 0;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
217
|
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
|
|
218
218
|
padding: 2px 4px;
|
|
219
219
|
z-index: ${l.raisedZIndex};
|
|
220
|
-
background-color: ${l.
|
|
221
|
-
border-radius: ${l.
|
|
220
|
+
background-color: ${l.backgroundColor};
|
|
221
|
+
border-radius: ${l.borderRadius};
|
|
222
222
|
top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
|
|
223
223
|
}
|
|
224
224
|
|
|
@@ -151,17 +151,17 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
151
151
|
.ft-typography {
|
|
152
152
|
vertical-align: inherit;
|
|
153
153
|
}
|
|
154
|
-
`,Ob=[Object.keys(Gt).map(r=>qs(r))];var B={fontSize:t.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:t.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:t.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:t.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:t.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:t.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:t.extend("--ft-input-label-border-color","",te.colorOutline),textColor:t.extend("--ft-input-label-text-color","",te.colorOnSurfaceMedium),disabledTextColor:t.extend("--ft-input-label-disabled-text-color","",te.colorOnSurfaceDisabled),
|
|
154
|
+
`,Ob=[Object.keys(Gt).map(r=>qs(r))];var B={fontSize:t.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:t.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:t.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:t.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:t.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:t.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:t.extend("--ft-input-label-border-color","",te.colorOutline),textColor:t.extend("--ft-input-label-text-color","",te.colorOnSurfaceMedium),disabledTextColor:t.extend("--ft-input-label-disabled-text-color","",te.colorOnSurfaceDisabled),backgroundColor:t.extend("--ft-input-label-background-color","",te.colorSurface),borderRadius:t.extend("--ft-input-label-border-radius","",te.borderRadiusS),colorError:t.external(te.colorError,"Design system")},Xs=U`
|
|
155
155
|
.ft-input-label {
|
|
156
156
|
position: absolute;
|
|
157
157
|
inset: 0;
|
|
158
158
|
display: flex;
|
|
159
|
-
background-color: ${B.
|
|
160
|
-
border-radius: ${B.
|
|
159
|
+
background-color: ${B.backgroundColor};
|
|
160
|
+
border-radius: ${B.borderRadius} ${B.borderRadius} 0 0;
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
.ft-input-label--outlined {
|
|
164
|
-
border-radius: ${B.
|
|
164
|
+
border-radius: ${B.borderRadius};
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
.ft-input-label {
|
|
@@ -253,20 +253,20 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
|
|
|
253
253
|
.ft-input-label--outlined:before {
|
|
254
254
|
border-left-width: 1px;
|
|
255
255
|
border-left-style: solid;
|
|
256
|
-
border-radius: ${B.
|
|
256
|
+
border-radius: ${B.borderRadius} 0 0 ${B.borderRadius};
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
.ft-input-label--outlined:after {
|
|
260
260
|
border-right-width: 1px;
|
|
261
261
|
border-right-style: solid;
|
|
262
|
-
border-radius: 0 ${B.
|
|
262
|
+
border-radius: 0 ${B.borderRadius} ${B.borderRadius} 0;
|
|
263
263
|
}
|
|
264
264
|
|
|
265
265
|
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
|
|
266
266
|
padding: 2px 4px;
|
|
267
267
|
z-index: ${B.raisedZIndex};
|
|
268
|
-
background-color: ${B.
|
|
269
|
-
border-radius: ${B.
|
|
268
|
+
background-color: ${B.backgroundColor};
|
|
269
|
+
border-radius: ${B.borderRadius};
|
|
270
270
|
top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
|
|
271
271
|
}
|
|
272
272
|
|
|
@@ -8,8 +8,8 @@ export declare const FtInputLabelCssVariables: {
|
|
|
8
8
|
borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
9
9
|
textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
10
10
|
disabledTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
12
|
+
borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
13
13
|
colorError: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
14
14
|
};
|
|
15
15
|
export declare const styles: import("lit").CSSResult;
|
|
@@ -11,8 +11,8 @@ export const FtInputLabelCssVariables = {
|
|
|
11
11
|
borderColor: FtCssVariableFactory.extend("--ft-input-label-border-color", "", designSystemVariables.colorOutline),
|
|
12
12
|
textColor: FtCssVariableFactory.extend("--ft-input-label-text-color", "", designSystemVariables.colorOnSurfaceMedium),
|
|
13
13
|
disabledTextColor: FtCssVariableFactory.extend("--ft-input-label-disabled-text-color", "", designSystemVariables.colorOnSurfaceDisabled),
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
backgroundColor: FtCssVariableFactory.extend("--ft-input-label-background-color", "", designSystemVariables.colorSurface),
|
|
15
|
+
borderRadius: FtCssVariableFactory.extend("--ft-input-label-border-radius", "", designSystemVariables.borderRadiusS),
|
|
16
16
|
colorError: FtCssVariableFactory.external(designSystemVariables.colorError, "Design system"),
|
|
17
17
|
};
|
|
18
18
|
// language=CSS
|
|
@@ -21,12 +21,12 @@ export const styles = css `
|
|
|
21
21
|
position: absolute;
|
|
22
22
|
inset: 0;
|
|
23
23
|
display: flex;
|
|
24
|
-
background-color: ${FtInputLabelCssVariables.
|
|
25
|
-
border-radius: ${FtInputLabelCssVariables.
|
|
24
|
+
background-color: ${FtInputLabelCssVariables.backgroundColor};
|
|
25
|
+
border-radius: ${FtInputLabelCssVariables.borderRadius} ${FtInputLabelCssVariables.borderRadius} 0 0;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.ft-input-label--outlined {
|
|
29
|
-
border-radius: ${FtInputLabelCssVariables.
|
|
29
|
+
border-radius: ${FtInputLabelCssVariables.borderRadius};
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.ft-input-label {
|
|
@@ -118,20 +118,20 @@ export const styles = css `
|
|
|
118
118
|
.ft-input-label--outlined:before {
|
|
119
119
|
border-left-width: 1px;
|
|
120
120
|
border-left-style: solid;
|
|
121
|
-
border-radius: ${FtInputLabelCssVariables.
|
|
121
|
+
border-radius: ${FtInputLabelCssVariables.borderRadius} 0 0 ${FtInputLabelCssVariables.borderRadius};
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
.ft-input-label--outlined:after {
|
|
125
125
|
border-right-width: 1px;
|
|
126
126
|
border-right-style: solid;
|
|
127
|
-
border-radius: 0 ${FtInputLabelCssVariables.
|
|
127
|
+
border-radius: 0 ${FtInputLabelCssVariables.borderRadius} ${FtInputLabelCssVariables.borderRadius} 0;
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
.ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
|
|
131
131
|
padding: 2px 4px;
|
|
132
132
|
z-index: ${FtInputLabelCssVariables.raisedZIndex};
|
|
133
|
-
background-color: ${FtInputLabelCssVariables.
|
|
134
|
-
border-radius: ${FtInputLabelCssVariables.
|
|
133
|
+
background-color: ${FtInputLabelCssVariables.backgroundColor};
|
|
134
|
+
border-radius: ${FtInputLabelCssVariables.borderRadius};
|
|
135
135
|
top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
|
|
136
136
|
}
|
|
137
137
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-input-label",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.11",
|
|
4
4
|
"description": "Dynamic label with outline",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-typography": "1.2.
|
|
23
|
-
"@fluid-topics/ft-wc-utils": "1.2.
|
|
22
|
+
"@fluid-topics/ft-typography": "1.2.11",
|
|
23
|
+
"@fluid-topics/ft-wc-utils": "1.2.11",
|
|
24
24
|
"lit": "3.1.0"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "e064cf26299976a55c5adb3c602fed2dc076557b"
|
|
27
27
|
}
|