@brandup/ui-kit 1.0.10 → 1.0.12

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/README.md +1 -1
  2. package/package.json +1 -1
  3. package/source/index.ts +1 -0
  4. package/source/inputs.less +28 -17
  5. package/source/utils/compatibility.ts +1 -0
  6. package/vars.less +21 -14
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ## Installation and use
4
4
 
5
- Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui-kit).
5
+ Install NPM package [@brandup/ui-kit](https://www.npmjs.com/package/@brandup/ui-kit).
6
6
 
7
7
  ```
8
8
  npm i @brandup/ui-kit@latest
package/package.json CHANGED
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "type": "module",
24
24
  "license": "Apache-2.0",
25
- "version": "1.0.10",
25
+ "version": "1.0.12",
26
26
  "main": "source/index.ts",
27
27
  "types": "source/index.ts",
28
28
  "dependencies": {
package/source/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { UiKitMiddleware } from "./middleware";
2
2
  export * from "./popup"
3
+ export { IS_TOUCH_DEVICE } from "./utils/compatibility";
3
4
  import "./styles.less";
4
5
 
5
6
  export const uiKitMiddlewareFactory = () => new UiKitMiddleware();
package/source/inputs.less CHANGED
@@ -29,22 +29,29 @@
29
29
  --input-font-size: @input-font-size;
30
30
  --input-font-weight: @input-font-weight;
31
31
  --input-font-style: @input-font-style;
32
+ --input-line-height: @input-line-height;
32
33
 
33
- --hover--input-border-color: @hover-input-border-color;
34
- --hover--input-fill: @hover-input-fill;
35
- --hover--input-color: @hover-input-color;
34
+ --hover--input-border-color: @hover--input-border-color;
35
+ --hover--input-fill: @hover--input-fill;
36
+ --hover--input-color: @hover--input-color;
36
37
 
37
- --focus--input-border-color: @focus-input-border-color;
38
- --focus--input-fill: @focus-input-fill;
39
- --focus--input-color: @focus-input-color;
38
+ --focus--input-border-color: @focus--input-border-color;
39
+ --focus--input-fill: @focus--input-fill;
40
+ --focus--input-color: @focus--input-color;
40
41
 
41
- --disabled--input-border-color: @disabled-input-border-color;
42
- --disabled--input-fill: @disabled-input-fill;
43
- --disabled--input-color: @disabled-input-color;
42
+ --readonly--input-fill: @readonly--input-fill;
43
+ --readonly--input-color: @readonly--input-color;
44
44
 
45
- --invalid--input-border-color: @invalid-input-border-color;
46
- --invalid--input-fill: @invalid-input-fill;
47
- --invalid--input-color: @invalid-input-color;
45
+ --disabled--input-border-color: @disabled--input-border-color;
46
+ --disabled--input-fill: @disabled--input-fill;
47
+ --disabled--input-color: @disabled--input-color;
48
+
49
+ --invalid--input-border-color: @invalid--input-border-color;
50
+ --invalid--input-fill: @invalid--input-fill;
51
+ --invalid--input-color: @invalid--input-color;
52
+
53
+ --incorrect--input-fill: @incorrect--input-fill;
54
+ --incorrect--input-color: @input-color;
48
55
 
49
56
  // toggler
50
57
  --toggler-height: @toggler-height;
@@ -62,7 +69,7 @@ select {
62
69
  font-weight: var(--input-font-weight);
63
70
  font-style: var(--input-font-style);
64
71
  color: var(--input-color);
65
- line-height: unset;
72
+ line-height: var(--input-line-height);
66
73
  box-sizing: border-box;
67
74
  padding: 0;
68
75
  margin: 0;
@@ -116,6 +123,8 @@ select {
116
123
 
117
124
  &:read-only {
118
125
  cursor: default;
126
+ background: var(--readonly--input-fill);
127
+ color: var(--readonly--input-color);
119
128
  }
120
129
 
121
130
  &:disabled {
@@ -188,18 +197,20 @@ input[type=checkbox] {
188
197
 
189
198
  &:hover {
190
199
  border-color: var(--hover--input-border-color);
191
- background: var(--hover--input-fill);
200
+ background-color: var(--hover--input-fill);
192
201
  color: var(--hover--input-color);
193
202
  }
194
203
 
195
204
  &:focus {
196
205
  border-color: var(--focus--input-border-color);
197
- background: var(--focus--input-fill);
206
+ background-color: var(--focus--input-fill);
198
207
  color: var(--focus--input-color);
199
208
  }
200
209
 
201
210
  &[readonly] {
202
211
  pointer-events: none;
212
+ touch-action: none;
213
+ background-color: var(--readonly--input-fill);
203
214
  }
204
215
 
205
216
  &:checked {
@@ -214,7 +225,7 @@ input[type=checkbox] {
214
225
 
215
226
  &:disabled {
216
227
  border-color: var(--disabled--input-border-color);
217
- background: var(--disabled--input-fill);
228
+ background-color: var(--disabled--input-fill);
218
229
  color: var(--disabled--input-color);
219
230
  cursor: default;
220
231
 
@@ -226,7 +237,7 @@ input[type=checkbox] {
226
237
 
227
238
  &:user-invalid {
228
239
  border-color: var(--invalid--input-border-color);
229
- background: var(--invalid--input-fill);
240
+ background-color: var(--invalid--input-fill);
230
241
  color: var(--invalid--input-color);
231
242
  }
232
243
  }
package/source/utils/compatibility.ts ADDED
@@ -0,0 +1 @@
1
+ export const IS_TOUCH_DEVICE = window.document.documentElement ? "ontouchstart" in window.document.documentElement : false;
package/vars.less CHANGED
@@ -63,26 +63,33 @@
63
63
  @textarea-size: 100px;
64
64
 
65
65
  @input-color: @text-color;
66
- @input-font-size: inherit;
66
+ @input-font-size: 14px;
67
+ @input-line-height: 1.2rem;
67
68
  @input-font-weight: inherit;
68
69
  @input-font-style: inherit;
69
70
 
70
- @hover-input-border-color: #666;
71
- @hover-input-fill: @input-fill;
72
- @hover-input-color: @input-color;
71
+ @hover--input-border-color: #666;
72
+ @hover--input-fill: @input-fill;
73
+ @hover--input-color: @input-color;
73
74
 
74
- @focus-input-border-color: #222;
75
- @focus-input-fill: @input-fill;
76
- @focus-input-color: @input-color;
75
+ @focus--input-border-color: #222;
76
+ @focus--input-fill: @input-fill;
77
+ @focus--input-color: @input-color;
77
78
 
78
- @disabled-input-border-color: #aaa;
79
- @disabled-input-fill: #eee;
80
- @disabled-input-color: @input-color;
79
+ @readonly--input-fill: #f7f7f7;
80
+ @readonly--input-color: @input-color;
81
81
 
82
- @invalid-input-border-color: red;
83
- @invalid-input-fill: @input-fill;
84
- @invalid-input-color: @input-color;
82
+ @disabled--input-border-color: #aaa;
83
+ @disabled--input-fill: #eee;
84
+ @disabled--input-color: @input-color;
85
+
86
+ @invalid--input-border-color: red;
87
+ @invalid--input-fill: rgb(255, 220, 220);
88
+ @invalid--input-color: @input-color;
89
+
90
+ @incorrect--input-fill: rgb(255, 220, 220);
91
+ @incorrect--input-color: inherit;
85
92
 
86
93
  @toggler-height: 30px;
87
94
  @toggler-padding: 3px;
88
- @toggler-round-fill: @focus-input-border-color;
95
+ @toggler-round-fill: @focus--input-border-color;