@brandup/ui-kit 1.0.4 → 1.0.6
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 -0
- package/package.json +1 -1
- package/source/common.less +10 -10
- package/source/inputs.less +33 -6
package/README.md
CHANGED
|
@@ -104,6 +104,16 @@ 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]
|
|
116
|
+
- input[type=number]
|
|
107
117
|
- input[type=checkbox]
|
|
108
118
|
- textarea
|
|
109
119
|
- 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,19 @@ 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=number],
|
|
82
|
+
input[type=file],
|
|
83
|
+
textarea,
|
|
84
|
+
select {
|
|
73
85
|
appearance: none;
|
|
74
86
|
outline: none;
|
|
75
87
|
border-style: var(--input-border-type);
|
|
@@ -83,7 +95,7 @@ input[type=text], textarea, select {
|
|
|
83
95
|
padding-right: var(--input-padding-lr);
|
|
84
96
|
|
|
85
97
|
&::placeholder {
|
|
86
|
-
font-weight: var(--placeholder-font-
|
|
98
|
+
font-weight: var(--placeholder-font-weight);
|
|
87
99
|
font-style: var(--placeholder-font-style);
|
|
88
100
|
color: var(--placeholder-color);
|
|
89
101
|
}
|
|
@@ -117,6 +129,21 @@ input[type=text], textarea, select {
|
|
|
117
129
|
}
|
|
118
130
|
}
|
|
119
131
|
|
|
132
|
+
input[type=file] {
|
|
133
|
+
display: flex;
|
|
134
|
+
flex-flow: row nowrap;
|
|
135
|
+
align-items: center;
|
|
136
|
+
|
|
137
|
+
&::file-selector-button {
|
|
138
|
+
height: calc(var(--input-height) - 14px);
|
|
139
|
+
margin-top: 6px;
|
|
140
|
+
margin-right: calc(var(--input-padding-lr) / 1.5);
|
|
141
|
+
font-family: var(--font-family);
|
|
142
|
+
font-weight: var(--font-weight);
|
|
143
|
+
font-size: var(--font-size);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
120
147
|
select {
|
|
121
148
|
appearance: auto;
|
|
122
149
|
}
|