urfu-ui-kit-vanilla 1.0.32 → 1.0.34
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 +70 -20
- package/src/main.css +152 -51
- package/src/styles/components/airdatepicker.less +3 -3
- package/src/styles/components/button.less +1 -1
- package/src/styles/components/input.less +14 -6
- package/src/styles/components/pagination.less +49 -44
- package/src/styles/components/switch.less +18 -7
- package/src/styles/components/tab.less +1 -1
- package/src/styles/components/table.less +0 -4
- package/src/styles/const/colors.less +1 -1
- package/src/styles/special-classes/colors.less +103 -9
- package/src/styles/special-classes/selectors.less +5 -5
package/package.json
CHANGED
package/playground/index.html
CHANGED
|
@@ -39,6 +39,54 @@
|
|
|
39
39
|
<div class="u-multiselectbox-select-cross"></div>
|
|
40
40
|
</div>
|
|
41
41
|
</div>
|
|
42
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
43
|
+
<div class="u-multiselectbox-select-item-container">
|
|
44
|
+
<span class="u-multiselectbox-select-item">gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfj</span>
|
|
45
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
49
|
+
<div class="u-multiselectbox-select-item-container">
|
|
50
|
+
<span class="u-multiselectbox-select-item">gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfj</span>
|
|
51
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
55
|
+
<div class="u-multiselectbox-select-item-container">
|
|
56
|
+
<span class="u-multiselectbox-select-item">f jhujdjj gdjfdjfj</span>
|
|
57
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
61
|
+
<div class="u-multiselectbox-select-item-container">
|
|
62
|
+
<span class="u-multiselectbox-select-item">f jhujdjj gdjfdjfj</span>
|
|
63
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
67
|
+
<div class="u-multiselectbox-select-item-container">
|
|
68
|
+
<span class="u-multiselectbox-select-item">gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfj</span>
|
|
69
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
73
|
+
<div class="u-multiselectbox-select-item-container">
|
|
74
|
+
<span class="u-multiselectbox-select-item">gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfj</span>
|
|
75
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
79
|
+
<div class="u-multiselectbox-select-item-container">
|
|
80
|
+
<span class="u-multiselectbox-select-item">fj</span>
|
|
81
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
85
|
+
<div class="u-multiselectbox-select-item-container">
|
|
86
|
+
<span class="u-multiselectbox-select-item">gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfj</span>
|
|
87
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
42
90
|
</div>
|
|
43
91
|
<div class="u-multiselectbox-options">
|
|
44
92
|
<div class="u-multiselectbox-option">
|
|
@@ -626,37 +674,37 @@
|
|
|
626
674
|
</section>
|
|
627
675
|
<h2>Pagination</h2>
|
|
628
676
|
<section>
|
|
629
|
-
<div class="pagination
|
|
630
|
-
<p class="
|
|
631
|
-
<div class="
|
|
677
|
+
<div class="u-pagination">
|
|
678
|
+
<p class="u-pagination__result">Записи с 1 по 20 из 59</p>
|
|
679
|
+
<div class="u-pagination__limits">
|
|
632
680
|
Выводить по
|
|
633
|
-
<div class="
|
|
634
|
-
<span class="
|
|
635
|
-
<span class="
|
|
636
|
-
<span class="
|
|
681
|
+
<div class="u-pagination__limit-wrapper">
|
|
682
|
+
<span class="u-pagination__limit_active">20</span>
|
|
683
|
+
<span class="u-pagination__limit">40</span>
|
|
684
|
+
<span class="u-pagination__limit">60</span>
|
|
637
685
|
</div>
|
|
638
686
|
</div>
|
|
639
|
-
<div class="
|
|
640
|
-
<button class="
|
|
687
|
+
<div class="u-paginator">
|
|
688
|
+
<button class="u-paginator__arrow-btn u-paginator__arrow-btn_inactive">
|
|
641
689
|
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
|
|
642
690
|
<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"/>
|
|
643
691
|
</svg>
|
|
644
692
|
</button>
|
|
645
|
-
<div class="
|
|
646
|
-
<button class="
|
|
647
|
-
<button class="
|
|
648
|
-
<button class="
|
|
649
|
-
<button class="
|
|
650
|
-
<button class="
|
|
651
|
-
<button class="
|
|
652
|
-
<button class="
|
|
693
|
+
<div class="u-paginator__pages">
|
|
694
|
+
<button class="u-paginator__pages-num u-paginator__pages-num_active">1</b>
|
|
695
|
+
<button class="u-paginator__pages-num">2</button>
|
|
696
|
+
<button class="u-paginator__pages-num">3</button>
|
|
697
|
+
<button class="u-paginator__pages-num">4</button>
|
|
698
|
+
<button class="u-paginator__pages-num">5</button>
|
|
699
|
+
<button class="u-paginator__pages-num">6</button>
|
|
700
|
+
<button class="u-paginator__pages-dots">
|
|
653
701
|
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="3" viewBox="0 0 9 3" fill="none">
|
|
654
702
|
<path d="M1.61584 2.07C1.4105 2.07 1.23317 1.99533 1.08384 1.846C0.943836 1.69667 0.873836 1.51467 0.873836 1.3C0.873836 1.076 0.943836 0.894 1.08384 0.754C1.23317 0.614 1.4105 0.544 1.61584 0.544C1.82117 0.544 1.99384 0.614 2.13384 0.754C2.28317 0.894 2.35784 1.076 2.35784 1.3C2.35784 1.51467 2.28317 1.69667 2.13384 1.846C1.99384 1.99533 1.82117 2.07 1.61584 2.07ZM4.58263 2.07C4.3773 2.07 4.19997 1.99533 4.05063 1.846C3.91063 1.69667 3.84063 1.51467 3.84063 1.3C3.84063 1.076 3.91063 0.894 4.05063 0.754C4.19997 0.614 4.3773 0.544 4.58263 0.544C4.78797 0.544 4.96063 0.614 5.10063 0.754C5.24997 0.894 5.32463 1.076 5.32463 1.3C5.32463 1.51467 5.24997 1.69667 5.10063 1.846C4.96063 1.99533 4.78797 2.07 4.58263 2.07ZM7.54943 2.07C7.3441 2.07 7.16676 1.99533 7.01743 1.846C6.87743 1.69667 6.80743 1.51467 6.80743 1.3C6.80743 1.076 6.87743 0.894 7.01743 0.754C7.16676 0.614 7.3441 0.544 7.54943 0.544C7.75476 0.544 7.92743 0.614 8.06743 0.754C8.21676 0.894 8.29143 1.076 8.29143 1.3C8.29143 1.51467 8.21676 1.69667 8.06743 1.846C7.92743 1.99533 7.75476 2.07 7.54943 2.07Z" fill="#545454"/>
|
|
655
703
|
</svg>
|
|
656
704
|
</button>
|
|
657
|
-
<button class="
|
|
705
|
+
<button class="u-paginator__pages-num">12</button>
|
|
658
706
|
</div>
|
|
659
|
-
<button class="
|
|
707
|
+
<button class="u-paginator__arrow-btn">
|
|
660
708
|
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12" fill="none">
|
|
661
709
|
<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"/>
|
|
662
710
|
</svg>
|
|
@@ -702,10 +750,12 @@
|
|
|
702
750
|
<section class="flex">
|
|
703
751
|
<label class="u-switch">
|
|
704
752
|
<input type="checkbox">
|
|
705
|
-
<div></div>
|
|
753
|
+
<div class="u-switch__point"></div>
|
|
754
|
+
<div>Свитч</div>
|
|
706
755
|
</label>
|
|
707
756
|
<label class="u-switch-gradient">
|
|
708
757
|
<input type="checkbox">
|
|
758
|
+
<div class="u-switch-gradient__point"></div>
|
|
709
759
|
<div></div>
|
|
710
760
|
</label>
|
|
711
761
|
<label class="u-switch">
|
package/src/main.css
CHANGED
|
@@ -636,10 +636,10 @@ button {
|
|
|
636
636
|
border: 1px solid #D3D3D3;
|
|
637
637
|
position: relative;
|
|
638
638
|
padding: 8px 16px 7px 16px;
|
|
639
|
-
display:
|
|
639
|
+
display: flex;
|
|
640
|
+
flex-wrap: wrap;
|
|
640
641
|
min-height: 48px;
|
|
641
642
|
height: 100%;
|
|
642
|
-
grid-template-columns: repeat(3, 1fr);
|
|
643
643
|
grid-row-gap: 8px;
|
|
644
644
|
grid-column-gap: 4px;
|
|
645
645
|
padding-right: 75px;
|
|
@@ -745,8 +745,8 @@ button {
|
|
|
745
745
|
z-index: 999 !important;
|
|
746
746
|
white-space: nowrap;
|
|
747
747
|
overflow: hidden;
|
|
748
|
-
width: 100%;
|
|
749
748
|
position: relative;
|
|
749
|
+
max-width: calc((100% - 8px) / 3);
|
|
750
750
|
}
|
|
751
751
|
.u-multiselectbox-select-item-container {
|
|
752
752
|
display: flex;
|
|
@@ -761,10 +761,11 @@ button {
|
|
|
761
761
|
.u-multiselectbox-select-cross {
|
|
762
762
|
cursor: pointer;
|
|
763
763
|
position: relative;
|
|
764
|
-
|
|
764
|
+
flex: 0 0 13px;
|
|
765
765
|
height: 13px;
|
|
766
|
+
width: 16px;
|
|
767
|
+
margin-left: 10px;
|
|
766
768
|
top: 2px;
|
|
767
|
-
right: -8px;
|
|
768
769
|
background-repeat: no-repeat;
|
|
769
770
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L10.5833 11.5M11 1.5L1 11.5' stroke='%23748AB9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
770
771
|
}
|
|
@@ -781,6 +782,7 @@ button {
|
|
|
781
782
|
cursor: pointer;
|
|
782
783
|
position: absolute;
|
|
783
784
|
display: block;
|
|
785
|
+
z-index: 101;
|
|
784
786
|
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='M0.292892 4.29289C0.683416 3.90237 1.31658 3.90237 1.70711 4.29289L6.00001 8.58579L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L6.70712 10.7071C6.51958 10.8946 6.26523 11 6.00001 11C5.73479 11 5.48044 10.8946 5.2929 10.7071L0.292894 5.70711C-0.0976308 5.31658 -0.0976314 4.68342 0.292892 4.29289Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
785
787
|
background-repeat: no-repeat;
|
|
786
788
|
width: 12px;
|
|
@@ -792,6 +794,7 @@ button {
|
|
|
792
794
|
cursor: pointer;
|
|
793
795
|
position: absolute;
|
|
794
796
|
display: block;
|
|
797
|
+
z-index: 101;
|
|
795
798
|
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='%23A7A7A7'/%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='%23A7A7A7'/%3E%3C/svg%3E ");
|
|
796
799
|
background-repeat: no-repeat;
|
|
797
800
|
width: 12px;
|
|
@@ -905,6 +908,9 @@ button {
|
|
|
905
908
|
.u-password {
|
|
906
909
|
position: relative;
|
|
907
910
|
}
|
|
911
|
+
.u-password:hover .u-input {
|
|
912
|
+
border: 1px solid #748AB9;
|
|
913
|
+
}
|
|
908
914
|
.u-password-icon {
|
|
909
915
|
cursor: pointer;
|
|
910
916
|
display: block;
|
|
@@ -1238,6 +1244,8 @@ button {
|
|
|
1238
1244
|
.u-switch {
|
|
1239
1245
|
cursor: pointer;
|
|
1240
1246
|
display: flex;
|
|
1247
|
+
align-items: center;
|
|
1248
|
+
column-gap: 10px;
|
|
1241
1249
|
}
|
|
1242
1250
|
.u-switch input {
|
|
1243
1251
|
display: none;
|
|
@@ -1249,16 +1257,22 @@ button {
|
|
|
1249
1257
|
cursor: not-allowed;
|
|
1250
1258
|
background-color: #D3D3D3;
|
|
1251
1259
|
}
|
|
1252
|
-
.u-switch
|
|
1260
|
+
.u-switch input:checked + .u-switch__point {
|
|
1261
|
+
background-color: #1E4391;
|
|
1262
|
+
}
|
|
1263
|
+
.u-switch input:checked + .u-switch__point:hover {
|
|
1264
|
+
background-color: #0F2B5E;
|
|
1265
|
+
}
|
|
1266
|
+
.u-switch__point {
|
|
1253
1267
|
cursor: pointer;
|
|
1254
1268
|
width: 54px;
|
|
1255
1269
|
height: 26px;
|
|
1256
1270
|
position: relative;
|
|
1257
1271
|
border-radius: 16px;
|
|
1258
|
-
background-color: #
|
|
1272
|
+
background-color: #D3D3D3;
|
|
1259
1273
|
}
|
|
1260
|
-
.u-
|
|
1261
|
-
content:
|
|
1274
|
+
.u-switch__point::after {
|
|
1275
|
+
content: "";
|
|
1262
1276
|
display: block;
|
|
1263
1277
|
position: absolute;
|
|
1264
1278
|
left: 4px;
|
|
@@ -1289,16 +1303,19 @@ button {
|
|
|
1289
1303
|
cursor: not-allowed;
|
|
1290
1304
|
background: #D3D3D3;
|
|
1291
1305
|
}
|
|
1292
|
-
.u-switch-gradient
|
|
1306
|
+
.u-switch-gradient input:checked + .u-switch-gradient__point {
|
|
1307
|
+
background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
1308
|
+
}
|
|
1309
|
+
.u-switch-gradient__point {
|
|
1293
1310
|
cursor: pointer;
|
|
1294
1311
|
width: 54px;
|
|
1295
1312
|
height: 26px;
|
|
1296
1313
|
position: relative;
|
|
1297
1314
|
border-radius: 16px;
|
|
1298
|
-
background:
|
|
1315
|
+
background-color: #D3D3D3;
|
|
1299
1316
|
}
|
|
1300
|
-
.u-switch-
|
|
1301
|
-
content:
|
|
1317
|
+
.u-switch-gradient__point::after {
|
|
1318
|
+
content: "";
|
|
1302
1319
|
display: block;
|
|
1303
1320
|
position: absolute;
|
|
1304
1321
|
left: 4px;
|
|
@@ -1643,40 +1660,42 @@ button {
|
|
|
1643
1660
|
position: absolute;
|
|
1644
1661
|
left: -0.8em;
|
|
1645
1662
|
}
|
|
1646
|
-
.pagination
|
|
1663
|
+
.u-pagination {
|
|
1647
1664
|
display: flex;
|
|
1648
1665
|
align-items: center;
|
|
1649
1666
|
justify-content: space-between;
|
|
1650
1667
|
padding: 1.5rem 3.6rem;
|
|
1651
1668
|
}
|
|
1652
|
-
.
|
|
1653
|
-
.
|
|
1654
|
-
.
|
|
1669
|
+
.u-pagination__result,
|
|
1670
|
+
.u-pagination__limits,
|
|
1671
|
+
.u-pagination__limit,
|
|
1672
|
+
.u-pagination__paginator {
|
|
1655
1673
|
/*table text*/
|
|
1656
1674
|
/*table text*/
|
|
1657
1675
|
font-weight: 400;
|
|
1658
1676
|
font-size: 14px;
|
|
1659
1677
|
line-height: 20px;
|
|
1660
1678
|
}
|
|
1661
|
-
.
|
|
1679
|
+
.u-pagination__result,
|
|
1680
|
+
.u-pagination__limits {
|
|
1662
1681
|
color: #545454;
|
|
1663
1682
|
}
|
|
1664
|
-
.
|
|
1683
|
+
.u-pagination__limit-wrapper {
|
|
1665
1684
|
display: inline-flex;
|
|
1666
1685
|
align-items: center;
|
|
1667
1686
|
column-gap: 16px;
|
|
1668
1687
|
padding-left: 1rem;
|
|
1669
1688
|
}
|
|
1670
|
-
.
|
|
1689
|
+
.u-pagination__limit {
|
|
1671
1690
|
font-weight: 600;
|
|
1672
1691
|
cursor: pointer;
|
|
1673
1692
|
}
|
|
1674
|
-
.
|
|
1675
|
-
.
|
|
1693
|
+
.u-pagination__limit_active,
|
|
1694
|
+
.u-pagination__limit:hover {
|
|
1676
1695
|
font-weight: 700;
|
|
1677
1696
|
color: #1e4391;
|
|
1678
1697
|
}
|
|
1679
|
-
.pagination
|
|
1698
|
+
.u-pagination .u-paginator {
|
|
1680
1699
|
display: flex;
|
|
1681
1700
|
align-items: center;
|
|
1682
1701
|
justify-content: space-between;
|
|
@@ -1684,18 +1703,21 @@ button {
|
|
|
1684
1703
|
column-gap: 0.5rem;
|
|
1685
1704
|
user-select: none;
|
|
1686
1705
|
}
|
|
1687
|
-
.pagination
|
|
1706
|
+
.u-pagination .u-paginator__arrow-btn {
|
|
1688
1707
|
cursor: pointer;
|
|
1689
1708
|
}
|
|
1690
|
-
.pagination
|
|
1709
|
+
.u-pagination .u-paginator__arrow-btn_inactive {
|
|
1691
1710
|
cursor: not-allowed;
|
|
1692
1711
|
}
|
|
1693
|
-
.pagination
|
|
1712
|
+
.u-pagination .u-paginator__pages {
|
|
1694
1713
|
display: flex;
|
|
1695
1714
|
align-items: center;
|
|
1696
1715
|
column-gap: 5px;
|
|
1697
1716
|
}
|
|
1698
|
-
.pagination
|
|
1717
|
+
.u-pagination .u-paginator__pages-dots {
|
|
1718
|
+
cursor: pointer;
|
|
1719
|
+
}
|
|
1720
|
+
.u-pagination .u-paginator__pages-num {
|
|
1699
1721
|
display: flex;
|
|
1700
1722
|
align-items: flex-end;
|
|
1701
1723
|
cursor: pointer;
|
|
@@ -1710,15 +1732,15 @@ button {
|
|
|
1710
1732
|
text-decoration: none;
|
|
1711
1733
|
background: transparent;
|
|
1712
1734
|
}
|
|
1713
|
-
.pagination
|
|
1735
|
+
.u-pagination .u-paginator__pages-num_active {
|
|
1714
1736
|
color: #fff;
|
|
1715
1737
|
background: #1e4391;
|
|
1716
1738
|
}
|
|
1717
|
-
.pagination
|
|
1739
|
+
.u-pagination .u-paginator__pages-num:not(.u-pagination .u-paginator__pages-num_active):hover {
|
|
1718
1740
|
font-weight: 700;
|
|
1719
1741
|
color: #1e4391;
|
|
1720
1742
|
}
|
|
1721
|
-
.pagination
|
|
1743
|
+
.u-pagination .u-paginator__pages-num:focus-visible {
|
|
1722
1744
|
border: none;
|
|
1723
1745
|
outline: none;
|
|
1724
1746
|
}
|
|
@@ -1822,7 +1844,7 @@ button {
|
|
|
1822
1844
|
#u-help-tooltip {
|
|
1823
1845
|
position: absolute;
|
|
1824
1846
|
color: white;
|
|
1825
|
-
background-color: #
|
|
1847
|
+
background-color: #545454;
|
|
1826
1848
|
font-weight: 400;
|
|
1827
1849
|
font-size: 12px;
|
|
1828
1850
|
line-height: 16.8px;
|
|
@@ -2139,14 +2161,10 @@ button {
|
|
|
2139
2161
|
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
2140
2162
|
}
|
|
2141
2163
|
.u-table table tbody tr {
|
|
2142
|
-
cursor: pointer;
|
|
2143
2164
|
background-color: white;
|
|
2144
2165
|
}
|
|
2145
2166
|
.u-table table tbody tr td {
|
|
2146
2167
|
border-bottom: 1px solid #CAD1E1;
|
|
2147
|
-
width: 200px;
|
|
2148
|
-
max-width: 200px;
|
|
2149
|
-
min-width: 200px;
|
|
2150
2168
|
padding: 20px;
|
|
2151
2169
|
}
|
|
2152
2170
|
.u-table table tbody tr td * {
|
|
@@ -2625,7 +2643,7 @@ button {
|
|
|
2625
2643
|
width: 18px;
|
|
2626
2644
|
height: 32px;
|
|
2627
2645
|
background-color: #E7F2FF;
|
|
2628
|
-
left:
|
|
2646
|
+
left: 0px;
|
|
2629
2647
|
transform: translateZ(-1px);
|
|
2630
2648
|
}
|
|
2631
2649
|
.air-datepicker-cell.-year-.-selected- {
|
|
@@ -2701,7 +2719,7 @@ button {
|
|
|
2701
2719
|
width: 18px;
|
|
2702
2720
|
height: 32px;
|
|
2703
2721
|
background-color: #E7F2FF;
|
|
2704
|
-
left:
|
|
2722
|
+
left: 0px;
|
|
2705
2723
|
transform: translateZ(-1px);
|
|
2706
2724
|
}
|
|
2707
2725
|
.air-datepicker-cell.-year-:nth-child(4n).-in-range-::after {
|
|
@@ -2756,51 +2774,129 @@ button {
|
|
|
2756
2774
|
top: 0;
|
|
2757
2775
|
right: -68px;
|
|
2758
2776
|
}
|
|
2759
|
-
.bg-gradient {
|
|
2777
|
+
.bg-gradient-main {
|
|
2760
2778
|
background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
2761
2779
|
}
|
|
2762
2780
|
.bg-transparent {
|
|
2763
2781
|
background-color: transparent;
|
|
2764
2782
|
}
|
|
2765
|
-
.bg-blue {
|
|
2783
|
+
.bg-blue-main {
|
|
2766
2784
|
background-color: #1E4391;
|
|
2767
2785
|
}
|
|
2768
2786
|
.bg-blue-dark {
|
|
2769
2787
|
background-color: #0F2B5E;
|
|
2770
2788
|
}
|
|
2771
|
-
.bg-blue-
|
|
2789
|
+
.bg-blue-60 {
|
|
2790
|
+
background-color: #748AB9;
|
|
2791
|
+
}
|
|
2792
|
+
.bg-blue-40 {
|
|
2772
2793
|
background-color: #9FAECD;
|
|
2773
2794
|
}
|
|
2774
|
-
.bg-
|
|
2795
|
+
.bg-blue-20 {
|
|
2796
|
+
background-color: #CAD1E1;
|
|
2797
|
+
}
|
|
2798
|
+
.bg-blue-secondary {
|
|
2799
|
+
background-color: #4685CF;
|
|
2800
|
+
}
|
|
2801
|
+
.bg-red-main {
|
|
2775
2802
|
background-color: #EF302B;
|
|
2776
2803
|
}
|
|
2777
2804
|
.bg-red-dark {
|
|
2778
2805
|
background-color: #C0231F;
|
|
2779
2806
|
}
|
|
2780
|
-
.bg-red-
|
|
2807
|
+
.bg-red-60 {
|
|
2781
2808
|
background-color: #F58380;
|
|
2782
2809
|
}
|
|
2810
|
+
.bg-gray-60 {
|
|
2811
|
+
background-color: #545454;
|
|
2812
|
+
}
|
|
2813
|
+
.bg-gray-40 {
|
|
2814
|
+
background-color: #A7A7A7;
|
|
2815
|
+
}
|
|
2816
|
+
.bg-gray-20 {
|
|
2817
|
+
background-color: #D3D3D3;
|
|
2818
|
+
}
|
|
2819
|
+
.bg-black-main {
|
|
2820
|
+
background-color: #222222;
|
|
2821
|
+
}
|
|
2822
|
+
.bg-white {
|
|
2823
|
+
background-color: #FFFFFF;
|
|
2824
|
+
}
|
|
2825
|
+
.bg-green {
|
|
2826
|
+
background-color: #3BA68C;
|
|
2827
|
+
}
|
|
2828
|
+
.bg-pink {
|
|
2829
|
+
background-color: #E54B6A;
|
|
2830
|
+
}
|
|
2831
|
+
.bg-orange {
|
|
2832
|
+
background-color: #E98446;
|
|
2833
|
+
}
|
|
2834
|
+
.bg-violet {
|
|
2835
|
+
background-color: #A08CE2;
|
|
2836
|
+
}
|
|
2837
|
+
.bg-background {
|
|
2838
|
+
background-color: #F6F6F6;
|
|
2839
|
+
}
|
|
2783
2840
|
.clr-transparent {
|
|
2784
2841
|
color: transparent;
|
|
2785
2842
|
}
|
|
2786
|
-
.clr-blue {
|
|
2843
|
+
.clr-blue-main {
|
|
2787
2844
|
color: #1E4391;
|
|
2788
2845
|
}
|
|
2789
2846
|
.clr-blue-dark {
|
|
2790
2847
|
color: #0F2B5E;
|
|
2791
2848
|
}
|
|
2792
|
-
.clr-blue-
|
|
2849
|
+
.clr-blue-60 {
|
|
2850
|
+
color: #748AB9;
|
|
2851
|
+
}
|
|
2852
|
+
.clr-blue-40 {
|
|
2793
2853
|
color: #9FAECD;
|
|
2794
2854
|
}
|
|
2795
|
-
.clr-
|
|
2855
|
+
.clr-blue-20 {
|
|
2856
|
+
color: #CAD1E1;
|
|
2857
|
+
}
|
|
2858
|
+
.clr-blue-secondary {
|
|
2859
|
+
color: #4685CF;
|
|
2860
|
+
}
|
|
2861
|
+
.clr-red-main {
|
|
2796
2862
|
color: #EF302B;
|
|
2797
2863
|
}
|
|
2798
2864
|
.clr-red-dark {
|
|
2799
2865
|
color: #C0231F;
|
|
2800
2866
|
}
|
|
2801
|
-
.clr-red-
|
|
2867
|
+
.clr-red-60 {
|
|
2802
2868
|
color: #F58380;
|
|
2803
2869
|
}
|
|
2870
|
+
.clr-gray-60 {
|
|
2871
|
+
color: #545454;
|
|
2872
|
+
}
|
|
2873
|
+
.clr-gray-40 {
|
|
2874
|
+
color: #A7A7A7;
|
|
2875
|
+
}
|
|
2876
|
+
.clr-gray-20 {
|
|
2877
|
+
color: #D3D3D3;
|
|
2878
|
+
}
|
|
2879
|
+
.clr-black-main {
|
|
2880
|
+
color: #222222;
|
|
2881
|
+
}
|
|
2882
|
+
.clr-white {
|
|
2883
|
+
color: #FFFFFF;
|
|
2884
|
+
}
|
|
2885
|
+
.clr-green {
|
|
2886
|
+
color: #3BA68C;
|
|
2887
|
+
}
|
|
2888
|
+
.clr-pink {
|
|
2889
|
+
color: #E54B6A;
|
|
2890
|
+
}
|
|
2891
|
+
.clr-orange {
|
|
2892
|
+
color: #E98446;
|
|
2893
|
+
}
|
|
2894
|
+
.clr-violet {
|
|
2895
|
+
color: #A08CE2;
|
|
2896
|
+
}
|
|
2897
|
+
.clr-background {
|
|
2898
|
+
color: #F6F6F6;
|
|
2899
|
+
}
|
|
2804
2900
|
.u-fw-400 {
|
|
2805
2901
|
font-weight: 400;
|
|
2806
2902
|
}
|
|
@@ -2810,27 +2906,32 @@ button {
|
|
|
2810
2906
|
.u-fw-600 {
|
|
2811
2907
|
font-weight: 600;
|
|
2812
2908
|
}
|
|
2813
|
-
h1
|
|
2909
|
+
h1,
|
|
2910
|
+
.h1 {
|
|
2814
2911
|
font-weight: 600;
|
|
2815
2912
|
font-size: 52px;
|
|
2816
2913
|
line-height: 57.2px;
|
|
2817
2914
|
}
|
|
2818
|
-
h2
|
|
2915
|
+
h2,
|
|
2916
|
+
.h2 {
|
|
2819
2917
|
font-weight: 600;
|
|
2820
2918
|
font-size: 40px;
|
|
2821
2919
|
line-height: 48px;
|
|
2822
2920
|
}
|
|
2823
|
-
h3
|
|
2921
|
+
h3,
|
|
2922
|
+
.h3 {
|
|
2824
2923
|
font-weight: 600;
|
|
2825
2924
|
font-size: 24px;
|
|
2826
2925
|
line-height: 28px;
|
|
2827
2926
|
}
|
|
2828
|
-
h4
|
|
2927
|
+
h4,
|
|
2928
|
+
.h4 {
|
|
2829
2929
|
font-weight: 600;
|
|
2830
2930
|
font-size: 18px;
|
|
2831
2931
|
line-height: 22px;
|
|
2832
2932
|
}
|
|
2833
|
-
h5
|
|
2933
|
+
h5,
|
|
2934
|
+
.h5 {
|
|
2834
2935
|
font-weight: 400;
|
|
2835
2936
|
font-size: 12px;
|
|
2836
2937
|
line-height: 16.8px;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
svg {
|
|
30
30
|
path {
|
|
31
|
-
stroke:
|
|
31
|
+
stroke: @clr-secondary-supportive;
|
|
32
32
|
stroke-linecap: round;
|
|
33
33
|
stroke-linejoin: round;
|
|
34
34
|
}
|
|
@@ -467,7 +467,7 @@
|
|
|
467
467
|
width: 18px;
|
|
468
468
|
height: 32px;
|
|
469
469
|
background-color: #E7F2FF;
|
|
470
|
-
left:
|
|
470
|
+
left: 0px;
|
|
471
471
|
transform: translateZ(-1px);
|
|
472
472
|
}
|
|
473
473
|
}
|
|
@@ -546,7 +546,7 @@
|
|
|
546
546
|
width: 18px;
|
|
547
547
|
height: 32px;
|
|
548
548
|
background-color: #E7F2FF;
|
|
549
|
-
left:
|
|
549
|
+
left: 0px;
|
|
550
550
|
transform: translateZ(-1px);
|
|
551
551
|
}
|
|
552
552
|
}
|
|
@@ -233,10 +233,10 @@
|
|
|
233
233
|
.u-input;
|
|
234
234
|
position: relative;
|
|
235
235
|
padding: 8px 16px 7px 16px;
|
|
236
|
-
display:
|
|
236
|
+
display: flex;
|
|
237
|
+
flex-wrap: wrap;
|
|
237
238
|
min-height: 48px;
|
|
238
239
|
height: 100%;
|
|
239
|
-
grid-template-columns: repeat(3, 1fr);
|
|
240
240
|
grid-row-gap: 8px;
|
|
241
241
|
grid-column-gap: 4px;
|
|
242
242
|
padding-right: 75px;
|
|
@@ -249,8 +249,8 @@
|
|
|
249
249
|
z-index: 999 !important;
|
|
250
250
|
white-space: nowrap;
|
|
251
251
|
overflow: hidden;
|
|
252
|
-
width: 100%;
|
|
253
252
|
position: relative;
|
|
253
|
+
max-width: calc((100% - 8px) / 3);
|
|
254
254
|
}
|
|
255
255
|
&-container {
|
|
256
256
|
display: flex;
|
|
@@ -264,10 +264,11 @@
|
|
|
264
264
|
&-cross {
|
|
265
265
|
cursor: pointer;
|
|
266
266
|
position: relative;
|
|
267
|
-
|
|
267
|
+
flex: 0 0 13px;
|
|
268
268
|
height: 13px;
|
|
269
|
+
width: 16px;
|
|
270
|
+
margin-left: 10px;
|
|
269
271
|
top: 2px;
|
|
270
|
-
right: -8px;
|
|
271
272
|
background-repeat: no-repeat;
|
|
272
273
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L10.5833 11.5M11 1.5L1 11.5' stroke='%23748AB9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
273
274
|
}
|
|
@@ -284,6 +285,7 @@
|
|
|
284
285
|
cursor: pointer;
|
|
285
286
|
position: absolute;
|
|
286
287
|
display: block;
|
|
288
|
+
z-index: 101;
|
|
287
289
|
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='M0.292892 4.29289C0.683416 3.90237 1.31658 3.90237 1.70711 4.29289L6.00001 8.58579L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L6.70712 10.7071C6.51958 10.8946 6.26523 11 6.00001 11C5.73479 11 5.48044 10.8946 5.2929 10.7071L0.292894 5.70711C-0.0976308 5.31658 -0.0976314 4.68342 0.292892 4.29289Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
288
290
|
background-repeat: no-repeat;
|
|
289
291
|
width: 12px;
|
|
@@ -295,6 +297,7 @@
|
|
|
295
297
|
cursor: pointer;
|
|
296
298
|
position: absolute;
|
|
297
299
|
display: block;
|
|
300
|
+
z-index: 101;
|
|
298
301
|
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='%23A7A7A7'/%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='%23A7A7A7'/%3E%3C/svg%3E ");
|
|
299
302
|
background-repeat: no-repeat;
|
|
300
303
|
width: 12px;
|
|
@@ -404,6 +407,11 @@
|
|
|
404
407
|
|
|
405
408
|
.u-password {
|
|
406
409
|
position: relative;
|
|
410
|
+
&:hover {
|
|
411
|
+
.u-input {
|
|
412
|
+
border: 1px solid @clr-border-active;
|
|
413
|
+
}
|
|
414
|
+
}
|
|
407
415
|
&-icon {
|
|
408
416
|
cursor: pointer;
|
|
409
417
|
display: block;
|
|
@@ -579,7 +587,7 @@
|
|
|
579
587
|
font-size: 10px;
|
|
580
588
|
line-height: 14px;
|
|
581
589
|
margin-top: 7px;
|
|
582
|
-
color:
|
|
590
|
+
color: @clr-secondary-supportive;
|
|
583
591
|
}
|
|
584
592
|
}
|
|
585
593
|
}
|
|
@@ -5,18 +5,21 @@
|
|
|
5
5
|
align-items: center;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.pagination
|
|
8
|
+
.u-pagination {
|
|
9
9
|
.flex-container;
|
|
10
10
|
justify-content: space-between;
|
|
11
11
|
padding: 1.5rem 3.6rem;
|
|
12
12
|
|
|
13
|
-
&
|
|
14
|
-
&
|
|
13
|
+
&__result,
|
|
14
|
+
&__limits,
|
|
15
|
+
&__limit,
|
|
16
|
+
&__paginator {
|
|
15
17
|
.tt;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
&
|
|
19
|
-
|
|
20
|
+
&__result,
|
|
21
|
+
&__limits {
|
|
22
|
+
color: @clr-secondary-supportive;
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
&__limit-wrapper {
|
|
@@ -29,62 +32,64 @@
|
|
|
29
32
|
&__limit {
|
|
30
33
|
font-weight: 600;
|
|
31
34
|
cursor: pointer;
|
|
32
|
-
}
|
|
33
35
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
&_active,
|
|
37
|
+
&:hover {
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
color: #1e4391;
|
|
40
|
+
}
|
|
38
41
|
}
|
|
39
42
|
|
|
40
|
-
.
|
|
43
|
+
.u-paginator {
|
|
41
44
|
.flex-container;
|
|
42
45
|
justify-content: space-between;
|
|
43
46
|
margin-left: 0.8rem;
|
|
44
47
|
column-gap: 0.5rem;
|
|
45
48
|
user-select: none;
|
|
46
49
|
|
|
47
|
-
|
|
50
|
+
&__arrow-btn {
|
|
48
51
|
cursor: pointer;
|
|
52
|
+
&_inactive {
|
|
53
|
+
cursor: not-allowed;
|
|
54
|
+
}
|
|
49
55
|
}
|
|
50
56
|
|
|
51
|
-
&
|
|
52
|
-
cursor: not-allowed;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&-nums {
|
|
57
|
+
&__pages {
|
|
56
58
|
.flex-container;
|
|
57
59
|
column-gap: 5px;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
&-num {
|
|
61
|
-
display: flex;
|
|
62
|
-
align-items: flex-end;
|
|
63
|
-
cursor: pointer;
|
|
64
|
-
justify-content: center;
|
|
65
|
-
width: 33px;
|
|
66
|
-
height: 32px;
|
|
67
|
-
border-radius: 8px;
|
|
68
|
-
padding: 8px;
|
|
69
|
-
box-sizing: border-box;
|
|
70
|
-
color: #545454;
|
|
71
|
-
border: none;
|
|
72
|
-
text-decoration: none;
|
|
73
|
-
background: transparent;
|
|
74
|
-
|
|
75
|
-
&-active {
|
|
76
|
-
color: #fff;
|
|
77
|
-
background: #1e4391;
|
|
60
|
+
&-dots {
|
|
61
|
+
cursor: pointer;
|
|
78
62
|
}
|
|
63
|
+
&-num {
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: flex-end;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
width: 33px;
|
|
70
|
+
height: 32px;
|
|
71
|
+
border-radius: 8px;
|
|
72
|
+
padding: 8px;
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
color: @clr-secondary-supportive;
|
|
75
|
+
border: none;
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
background: transparent;
|
|
79
78
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
79
|
+
&_active {
|
|
80
|
+
color: #fff;
|
|
81
|
+
background: #1e4391;
|
|
82
|
+
}
|
|
84
83
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
&:not(&_active):hover {
|
|
85
|
+
font-weight: 700;
|
|
86
|
+
color: #1e4391;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&:focus-visible {
|
|
90
|
+
border: none;
|
|
91
|
+
outline: none;
|
|
92
|
+
}
|
|
88
93
|
}
|
|
89
94
|
}
|
|
90
95
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.switch-after() {
|
|
12
|
-
content:
|
|
12
|
+
content: "";
|
|
13
13
|
display: block;
|
|
14
14
|
position: absolute;
|
|
15
15
|
left: 4px;
|
|
@@ -18,13 +18,14 @@
|
|
|
18
18
|
height: 18px;
|
|
19
19
|
border-radius: 50%;
|
|
20
20
|
background-color: @clr-secondary-empty;
|
|
21
|
-
transition: all .2s ease-in-out;
|
|
21
|
+
transition: all 0.2s ease-in-out;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
25
24
|
.u-switch {
|
|
26
25
|
cursor: pointer;
|
|
27
26
|
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
column-gap: 10px;
|
|
28
29
|
input {
|
|
29
30
|
display: none;
|
|
30
31
|
&:checked + div::after {
|
|
@@ -34,10 +35,17 @@
|
|
|
34
35
|
cursor: not-allowed;
|
|
35
36
|
background-color: @clr-secondary-outside;
|
|
36
37
|
}
|
|
38
|
+
&:checked + .u-switch__point {
|
|
39
|
+
background-color: @clr-main-primary;
|
|
40
|
+
&:hover {
|
|
41
|
+
background-color: @clr-secondary-primary;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
37
44
|
}
|
|
38
|
-
|
|
45
|
+
&__point {
|
|
39
46
|
.switch;
|
|
40
|
-
background-color: @clr-
|
|
47
|
+
background-color: @clr-secondary-outside;
|
|
48
|
+
|
|
41
49
|
&::after {
|
|
42
50
|
.switch-after;
|
|
43
51
|
}
|
|
@@ -66,10 +74,13 @@
|
|
|
66
74
|
cursor: not-allowed;
|
|
67
75
|
background: @clr-secondary-outside;
|
|
68
76
|
}
|
|
77
|
+
&:checked + .u-switch-gradient__point {
|
|
78
|
+
background: @gradient;
|
|
79
|
+
}
|
|
69
80
|
}
|
|
70
|
-
|
|
81
|
+
&__point {
|
|
71
82
|
.switch;
|
|
72
|
-
background: @
|
|
83
|
+
background-color: @clr-secondary-outside;
|
|
73
84
|
&::after {
|
|
74
85
|
.switch-after;
|
|
75
86
|
}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
@clr-secondary-empty: #FFFFFF;
|
|
13
13
|
@clr-secondary-outside: #D3D3D3;
|
|
14
14
|
@clr-secondary-subject: #A7A7A7;
|
|
15
|
-
@clr-secondary-supportive: #
|
|
15
|
+
@clr-secondary-supportive: #545454;
|
|
16
16
|
@clr-secondary-focusing: #F58380;
|
|
17
17
|
@clr-additional-warning: #E98446;
|
|
18
18
|
@clr-additional-danger: #E54B6A;
|
|
@@ -2,30 +2,77 @@
|
|
|
2
2
|
|
|
3
3
|
//property: background
|
|
4
4
|
.bg {
|
|
5
|
-
&-gradient {
|
|
5
|
+
&-gradient-main {
|
|
6
6
|
background: @gradient;
|
|
7
7
|
}
|
|
8
8
|
&-transparent {
|
|
9
9
|
background-color: transparent;
|
|
10
10
|
}
|
|
11
11
|
&-blue {
|
|
12
|
-
|
|
12
|
+
&-main {
|
|
13
|
+
background-color: @clr-main-primary;
|
|
14
|
+
}
|
|
13
15
|
&-dark {
|
|
14
16
|
background-color: @clr-secondary-primary;
|
|
15
17
|
}
|
|
16
|
-
&-
|
|
18
|
+
&-60 {
|
|
19
|
+
background-color: @clr-secondary-cold;
|
|
20
|
+
}
|
|
21
|
+
&-40 {
|
|
17
22
|
background-color: @clr-secondary-chilly;
|
|
18
23
|
}
|
|
24
|
+
&-20 {
|
|
25
|
+
background-color: @clr-secondary-quiet;
|
|
26
|
+
}
|
|
27
|
+
&-secondary {
|
|
28
|
+
background-color: #4685CF;
|
|
29
|
+
}
|
|
19
30
|
}
|
|
20
31
|
&-red {
|
|
21
|
-
|
|
32
|
+
&-main {
|
|
33
|
+
background-color: @clr-main-danger;
|
|
34
|
+
}
|
|
22
35
|
&-dark {
|
|
23
36
|
background-color: @clr-secondary-danger;
|
|
24
37
|
}
|
|
25
|
-
&-
|
|
38
|
+
&-60 {
|
|
26
39
|
background-color: @clr-secondary-focusing;
|
|
27
40
|
}
|
|
28
41
|
}
|
|
42
|
+
&-gray {
|
|
43
|
+
&-60 {
|
|
44
|
+
background-color: @clr-secondary-supportive;
|
|
45
|
+
}
|
|
46
|
+
&-40 {
|
|
47
|
+
background-color: @clr-secondary-subject;
|
|
48
|
+
}
|
|
49
|
+
&-20 {
|
|
50
|
+
background-color: @clr-secondary-outside;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
&-black {
|
|
54
|
+
&-main {
|
|
55
|
+
background-color: @clr-main-dark;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
&-white {
|
|
59
|
+
background-color: @clr-secondary-empty;
|
|
60
|
+
}
|
|
61
|
+
&-green {
|
|
62
|
+
background-color: @clr-additional-done;
|
|
63
|
+
}
|
|
64
|
+
&-pink {
|
|
65
|
+
background-color: @clr-additional-danger;
|
|
66
|
+
}
|
|
67
|
+
&-orange {
|
|
68
|
+
background-color: @clr-additional-warning;
|
|
69
|
+
}
|
|
70
|
+
&-violet {
|
|
71
|
+
background-color: #A08CE2;
|
|
72
|
+
}
|
|
73
|
+
&-background {
|
|
74
|
+
background-color: @clr-main-light;
|
|
75
|
+
}
|
|
29
76
|
}
|
|
30
77
|
//property: color
|
|
31
78
|
.clr {
|
|
@@ -33,21 +80,68 @@
|
|
|
33
80
|
color: transparent;
|
|
34
81
|
}
|
|
35
82
|
&-blue {
|
|
36
|
-
|
|
83
|
+
&-main {
|
|
84
|
+
color: @clr-main-primary;
|
|
85
|
+
}
|
|
37
86
|
&-dark {
|
|
38
87
|
color: @clr-secondary-primary;
|
|
39
88
|
}
|
|
40
|
-
&-
|
|
89
|
+
&-60 {
|
|
90
|
+
color: @clr-secondary-cold;
|
|
91
|
+
}
|
|
92
|
+
&-40 {
|
|
41
93
|
color: @clr-secondary-chilly;
|
|
42
94
|
}
|
|
95
|
+
&-20 {
|
|
96
|
+
color: @clr-secondary-quiet;
|
|
97
|
+
}
|
|
98
|
+
&-secondary {
|
|
99
|
+
color: #4685CF;
|
|
100
|
+
}
|
|
43
101
|
}
|
|
44
102
|
&-red {
|
|
45
|
-
|
|
103
|
+
&-main {
|
|
104
|
+
color: @clr-main-danger;
|
|
105
|
+
}
|
|
46
106
|
&-dark {
|
|
47
107
|
color: @clr-secondary-danger;
|
|
48
108
|
}
|
|
49
|
-
&-
|
|
109
|
+
&-60 {
|
|
50
110
|
color: @clr-secondary-focusing;
|
|
51
111
|
}
|
|
52
112
|
}
|
|
113
|
+
&-gray {
|
|
114
|
+
&-60 {
|
|
115
|
+
color: @clr-secondary-supportive;
|
|
116
|
+
}
|
|
117
|
+
&-40 {
|
|
118
|
+
color: @clr-secondary-subject;
|
|
119
|
+
}
|
|
120
|
+
&-20 {
|
|
121
|
+
color: @clr-secondary-outside;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
&-black {
|
|
125
|
+
&-main {
|
|
126
|
+
color: @clr-main-dark;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
&-white {
|
|
130
|
+
color: @clr-secondary-empty;
|
|
131
|
+
}
|
|
132
|
+
&-green {
|
|
133
|
+
color: @clr-additional-done;
|
|
134
|
+
}
|
|
135
|
+
&-pink {
|
|
136
|
+
color: @clr-additional-danger;
|
|
137
|
+
}
|
|
138
|
+
&-orange {
|
|
139
|
+
color: @clr-additional-warning;
|
|
140
|
+
}
|
|
141
|
+
&-violet {
|
|
142
|
+
color: #A08CE2;
|
|
143
|
+
}
|
|
144
|
+
&-background {
|
|
145
|
+
color: @clr-main-light;
|
|
146
|
+
}
|
|
53
147
|
}
|