@yakad/ui 1.2.45-beta → 1.2.48-beta

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.
Files changed (6) hide show
  1. package/button/button.module.css +3 -2
  2. package/inputField/inputField.js +3 -3
  3. package/inputField/inputField.js.map +1 -1
  4. package/inputField/inputField.module.css +151 -77
  5. package/inputField/inputField.tsx +12 -13
  6. package/package.json +2 -1
package/button/button.module.css CHANGED
@@ -59,7 +59,8 @@
59
59
  @media (pointer: fine) {
60
60
  .button:hover {
61
61
  cursor: pointer;
62
- box-shadow: inset 0 0 10rem #7d7d7d20;
62
+ box-shadow: inset 0 0 10rem #00000010;
63
+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
63
64
  }
64
65
  }
65
66
  .button:active {
@@ -107,7 +108,7 @@
107
108
  }
108
109
  .fab {
109
110
  border-radius: 1.3rem;
110
- height: 5.6;
111
+ height: 5.6rem;
111
112
  min-width: unset;
112
113
  padding: 1.6rem;
113
114
  font-size: 1.6rem;
package/inputField/inputField.js CHANGED
@@ -3,9 +3,9 @@ import { joinClassNames } from "@yakad/lib";
3
3
  import styles from "./inputField.module.css";
4
4
  function InputField(props) {
5
5
  const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.standard, props.className);
6
- return (React.createElement("label", { className: styles.field },
7
- React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: "\u00A0", type: props.type, value: props.value, required: props.required, className: joinedClassNames }),
8
- React.createElement("span", { className: styles.placeholder }, props.placeholder)));
6
+ return (React.createElement("label", { className: styles.label },
7
+ React.createElement("input", { ...props, name: props.name, disabled: props.disabled, placeholder: " ", type: props.type, value: props.value, className: joinedClassNames }),
8
+ React.createElement("span", { className: styles.span }, props.placeholder)));
9
9
  }
10
10
  export default InputField;
11
11
  //# sourceMappingURL=inputField.js.map
