urfu-ui-kit-vanilla 1.0.28 → 1.0.31
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 +10 -2
- package/playground/main.ts +1 -1
- package/src/main.css +98 -37
- package/src/main.less +11 -0
- package/src/styles/components/airdatepicker.less +13 -0
- package/src/styles/components/button.less +4 -2
- package/src/styles/components/input.less +6 -0
- package/src/styles/components/notification.less +12 -6
- package/src/styles/components/pagination.less +15 -5
- package/src/styles/const/base.less +1 -1
- package/src/styles/special-classes/colors.less +8 -13
package/package.json
CHANGED
package/playground/index.html
CHANGED
|
@@ -626,7 +626,11 @@
|
|
|
626
626
|
</div>
|
|
627
627
|
</div>
|
|
628
628
|
<div class="pages">
|
|
629
|
-
<
|
|
629
|
+
<button class="pages__arrow-btn inactive">
|
|
630
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
|
|
631
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77705 11.7071C7.16758 11.3166 7.16758 10.6834 6.77705 10.2929L2.48416 5.99999L6.77705 1.70711C7.16758 1.31658 7.16758 0.683418 6.77705 0.292894C6.38653 -0.0976305 5.75337 -0.0976315 5.36284 0.292892L0.36284 5.29288C0.175304 5.48042 0.069947 5.73477 0.0699466 5.99999C0.0699461 6.26521 0.175303 6.51956 0.362839 6.7071L5.36284 11.7071C5.75336 12.0976 6.38653 12.0976 6.77705 11.7071Z" fill="#D3D3D3"/>
|
|
632
|
+
</svg>
|
|
633
|
+
</button>
|
|
630
634
|
<div class="pages-nums">
|
|
631
635
|
<button class="pages-num pages-num-active">1</b>
|
|
632
636
|
<button class="pages-num">2</button>
|
|
@@ -641,7 +645,11 @@
|
|
|
641
645
|
</button>
|
|
642
646
|
<button class="pages-num">12</button>
|
|
643
647
|
</div>
|
|
644
|
-
|
|
648
|
+
<button class="pages__arrow-btn">
|
|
649
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12" fill="none">
|
|
650
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.22295 11.7071C1.83242 11.3166 1.83242 10.6834 2.22295 10.2929L6.51584 5.99999L2.22295 1.70711C1.83242 1.31658 1.83242 0.683418 2.22295 0.292894C2.61347 -0.0976305 3.24663 -0.0976315 3.63716 0.292892L8.63716 5.29288C8.8247 5.48042 8.93005 5.73477 8.93005 5.99999C8.93005 6.26521 8.8247 6.51956 8.63716 6.7071L3.63716 11.7071C3.24664 12.0976 2.61347 12.0976 2.22295 11.7071Z" fill="#1E4391"/>
|
|
651
|
+
</svg>
|
|
652
|
+
</button>
|
|
645
653
|
</div>
|
|
646
654
|
</div>
|
|
647
655
|
</section>
|
package/playground/main.ts
CHANGED
package/src/main.css
CHANGED
|
@@ -30,6 +30,21 @@
|
|
|
30
30
|
* {
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
}
|
|
33
|
+
p,
|
|
34
|
+
h1,
|
|
35
|
+
h2,
|
|
36
|
+
h3,
|
|
37
|
+
h4,
|
|
38
|
+
h5,
|
|
39
|
+
h6 {
|
|
40
|
+
margin: 0;
|
|
41
|
+
padding: 0;
|
|
42
|
+
}
|
|
43
|
+
button {
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
border: none;
|
|
46
|
+
background: transparent;
|
|
47
|
+
}
|
|
33
48
|
/* полоса прокрутки (скроллбар) */
|
|
34
49
|
::-webkit-scrollbar {
|
|
35
50
|
background-color: transparent;
|
|
@@ -65,15 +80,18 @@
|
|
|
65
80
|
/*Толщина скролла thin, auto*/
|
|
66
81
|
}
|
|
67
82
|
.u-button {
|
|
68
|
-
height:
|
|
83
|
+
height: 44px;
|
|
69
84
|
padding: 0 50px;
|
|
70
|
-
text-align: center;
|
|
71
85
|
border-radius: 10px;
|
|
72
86
|
border: none;
|
|
73
87
|
font-weight: 500;
|
|
74
88
|
font-size: 13px;
|
|
75
89
|
white-space: nowrap;
|
|
76
90
|
cursor: pointer;
|
|
91
|
+
display: inline-flex;
|
|
92
|
+
column-gap: 8px;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
align-items: center;
|
|
77
95
|
transition-property: color, background-color, border-color, background-image;
|
|
78
96
|
transition-duration: 0.15s;
|
|
79
97
|
transition-timing-function: ease-in-out;
|
|
@@ -93,7 +111,6 @@
|
|
|
93
111
|
.u-button .u-icon {
|
|
94
112
|
position: relative;
|
|
95
113
|
top: 1px;
|
|
96
|
-
margin-left: 8px;
|
|
97
114
|
}
|
|
98
115
|
.u-button .u-icon::before {
|
|
99
116
|
color: inherit;
|
|
@@ -162,15 +179,18 @@
|
|
|
162
179
|
color: #545454;
|
|
163
180
|
}
|
|
164
181
|
.u-button-cross {
|
|
165
|
-
height:
|
|
182
|
+
height: 44px;
|
|
166
183
|
padding: 0 50px;
|
|
167
|
-
text-align: center;
|
|
168
184
|
border-radius: 10px;
|
|
169
185
|
border: none;
|
|
170
186
|
font-weight: 500;
|
|
171
187
|
font-size: 13px;
|
|
172
188
|
white-space: nowrap;
|
|
173
189
|
cursor: pointer;
|
|
190
|
+
display: inline-flex;
|
|
191
|
+
column-gap: 8px;
|
|
192
|
+
justify-content: center;
|
|
193
|
+
align-items: center;
|
|
174
194
|
transition-property: color, background-color, border-color, background-image;
|
|
175
195
|
transition-duration: 0.15s;
|
|
176
196
|
transition-timing-function: ease-in-out;
|
|
@@ -243,7 +263,7 @@
|
|
|
243
263
|
color: #D995A2;
|
|
244
264
|
}
|
|
245
265
|
.u-input {
|
|
246
|
-
height:
|
|
266
|
+
height: 44px;
|
|
247
267
|
padding: 14px 16px;
|
|
248
268
|
border-radius: 10px;
|
|
249
269
|
font-weight: 400;
|
|
@@ -312,7 +332,7 @@
|
|
|
312
332
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
313
333
|
}
|
|
314
334
|
.u-input-required {
|
|
315
|
-
height:
|
|
335
|
+
height: 44px;
|
|
316
336
|
padding: 14px 16px;
|
|
317
337
|
border-radius: 10px;
|
|
318
338
|
font-weight: 400;
|
|
@@ -401,7 +421,7 @@
|
|
|
401
421
|
}
|
|
402
422
|
.u-selectbox-select {
|
|
403
423
|
cursor: pointer;
|
|
404
|
-
height:
|
|
424
|
+
height: 44px;
|
|
405
425
|
padding: 14px 16px;
|
|
406
426
|
border-radius: 10px;
|
|
407
427
|
font-weight: 400;
|
|
@@ -471,7 +491,7 @@
|
|
|
471
491
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
472
492
|
}
|
|
473
493
|
.u-selectbox-select-required {
|
|
474
|
-
height:
|
|
494
|
+
height: 44px;
|
|
475
495
|
padding: 14px 16px;
|
|
476
496
|
border-radius: 10px;
|
|
477
497
|
font-weight: 400;
|
|
@@ -591,7 +611,7 @@
|
|
|
591
611
|
.u-multiselectbox-select {
|
|
592
612
|
max-height: 132px;
|
|
593
613
|
overflow: auto;
|
|
594
|
-
height:
|
|
614
|
+
height: 44px;
|
|
595
615
|
padding: 14px 16px;
|
|
596
616
|
border-radius: 10px;
|
|
597
617
|
font-weight: 400;
|
|
@@ -670,7 +690,7 @@
|
|
|
670
690
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
671
691
|
}
|
|
672
692
|
.u-multiselectbox-select-required {
|
|
673
|
-
height:
|
|
693
|
+
height: 44px;
|
|
674
694
|
padding: 14px 16px;
|
|
675
695
|
border-radius: 10px;
|
|
676
696
|
font-weight: 400;
|
|
@@ -1055,7 +1075,7 @@
|
|
|
1055
1075
|
color: #545454;
|
|
1056
1076
|
}
|
|
1057
1077
|
.u-expand-input {
|
|
1058
|
-
height:
|
|
1078
|
+
height: 44px;
|
|
1059
1079
|
padding: 14px 16px;
|
|
1060
1080
|
border-radius: 10px;
|
|
1061
1081
|
font-weight: 400;
|
|
@@ -1109,7 +1129,7 @@
|
|
|
1109
1129
|
/* For Firefox */
|
|
1110
1130
|
}
|
|
1111
1131
|
.u-expand-input-required {
|
|
1112
|
-
height:
|
|
1132
|
+
height: 44px;
|
|
1113
1133
|
padding: 14px 16px;
|
|
1114
1134
|
border-radius: 10px;
|
|
1115
1135
|
font-weight: 400;
|
|
@@ -1163,7 +1183,7 @@
|
|
|
1163
1183
|
/* For Firefox */
|
|
1164
1184
|
}
|
|
1165
1185
|
.u-calendar {
|
|
1166
|
-
height:
|
|
1186
|
+
height: 44px;
|
|
1167
1187
|
padding: 14px 16px;
|
|
1168
1188
|
border-radius: 10px;
|
|
1169
1189
|
font-weight: 400;
|
|
@@ -1422,7 +1442,7 @@
|
|
|
1422
1442
|
}
|
|
1423
1443
|
.u-tab {
|
|
1424
1444
|
cursor: pointer;
|
|
1425
|
-
height:
|
|
1445
|
+
height: 44px;
|
|
1426
1446
|
border-radius: 24px;
|
|
1427
1447
|
padding: 0 18px;
|
|
1428
1448
|
font-size: 16px;
|
|
@@ -1616,8 +1636,11 @@
|
|
|
1616
1636
|
.pagination-container__p,
|
|
1617
1637
|
.pagination-container__limit,
|
|
1618
1638
|
.pagination-container .pages {
|
|
1619
|
-
|
|
1620
|
-
|
|
1639
|
+
/*table text*/
|
|
1640
|
+
/*table text*/
|
|
1641
|
+
font-weight: 400;
|
|
1642
|
+
font-size: 14px;
|
|
1643
|
+
line-height: 20px;
|
|
1621
1644
|
}
|
|
1622
1645
|
.pagination-container__p {
|
|
1623
1646
|
color: #545454;
|
|
@@ -1643,6 +1666,13 @@
|
|
|
1643
1666
|
justify-content: space-between;
|
|
1644
1667
|
margin-left: 0.8rem;
|
|
1645
1668
|
column-gap: 0.5rem;
|
|
1669
|
+
user-select: none;
|
|
1670
|
+
}
|
|
1671
|
+
.pagination-container .pages * {
|
|
1672
|
+
cursor: pointer;
|
|
1673
|
+
}
|
|
1674
|
+
.pagination-container .pages__arrow-btn.inactive {
|
|
1675
|
+
cursor: not-allowed;
|
|
1646
1676
|
}
|
|
1647
1677
|
.pagination-container .pages-nums {
|
|
1648
1678
|
display: flex;
|
|
@@ -1651,7 +1681,7 @@
|
|
|
1651
1681
|
}
|
|
1652
1682
|
.pagination-container .pages-num {
|
|
1653
1683
|
display: flex;
|
|
1654
|
-
align-items:
|
|
1684
|
+
align-items: flex-end;
|
|
1655
1685
|
cursor: pointer;
|
|
1656
1686
|
justify-content: center;
|
|
1657
1687
|
width: 33px;
|
|
@@ -1668,8 +1698,9 @@
|
|
|
1668
1698
|
color: #fff;
|
|
1669
1699
|
background: #1e4391;
|
|
1670
1700
|
}
|
|
1671
|
-
.pagination-container .pages-num:hover {
|
|
1672
|
-
|
|
1701
|
+
.pagination-container .pages-num:not(.pages-num-active):hover {
|
|
1702
|
+
font-weight: 700;
|
|
1703
|
+
color: #1e4391;
|
|
1673
1704
|
}
|
|
1674
1705
|
.pagination-container .pages-num:focus-visible {
|
|
1675
1706
|
border: none;
|
|
@@ -1857,97 +1888,112 @@
|
|
|
1857
1888
|
}
|
|
1858
1889
|
.u-notification {
|
|
1859
1890
|
width: fit-content;
|
|
1891
|
+
min-width: 300px;
|
|
1860
1892
|
display: flex;
|
|
1861
1893
|
justify-content: space-between;
|
|
1862
1894
|
padding: 18px 16px 18px 52px;
|
|
1863
1895
|
border-radius: 10px;
|
|
1864
1896
|
font-weight: 400;
|
|
1897
|
+
column-gap: 8px;
|
|
1865
1898
|
font-size: 16px;
|
|
1866
1899
|
color: #222222;
|
|
1867
1900
|
background-repeat: no-repeat;
|
|
1868
1901
|
background-position: top calc(50% - 1px) left 16px;
|
|
1902
|
+
border: 1px solid #748ab9;
|
|
1869
1903
|
background-color: #E7F2FF;
|
|
1870
1904
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%231E4391' stroke-width='2'%3E%3C/circle%3E%3Crect x='9' y='8' width='2' height='8' rx='1' fill='%231E4391'%3E%3C/rect%3E%3Ccircle cx='10' cy='6' r='1' fill='%231E4391'%3E%3C/circle%3E%3C/svg%3E");
|
|
1871
1905
|
}
|
|
1872
1906
|
.u-notification .u-notification-hide {
|
|
1873
1907
|
cursor: pointer;
|
|
1874
|
-
|
|
1875
|
-
border: none;
|
|
1876
|
-
width: 12px;
|
|
1908
|
+
flex: 0 0 12px;
|
|
1877
1909
|
height: 12px;
|
|
1878
|
-
|
|
1910
|
+
position: relative;
|
|
1911
|
+
top: -3px;
|
|
1912
|
+
padding: 5px;
|
|
1879
1913
|
background-repeat: no-repeat;
|
|
1880
1914
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5301_23915)'%3E%3Cpath d='M1 1L10.5833 11M11 1L1 11' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5301_23915'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
|
|
1881
1915
|
}
|
|
1882
1916
|
.u-notification-fail {
|
|
1883
1917
|
width: fit-content;
|
|
1918
|
+
min-width: 300px;
|
|
1884
1919
|
display: flex;
|
|
1885
1920
|
justify-content: space-between;
|
|
1886
1921
|
padding: 18px 16px 18px 52px;
|
|
1887
1922
|
border-radius: 10px;
|
|
1888
1923
|
font-weight: 400;
|
|
1924
|
+
column-gap: 8px;
|
|
1889
1925
|
font-size: 16px;
|
|
1890
1926
|
color: #222222;
|
|
1891
1927
|
background-repeat: no-repeat;
|
|
1892
1928
|
background-position: top calc(50% - 1px) left 16px;
|
|
1929
|
+
border: 1px solid #748ab9;
|
|
1930
|
+
border-color: #F17F7C;
|
|
1893
1931
|
background-color: #FDEAEA;
|
|
1894
1932
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
|
|
1895
1933
|
}
|
|
1896
1934
|
.u-notification-fail .u-notification-hide {
|
|
1897
1935
|
cursor: pointer;
|
|
1898
|
-
|
|
1899
|
-
border: none;
|
|
1900
|
-
width: 12px;
|
|
1936
|
+
flex: 0 0 12px;
|
|
1901
1937
|
height: 12px;
|
|
1902
|
-
|
|
1938
|
+
position: relative;
|
|
1939
|
+
top: -3px;
|
|
1940
|
+
padding: 5px;
|
|
1903
1941
|
background-repeat: no-repeat;
|
|
1904
1942
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5301_23930)'%3E%3Cpath d='M1 1L10.5833 11M11 1L1 11' stroke='%23EF302B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5301_23930'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
|
|
1905
1943
|
}
|
|
1906
1944
|
.u-notification-success {
|
|
1907
1945
|
width: fit-content;
|
|
1946
|
+
min-width: 300px;
|
|
1908
1947
|
display: flex;
|
|
1909
1948
|
justify-content: space-between;
|
|
1910
1949
|
padding: 18px 16px 18px 52px;
|
|
1911
1950
|
border-radius: 10px;
|
|
1912
1951
|
font-weight: 400;
|
|
1952
|
+
column-gap: 8px;
|
|
1913
1953
|
font-size: 16px;
|
|
1914
1954
|
color: #222222;
|
|
1915
1955
|
background-repeat: no-repeat;
|
|
1916
1956
|
background-position: top calc(50% - 1px) left 16px;
|
|
1957
|
+
border: 1px solid #748ab9;
|
|
1917
1958
|
background-color: #EDF7EB;
|
|
1959
|
+
border-color: #6EA68C;
|
|
1918
1960
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
|
|
1919
1961
|
}
|
|
1920
1962
|
.u-notification-success .u-notification-hide {
|
|
1921
1963
|
cursor: pointer;
|
|
1922
|
-
|
|
1923
|
-
border: none;
|
|
1924
|
-
width: 12px;
|
|
1964
|
+
flex: 0 0 12px;
|
|
1925
1965
|
height: 12px;
|
|
1926
|
-
|
|
1966
|
+
position: relative;
|
|
1967
|
+
top: -3px;
|
|
1968
|
+
padding: 5px;
|
|
1927
1969
|
background-repeat: no-repeat;
|
|
1928
1970
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5301_23920)'%3E%3Cpath d='M1 1L10.5833 11M11 1L1 11' stroke='%23147246' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5301_23920'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
|
|
1929
1971
|
}
|
|
1930
1972
|
.u-notification-warning {
|
|
1931
1973
|
width: fit-content;
|
|
1974
|
+
min-width: 300px;
|
|
1932
1975
|
display: flex;
|
|
1933
1976
|
justify-content: space-between;
|
|
1934
1977
|
padding: 18px 16px 18px 52px;
|
|
1935
1978
|
border-radius: 10px;
|
|
1936
1979
|
font-weight: 400;
|
|
1980
|
+
column-gap: 8px;
|
|
1937
1981
|
font-size: 16px;
|
|
1938
1982
|
color: #222222;
|
|
1939
1983
|
background-repeat: no-repeat;
|
|
1940
1984
|
background-position: top calc(50% - 1px) left 16px;
|
|
1941
|
-
|
|
1985
|
+
border: 1px solid #748ab9;
|
|
1986
|
+
border-color: rgba(255, 243, 205, 0.85);
|
|
1987
|
+
background-color: #EEB18C;
|
|
1942
1988
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
|
|
1943
1989
|
}
|
|
1944
1990
|
.u-notification-warning .u-notification-hide {
|
|
1945
1991
|
cursor: pointer;
|
|
1946
|
-
|
|
1947
|
-
border: none;
|
|
1948
|
-
width: 12px;
|
|
1992
|
+
flex: 0 0 12px;
|
|
1949
1993
|
height: 12px;
|
|
1950
|
-
|
|
1994
|
+
position: relative;
|
|
1995
|
+
top: -3px;
|
|
1996
|
+
padding: 5px;
|
|
1951
1997
|
background-repeat: no-repeat;
|
|
1952
1998
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5301_23925)'%3E%3Cpath d='M1 1L10.5833 11M11 1L1 11' stroke='%23E98446' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5301_23925'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
|
|
1953
1999
|
}
|
|
@@ -2863,6 +2909,21 @@ h5 {
|
|
|
2863
2909
|
* {
|
|
2864
2910
|
box-sizing: border-box;
|
|
2865
2911
|
}
|
|
2912
|
+
p,
|
|
2913
|
+
h1,
|
|
2914
|
+
h2,
|
|
2915
|
+
h3,
|
|
2916
|
+
h4,
|
|
2917
|
+
h5,
|
|
2918
|
+
h6 {
|
|
2919
|
+
margin: 0;
|
|
2920
|
+
padding: 0;
|
|
2921
|
+
}
|
|
2922
|
+
button {
|
|
2923
|
+
text-decoration: none;
|
|
2924
|
+
border: none;
|
|
2925
|
+
background: transparent;
|
|
2926
|
+
}
|
|
2866
2927
|
/* полоса прокрутки (скроллбар) */
|
|
2867
2928
|
::-webkit-scrollbar {
|
|
2868
2929
|
background-color: transparent;
|
package/src/main.less
CHANGED
|
@@ -29,6 +29,17 @@
|
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
p, h1, h2, h3, h4, h5, h6 {
|
|
33
|
+
margin: 0;
|
|
34
|
+
padding: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
button {
|
|
38
|
+
text-decoration: none;
|
|
39
|
+
border: none;
|
|
40
|
+
background: transparent;
|
|
41
|
+
}
|
|
42
|
+
|
|
32
43
|
/* полоса прокрутки (скроллбар) */
|
|
33
44
|
::-webkit-scrollbar {
|
|
34
45
|
background-color: transparent;
|
|
@@ -7,6 +7,12 @@
|
|
|
7
7
|
&.-inline- {
|
|
8
8
|
border: 1px solid @clr-secondary-cold;
|
|
9
9
|
}
|
|
10
|
+
&--pointer::after {
|
|
11
|
+
content: none;
|
|
12
|
+
}
|
|
13
|
+
&.-active-:not(.-custom-position-) {
|
|
14
|
+
transform: translate(0, -12px);
|
|
15
|
+
}
|
|
10
16
|
&-nav {
|
|
11
17
|
border: none;
|
|
12
18
|
&--action {
|
|
@@ -219,6 +225,13 @@
|
|
|
219
225
|
&.-weekend-.-selected-.-range-to- {
|
|
220
226
|
background-color: @clr-main-danger;
|
|
221
227
|
}
|
|
228
|
+
&.-selected- {
|
|
229
|
+
background-color: @clr-main-primary;
|
|
230
|
+
&.-focus- {
|
|
231
|
+
background-color: @clr-main-primary;
|
|
232
|
+
color: white;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
222
235
|
}
|
|
223
236
|
}
|
|
224
237
|
&.-month- {
|
|
@@ -3,13 +3,16 @@
|
|
|
3
3
|
.button() {
|
|
4
4
|
height: @height-main;
|
|
5
5
|
padding: 0 50px;
|
|
6
|
-
text-align: center;
|
|
7
6
|
border-radius: @radius;
|
|
8
7
|
border: none;
|
|
9
8
|
font-weight: 500;
|
|
10
9
|
font-size: 13px;
|
|
11
10
|
white-space: nowrap;
|
|
12
11
|
cursor: pointer;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
column-gap: 8px;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
13
16
|
.transition;
|
|
14
17
|
}
|
|
15
18
|
|
|
@@ -44,7 +47,6 @@
|
|
|
44
47
|
.u-icon {
|
|
45
48
|
position: relative;
|
|
46
49
|
top: 1px;
|
|
47
|
-
margin-left: 8px;
|
|
48
50
|
&::before {
|
|
49
51
|
color: inherit;
|
|
50
52
|
}
|
|
@@ -449,6 +449,9 @@
|
|
|
449
449
|
&:hover {
|
|
450
450
|
border: 1px solid @clr-secondary-cold;
|
|
451
451
|
}
|
|
452
|
+
&-disabled:hover {
|
|
453
|
+
border: none;
|
|
454
|
+
}
|
|
452
455
|
&-icon {
|
|
453
456
|
cursor: pointer;
|
|
454
457
|
margin: auto;
|
|
@@ -477,17 +480,20 @@
|
|
|
477
480
|
}
|
|
478
481
|
&-title {
|
|
479
482
|
.tt;
|
|
483
|
+
margin: 0;
|
|
480
484
|
color: @clr-secondary-cold;
|
|
481
485
|
text-align: center;
|
|
482
486
|
margin-bottom: 7px;
|
|
483
487
|
&-loading {
|
|
484
488
|
.st;
|
|
489
|
+
margin: 0;
|
|
485
490
|
color: @clr-secondary-cold;
|
|
486
491
|
text-align: center;
|
|
487
492
|
}
|
|
488
493
|
}
|
|
489
494
|
&-subtitle {
|
|
490
495
|
.h5;
|
|
496
|
+
margin: 0;
|
|
491
497
|
color: @clr-secondary-cold;
|
|
492
498
|
text-align: center;
|
|
493
499
|
}
|
|
@@ -2,25 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
.notification() {
|
|
4
4
|
width: fit-content;
|
|
5
|
+
min-width: 300px;
|
|
5
6
|
display: flex;
|
|
6
7
|
justify-content: space-between;
|
|
7
8
|
padding: 18px 16px 18px 52px;
|
|
8
9
|
border-radius: @radius;
|
|
9
10
|
font-weight: 400;
|
|
11
|
+
column-gap: 8px;
|
|
10
12
|
font-size: 16px;
|
|
11
13
|
color: @clr-main-dark;
|
|
12
14
|
background-repeat: no-repeat;
|
|
13
15
|
background-position: top calc(50% - 1px) left 16px;
|
|
16
|
+
border: 1px solid #748ab9;
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
.notification-hide() {
|
|
17
20
|
cursor: pointer;
|
|
18
|
-
|
|
19
|
-
border: none;
|
|
20
|
-
width: 12px;
|
|
21
|
+
flex: 0 0 12px;
|
|
21
22
|
height: 12px;
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
position: relative;
|
|
24
|
+
top: -3px;
|
|
25
|
+
padding: 5px;
|
|
26
|
+
background-repeat: no-repeat;
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
.u-notification {
|
|
@@ -33,6 +36,7 @@
|
|
|
33
36
|
}
|
|
34
37
|
&-fail {
|
|
35
38
|
.notification;
|
|
39
|
+
border-color: #F17F7C;
|
|
36
40
|
background-color: #FDEAEA;
|
|
37
41
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
|
|
38
42
|
.u-notification-hide {
|
|
@@ -43,6 +47,7 @@
|
|
|
43
47
|
&-success {
|
|
44
48
|
.notification;
|
|
45
49
|
background-color: #EDF7EB;
|
|
50
|
+
border-color:#6EA68C;
|
|
46
51
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
|
|
47
52
|
.u-notification-hide {
|
|
48
53
|
.notification-hide;
|
|
@@ -51,7 +56,8 @@
|
|
|
51
56
|
}
|
|
52
57
|
&-warning {
|
|
53
58
|
.notification;
|
|
54
|
-
|
|
59
|
+
border-color: rgba(255, 243, 205, 0.85);
|
|
60
|
+
background-color: #EEB18C;
|
|
55
61
|
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
|
|
56
62
|
.u-notification-hide {
|
|
57
63
|
.notification-hide;
|
|
@@ -12,8 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
&__p,
|
|
14
14
|
&__limit, .pages {
|
|
15
|
-
|
|
16
|
-
line-height: 1.5;
|
|
15
|
+
.tt;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
&__p {
|
|
@@ -43,6 +42,15 @@
|
|
|
43
42
|
justify-content: space-between;
|
|
44
43
|
margin-left: 0.8rem;
|
|
45
44
|
column-gap: 0.5rem;
|
|
45
|
+
user-select: none;
|
|
46
|
+
|
|
47
|
+
* {
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&__arrow-btn.inactive {
|
|
52
|
+
cursor: not-allowed;
|
|
53
|
+
}
|
|
46
54
|
|
|
47
55
|
&-nums {
|
|
48
56
|
.flex-container;
|
|
@@ -50,7 +58,8 @@
|
|
|
50
58
|
}
|
|
51
59
|
|
|
52
60
|
&-num {
|
|
53
|
-
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: flex-end;
|
|
54
63
|
cursor: pointer;
|
|
55
64
|
justify-content: center;
|
|
56
65
|
width: 33px;
|
|
@@ -68,8 +77,9 @@
|
|
|
68
77
|
background: #1e4391;
|
|
69
78
|
}
|
|
70
79
|
|
|
71
|
-
&:hover {
|
|
72
|
-
|
|
80
|
+
&:not(.pages-num-active):hover {
|
|
81
|
+
font-weight: 700;
|
|
82
|
+
color: #1e4391;
|
|
73
83
|
}
|
|
74
84
|
|
|
75
85
|
&:focus-visible {
|
|
@@ -10,27 +10,22 @@
|
|
|
10
10
|
}
|
|
11
11
|
&-blue {
|
|
12
12
|
background-color: @clr-main-primary;
|
|
13
|
-
|
|
14
|
-
&-red {
|
|
15
|
-
background-color: @clr-main-danger;
|
|
16
|
-
}
|
|
17
|
-
&-dark {
|
|
18
|
-
&-blue {
|
|
13
|
+
&-dark {
|
|
19
14
|
background-color: @clr-secondary-primary;
|
|
20
15
|
}
|
|
21
|
-
&-
|
|
22
|
-
background-color: @clr-secondary-
|
|
16
|
+
&-light {
|
|
17
|
+
background-color: @clr-secondary-chilly;
|
|
23
18
|
}
|
|
24
19
|
}
|
|
25
|
-
&-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
&-red {
|
|
21
|
+
background-color: @clr-main-danger;
|
|
22
|
+
&-dark {
|
|
23
|
+
background-color: @clr-secondary-danger;
|
|
28
24
|
}
|
|
29
|
-
&-
|
|
25
|
+
&-light {
|
|
30
26
|
background-color: @clr-secondary-focusing;
|
|
31
27
|
}
|
|
32
28
|
}
|
|
33
|
-
|
|
34
29
|
}
|
|
35
30
|
//property: color
|
|
36
31
|
.clr {
|