@brandup/ui-kit 1.0.3 → 1.0.5
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.
- package/README.md +10 -1
- package/package.json +1 -1
- package/source/common.less +10 -10
- package/source/inputs.less +55 -9
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:
|
|
84
|
+
--svg-stroke: none;
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
See [common.less](source/common.less) file.
|
|
@@ -104,6 +104,15 @@ Styles for:
|
|
|
104
104
|
|
|
105
105
|
- reset for input, textarea, button
|
|
106
106
|
- input[type=text]
|
|
107
|
+
- input[type=tel]
|
|
108
|
+
- input[type=email]
|
|
109
|
+
- input[type=password]
|
|
110
|
+
- input[type=search]
|
|
111
|
+
- input[type=url]
|
|
112
|
+
- input[type=date]
|
|
113
|
+
- input[type=datetime]
|
|
114
|
+
- input[type=time]
|
|
115
|
+
- input[type=file]
|
|
107
116
|
- input[type=checkbox]
|
|
108
117
|
- textarea
|
|
109
118
|
- select
|
package/package.json
CHANGED
package/source/common.less
CHANGED
|
@@ -10,15 +10,15 @@
|
|
|
10
10
|
// headers
|
|
11
11
|
--h-line-height: 130%;
|
|
12
12
|
--h1-font-size: 56px;
|
|
13
|
-
--h1-font-
|
|
13
|
+
--h1-font-weight: 600;
|
|
14
14
|
--h2-font-size: 50px;
|
|
15
|
-
--h2-font-
|
|
15
|
+
--h2-font-weight: 600;
|
|
16
16
|
--h3-font-size: 28px;
|
|
17
|
-
--h3-font-
|
|
17
|
+
--h3-font-weight: 600;
|
|
18
18
|
--h4-font-size: 22px;
|
|
19
|
-
--h4-font-
|
|
19
|
+
--h4-font-weight: 600;
|
|
20
20
|
--h5-font-size: 18px;
|
|
21
|
-
--h5-font-
|
|
21
|
+
--h5-font-weight: 600;
|
|
22
22
|
|
|
23
23
|
// content-width
|
|
24
24
|
--content-max-width: 1280px; // максимальная ширина контентной области
|
|
@@ -72,27 +72,27 @@ h5 {
|
|
|
72
72
|
|
|
73
73
|
h1 {
|
|
74
74
|
font-size: var(--h1-font-size);
|
|
75
|
-
font-weight: var(--h1-font-
|
|
75
|
+
font-weight: var(--h1-font-weight);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
h2 {
|
|
79
79
|
font-size: var(--h2-font-size);
|
|
80
|
-
font-weight: var(--h2-font-
|
|
80
|
+
font-weight: var(--h2-font-weight);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
h3 {
|
|
84
84
|
font-size: var(--h3-font-size);
|
|
85
|
-
font-weight: var(--h3-font-
|
|
85
|
+
font-weight: var(--h3-font-weight);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
h4 {
|
|
89
89
|
font-size: var(--h4-font-size);
|
|
90
|
-
font-weight: var(--h4-font-
|
|
90
|
+
font-weight: var(--h4-font-weight);
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
h5 {
|
|
94
94
|
font-size: var(--h5-font-size);
|
|
95
|
-
font-weight: var(--h5-font-
|
|
95
|
+
font-weight: var(--h5-font-weight);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
// Svg styles
|
package/source/inputs.less
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
9
|
// placeholder
|
|
10
|
-
--placeholder-font-
|
|
10
|
+
--placeholder-font-weight: inherit;
|
|
11
11
|
--placeholder-font-style: inherit;
|
|
12
12
|
--placeholder-color: inherit;
|
|
13
13
|
|
|
@@ -22,17 +22,22 @@
|
|
|
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);
|
|
28
29
|
--input-font-size: inherit;
|
|
29
|
-
--input-font-
|
|
30
|
+
--input-font-weight: inherit;
|
|
30
31
|
--input-font-style: inherit;
|
|
31
32
|
|
|
32
|
-
--hover--input-border-color: #
|
|
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);
|
|
@@ -44,25 +49,38 @@
|
|
|
44
49
|
// toggler
|
|
45
50
|
--toggler-height: 30px;
|
|
46
51
|
--toggler-padding: 3px;
|
|
47
|
-
--toggler-round-fill: var(--
|
|
52
|
+
--toggler-round-fill: var(--focus--input-border-color); // цвет круглешка
|
|
48
53
|
}
|
|
49
54
|
|
|
50
55
|
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
|
-
font-weight: var(--input-font-
|
|
62
|
+
font-weight: var(--input-font-weight);
|
|
57
63
|
font-style: var(--input-font-style);
|
|
58
64
|
color: var(--input-color);
|
|
59
65
|
line-height: unset;
|
|
60
66
|
box-sizing: border-box;
|
|
61
67
|
padding: 0;
|
|
62
68
|
margin: 0;
|
|
69
|
+
outline: none;
|
|
63
70
|
}
|
|
64
71
|
|
|
65
|
-
input[type=text],
|
|
72
|
+
input[type=text],
|
|
73
|
+
input[type=tel],
|
|
74
|
+
input[type=email],
|
|
75
|
+
input[type=password],
|
|
76
|
+
input[type=search],
|
|
77
|
+
input[type=url],
|
|
78
|
+
input[type=date],
|
|
79
|
+
input[type=datetime],
|
|
80
|
+
input[type=time],
|
|
81
|
+
input[type=file],
|
|
82
|
+
textarea,
|
|
83
|
+
select {
|
|
66
84
|
appearance: none;
|
|
67
85
|
outline: none;
|
|
68
86
|
border-style: var(--input-border-type);
|
|
@@ -76,17 +94,23 @@ input[type=text], textarea, select {
|
|
|
76
94
|
padding-right: var(--input-padding-lr);
|
|
77
95
|
|
|
78
96
|
&::placeholder {
|
|
79
|
-
font-weight: var(--placeholder-font-
|
|
97
|
+
font-weight: var(--placeholder-font-weight);
|
|
80
98
|
font-style: var(--placeholder-font-style);
|
|
81
99
|
color: var(--placeholder-color);
|
|
82
100
|
}
|
|
83
101
|
|
|
84
|
-
&:hover
|
|
102
|
+
&:hover {
|
|
85
103
|
border-color: var(--hover--input-border-color);
|
|
86
104
|
background: var(--hover--input-fill);
|
|
87
105
|
color: var(--hover--input-color);
|
|
88
106
|
}
|
|
89
107
|
|
|
108
|
+
&:focus {
|
|
109
|
+
border-color: var(--focus--input-border-color);
|
|
110
|
+
background: var(--focus--input-fill);
|
|
111
|
+
color: var(--focus--input-color);
|
|
112
|
+
}
|
|
113
|
+
|
|
90
114
|
&:read-only {
|
|
91
115
|
cursor: default;
|
|
92
116
|
}
|
|
@@ -104,6 +128,21 @@ input[type=text], textarea, select {
|
|
|
104
128
|
}
|
|
105
129
|
}
|
|
106
130
|
|
|
131
|
+
input[type=file] {
|
|
132
|
+
display: flex;
|
|
133
|
+
flex-flow: row nowrap;
|
|
134
|
+
align-items: center;
|
|
135
|
+
|
|
136
|
+
&::file-selector-button {
|
|
137
|
+
height: calc(var(--input-height) - 14px);
|
|
138
|
+
margin-top: 6px;
|
|
139
|
+
margin-right: calc(var(--input-padding-lr) / 1.5);
|
|
140
|
+
font-family: var(--font-family);
|
|
141
|
+
font-weight: var(--font-weight);
|
|
142
|
+
font-size: var(--font-size);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
107
146
|
select {
|
|
108
147
|
appearance: auto;
|
|
109
148
|
}
|
|
@@ -111,6 +150,7 @@ select {
|
|
|
111
150
|
textarea {
|
|
112
151
|
padding-top: calc(1em / 2);
|
|
113
152
|
padding-bottom: calc(1em / 2);
|
|
153
|
+
min-height: var(--textarea-size);
|
|
114
154
|
}
|
|
115
155
|
|
|
116
156
|
input[type=checkbox] {
|
|
@@ -143,12 +183,18 @@ input[type=checkbox] {
|
|
|
143
183
|
bottom: 0;
|
|
144
184
|
}
|
|
145
185
|
|
|
146
|
-
&:hover
|
|
186
|
+
&:hover {
|
|
147
187
|
border-color: var(--hover--input-border-color);
|
|
148
188
|
background: var(--hover--input-fill);
|
|
149
189
|
color: var(--hover--input-color);
|
|
150
190
|
}
|
|
151
191
|
|
|
192
|
+
&:focus {
|
|
193
|
+
border-color: var(--focus--input-border-color);
|
|
194
|
+
background: var(--focus--input-fill);
|
|
195
|
+
color: var(--focus--input-color);
|
|
196
|
+
}
|
|
197
|
+
|
|
152
198
|
&[readonly] {
|
|
153
199
|
pointer-events: none;
|
|
154
200
|
}
|