urfu-ui-kit-vanilla 1.0.7 → 1.0.8
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/package.json +1 -1
- package/playground/index.html +179 -70
- package/src/main.css +103 -0
- package/src/main.less +1 -1
- package/src/styles/components/table.less +8 -14
- package/src/styles/components/button.css +0 -1314
package/package.json
CHANGED
package/playground/index.html
CHANGED
|
@@ -12,77 +12,42 @@
|
|
|
12
12
|
<table class="table">
|
|
13
13
|
<thead>
|
|
14
14
|
<tr>
|
|
15
|
-
<th
|
|
16
|
-
<div style="width: 95px; padding-left: 45%;" class="title">
|
|
15
|
+
<th>
|
|
17
16
|
<p>№</p>
|
|
18
|
-
</div>
|
|
19
17
|
</th>
|
|
20
18
|
<th>
|
|
21
|
-
<div style="width: 160px; padding-left: 50px;" class="title">
|
|
22
19
|
<p>Тип отчета</p>
|
|
23
|
-
</div>
|
|
24
|
-
<div>
|
|
25
|
-
<p>dsdsd</p>
|
|
26
|
-
</div>
|
|
27
20
|
</th>
|
|
28
21
|
<th>
|
|
29
|
-
<div style="width: 150px;" class="title">
|
|
30
22
|
<p>Тип поездки</p>
|
|
31
|
-
</div>
|
|
32
|
-
<div>
|
|
33
|
-
<p>dsdsd</p>
|
|
34
|
-
</div>
|
|
35
23
|
</th>
|
|
36
24
|
<th>
|
|
37
|
-
<div style="width: 160px;" class="title">
|
|
38
25
|
<p>Страна командирования</p>
|
|
39
|
-
</div>
|
|
40
|
-
<div>
|
|
41
|
-
<p>dsdsd</p>
|
|
42
|
-
</div>
|
|
43
26
|
</th>
|
|
44
27
|
<th>
|
|
45
|
-
<div style="width: 221px;" class="title">
|
|
46
28
|
<p>Источник финансирования</p>
|
|
47
|
-
</div>
|
|
48
|
-
<div>
|
|
49
|
-
<p>dsdsd</p>
|
|
50
|
-
</div>
|
|
51
29
|
</th>
|
|
52
30
|
<th class="sort">
|
|
53
|
-
<p
|
|
31
|
+
<p>Сроки</p>
|
|
54
32
|
</th>
|
|
55
33
|
<th>
|
|
56
|
-
<div style="width: 150px;" class="title">
|
|
57
34
|
<p>ФИО</p>
|
|
58
|
-
</div>
|
|
59
|
-
<div>
|
|
60
|
-
<p>ФИО</p>
|
|
61
|
-
</div>
|
|
62
35
|
</th>
|
|
63
36
|
<th>
|
|
64
|
-
<div style="width: 150px;" class="title">
|
|
65
37
|
<p>Статус заявки</p>
|
|
66
|
-
</div>
|
|
67
|
-
<p>ФИО</p>
|
|
68
38
|
</th>
|
|
69
39
|
<th>
|
|
70
|
-
<div style="width: 150px;" class="title">
|
|
71
40
|
<p>Статус заявки</p>
|
|
72
|
-
</div>
|
|
73
|
-
<div>
|
|
74
|
-
<p>ФИО</p>
|
|
75
|
-
</div>
|
|
76
41
|
</th>
|
|
77
42
|
<th>
|
|
78
|
-
<p
|
|
43
|
+
<p>Статус отчета</p>
|
|
79
44
|
</th>
|
|
80
45
|
</tr>
|
|
81
46
|
</thead>
|
|
82
47
|
<tbody>
|
|
83
|
-
<tr
|
|
84
|
-
<td
|
|
85
|
-
<
|
|
48
|
+
<tr>
|
|
49
|
+
<td>
|
|
50
|
+
<a>111</a>
|
|
86
51
|
</td>
|
|
87
52
|
<td>
|
|
88
53
|
<div>222 <br>435 <br>435 <br>435 <br>435</div>
|
|
@@ -91,95 +56,239 @@
|
|
|
91
56
|
<div>333</div>
|
|
92
57
|
</td>
|
|
93
58
|
<td>
|
|
94
|
-
<div
|
|
59
|
+
<div>444</div>
|
|
95
60
|
</td>
|
|
96
61
|
<td>
|
|
97
|
-
<div
|
|
62
|
+
<div>555</div>
|
|
98
63
|
</td>
|
|
99
64
|
<td>
|
|
100
|
-
<div
|
|
65
|
+
<div>666</div>
|
|
101
66
|
</td>
|
|
102
67
|
<td>
|
|
103
|
-
<div
|
|
68
|
+
<div>777</div>
|
|
104
69
|
</td>
|
|
105
70
|
<td>
|
|
106
|
-
<div
|
|
71
|
+
<div>888</div>
|
|
107
72
|
</td>
|
|
108
73
|
<td>
|
|
109
|
-
<div
|
|
74
|
+
<div><span>999</span></div>
|
|
110
75
|
</td>
|
|
111
76
|
<td>
|
|
112
|
-
<div
|
|
77
|
+
<div><span>000</span></div>
|
|
113
78
|
</td>
|
|
114
79
|
</tr>
|
|
115
|
-
<tr
|
|
116
|
-
<td
|
|
117
|
-
<
|
|
80
|
+
<tr>
|
|
81
|
+
<td>
|
|
82
|
+
<a>111</a>
|
|
118
83
|
</td>
|
|
119
84
|
<td>
|
|
120
|
-
<div>222</div>
|
|
85
|
+
<div>222 <br>435 <br>435 <br>435 <br>435</div>
|
|
121
86
|
</td>
|
|
122
87
|
<td>
|
|
123
88
|
<div>333</div>
|
|
124
89
|
</td>
|
|
125
90
|
<td>
|
|
126
|
-
<div
|
|
91
|
+
<div>444</div>
|
|
127
92
|
</td>
|
|
128
93
|
<td>
|
|
129
|
-
<div
|
|
94
|
+
<div>555</div>
|
|
130
95
|
</td>
|
|
131
96
|
<td>
|
|
132
|
-
<div
|
|
97
|
+
<div>666</div>
|
|
133
98
|
</td>
|
|
134
99
|
<td>
|
|
135
|
-
<div
|
|
100
|
+
<div>777</div>
|
|
136
101
|
</td>
|
|
137
102
|
<td>
|
|
138
|
-
<div
|
|
103
|
+
<div>888</div>
|
|
139
104
|
</td>
|
|
140
105
|
<td>
|
|
141
|
-
<div
|
|
106
|
+
<div><span>999</span></div>
|
|
142
107
|
</td>
|
|
143
108
|
<td>
|
|
144
|
-
<div
|
|
109
|
+
<div><span>000</span></div>
|
|
145
110
|
</td>
|
|
146
111
|
</tr>
|
|
147
|
-
<tr
|
|
148
|
-
<td
|
|
149
|
-
<
|
|
112
|
+
<tr>
|
|
113
|
+
<td>
|
|
114
|
+
<a>111</a>
|
|
150
115
|
</td>
|
|
151
116
|
<td>
|
|
152
|
-
<div>222</div>
|
|
117
|
+
<div>222 <br>435 <br>435 <br>435 <br>435</div>
|
|
153
118
|
</td>
|
|
154
119
|
<td>
|
|
155
120
|
<div>333</div>
|
|
156
121
|
</td>
|
|
157
122
|
<td>
|
|
158
|
-
<div
|
|
123
|
+
<div>444</div>
|
|
159
124
|
</td>
|
|
160
125
|
<td>
|
|
161
|
-
<div
|
|
126
|
+
<div>555</div>
|
|
162
127
|
</td>
|
|
163
128
|
<td>
|
|
164
|
-
<div
|
|
129
|
+
<div>666</div>
|
|
165
130
|
</td>
|
|
166
131
|
<td>
|
|
167
|
-
<div
|
|
132
|
+
<div>777</div>
|
|
168
133
|
</td>
|
|
169
134
|
<td>
|
|
170
|
-
<div
|
|
135
|
+
<div>888</div>
|
|
171
136
|
</td>
|
|
172
137
|
<td>
|
|
173
|
-
<div
|
|
138
|
+
<div><span>999</span></div>
|
|
174
139
|
</td>
|
|
175
140
|
<td>
|
|
176
|
-
<div
|
|
141
|
+
<div><span>000</span></div>
|
|
177
142
|
</td>
|
|
178
143
|
</tr>
|
|
179
144
|
</tbody>
|
|
180
145
|
</table>
|
|
181
146
|
</div>
|
|
182
147
|
|
|
148
|
+
<div style="margin-top: 40px;" class="u-table">
|
|
149
|
+
<table class="table">
|
|
150
|
+
<thead>
|
|
151
|
+
<tr>
|
|
152
|
+
<th class="sticky">
|
|
153
|
+
<p>№</p>
|
|
154
|
+
</th>
|
|
155
|
+
<th>
|
|
156
|
+
<p>Тип отчета</p>
|
|
157
|
+
<p>dsdsd</p>
|
|
158
|
+
</th>
|
|
159
|
+
<th>
|
|
160
|
+
<p>Тип поездки</p>
|
|
161
|
+
<p>dsdsd</p>
|
|
162
|
+
</th>
|
|
163
|
+
<th>
|
|
164
|
+
<p>Страна командирования</p>
|
|
165
|
+
<p>dsdsd</p>
|
|
166
|
+
</th>
|
|
167
|
+
<th>
|
|
168
|
+
<p>Источник финансирования</p>
|
|
169
|
+
<p>dsdsd</p>
|
|
170
|
+
</th>
|
|
171
|
+
<th class="sort">
|
|
172
|
+
<p>Сроки</p>
|
|
173
|
+
</th>
|
|
174
|
+
<th>
|
|
175
|
+
<p>ФИО</p>
|
|
176
|
+
<p>ФИО</p>
|
|
177
|
+
</th>
|
|
178
|
+
<th>
|
|
179
|
+
<p>Статус заявки</p>
|
|
180
|
+
<p>ФИО</p>
|
|
181
|
+
</th>
|
|
182
|
+
<th>
|
|
183
|
+
<p>Статус заявки</p>
|
|
184
|
+
<p>ФИО</p>
|
|
185
|
+
</th>
|
|
186
|
+
<th>
|
|
187
|
+
<p>Статус отчета</p>
|
|
188
|
+
</th>
|
|
189
|
+
</tr>
|
|
190
|
+
</thead>
|
|
191
|
+
<tbody>
|
|
192
|
+
<tr>
|
|
193
|
+
<td class="sticky">
|
|
194
|
+
<a>111</a>
|
|
195
|
+
</td>
|
|
196
|
+
<td>
|
|
197
|
+
<div>222 <br>435 <br>435 <br>435 <br>435</div>
|
|
198
|
+
</td>
|
|
199
|
+
<td>
|
|
200
|
+
<div>333</div>
|
|
201
|
+
</td>
|
|
202
|
+
<td>
|
|
203
|
+
<div>444</div>
|
|
204
|
+
</td>
|
|
205
|
+
<td>
|
|
206
|
+
<div>555</div>
|
|
207
|
+
</td>
|
|
208
|
+
<td>
|
|
209
|
+
<div>666</div>
|
|
210
|
+
</td>
|
|
211
|
+
<td>
|
|
212
|
+
<div>777</div>
|
|
213
|
+
</td>
|
|
214
|
+
<td>
|
|
215
|
+
<div>888</div>
|
|
216
|
+
</td>
|
|
217
|
+
<td>
|
|
218
|
+
<div><span>999</span></div>
|
|
219
|
+
</td>
|
|
220
|
+
<td>
|
|
221
|
+
<div><span>000</span></div>
|
|
222
|
+
</td>
|
|
223
|
+
</tr>
|
|
224
|
+
<tr>
|
|
225
|
+
<td class="sticky">
|
|
226
|
+
<a>111</a>
|
|
227
|
+
</td>
|
|
228
|
+
<td>
|
|
229
|
+
<div>222 <br>435 <br>435 <br>435 <br>435</div>
|
|
230
|
+
</td>
|
|
231
|
+
<td>
|
|
232
|
+
<div>333</div>
|
|
233
|
+
</td>
|
|
234
|
+
<td>
|
|
235
|
+
<div>444</div>
|
|
236
|
+
</td>
|
|
237
|
+
<td>
|
|
238
|
+
<div>555</div>
|
|
239
|
+
</td>
|
|
240
|
+
<td>
|
|
241
|
+
<div>666</div>
|
|
242
|
+
</td>
|
|
243
|
+
<td>
|
|
244
|
+
<div>777</div>
|
|
245
|
+
</td>
|
|
246
|
+
<td>
|
|
247
|
+
<div>888</div>
|
|
248
|
+
</td>
|
|
249
|
+
<td>
|
|
250
|
+
<div><span>999</span></div>
|
|
251
|
+
</td>
|
|
252
|
+
<td>
|
|
253
|
+
<div><span>000</span></div>
|
|
254
|
+
</td>
|
|
255
|
+
</tr>
|
|
256
|
+
<tr>
|
|
257
|
+
<td class="sticky">
|
|
258
|
+
<a>111</a>
|
|
259
|
+
</td>
|
|
260
|
+
<td>
|
|
261
|
+
<div>222 <br>435 <br>435 <br>435 <br>435</div>
|
|
262
|
+
</td>
|
|
263
|
+
<td>
|
|
264
|
+
<div>333</div>
|
|
265
|
+
</td>
|
|
266
|
+
<td>
|
|
267
|
+
<div>444</div>
|
|
268
|
+
</td>
|
|
269
|
+
<td>
|
|
270
|
+
<div>555</div>
|
|
271
|
+
</td>
|
|
272
|
+
<td>
|
|
273
|
+
<div>666</div>
|
|
274
|
+
</td>
|
|
275
|
+
<td>
|
|
276
|
+
<div>777</div>
|
|
277
|
+
</td>
|
|
278
|
+
<td>
|
|
279
|
+
<div>888</div>
|
|
280
|
+
</td>
|
|
281
|
+
<td>
|
|
282
|
+
<div><span>999</span></div>
|
|
283
|
+
</td>
|
|
284
|
+
<td>
|
|
285
|
+
<div><span>000</span></div>
|
|
286
|
+
</td>
|
|
287
|
+
</tr>
|
|
288
|
+
</tbody>
|
|
289
|
+
</table>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
183
292
|
<h2>Button</h2>
|
|
184
293
|
<section class="container">
|
|
185
294
|
<button class="u-button">Click me</button>
|
package/src/main.css
CHANGED
|
@@ -228,6 +228,7 @@
|
|
|
228
228
|
margin-right: 8px;
|
|
229
229
|
}
|
|
230
230
|
.u-button-text-danger {
|
|
231
|
+
font-weight: 400;
|
|
231
232
|
color: #E54B6A;
|
|
232
233
|
}
|
|
233
234
|
.u-button-text-danger:hover,
|
|
@@ -1015,6 +1016,108 @@
|
|
|
1015
1016
|
transform: rotate(-360deg);
|
|
1016
1017
|
}
|
|
1017
1018
|
}
|
|
1019
|
+
body {
|
|
1020
|
+
background-color: #F6F6F6;
|
|
1021
|
+
padding: 50px 300px;
|
|
1022
|
+
}
|
|
1023
|
+
p {
|
|
1024
|
+
margin: 0;
|
|
1025
|
+
padding: 0;
|
|
1026
|
+
}
|
|
1027
|
+
.u-table {
|
|
1028
|
+
border-radius: 10px;
|
|
1029
|
+
background: #FFFFFF;
|
|
1030
|
+
overflow-x: auto;
|
|
1031
|
+
}
|
|
1032
|
+
.u-table table {
|
|
1033
|
+
border-radius: 10px;
|
|
1034
|
+
width: 100%;
|
|
1035
|
+
border-collapse: separate;
|
|
1036
|
+
border-spacing: 0;
|
|
1037
|
+
}
|
|
1038
|
+
.u-table table caption,
|
|
1039
|
+
.u-table table th,
|
|
1040
|
+
.u-table table td {
|
|
1041
|
+
text-align: left;
|
|
1042
|
+
vertical-align: middle;
|
|
1043
|
+
}
|
|
1044
|
+
.u-table table thead tr th {
|
|
1045
|
+
color: #1E4391;
|
|
1046
|
+
border-bottom: 2px solid #1E4391;
|
|
1047
|
+
padding: 12px;
|
|
1048
|
+
width: 100%;
|
|
1049
|
+
}
|
|
1050
|
+
.u-table table thead tr th.sort div {
|
|
1051
|
+
position: relative;
|
|
1052
|
+
display: flex;
|
|
1053
|
+
width: 100%;
|
|
1054
|
+
}
|
|
1055
|
+
.u-table table thead tr th.sort div:after {
|
|
1056
|
+
cursor: pointer;
|
|
1057
|
+
position: absolute;
|
|
1058
|
+
content: "";
|
|
1059
|
+
top: 4px;
|
|
1060
|
+
right: 0;
|
|
1061
|
+
width: 10px;
|
|
1062
|
+
height: 16px;
|
|
1063
|
+
background-repeat: no-repeat;
|
|
1064
|
+
}
|
|
1065
|
+
.u-table table thead tr th.sort div span {
|
|
1066
|
+
display: none;
|
|
1067
|
+
}
|
|
1068
|
+
.u-table table thead tr th.sticky {
|
|
1069
|
+
position: sticky;
|
|
1070
|
+
left: 0;
|
|
1071
|
+
background-color: white;
|
|
1072
|
+
z-index: 1;
|
|
1073
|
+
text-align: center;
|
|
1074
|
+
}
|
|
1075
|
+
.u-table table thead tr th.sticky::after {
|
|
1076
|
+
content: "";
|
|
1077
|
+
position: absolute;
|
|
1078
|
+
right: -4px;
|
|
1079
|
+
top: 0;
|
|
1080
|
+
width: 4px;
|
|
1081
|
+
height: 100%;
|
|
1082
|
+
background: linear-gradient(269.98deg, rgba(211, 211, 211, 0.8) -24.97%, rgba(211, 211, 211, 0) 112.48%);
|
|
1083
|
+
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
1084
|
+
}
|
|
1085
|
+
.u-table table tbody tr {
|
|
1086
|
+
cursor: pointer;
|
|
1087
|
+
background-color: white;
|
|
1088
|
+
}
|
|
1089
|
+
.u-table table tbody tr td {
|
|
1090
|
+
border-bottom: 1px solid #CAD1E1;
|
|
1091
|
+
width: 200px;
|
|
1092
|
+
padding: 12px;
|
|
1093
|
+
}
|
|
1094
|
+
.u-table table tbody tr td.sticky {
|
|
1095
|
+
position: sticky;
|
|
1096
|
+
left: 0;
|
|
1097
|
+
background-color: inherit;
|
|
1098
|
+
font-size: 14px;
|
|
1099
|
+
font-weight: 600;
|
|
1100
|
+
text-align: center;
|
|
1101
|
+
}
|
|
1102
|
+
.u-table table tbody tr td.sticky a {
|
|
1103
|
+
color: #1E4391 !important;
|
|
1104
|
+
}
|
|
1105
|
+
.u-table table tbody tr td.sticky::after {
|
|
1106
|
+
content: "";
|
|
1107
|
+
position: absolute;
|
|
1108
|
+
right: -4px;
|
|
1109
|
+
top: 0;
|
|
1110
|
+
width: 4px;
|
|
1111
|
+
height: 100%;
|
|
1112
|
+
background: linear-gradient(269.98deg, rgba(211, 211, 211, 0.8) -24.97%, rgba(211, 211, 211, 0) 112.48%);
|
|
1113
|
+
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
1114
|
+
}
|
|
1115
|
+
.u-table table tbody tr:last-child td {
|
|
1116
|
+
border: none;
|
|
1117
|
+
}
|
|
1118
|
+
.u-table table tbody tr:hover {
|
|
1119
|
+
background-color: #E9ECF1;
|
|
1120
|
+
}
|
|
1018
1121
|
.bg-gradient {
|
|
1019
1122
|
background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
1020
1123
|
}
|
package/src/main.less
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
@import "styles/components/status";
|
|
13
13
|
@import "styles/components/message";
|
|
14
14
|
@import "styles/components/preloader";
|
|
15
|
-
|
|
15
|
+
@import "styles/components/table";
|
|
16
16
|
@import "styles/special-classes/colors";
|
|
17
17
|
@import "styles/special-classes/font-weight";
|
|
18
18
|
@import "styles/special-classes/selectors";
|
|
@@ -5,6 +5,11 @@ body {
|
|
|
5
5
|
padding: 50px 300px;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
+
p {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
8
13
|
.u-table {
|
|
9
14
|
border-radius: 10px;
|
|
10
15
|
background: @clr-secondary-empty;
|
|
@@ -24,16 +29,7 @@ body {
|
|
|
24
29
|
color: @clr-main-primary;
|
|
25
30
|
border-bottom: 2px solid @clr-main-primary;
|
|
26
31
|
padding: 12px;
|
|
27
|
-
height: 88px;
|
|
28
32
|
width: 100%;
|
|
29
|
-
.title {
|
|
30
|
-
height: 50%;
|
|
31
|
-
margin-bottom: 8px;
|
|
32
|
-
p {
|
|
33
|
-
display: inline-block;
|
|
34
|
-
vertical-align: middle;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
33
|
&.sort {
|
|
38
34
|
div {
|
|
39
35
|
position: relative;
|
|
@@ -61,6 +57,7 @@ body {
|
|
|
61
57
|
left: 0;
|
|
62
58
|
background-color: white;
|
|
63
59
|
z-index: 1;
|
|
60
|
+
text-align: center;
|
|
64
61
|
&::after {
|
|
65
62
|
content: "";
|
|
66
63
|
position: absolute;
|
|
@@ -77,22 +74,19 @@ body {
|
|
|
77
74
|
}
|
|
78
75
|
tbody {
|
|
79
76
|
tr {
|
|
77
|
+
cursor: pointer;
|
|
80
78
|
background-color: white;
|
|
81
79
|
td {
|
|
82
80
|
border-bottom: 1px solid @clr-secondary-quiet;
|
|
83
|
-
height: 56px;
|
|
84
81
|
width: 200px;
|
|
85
82
|
padding: 12px;
|
|
86
|
-
&:first-child {
|
|
87
|
-
}
|
|
88
|
-
&:last-child {
|
|
89
|
-
}
|
|
90
83
|
&.sticky {
|
|
91
84
|
position: sticky;
|
|
92
85
|
left: 0;
|
|
93
86
|
background-color: inherit;
|
|
94
87
|
font-size: 14px;
|
|
95
88
|
font-weight: 600;
|
|
89
|
+
text-align: center;
|
|
96
90
|
a {
|
|
97
91
|
color: @clr-main-primary !important;
|
|
98
92
|
}
|