urfu-ui-kit-vanilla 1.0.35 → 1.0.37
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 +39 -0
- package/src/main.css +220 -19
- package/src/main.less +5 -4
- package/src/styles/components/input.less +8 -7
- package/src/styles/components/menu.less +211 -0
- package/src/styles/components/notification.less +1 -1
- package/src/styles/components/pagination.less +2 -0
package/package.json
CHANGED
package/playground/index.html
CHANGED
|
@@ -18,6 +18,45 @@
|
|
|
18
18
|
|
|
19
19
|
<input type="text" class="u-calendar" id="airdatepicker">
|
|
20
20
|
|
|
21
|
+
<div style="display: flex;">
|
|
22
|
+
<div class="u-collapsible-menu">
|
|
23
|
+
<input class="u-collapsible-menu-input" type="checkbox" name="" id="menu_1">
|
|
24
|
+
<label class="u-collapsible-menu-toggle" for="menu_1"></label>
|
|
25
|
+
<div class="u-collapsible-menu-body">
|
|
26
|
+
<ul class="u-collapsible-menu-list">
|
|
27
|
+
<li class="u-collapsible-menu-list-item">423</li>
|
|
28
|
+
<li class="u-collapsible-menu-list-item u-collapsible-menu-active">21</li>
|
|
29
|
+
<li class="u-collapsible-menu-list-item">342</li>
|
|
30
|
+
<li class="u-collapsible-menu-list-item u-collapsible-menu-title">1 <div class="u-collapsible-menu-context u-collapsible-menu-active"></div></li>
|
|
31
|
+
<li class="u-collapsible-menu-list-item u-collapsible-menu-subtitle">2</li>
|
|
32
|
+
<li class="u-collapsible-menu-list-item u-collapsible-menu-subtitle">1</li>
|
|
33
|
+
<li class="u-collapsible-menu-list-item">1</li>
|
|
34
|
+
<li class="u-collapsible-menu-list-item">1</li>
|
|
35
|
+
<li class="u-collapsible-menu-list-item">3</li>
|
|
36
|
+
</ul>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div>sdsdssd</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
<div class="u-menu">
|
|
45
|
+
<ul class="u-menu-list">
|
|
46
|
+
<li class="u-menu-list-item">423</li>
|
|
47
|
+
<li class="u-menu-list-item u-menu-active">21</li>
|
|
48
|
+
<li class="u-menu-list-item">342</li>
|
|
49
|
+
<li class="u-menu-list-item u-menu-title">1 <div class="u-menu-context u-menu-active"></div></li>
|
|
50
|
+
<li class="u-menu-list-item u-menu-subtitle">2</li>
|
|
51
|
+
<li class="u-menu-list-item u-menu-subtitle">1</li>
|
|
52
|
+
<li class="u-menu-list-item">1</li>
|
|
53
|
+
<li class="u-menu-list-item">1</li>
|
|
54
|
+
<li class="u-menu-list-item">3</li>
|
|
55
|
+
</ul>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
21
60
|
<div class="u-bc"><a class="u-bc-link">Главная</a><a class="u-bc-text">Не главная</a><a class="u-bc-last">Последняя</a></div>
|
|
22
61
|
<div class="u-bc-sec"><a class="u-bc-sec-first-link">Главная</a><a class="u-bc-sec-link">Не главная</a><a class="u-bc-sec-text">Последняя</a></div>
|
|
23
62
|
<a class="u-link">Кркурс</a>
|
package/src/main.css
CHANGED
|
@@ -48,15 +48,15 @@ button {
|
|
|
48
48
|
/* полоса прокрутки (скроллбар) */
|
|
49
49
|
::-webkit-scrollbar {
|
|
50
50
|
background-color: transparent;
|
|
51
|
-
width:
|
|
52
|
-
height:
|
|
51
|
+
width: 0.5vw;
|
|
52
|
+
height: 1.5vh;
|
|
53
53
|
}
|
|
54
54
|
/* ползунок скроллбара */
|
|
55
55
|
::-webkit-scrollbar-thumb {
|
|
56
56
|
background-color: #D3D3D3;
|
|
57
57
|
border-radius: 5px;
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
58
|
+
width: 0.5vw;
|
|
59
|
+
height: 1.5vh;
|
|
60
60
|
}
|
|
61
61
|
::-webkit-scrollbar-thumb:hover {
|
|
62
62
|
background-color: #7A7A7A;
|
|
@@ -588,6 +588,7 @@ button {
|
|
|
588
588
|
border-radius: 10px;
|
|
589
589
|
margin-top: 2px;
|
|
590
590
|
max-height: 195px;
|
|
591
|
+
background-color: #FFFFFF;
|
|
591
592
|
overflow-y: auto;
|
|
592
593
|
}
|
|
593
594
|
.u-selectbox-option {
|
|
@@ -816,15 +817,16 @@ button {
|
|
|
816
817
|
text-overflow: ellipsis;
|
|
817
818
|
}
|
|
818
819
|
.u-multiselectbox-options {
|
|
819
|
-
|
|
820
|
-
|
|
820
|
+
overflow-y: auto;
|
|
821
|
+
max-height: 195px;
|
|
821
822
|
width: 100%;
|
|
823
|
+
border-radius: 10px;
|
|
822
824
|
z-index: 100;
|
|
825
|
+
display: none;
|
|
826
|
+
position: absolute;
|
|
823
827
|
border: 1px solid #748AB9;
|
|
824
|
-
border-radius: 10px;
|
|
825
828
|
margin-top: 2px;
|
|
826
|
-
|
|
827
|
-
max-height: 195px;
|
|
829
|
+
background-color: #FFFFFF;
|
|
828
830
|
}
|
|
829
831
|
.u-multiselectbox-option {
|
|
830
832
|
background-color: #FFFFFF;
|
|
@@ -867,12 +869,10 @@ button {
|
|
|
867
869
|
margin-right: 16px;
|
|
868
870
|
}
|
|
869
871
|
.u-multiselectbox-option:first-child {
|
|
870
|
-
border-top-right-radius: 10px;
|
|
871
872
|
border-top-left-radius: 10px;
|
|
872
873
|
}
|
|
873
874
|
.u-multiselectbox-option:last-child {
|
|
874
875
|
border-bottom: none;
|
|
875
|
-
border-bottom-right-radius: 10px;
|
|
876
876
|
border-bottom-left-radius: 10px;
|
|
877
877
|
}
|
|
878
878
|
.u-multiselectbox-option:hover {
|
|
@@ -1713,6 +1713,8 @@ button {
|
|
|
1713
1713
|
}
|
|
1714
1714
|
.u-pagination .u-paginator__arrow-btn-right {
|
|
1715
1715
|
cursor: pointer;
|
|
1716
|
+
width: 32px;
|
|
1717
|
+
height: 32px;
|
|
1716
1718
|
background-repeat: no-repeat;
|
|
1717
1719
|
background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929L5.58579 5.99999L1.29289 1.70711C0.902369 1.31658 0.902368 0.683418 1.29289 0.292894C1.68342 -0.0976305 2.31658 -0.0976315 2.70711 0.292892L7.70711 5.29288C7.89464 5.48042 8 5.73477 8 5.99999C8 6.26521 7.89464 6.51956 7.70711 6.7071L2.70711 11.7071C2.31658 12.0976 1.68342 12.0976 1.29289 11.7071Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
1718
1720
|
background-position: center;
|
|
@@ -1892,6 +1894,7 @@ button {
|
|
|
1892
1894
|
min-width: 300px;
|
|
1893
1895
|
display: flex;
|
|
1894
1896
|
justify-content: space-between;
|
|
1897
|
+
align-items: center;
|
|
1895
1898
|
padding: 18px 16px 18px 52px;
|
|
1896
1899
|
border-radius: 10px;
|
|
1897
1900
|
font-weight: 400;
|
|
@@ -1909,7 +1912,6 @@ button {
|
|
|
1909
1912
|
flex: 0 0 12px;
|
|
1910
1913
|
height: 12px;
|
|
1911
1914
|
position: relative;
|
|
1912
|
-
top: -3px;
|
|
1913
1915
|
padding: 5px;
|
|
1914
1916
|
background-repeat: no-repeat;
|
|
1915
1917
|
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 ");
|
|
@@ -1919,6 +1921,7 @@ button {
|
|
|
1919
1921
|
min-width: 300px;
|
|
1920
1922
|
display: flex;
|
|
1921
1923
|
justify-content: space-between;
|
|
1924
|
+
align-items: center;
|
|
1922
1925
|
padding: 18px 16px 18px 52px;
|
|
1923
1926
|
border-radius: 10px;
|
|
1924
1927
|
font-weight: 400;
|
|
@@ -1937,7 +1940,6 @@ button {
|
|
|
1937
1940
|
flex: 0 0 12px;
|
|
1938
1941
|
height: 12px;
|
|
1939
1942
|
position: relative;
|
|
1940
|
-
top: -3px;
|
|
1941
1943
|
padding: 5px;
|
|
1942
1944
|
background-repeat: no-repeat;
|
|
1943
1945
|
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 ");
|
|
@@ -1947,6 +1949,7 @@ button {
|
|
|
1947
1949
|
min-width: 300px;
|
|
1948
1950
|
display: flex;
|
|
1949
1951
|
justify-content: space-between;
|
|
1952
|
+
align-items: center;
|
|
1950
1953
|
padding: 18px 16px 18px 52px;
|
|
1951
1954
|
border-radius: 10px;
|
|
1952
1955
|
font-weight: 400;
|
|
@@ -1965,7 +1968,6 @@ button {
|
|
|
1965
1968
|
flex: 0 0 12px;
|
|
1966
1969
|
height: 12px;
|
|
1967
1970
|
position: relative;
|
|
1968
|
-
top: -3px;
|
|
1969
1971
|
padding: 5px;
|
|
1970
1972
|
background-repeat: no-repeat;
|
|
1971
1973
|
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 ");
|
|
@@ -1975,6 +1977,7 @@ button {
|
|
|
1975
1977
|
min-width: 300px;
|
|
1976
1978
|
display: flex;
|
|
1977
1979
|
justify-content: space-between;
|
|
1980
|
+
align-items: center;
|
|
1978
1981
|
padding: 18px 16px 18px 52px;
|
|
1979
1982
|
border-radius: 10px;
|
|
1980
1983
|
font-weight: 400;
|
|
@@ -1993,7 +1996,6 @@ button {
|
|
|
1993
1996
|
flex: 0 0 12px;
|
|
1994
1997
|
height: 12px;
|
|
1995
1998
|
position: relative;
|
|
1996
|
-
top: -3px;
|
|
1997
1999
|
padding: 5px;
|
|
1998
2000
|
background-repeat: no-repeat;
|
|
1999
2001
|
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 ");
|
|
@@ -2786,6 +2788,205 @@ button {
|
|
|
2786
2788
|
top: 0;
|
|
2787
2789
|
right: -68px;
|
|
2788
2790
|
}
|
|
2791
|
+
.u-menu-list {
|
|
2792
|
+
margin: 0;
|
|
2793
|
+
padding: 0;
|
|
2794
|
+
}
|
|
2795
|
+
.u-menu-list-item {
|
|
2796
|
+
display: flex;
|
|
2797
|
+
cursor: pointer;
|
|
2798
|
+
margin-top: 28px;
|
|
2799
|
+
/*simple text*/
|
|
2800
|
+
/*simple text*/
|
|
2801
|
+
font-weight: 400;
|
|
2802
|
+
font-size: 16px;
|
|
2803
|
+
line-height: 22.4px;
|
|
2804
|
+
color: #545454;
|
|
2805
|
+
padding-left: 18px;
|
|
2806
|
+
}
|
|
2807
|
+
.u-menu-list-item:first-child {
|
|
2808
|
+
margin-top: 0;
|
|
2809
|
+
}
|
|
2810
|
+
.u-menu-list-item:hover {
|
|
2811
|
+
color: #1E4391;
|
|
2812
|
+
}
|
|
2813
|
+
.u-menu-list-item:hover img {
|
|
2814
|
+
color: #1E4391;
|
|
2815
|
+
}
|
|
2816
|
+
.u-menu-list-item:hover .u-menu-context {
|
|
2817
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
2818
|
+
}
|
|
2819
|
+
.u-menu-list-item.u-menu-active {
|
|
2820
|
+
color: #1E4391;
|
|
2821
|
+
}
|
|
2822
|
+
.u-menu-list-item::before {
|
|
2823
|
+
position: relative;
|
|
2824
|
+
left: -12px;
|
|
2825
|
+
}
|
|
2826
|
+
.u-menu-list-item.u-menu-subtitle {
|
|
2827
|
+
display: none;
|
|
2828
|
+
padding-left: 44px;
|
|
2829
|
+
margin-top: 16px;
|
|
2830
|
+
}
|
|
2831
|
+
.u-menu-list-item.u-menu-subtitle::before {
|
|
2832
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%23545454'/%3E%3C/svg%3E%0A");
|
|
2833
|
+
top: -3px;
|
|
2834
|
+
left: -6px;
|
|
2835
|
+
}
|
|
2836
|
+
.u-menu-list-item.u-menu-subtitle.u-menu-active::before {
|
|
2837
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
2838
|
+
}
|
|
2839
|
+
.u-menu-list-item.u-menu-subtitle:hover::before {
|
|
2840
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
2841
|
+
}
|
|
2842
|
+
.u-menu-list-item.u-menu-title.u-menu-active {
|
|
2843
|
+
color: #545454;
|
|
2844
|
+
}
|
|
2845
|
+
.u-menu-list-item.u-menu-title.u-menu-active ~ .u-menu-subtitle {
|
|
2846
|
+
display: block;
|
|
2847
|
+
}
|
|
2848
|
+
.u-menu-list-item.u-menu-title.u-menu-active:hover {
|
|
2849
|
+
color: #1E4391;
|
|
2850
|
+
}
|
|
2851
|
+
.u-menu-list-item .u-menu-context {
|
|
2852
|
+
margin: auto 0 auto auto;
|
|
2853
|
+
width: 12px;
|
|
2854
|
+
height: 9px;
|
|
2855
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
2856
|
+
background-repeat: no-repeat;
|
|
2857
|
+
}
|
|
2858
|
+
.u-menu-list-item .u-menu-context.u-menu-active {
|
|
2859
|
+
transform: rotate(180deg);
|
|
2860
|
+
}
|
|
2861
|
+
.u-collapsible-menu {
|
|
2862
|
+
position: relative;
|
|
2863
|
+
max-width: max-content;
|
|
2864
|
+
}
|
|
2865
|
+
.u-collapsible-menu-toggle {
|
|
2866
|
+
position: absolute;
|
|
2867
|
+
right: -21px;
|
|
2868
|
+
top: 27px;
|
|
2869
|
+
cursor: pointer;
|
|
2870
|
+
width: 21px;
|
|
2871
|
+
height: 84px;
|
|
2872
|
+
border-top-left-radius: 10px;
|
|
2873
|
+
border-bottom-left-radius: 10px;
|
|
2874
|
+
background-color: #D3D3D3;
|
|
2875
|
+
background-image: url("data:image/svg+xml,%3Csvg width='21' height='84' viewBox='0 0 21 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5391 42.3841L8.82009 46.3166C8.49443 46.588 8 46.3564 8 45.9325L8 38.0675C8 37.6436 8.49443 37.412 8.82009 37.6834L13.5391 41.6159C13.7789 41.8158 13.7789 42.1842 13.5391 42.3841Z' fill='%23F6F6F6'/%3E%3C/svg%3E ");
|
|
2876
|
+
background-repeat: no-repeat;
|
|
2877
|
+
border-left: 1px solid #C8C7C7;
|
|
2878
|
+
border-right: none;
|
|
2879
|
+
transform: rotate(180deg);
|
|
2880
|
+
transition-property: background-image;
|
|
2881
|
+
transition-duration: 0.2s;
|
|
2882
|
+
transition-timing-function: ease-in-out;
|
|
2883
|
+
}
|
|
2884
|
+
.u-collapsible-menu-input {
|
|
2885
|
+
-webkit-appearance: none;
|
|
2886
|
+
appearance: none;
|
|
2887
|
+
position: absolute;
|
|
2888
|
+
width: 0;
|
|
2889
|
+
height: 0;
|
|
2890
|
+
}
|
|
2891
|
+
.u-collapsible-menu-input:checked ~ .u-collapsible-menu-body {
|
|
2892
|
+
max-width: 1px;
|
|
2893
|
+
overflow: hidden;
|
|
2894
|
+
}
|
|
2895
|
+
.u-collapsible-menu-input:checked ~ .u-collapsible-menu-toggle {
|
|
2896
|
+
border-top-left-radius: 0px;
|
|
2897
|
+
border-bottom-left-radius: 0px;
|
|
2898
|
+
border-top-right-radius: 10px;
|
|
2899
|
+
border-bottom-right-radius: 10px;
|
|
2900
|
+
background-image: url("data:image/svg+xml,%3Csvg width='21' height='84' viewBox='0 0 21 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5391 42.3841L8.82009 46.3166C8.49443 46.588 8 46.3564 8 45.9325L8 38.0675C8 37.6436 8.49443 37.412 8.82009 37.6834L13.5391 41.6159C13.7789 41.8158 13.7789 42.1842 13.5391 42.3841Z' fill='%23F6F6F6'/%3E%3C/svg%3E ");
|
|
2901
|
+
border-left: none;
|
|
2902
|
+
border-right: 1px solid #C8C7C7;
|
|
2903
|
+
transform: rotate(0deg);
|
|
2904
|
+
}
|
|
2905
|
+
.u-collapsible-menu-body {
|
|
2906
|
+
max-width: 268px;
|
|
2907
|
+
overflow: hidden;
|
|
2908
|
+
background-color: #F9F9F9;
|
|
2909
|
+
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.1);
|
|
2910
|
+
-webkit-transition: max-width 0.2s ease-in-out;
|
|
2911
|
+
transition: max-width 0.2s ease-in-out;
|
|
2912
|
+
}
|
|
2913
|
+
.u-collapsible-menu-list {
|
|
2914
|
+
margin: 0;
|
|
2915
|
+
padding: 0;
|
|
2916
|
+
}
|
|
2917
|
+
.u-collapsible-menu-list-item {
|
|
2918
|
+
display: flex;
|
|
2919
|
+
cursor: pointer;
|
|
2920
|
+
margin-top: 28px;
|
|
2921
|
+
/*simple text*/
|
|
2922
|
+
/*simple text*/
|
|
2923
|
+
font-weight: 400;
|
|
2924
|
+
font-size: 16px;
|
|
2925
|
+
line-height: 22.4px;
|
|
2926
|
+
color: #545454;
|
|
2927
|
+
padding-left: 18px;
|
|
2928
|
+
}
|
|
2929
|
+
.u-collapsible-menu-list-item:first-child {
|
|
2930
|
+
margin-top: 0;
|
|
2931
|
+
}
|
|
2932
|
+
.u-collapsible-menu-list-item:hover {
|
|
2933
|
+
color: #1E4391;
|
|
2934
|
+
}
|
|
2935
|
+
.u-collapsible-menu-list-item:hover img {
|
|
2936
|
+
color: #1E4391;
|
|
2937
|
+
}
|
|
2938
|
+
.u-collapsible-menu-list-item:hover .u-menu-context {
|
|
2939
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
2940
|
+
}
|
|
2941
|
+
.u-collapsible-menu-list-item.u-menu-active {
|
|
2942
|
+
color: #1E4391;
|
|
2943
|
+
}
|
|
2944
|
+
.u-collapsible-menu-list-item::before {
|
|
2945
|
+
position: relative;
|
|
2946
|
+
left: -12px;
|
|
2947
|
+
}
|
|
2948
|
+
.u-collapsible-menu-list-item.u-menu-subtitle {
|
|
2949
|
+
display: none;
|
|
2950
|
+
padding-left: 44px;
|
|
2951
|
+
margin-top: 16px;
|
|
2952
|
+
}
|
|
2953
|
+
.u-collapsible-menu-list-item.u-menu-subtitle::before {
|
|
2954
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%23545454'/%3E%3C/svg%3E%0A");
|
|
2955
|
+
top: -3px;
|
|
2956
|
+
left: -6px;
|
|
2957
|
+
}
|
|
2958
|
+
.u-collapsible-menu-list-item.u-menu-subtitle.u-menu-active::before {
|
|
2959
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
2960
|
+
}
|
|
2961
|
+
.u-collapsible-menu-list-item.u-menu-subtitle:hover::before {
|
|
2962
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
2963
|
+
}
|
|
2964
|
+
.u-collapsible-menu-list-item.u-menu-title.u-menu-active {
|
|
2965
|
+
color: #545454;
|
|
2966
|
+
}
|
|
2967
|
+
.u-collapsible-menu-list-item.u-menu-title.u-menu-active ~ .u-menu-subtitle {
|
|
2968
|
+
display: block;
|
|
2969
|
+
}
|
|
2970
|
+
.u-collapsible-menu-list-item.u-menu-title.u-menu-active:hover {
|
|
2971
|
+
color: #1E4391;
|
|
2972
|
+
}
|
|
2973
|
+
.u-collapsible-menu-list-item .u-menu-context {
|
|
2974
|
+
margin: auto 0 auto auto;
|
|
2975
|
+
width: 12px;
|
|
2976
|
+
height: 9px;
|
|
2977
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
2978
|
+
background-repeat: no-repeat;
|
|
2979
|
+
}
|
|
2980
|
+
.u-collapsible-menu-list-item .u-menu-context.u-menu-active {
|
|
2981
|
+
transform: rotate(180deg);
|
|
2982
|
+
}
|
|
2983
|
+
.u-collapsible-menu-action-hide ~ .u-collapsible-menu-body {
|
|
2984
|
+
width: 1px;
|
|
2985
|
+
background-color: #D3D3D3;
|
|
2986
|
+
}
|
|
2987
|
+
.u-collapsible-menu-action-hide ~ .u-collapsible-menu-body .u-collapsible-menu-list {
|
|
2988
|
+
visibility: hidden;
|
|
2989
|
+
}
|
|
2789
2990
|
.bg-gradient-main {
|
|
2790
2991
|
background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
2791
2992
|
}
|
|
@@ -3020,15 +3221,15 @@ button {
|
|
|
3020
3221
|
/* полоса прокрутки (скроллбар) */
|
|
3021
3222
|
::-webkit-scrollbar {
|
|
3022
3223
|
background-color: transparent;
|
|
3023
|
-
width:
|
|
3024
|
-
height:
|
|
3224
|
+
width: 0.5vw;
|
|
3225
|
+
height: 1.5vh;
|
|
3025
3226
|
}
|
|
3026
3227
|
/* ползунок скроллбара */
|
|
3027
3228
|
::-webkit-scrollbar-thumb {
|
|
3028
3229
|
background-color: #D3D3D3;
|
|
3029
3230
|
border-radius: 5px;
|
|
3030
|
-
width:
|
|
3031
|
-
height:
|
|
3231
|
+
width: 0.5vw;
|
|
3232
|
+
height: 1.5vh;
|
|
3032
3233
|
}
|
|
3033
3234
|
::-webkit-scrollbar-thumb:hover {
|
|
3034
3235
|
background-color: #7A7A7A;
|
package/src/main.less
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
@import "styles/components/table";
|
|
21
21
|
@import "styles/components/airdatepicker";
|
|
22
22
|
@import "styles/components/modal";
|
|
23
|
+
@import "styles/components/menu";
|
|
23
24
|
@import "styles/special-classes/colors";
|
|
24
25
|
@import "styles/special-classes/font-weight";
|
|
25
26
|
@import "styles/special-classes/selectors";
|
|
@@ -43,16 +44,16 @@ button {
|
|
|
43
44
|
/* полоса прокрутки (скроллбар) */
|
|
44
45
|
::-webkit-scrollbar {
|
|
45
46
|
background-color: transparent;
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
47
|
+
width: 0.5vw;
|
|
48
|
+
height: 1.5vh;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
/* ползунок скроллбара */
|
|
51
52
|
::-webkit-scrollbar-thumb {
|
|
52
53
|
background-color: #D3D3D3;
|
|
53
54
|
border-radius: 5px;
|
|
54
|
-
width:
|
|
55
|
-
height:
|
|
55
|
+
width: 0.5vw;
|
|
56
|
+
height: 1.5vh;
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
::-webkit-scrollbar-thumb:hover {
|
|
@@ -200,6 +200,7 @@
|
|
|
200
200
|
border-radius: @radius;
|
|
201
201
|
margin-top: 2px;
|
|
202
202
|
max-height: 195px;
|
|
203
|
+
background-color: #FFFFFF;
|
|
203
204
|
overflow-y: auto;
|
|
204
205
|
}
|
|
205
206
|
&-option {
|
|
@@ -318,15 +319,17 @@
|
|
|
318
319
|
}
|
|
319
320
|
}
|
|
320
321
|
&-options {
|
|
321
|
-
|
|
322
|
-
|
|
322
|
+
overflow-y: auto;
|
|
323
|
+
max-height: 195px;
|
|
323
324
|
width: 100%;
|
|
325
|
+
border-radius: @radius;
|
|
324
326
|
z-index: 100;
|
|
327
|
+
display: none;
|
|
328
|
+
position: absolute;
|
|
325
329
|
border: 1px solid @clr-secondary-cold;
|
|
326
|
-
border-radius: @radius;
|
|
327
330
|
margin-top: 2px;
|
|
328
|
-
|
|
329
|
-
|
|
331
|
+
background-color: #FFFFFF;
|
|
332
|
+
// padding-right: 2px;
|
|
330
333
|
}
|
|
331
334
|
&-option {
|
|
332
335
|
background-color: @clr-secondary-empty;
|
|
@@ -363,12 +366,10 @@
|
|
|
363
366
|
}
|
|
364
367
|
}
|
|
365
368
|
&:first-child {
|
|
366
|
-
border-top-right-radius: @radius;
|
|
367
369
|
border-top-left-radius: @radius;
|
|
368
370
|
}
|
|
369
371
|
&:last-child {
|
|
370
372
|
border-bottom: none;
|
|
371
|
-
border-bottom-right-radius: @radius;
|
|
372
373
|
border-bottom-left-radius: @radius;
|
|
373
374
|
}
|
|
374
375
|
&:hover {
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.u-menu {
|
|
4
|
+
&-list {
|
|
5
|
+
margin: 0;
|
|
6
|
+
padding: 0;
|
|
7
|
+
&-item {
|
|
8
|
+
display: flex;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
margin-top: 28px;
|
|
11
|
+
.st;
|
|
12
|
+
color: @clr-secondary-supportive;
|
|
13
|
+
padding-left: 18px;
|
|
14
|
+
&:first-child {
|
|
15
|
+
margin-top: 0;
|
|
16
|
+
}
|
|
17
|
+
&:hover {
|
|
18
|
+
color: @clr-main-primary;
|
|
19
|
+
img {
|
|
20
|
+
color: @clr-main-primary;
|
|
21
|
+
}
|
|
22
|
+
.u-menu-context {
|
|
23
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
&.u-menu-active {
|
|
27
|
+
color: @clr-main-primary;
|
|
28
|
+
}
|
|
29
|
+
&::before {
|
|
30
|
+
position: relative;
|
|
31
|
+
left: -12px;
|
|
32
|
+
}
|
|
33
|
+
&.u-menu-subtitle {
|
|
34
|
+
display: none;
|
|
35
|
+
padding-left: 44px;
|
|
36
|
+
margin-top: 16px;
|
|
37
|
+
&::before {
|
|
38
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%23545454'/%3E%3C/svg%3E%0A");
|
|
39
|
+
top: -3px;
|
|
40
|
+
left: -6px;
|
|
41
|
+
}
|
|
42
|
+
&.u-menu-active {
|
|
43
|
+
&::before {
|
|
44
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
&:hover {
|
|
48
|
+
&::before {
|
|
49
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
&.u-menu-title {
|
|
54
|
+
&.u-menu-active {
|
|
55
|
+
color: @clr-secondary-supportive;
|
|
56
|
+
& ~ .u-menu-subtitle {
|
|
57
|
+
display: block;
|
|
58
|
+
}
|
|
59
|
+
&:hover {
|
|
60
|
+
color: @clr-main-primary;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
.u-menu-context {
|
|
65
|
+
margin: auto 0 auto auto;
|
|
66
|
+
width: 12px;
|
|
67
|
+
height: 9px;
|
|
68
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
69
|
+
background-repeat: no-repeat;
|
|
70
|
+
&.u-menu-active {
|
|
71
|
+
transform: rotate(180deg);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
.u-collapsible-menu {
|
|
81
|
+
position: relative;
|
|
82
|
+
max-width: max-content;
|
|
83
|
+
&-toggle {
|
|
84
|
+
position: absolute;
|
|
85
|
+
right: -21px;
|
|
86
|
+
top: 27px;
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
width: 21px;
|
|
89
|
+
height: 84px;
|
|
90
|
+
border-top-left-radius: 10px;
|
|
91
|
+
border-bottom-left-radius: 10px;
|
|
92
|
+
background-color: #D3D3D3;
|
|
93
|
+
background-image: url("data:image/svg+xml,%3Csvg width='21' height='84' viewBox='0 0 21 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5391 42.3841L8.82009 46.3166C8.49443 46.588 8 46.3564 8 45.9325L8 38.0675C8 37.6436 8.49443 37.412 8.82009 37.6834L13.5391 41.6159C13.7789 41.8158 13.7789 42.1842 13.5391 42.3841Z' fill='%23F6F6F6'/%3E%3C/svg%3E ");
|
|
94
|
+
background-repeat: no-repeat;
|
|
95
|
+
border-left: 1px solid #C8C7C7;
|
|
96
|
+
border-right: none;
|
|
97
|
+
transform: rotate(180deg);
|
|
98
|
+
transition-property: background-image;
|
|
99
|
+
transition-duration: .2s;
|
|
100
|
+
transition-timing-function: ease-in-out;
|
|
101
|
+
}
|
|
102
|
+
&-input {
|
|
103
|
+
-webkit-appearance: none;
|
|
104
|
+
appearance: none;
|
|
105
|
+
position: absolute;
|
|
106
|
+
width: 0;
|
|
107
|
+
height: 0;
|
|
108
|
+
&:checked ~ .u-collapsible-menu-body {
|
|
109
|
+
max-width: 1px;
|
|
110
|
+
overflow: hidden;
|
|
111
|
+
}
|
|
112
|
+
&:checked ~ .u-collapsible-menu-toggle {
|
|
113
|
+
border-top-left-radius: 0px;
|
|
114
|
+
border-bottom-left-radius: 0px;
|
|
115
|
+
border-top-right-radius: 10px;
|
|
116
|
+
border-bottom-right-radius: 10px;
|
|
117
|
+
background-image: url("data:image/svg+xml,%3Csvg width='21' height='84' viewBox='0 0 21 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5391 42.3841L8.82009 46.3166C8.49443 46.588 8 46.3564 8 45.9325L8 38.0675C8 37.6436 8.49443 37.412 8.82009 37.6834L13.5391 41.6159C13.7789 41.8158 13.7789 42.1842 13.5391 42.3841Z' fill='%23F6F6F6'/%3E%3C/svg%3E ");
|
|
118
|
+
border-left: none;
|
|
119
|
+
border-right: 1px solid #C8C7C7;
|
|
120
|
+
transform: rotate(0deg);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
&-body {
|
|
124
|
+
max-width: 268px;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
background-color: #F9F9F9;
|
|
127
|
+
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.10);
|
|
128
|
+
-webkit-transition: max-width .2s ease-in-out;
|
|
129
|
+
transition: max-width .2s ease-in-out;
|
|
130
|
+
}
|
|
131
|
+
&-list {
|
|
132
|
+
margin: 0;
|
|
133
|
+
padding: 0;
|
|
134
|
+
&-item {
|
|
135
|
+
display: flex;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
margin-top: 28px;
|
|
138
|
+
.st;
|
|
139
|
+
color: @clr-secondary-supportive;
|
|
140
|
+
padding-left: 18px;
|
|
141
|
+
&:first-child {
|
|
142
|
+
margin-top: 0;
|
|
143
|
+
}
|
|
144
|
+
&:hover {
|
|
145
|
+
color: @clr-main-primary;
|
|
146
|
+
img {
|
|
147
|
+
color: @clr-main-primary;
|
|
148
|
+
}
|
|
149
|
+
.u-menu-context {
|
|
150
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
&.u-menu-active {
|
|
154
|
+
color: @clr-main-primary;
|
|
155
|
+
}
|
|
156
|
+
&::before {
|
|
157
|
+
position: relative;
|
|
158
|
+
left: -12px;
|
|
159
|
+
}
|
|
160
|
+
&.u-menu-subtitle {
|
|
161
|
+
display: none;
|
|
162
|
+
padding-left: 44px;
|
|
163
|
+
margin-top: 16px;
|
|
164
|
+
&::before {
|
|
165
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%23545454'/%3E%3C/svg%3E%0A");
|
|
166
|
+
top: -3px;
|
|
167
|
+
left: -6px;
|
|
168
|
+
}
|
|
169
|
+
&.u-menu-active {
|
|
170
|
+
&::before {
|
|
171
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
&:hover {
|
|
175
|
+
&::before {
|
|
176
|
+
content: url("data:image/svg+xml,%3Csvg width='5' height='6' viewBox='0 0 5 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='3' r='2.5' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
&.u-menu-title {
|
|
181
|
+
&.u-menu-active {
|
|
182
|
+
color: @clr-secondary-supportive;
|
|
183
|
+
& ~ .u-menu-subtitle {
|
|
184
|
+
display: block;
|
|
185
|
+
}
|
|
186
|
+
&:hover {
|
|
187
|
+
color: @clr-main-primary;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
.u-menu-context {
|
|
192
|
+
margin: auto 0 auto auto;
|
|
193
|
+
width: 12px;
|
|
194
|
+
height: 9px;
|
|
195
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1.5L6.00001 6.5L1 1.5' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
|
|
196
|
+
background-repeat: no-repeat;
|
|
197
|
+
&.u-menu-active {
|
|
198
|
+
transform: rotate(180deg);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.u-collapsible-menu-action-hide ~ .u-collapsible-menu-body {
|
|
206
|
+
width: 1px;
|
|
207
|
+
background-color: #D3D3D3;
|
|
208
|
+
.u-collapsible-menu-list {
|
|
209
|
+
visibility: hidden;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
min-width: 300px;
|
|
6
6
|
display: flex;
|
|
7
7
|
justify-content: space-between;
|
|
8
|
+
align-items: center;
|
|
8
9
|
padding: 18px 16px 18px 52px;
|
|
9
10
|
border-radius: @radius;
|
|
10
11
|
font-weight: 400;
|
|
@@ -21,7 +22,6 @@
|
|
|
21
22
|
flex: 0 0 12px;
|
|
22
23
|
height: 12px;
|
|
23
24
|
position: relative;
|
|
24
|
-
top: -3px;
|
|
25
25
|
padding: 5px;
|
|
26
26
|
background-repeat: no-repeat;
|
|
27
27
|
}
|
|
@@ -56,6 +56,8 @@
|
|
|
56
56
|
background-position: center;
|
|
57
57
|
&-right {
|
|
58
58
|
cursor: pointer;
|
|
59
|
+
width: 32px;
|
|
60
|
+
height: 32px;
|
|
59
61
|
background-repeat: no-repeat;
|
|
60
62
|
background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.29289 11.7071C0.902369 11.3166 0.902369 10.6834 1.29289 10.2929L5.58579 5.99999L1.29289 1.70711C0.902369 1.31658 0.902368 0.683418 1.29289 0.292894C1.68342 -0.0976305 2.31658 -0.0976315 2.70711 0.292892L7.70711 5.29288C7.89464 5.48042 8 5.73477 8 5.99999C8 6.26521 7.89464 6.51956 7.70711 6.7071L2.70711 11.7071C2.31658 12.0976 1.68342 12.0976 1.29289 11.7071Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
61
63
|
background-position: center;
|