package/inputField/inputField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,kCACQ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,gBAAgB,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,WAAW,CAAQ,CAC3D,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACJ,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC/B,kCACM,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,gBAAgB,GAC3B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,KAAK,CAAC,WAAW,CAAQ,CAClD,CACP,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}
package/inputField/inputField.module.css CHANGED
@@ -1,91 +1,165 @@
1
- .field {
2
- position: relative;
3
- }
4
- .placeholder {
5
- position: absolute;
6
- top: 0rem;
7
- left: 1.2rem;
8
- transform: translateY(-50%);
9
- font-size: 1rem;
10
- color: var(--onSurfaceColor, #1c1b1f);
11
- transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
12
- }
13
- .input:placeholder-shown + .placeholder {
14
- top: 50%;
15
- font-size: 1.4rem;
16
- color: #7d7d7d;
17
- }
18
- .input:focus + .placeholder {
19
- top: 0rem;
20
- font-size: 1rem;
21
- color: var(--onSurfaceColor, #1c1b1f);
1
+ .label {
2
+ padding-top: 0.6rem;
3
+ font-size: 1.3rem;
4
+ position: relative;
5
+ display: inline-block;
6
+ overflow: hidden;
22
7
  }
23
-
24
8
  .input {
25
- width: 100%;
26
- padding: 1.2rem;
27
- border: none;
28
- outline: none;
29
- transition: border-color 0.3 ease;
30
- box-sizing: border-box;
31
- color: var(--onSurfaceColor, #1c1b1f);
32
- -webkit-appearance: none;
33
- -ms-appearance: none;
34
- -moz-appearance: none;
35
- appearance: none;
36
- }
37
- .input::after {
38
- font-size: 1.4rem;
39
- display: block;
40
- z-index: 10;
9
+ box-sizing: border-box;
10
+ margin: 0rem;
11
+ border-image: initial;
12
+ width: 100%;
13
+ height: inherit;
14
+ color: rgb(227 226 230 / 0.87);
15
+ box-shadow: none;
16
+ font-family: inherit;
17
+ font-size: inherit;
18
+ line-height: inherit;
19
+ caret-color: #a6c8ff;
41
20
  }
42
-
43
- .input.standard {
44
- border-radius: 0.3rem 0.3rem 0 0;
45
- border-bottom: 0.2rem solid #7d7d7d;
46
- background-color: #7d7d7d10;
21
+ .input.outlined {
22
+ border-top-color: transparent;
23
+ background-color: transparent;
24
+ border-width: 0.1rem;
25
+ border-style: solid;
26
+ border-radius: 0.4rem;
27
+ padding: 1.5rem 1.3rem;
28
+ transition: border 0.2s ease 0s, box-shadow 0.2s ease 0s;
29
+ text-rendering: auto;
30
+ letter-spacing: normal;
31
+ word-spacing: normal;
32
+ line-height: normal;
33
+ text-transform: none;
34
+ text-indent: 0rem;
35
+ text-shadow: none;
36
+ display: inline-block;
37
+ text-align: start;
38
+ appearance: auto;
39
+ -webkit-rtl-ordering: logical;
40
+ cursor: text;
47
41
  }
48
- .input.standard:valid,
49
- .input.standard:focus {
50
- border-color: var(--secondaryColor, #121212);
42
+ .input.filled {
43
+ display: block;
44
+ border-right: none;
45
+ border-left: none;
46
+ border-top: 2.7rem solid transparent;
47
+ border-bottom: solid 0.1rem rgb(227 226 230 / 0.6);
48
+ border-radius: 0.4rem 0.4rem 0rem 0rem;
49
+ padding: 0rem 1.2rem 1rem;
50
+ background-color: rgb(227 226 230/ 0.04);
51
+ transition: border-bottom 0.2s ease 0s, background-color 0.2s ease 0s;
51
52
  }
52
-
53
- .input.outlined {
54
- border-radius: 0.5rem;
55
- border: 0.2rem solid #ddd;
56
- background: none;
53
+ .input:focus {
54
+ outline: none;
57
55
  }
58
- .input.outlined + .placeholder {
59
- padding: 0 0.5rem;
56
+ .input.outlined:focus {
57
+ border-top-color: transparent;
58
+ box-shadow: inset 1px 0 #a7c8ff, inset -1px 0 #a7c8ff, inset 0 -1px #a7c8ff;
60
59
  }
61
- .input.outlined + .placeholder {
62
- border-color: var(--onSurfaceColor, #1c1b1f);
63
- background: var(--surfaceContainerHighestColor, #e6e0e9);
60
+ .input:focus + .span {
61
+ color: #a6c8ff;
64
62
  }
65
-
66
- .input.outlined:valid,
67
- .input.outlined:focus + .placeholder {
68
- border-color: var(--onSurfaceColor, #1c1b1f);
69
- background: var(--surfaceContainerHighestColor, #e6e0e9);
63
+ .input.outlined:focus + .span::after {
64
+ box-shadow: inset 0 1px #a6c8ff;
65
+ border-top-color: #a6c8ff !important;
70
66
  }
71
-
72
- .input.filled {
73
- border-radius: 0.5rem;
74
- background-color: #7d7d7d10;
75
- box-shadow: none;
67
+ .input.filled:focus + .span::after {
68
+ transform: scale(1);
76
69
  }
77
-
78
- .input:invalid {
79
- border-color: var(--errorColor, #b3261e);
70
+ .input.outlined:focus + .span::before {
71
+ box-shadow: inset 0 1px #a6c8ff;
72
+ border-top-color: #a6c8ff !important;
80
73
  }
81
74
 
82
- .input:invalid + .placeholder {
83
- color: var(--errorColor, #b3261e);
84
- }
85
- .input.standard:focus:invalid {
86
- border-color: var(--errorColor, #b3261e);
75
+ .input.outlined:not(:focus):placeholder-shown {
76
+ border-top-color: rgb(227 226 230 / 0.6);
77
+ }
78
+ .input.outlined:not(:focus):placeholder-shown + .span {
79
+ font-size: inherit;
80
+ line-height: 6.2rem;
81
+ }
82
+ .input.filled:not(:focus):placeholder-shown + .span {
83
+ font-size: inherit;
84
+ line-height: 4.8rem;
85
+ }
86
+ .input + .span {
87
+ position: absolute;
88
+ color: rgb(227 226 230 / 0.6);
89
+ font-size: 75%;
90
+ transition: color 0.2s ease 0s, font-size 0.2s ease 0s,
91
+ line-height 0.2s ease 0s;
92
+ }
93
+ .input.outlined + .span {
94
+ top: 0rem;
95
+ left: 0rem;
96
+ display: flex;
97
+ border-color: rgb(227 226 230/ 0.6);
98
+ width: 100%;
99
+ max-height: 100%;
100
+ line-height: 1.5rem;
101
+ cursor: text;
102
+ }
103
+ .input.filled + .span {
104
+ inset: 0rem;
105
+ display: block;
106
+ box-sizing: border-box;
107
+ padding: 0.7rem 1.2rem 0rem;
108
+ line-height: 18px;
109
+ pointer-events: none;
110
+ }
111
+ .input.outlined:not(:focus):placeholder-shown + .span::before {
112
+ border-top-color: transparent;
113
+ }
114
+ .input.outlined + .span::before {
115
+ margin-right: 0.4rem;
116
+ border-left: 0.1 solid transparent;
117
+ border-radius: 0.4rem 0rem;
118
+ content: "";
119
+ display: block;
120
+ box-sizing: border-box;
121
+ margin-top: 0.6rem;
122
+ border-top-width: 0.1rem;
123
+ border-top-style: solid;
124
+ border-top-color: rgb(227 226 230 / 0.6);
125
+ min-width: 1rem;
126
+ height: 0.8rem;
127
+ pointer-events: none;
128
+ box-shadow: transparent 0px 1px inset;
129
+ transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
87
130
  }
88
- .input.filled:invalid {
89
- border-bottom: solid 0.2rem var(--errorColor, #b3261e);
90
- border-radius: 0;
131
+
132
+ .input.outlined:not(:focus):placeholder-shown + .span::after {
133
+ border-top-color: transparent;
134
+ }
135
+ .input + .span::after {
136
+ content: "";
137
+ display: block;
138
+ }
139
+ .input.outlined + .span::after {
140
+ flex-grow: 1;
141
+ margin-left: 0.4rem;
142
+ border-right: 0.1rem solid transparent;
143
+ border-radius: 0rem 0.4rem;
144
+ box-sizing: border-box;
145
+ margin-top: 0.6rem;
146
+ border-top-width: 0.1rem;
147
+ border-top-style: solid;
148
+ border-top-color: rgb(227 226 230 / 0.6);
149
+ min-width: 1rem;
150
+ height: 0.8rem;
151
+ pointer-events: none;
152
+ box-shadow: transparent 0px 1px inset;
153
+ transition: border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
154
+ }
155
+ .input.filled + .span::after {
156
+ position: absolute;
157
+ left: 0rem;
158
+ bottom: 0rem;
159
+ width: 100%;
160
+ height: 0.2rem;
161
+ background-color: #a7c8ff;
162
+ transform-origin: center bottom;
163
+ transform: scaleX(0);
164
+ transition: transform 0.3s ease 0s;
91
165
  }
package/inputField/inputField.tsx CHANGED
@@ -20,19 +20,18 @@ function InputField(props: InputFieldProps) {
20
20
  );
21
21
 
22
22
  return (
23
- <label className={styles.field}>
24
- <input
25
- {...props}
26
- name={props.name}
27
- disabled={props.disabled}
28
- placeholder="&nbsp;"
29
- type={props.type}
30
- value={props.value}
31
- required={props.required}
32
- className={joinedClassNames}
33
- />
34
- <span className={styles.placeholder}>{props.placeholder}</span>
35
- </label>
23
+ <label className={styles.label}>
24
+ <input
25
+ {...props}
26
+ name={props.name}
27
+ disabled={props.disabled}
28
+ placeholder=" "
29
+ type={props.type}
30
+ value={props.value}
31
+ className={joinedClassNames}
32
+ />
33
+ <span className={styles.span}>{props.placeholder}</span>
34
+ </label>
36
35
  );
37
36
  }
38
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yakad/ui",
3
- "version": "1.2.45-beta",
3
+ "version": "1.2.48-beta",
4
4
  "description": "",
5
5
  "main": "./src/index.js",
6
6
  "scripts": {
@@ -21,6 +21,7 @@
21
21
  "@types/react": "^18.0.24",
22
22
  "@types/react-dom": "^18.0.6",
23
23
  "@yakad/lib": "^1.0.5",
24
+ "force": "^0.0.3",
24
25
  "react": "^18.2.0",
25
26
  "react-dom": "^18.2.0",
26
27
  "react-router-dom": "^6.4.2",