@brandup/ui-kit 1.0.3 → 1.0.4

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 (3) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/source/inputs.less +23 -3
package/README.md CHANGED
@@ -81,7 +81,7 @@ Default root styles for `<svg>` tag.
81
81
  --svg-width: var(--svg-size);
82
82
  --svg-height: var(--svg-size);
83
83
  --svg-fill: var(--text-color);
84
- --svg-stroke: var(--text-color);
84
+ --svg-stroke: none;
85
85
  ```
86
86
 
87
87
  See [common.less](source/common.less) file.
package/package.json CHANGED
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "type": "module",
24
24
  "license": "Apache-2.0",
25
- "version": "1.0.3",
25
+ "version": "1.0.4",
26
26
  "main": "source/index.ts",
27
27
  "types": "source/index.ts",
28
28
  "dependencies": {
package/source/inputs.less CHANGED
@@ -22,6 +22,7 @@
22
22
  --input-width: auto;
23
23
  --input-height: 42px;
24
24
  --input-padding-lr: 13px;
25
+ --textarea-size: 100px;
25
26
 
26
27
  // font
27
28
  --input-color: var(--text-color);
@@ -29,10 +30,14 @@
29
30
  --input-font-weidth: inherit;
30
31
  --input-font-style: inherit;
31
32
 
32
- --hover--input-border-color: #555;
33
+ --hover--input-border-color: #666;
33
34
  --hover--input-fill: var(--input-fill);
34
35
  --hover--input-color: var(--input-color);
35
36
 
37
+ --focus--input-border-color: #222;
38
+ --focus--input-fill: var(--hover--input-fill);
39
+ --focus--input-color: var(--hover--input-color);
40
+
36
41
  --disabled--input-border-color: #aaa;
37
42
  --disabled--input-fill: #eee;
38
43
  --disabled--input-color: var(--input-color);
@@ -51,6 +56,7 @@ input,
51
56
  textarea,
52
57
  button,
53
58
  select {
59
+ display: block;
54
60
  font-family: inherit;
55
61
  font-size: var(--input-font-size);
56
62
  font-weight: var(--input-font-weidth);
@@ -60,6 +66,7 @@ select {
60
66
  box-sizing: border-box;
61
67
  padding: 0;
62
68
  margin: 0;
69
+ outline: none;
63
70
  }
64
71
 
65
72
  input[type=text], textarea, select {
@@ -81,12 +88,18 @@ input[type=text], textarea, select {
81
88
  color: var(--placeholder-color);
82
89
  }
83
90
 
84
- &:hover, &:focus {
91
+ &:hover {
85
92
  border-color: var(--hover--input-border-color);
86
93
  background: var(--hover--input-fill);
87
94
  color: var(--hover--input-color);
88
95
  }
89
96
 
97
+ &:focus {
98
+ border-color: var(--focus--input-border-color);
99
+ background: var(--focus--input-fill);
100
+ color: var(--focus--input-color);
101
+ }
102
+
90
103
  &:read-only {
91
104
  cursor: default;
92
105
  }
@@ -111,6 +124,7 @@ select {
111
124
  textarea {
112
125
  padding-top: calc(1em / 2);
113
126
  padding-bottom: calc(1em / 2);
127
+ min-height: var(--textarea-size);
114
128
  }
115
129
 
116
130
  input[type=checkbox] {
@@ -143,12 +157,18 @@ input[type=checkbox] {
143
157
  bottom: 0;
144
158
  }
145
159
 
146
- &:hover, &:focus {
160
+ &:hover {
147
161
  border-color: var(--hover--input-border-color);
148
162
  background: var(--hover--input-fill);
149
163
  color: var(--hover--input-color);
150
164
  }
151
165
 
166
+ &:focus {
167
+ border-color: var(--focus--input-border-color);
168
+ background: var(--focus--input-fill);
169
+ color: var(--focus--input-color);
170
+ }
171
+
152
172
  &[readonly] {
153
173
  pointer-events: none;
154
174
  }