@brandup/ui-kit 1.0.4 → 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 +9 -0
- package/package.json +1 -1
- package/source/common.less +10 -10
- package/source/inputs.less +32 -6
package/README.md
CHANGED
|
@@ -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
|
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
// font
|
|
28
28
|
--input-color: var(--text-color);
|
|
29
29
|
--input-font-size: inherit;
|
|
30
|
-
--input-font-
|
|
30
|
+
--input-font-weight: inherit;
|
|
31
31
|
--input-font-style: inherit;
|
|
32
32
|
|
|
33
33
|
--hover--input-border-color: #666;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
// toggler
|
|
50
50
|
--toggler-height: 30px;
|
|
51
51
|
--toggler-padding: 3px;
|
|
52
|
-
--toggler-round-fill: var(--
|
|
52
|
+
--toggler-round-fill: var(--focus--input-border-color); // цвет круглешка
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
input,
|
|
@@ -59,7 +59,7 @@ select {
|
|
|
59
59
|
display: block;
|
|
60
60
|
font-family: inherit;
|
|
61
61
|
font-size: var(--input-font-size);
|
|
62
|
-
font-weight: var(--input-font-
|
|
62
|
+
font-weight: var(--input-font-weight);
|
|
63
63
|
font-style: var(--input-font-style);
|
|
64
64
|
color: var(--input-color);
|
|
65
65
|
line-height: unset;
|
|
@@ -69,7 +69,18 @@ select {
|
|
|
69
69
|
outline: none;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
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 {
|
|
73
84
|
appearance: none;
|
|
74
85
|
outline: none;
|
|
75
86
|
border-style: var(--input-border-type);
|
|
@@ -83,7 +94,7 @@ input[type=text], textarea, select {
|
|
|
83
94
|
padding-right: var(--input-padding-lr);
|
|
84
95
|
|
|
85
96
|
&::placeholder {
|
|
86
|
-
font-weight: var(--placeholder-font-
|
|
97
|
+
font-weight: var(--placeholder-font-weight);
|
|
87
98
|
font-style: var(--placeholder-font-style);
|
|
88
99
|
color: var(--placeholder-color);
|
|
89
100
|
}
|
|
@@ -117,6 +128,21 @@ input[type=text], textarea, select {
|
|
|
117
128
|
}
|
|
118
129
|
}
|
|
119
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
|
+
|
|
120
146
|
select {
|
|
121
147
|
appearance: auto;
|
|
122
148
|
}
|