urfu-ui-kit-vanilla 1.0.36 → 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 +218 -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/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 {
|
|
@@ -1894,6 +1894,7 @@ button {
|
|
|
1894
1894
|
min-width: 300px;
|
|
1895
1895
|
display: flex;
|
|
1896
1896
|
justify-content: space-between;
|
|
1897
|
+
align-items: center;
|
|
1897
1898
|
padding: 18px 16px 18px 52px;
|
|
1898
1899
|
border-radius: 10px;
|
|
1899
1900
|
font-weight: 400;
|
|
@@ -1911,7 +1912,6 @@ button {
|
|
|
1911
1912
|
flex: 0 0 12px;
|
|
1912
1913
|
height: 12px;
|
|
1913
1914
|
position: relative;
|
|
1914
|
-
top: -3px;
|
|
1915
1915
|
padding: 5px;
|
|
1916
1916
|
background-repeat: no-repeat;
|
|
1917
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 ");
|
|
@@ -1921,6 +1921,7 @@ button {
|
|
|
1921
1921
|
min-width: 300px;
|
|
1922
1922
|
display: flex;
|
|
1923
1923
|
justify-content: space-between;
|
|
1924
|
+
align-items: center;
|
|
1924
1925
|
padding: 18px 16px 18px 52px;
|
|
1925
1926
|
border-radius: 10px;
|
|
1926
1927
|
font-weight: 400;
|
|
@@ -1939,7 +1940,6 @@ button {
|
|
|
1939
1940
|
flex: 0 0 12px;
|
|
1940
1941
|
height: 12px;
|
|
1941
1942
|
position: relative;
|
|
1942
|
-
top: -3px;
|
|
1943
1943
|
padding: 5px;
|
|
1944
1944
|
background-repeat: no-repeat;
|
|
1945
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 ");
|
|
@@ -1949,6 +1949,7 @@ button {
|
|
|
1949
1949
|
min-width: 300px;
|
|
1950
1950
|
display: flex;
|
|
1951
1951
|
justify-content: space-between;
|
|
1952
|
+
align-items: center;
|
|
1952
1953
|
padding: 18px 16px 18px 52px;
|
|
1953
1954
|
border-radius: 10px;
|
|
1954
1955
|
font-weight: 400;
|
|
@@ -1967,7 +1968,6 @@ button {
|
|
|
1967
1968
|
flex: 0 0 12px;
|
|
1968
1969
|
height: 12px;
|
|
1969
1970
|
position: relative;
|
|
1970
|
-
top: -3px;
|
|
1971
1971
|
padding: 5px;
|
|
1972
1972
|
background-repeat: no-repeat;
|
|
1973
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 ");
|
|
@@ -1977,6 +1977,7 @@ button {
|
|
|
1977
1977
|
min-width: 300px;
|
|
1978
1978
|
display: flex;
|
|
1979
1979
|
justify-content: space-between;
|
|
1980
|
+
align-items: center;
|
|
1980
1981
|
padding: 18px 16px 18px 52px;
|
|
1981
1982
|
border-radius: 10px;
|
|
1982
1983
|
font-weight: 400;
|
|
@@ -1995,7 +1996,6 @@ button {
|
|
|
1995
1996
|
flex: 0 0 12px;
|
|
1996
1997
|
height: 12px;
|
|
1997
1998
|
position: relative;
|
|
1998
|
-
top: -3px;
|
|
1999
1999
|
padding: 5px;
|
|
2000
2000
|
background-repeat: no-repeat;
|
|
2001
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 ");
|
|
@@ -2788,6 +2788,205 @@ button {
|
|
|
2788
2788
|
top: 0;
|
|
2789
2789
|
right: -68px;
|
|
2790
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
|
+
}
|
|
2791
2990
|
.bg-gradient-main {
|
|
2792
2991
|
background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
2793
2992
|
}
|
|
@@ -3022,15 +3221,15 @@ button {
|
|
|
3022
3221
|
/* полоса прокрутки (скроллбар) */
|
|
3023
3222
|
::-webkit-scrollbar {
|
|
3024
3223
|
background-color: transparent;
|
|
3025
|
-
width:
|
|
3026
|
-
height:
|
|
3224
|
+
width: 0.5vw;
|
|
3225
|
+
height: 1.5vh;
|
|
3027
3226
|
}
|
|
3028
3227
|
/* ползунок скроллбара */
|
|
3029
3228
|
::-webkit-scrollbar-thumb {
|
|
3030
3229
|
background-color: #D3D3D3;
|
|
3031
3230
|
border-radius: 5px;
|
|
3032
|
-
width:
|
|
3033
|
-
height:
|
|
3231
|
+
width: 0.5vw;
|
|
3232
|
+
height: 1.5vh;
|
|
3034
3233
|
}
|
|
3035
3234
|
::-webkit-scrollbar-thumb:hover {
|
|
3036
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
|
}
|