@cuemath/leap 3.1.10-j2 → 3.1.10-j3
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
const { colors:
|
|
1
|
+
import m from "styled-components";
|
|
2
|
+
const k = m.input(({ theme: s, $size: p, $renderAs: d, $isTransparent: u }) => {
|
|
3
|
+
const { colors: t, input: r, text: b } = s, { valueColorName: o, labelColorName: n, backgroundColorName: f } = r.variants[d], { inputTextVariant: $ } = r.sizes[p], { fontFamily: a, fontSize: l, lineHeight: c, letterSpacing: i } = b[$], e = u ? "transparent" : t[f ?? "WHITE"];
|
|
4
4
|
return `
|
|
5
5
|
position: relative;
|
|
6
6
|
width: 100%;
|
|
@@ -9,25 +9,25 @@ const w = $.input(({ theme: p, $size: s, $renderAs: d, $isTransparent: b }) => {
|
|
|
9
9
|
padding: 0;
|
|
10
10
|
outline: none;
|
|
11
11
|
|
|
12
|
-
font-family: ${
|
|
13
|
-
font-size: ${
|
|
14
|
-
line-height: ${
|
|
15
|
-
${typeof
|
|
12
|
+
font-family: ${a};
|
|
13
|
+
font-size: ${l}px;
|
|
14
|
+
line-height: ${c}px;
|
|
15
|
+
${typeof i == "number" ? `letter-spacing: ${i}px;` : ""}
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
background-color: ${
|
|
19
|
-
color: ${o
|
|
18
|
+
background-color: ${e};
|
|
19
|
+
color: ${t[o.inactive]};
|
|
20
20
|
|
|
21
21
|
&::placeholder {
|
|
22
|
-
color: ${
|
|
23
|
-
font-family: ${
|
|
24
|
-
font-size: ${
|
|
25
|
-
line-height: ${
|
|
26
|
-
${typeof
|
|
22
|
+
color: ${t[n.inactive]};
|
|
23
|
+
font-family: ${a};
|
|
24
|
+
font-size: ${l}px;
|
|
25
|
+
line-height: ${c}px;
|
|
26
|
+
${typeof i == "number" ? `letter-spacing: ${i}px;` : ""}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&:hover, &:focus {
|
|
30
|
-
color: ${o
|
|
30
|
+
color: ${t[o.active]};
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
&:read-only {
|
|
@@ -35,16 +35,16 @@ const w = $.input(({ theme: p, $size: s, $renderAs: d, $isTransparent: b }) => {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
&:disabled {
|
|
38
|
-
color: ${o
|
|
38
|
+
color: ${t[o.disabled]};
|
|
39
39
|
cursor: not-allowed;
|
|
40
40
|
|
|
41
41
|
&::placeholder {
|
|
42
|
-
color: ${
|
|
42
|
+
color: ${t[n.disabled]};
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
&:hover:not([disabled, focused])::placeholder {
|
|
47
|
-
color: ${
|
|
47
|
+
color: ${t[n.active]};
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:focus::placeholder {
|
|
@@ -57,26 +57,35 @@ const w = $.input(({ theme: p, $size: s, $renderAs: d, $isTransparent: b }) => {
|
|
|
57
57
|
margin: 0;
|
|
58
58
|
}
|
|
59
59
|
&[type="date"]:not(:placeholder-shown){
|
|
60
|
-
color: ${
|
|
60
|
+
color: ${t.BLACK_T_60};
|
|
61
61
|
text-transform: uppercase;
|
|
62
62
|
}
|
|
63
|
+
/* Autofill styles - Fixed and consolidated */
|
|
63
64
|
&::-webkit-autofill,
|
|
64
65
|
&::-webkit-autofill:hover,
|
|
65
66
|
&::-webkit-autofill:focus,
|
|
66
67
|
&::-webkit-autofill:active {
|
|
67
|
-
-webkit-
|
|
68
|
-
-webkit-
|
|
69
|
-
-
|
|
70
|
-
transition: background-color 600000s 0s, color 600000s 0s;
|
|
71
|
-
-webkit-text-fill-color: #ffffff;
|
|
72
|
-
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
|
68
|
+
-webkit-box-shadow: 0 0 0 1000px ${e} inset !important;
|
|
69
|
+
-webkit-text-fill-color: ${t[o.inactive]} !important;
|
|
70
|
+
transition: background-color 5000s ease-in-out 0s !important;
|
|
73
71
|
}
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
|
|
73
|
+
/* Additional autofill override for Chrome's internal styles */
|
|
74
|
+
&:-webkit-autofill {
|
|
75
|
+
-webkit-box-shadow: 0 0 0 1000px ${e} inset !important;
|
|
76
|
+
-webkit-text-fill-color: ${t[o.inactive]} !important;
|
|
77
|
+
background-color: ${e} !important;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Override Chrome's internal autofill selected state */
|
|
81
|
+
&:-internal-autofill-selected {
|
|
82
|
+
background-color: ${e} !important;
|
|
83
|
+
background-image: none !important;
|
|
84
|
+
color: ${t[o.inactive]} !important;
|
|
76
85
|
}
|
|
77
86
|
`;
|
|
78
87
|
});
|
|
79
88
|
export {
|
|
80
|
-
|
|
89
|
+
k as Input
|
|
81
90
|
};
|
|
82
91
|
//# sourceMappingURL=text-input-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n $renderAs: ITextInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $isTransparent?: IBaseInputProps['isTransparent'];\n}\n\nconst Input = styled.input<IInputProps>(({ theme, $size, $renderAs, $isTransparent }) => {\n const { colors, input, text } = theme;\n const { valueColorName, labelColorName, backgroundColorName } = input.variants[$renderAs];\n const { inputTextVariant } = input.sizes[$size];\n const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n width: 100%;\n height: 100%;\n border: 0;\n padding: 0;\n outline: none;\n\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n \n background-color: ${background};\n color: ${colors[valueColorName.inactive]};\n \n &::placeholder {\n color: ${colors[labelColorName.inactive]};\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n }\n\n &:hover, &:focus {\n color: ${colors[valueColorName.active]};\n }\n\n &:read-only {\n cursor: pointer;\n }\n \n &:disabled {\n color: ${colors[valueColorName.disabled]};\n cursor: not-allowed;\n\n &::placeholder {\n color: ${colors[labelColorName.disabled]};\n }\n }\n \n &:hover:not([disabled, focused])::placeholder {\n color: ${colors[labelColorName.active]};\n }\n\n &:focus::placeholder {\n color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"date\"]:not(:placeholder-shown){\n color: ${colors.BLACK_T_60};\n text-transform: uppercase;\n }\n &::-webkit-autofill,\n &::-webkit-autofill:hover,\n &::-webkit-autofill:focus,\n &::-webkit-autofill:active {\n -webkit-
|
|
1
|
+
{"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n $renderAs: ITextInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $isTransparent?: IBaseInputProps['isTransparent'];\n}\n\nconst Input = styled.input<IInputProps>(({ theme, $size, $renderAs, $isTransparent }) => {\n const { colors, input, text } = theme;\n const { valueColorName, labelColorName, backgroundColorName } = input.variants[$renderAs];\n const { inputTextVariant } = input.sizes[$size];\n const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n width: 100%;\n height: 100%;\n border: 0;\n padding: 0;\n outline: none;\n\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n \n background-color: ${background};\n color: ${colors[valueColorName.inactive]};\n \n &::placeholder {\n color: ${colors[labelColorName.inactive]};\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n }\n\n &:hover, &:focus {\n color: ${colors[valueColorName.active]};\n }\n\n &:read-only {\n cursor: pointer;\n }\n \n &:disabled {\n color: ${colors[valueColorName.disabled]};\n cursor: not-allowed;\n\n &::placeholder {\n color: ${colors[labelColorName.disabled]};\n }\n }\n \n &:hover:not([disabled, focused])::placeholder {\n color: ${colors[labelColorName.active]};\n }\n\n &:focus::placeholder {\n color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"date\"]:not(:placeholder-shown){\n color: ${colors.BLACK_T_60};\n text-transform: uppercase;\n }\n /* Autofill styles - Fixed and consolidated */\n &::-webkit-autofill,\n &::-webkit-autofill:hover,\n &::-webkit-autofill:focus,\n &::-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 1000px ${background} inset !important;\n -webkit-text-fill-color: ${colors[valueColorName.inactive]} !important;\n transition: background-color 5000s ease-in-out 0s !important;\n }\n\n /* Additional autofill override for Chrome's internal styles */\n &:-webkit-autofill {\n -webkit-box-shadow: 0 0 0 1000px ${background} inset !important;\n -webkit-text-fill-color: ${colors[valueColorName.inactive]} !important;\n background-color: ${background} !important;\n }\n\n /* Override Chrome's internal autofill selected state */\n &:-internal-autofill-selected {\n background-color: ${background} !important;\n background-image: none !important;\n color: ${colors[valueColorName.inactive]} !important;\n }\n `;\n});\n\nexport { Input };\n"],"names":["Input","styled","theme","$size","$renderAs","$isTransparent","colors","input","text","valueColorName","labelColorName","backgroundColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","background"],"mappings":";AAWM,MAAAA,IAAQC,EAAO,MAAmB,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,QAAqB;AACvF,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAA,IAASN,GAC1B,EAAE,gBAAAO,GAAgB,gBAAAC,GAAgB,qBAAAC,EAAwB,IAAAJ,EAAM,SAASH,CAAS,GAClF,EAAE,kBAAAQ,EAAqB,IAAAL,EAAM,MAAMJ,CAAK,GACxC,EAAE,YAAAU,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,MAAkBR,EAAKI,CAAgB,GAC3EK,IAAaZ,IAAiB,gBAAgBC,EAAOK,KAAuB,OAAO;AAElF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQUE,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA,wBAG5DC,CAAU;AAAA,aACrBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBG,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvEV,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa7BJ,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAQSW,CAAU;AAAA,iCAClBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAMvBQ,CAAU;AAAA,iCAClBX,EAAOG,EAAe,QAAQ,CAAC;AAAA,0BACtCQ,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKVA,CAAU;AAAA;AAAA,eAErBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAG9C,CAAC;"}
|