urfu-ui-kit-vanilla 1.0.36 → 1.0.38
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 +95 -42
- package/src/main.css +236 -28
- package/src/main.less +6 -5
- package/src/styles/components/input.less +15 -14
- package/src/styles/components/menu.less +215 -0
- package/src/styles/components/modal.less +1 -1
- package/src/styles/components/notification.less +1 -1
- package/src/styles/components/pagination.less +3 -1
- package/src/styles/components/switch.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>
|
|
@@ -77,7 +116,7 @@
|
|
|
77
116
|
</div>
|
|
78
117
|
<div class="u-multiselectbox-select-item-wrapper">
|
|
79
118
|
<div class="u-multiselectbox-select-item-container">
|
|
80
|
-
<span class="u-multiselectbox-select-item">
|
|
119
|
+
<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>
|
|
81
120
|
<div class="u-multiselectbox-select-cross"></div>
|
|
82
121
|
</div>
|
|
83
122
|
</div>
|
|
@@ -87,49 +126,63 @@
|
|
|
87
126
|
<div class="u-multiselectbox-select-cross"></div>
|
|
88
127
|
</div>
|
|
89
128
|
</div>
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<div></div>
|
|
96
|
-
Выбор gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf j j j fjf jdfjj dfdj dsd <br>
|
|
97
|
-
</label>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="u-multiselectbox-option">
|
|
100
|
-
<label class="u-multiselectbox-option-checkbox">
|
|
101
|
-
<input type="checkbox"/>
|
|
102
|
-
<div></div>
|
|
103
|
-
Выбор <br>dsd <br>
|
|
104
|
-
</label>
|
|
105
|
-
</div>
|
|
106
|
-
<div class="u-multiselectbox-option">
|
|
107
|
-
<label class="u-multiselectbox-option-checkbox">
|
|
108
|
-
<input type="checkbox"/>
|
|
109
|
-
<div></div>
|
|
110
|
-
Выбор <br>dsd <br>
|
|
111
|
-
</label>
|
|
112
|
-
</div>
|
|
113
|
-
<div class="u-multiselectbox-option">
|
|
114
|
-
<label class="u-multiselectbox-option-checkbox">
|
|
115
|
-
<input type="checkbox"/>
|
|
116
|
-
<div></div>
|
|
117
|
-
Выбор <br>dsd <br>
|
|
118
|
-
</label>
|
|
129
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
130
|
+
<div class="u-multiselectbox-select-item-container">
|
|
131
|
+
<span class="u-multiselectbox-select-item">fj</span>
|
|
132
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
133
|
+
</div>
|
|
119
134
|
</div>
|
|
120
|
-
<div class="u-multiselectbox-
|
|
121
|
-
<
|
|
122
|
-
<
|
|
123
|
-
<div></div>
|
|
124
|
-
|
|
125
|
-
</label>
|
|
135
|
+
<div class="u-multiselectbox-select-item-wrapper">
|
|
136
|
+
<div class="u-multiselectbox-select-item-container">
|
|
137
|
+
<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>
|
|
138
|
+
<div class="u-multiselectbox-select-cross"></div>
|
|
139
|
+
</div>
|
|
126
140
|
</div>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
141
|
+
</div>
|
|
142
|
+
<div class="u-multiselectbox-options-wrapper">
|
|
143
|
+
<div class="u-multiselectbox-options">
|
|
144
|
+
<div class="u-multiselectbox-option">
|
|
145
|
+
<label class="u-multiselectbox-option-checkbox">
|
|
146
|
+
<input type="checkbox"/>
|
|
147
|
+
<div></div>
|
|
148
|
+
Выбор gjfghjh gjf jfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjfg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf fg fjdfj jdfdgj dgj dgjgjjg jg dgj djg jdg dj jf djf jdg jdgdj gdgj jd dj f jhujdjj gdjfdjfjdfjdfjf ddjdfj jdf j j j fjf jdfjj dfdj dsd <br>
|
|
149
|
+
</label>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="u-multiselectbox-option">
|
|
152
|
+
<label class="u-multiselectbox-option-checkbox">
|
|
153
|
+
<input type="checkbox"/>
|
|
154
|
+
<div></div>
|
|
155
|
+
Выбор <br>dsd <br>
|
|
156
|
+
</label>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="u-multiselectbox-option">
|
|
159
|
+
<label class="u-multiselectbox-option-checkbox">
|
|
160
|
+
<input type="checkbox"/>
|
|
161
|
+
<div></div>
|
|
162
|
+
Выбор <br>dsd <br>
|
|
163
|
+
</label>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="u-multiselectbox-option">
|
|
166
|
+
<label class="u-multiselectbox-option-checkbox">
|
|
167
|
+
<input type="checkbox"/>
|
|
168
|
+
<div></div>
|
|
169
|
+
Выбор <br>dsd <br>
|
|
170
|
+
</label>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="u-multiselectbox-option">
|
|
173
|
+
<label class="u-multiselectbox-option-checkbox">
|
|
174
|
+
<input type="checkbox"/>
|
|
175
|
+
<div></div>
|
|
176
|
+
Выбор
|
|
177
|
+
</label>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="u-multiselectbox-option">
|
|
180
|
+
<label class="u-multiselectbox-option-checkbox">
|
|
181
|
+
<input type="checkbox"/>
|
|
182
|
+
<div></div>
|
|
183
|
+
Выбор
|
|
184
|
+
</label>
|
|
185
|
+
</div>
|
|
133
186
|
</div>
|
|
134
187
|
</div>
|
|
135
188
|
<i class="u-multiselectbox-select-icon-cross"></i>
|
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.45vw;
|
|
52
|
+
height: 1.5vh;
|
|
53
53
|
}
|
|
54
54
|
/* ползунок скроллбара */
|
|
55
55
|
::-webkit-scrollbar-thumb {
|
|
56
56
|
background-color: #D3D3D3;
|
|
57
|
-
border-radius:
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
57
|
+
border-radius: 10px;
|
|
58
|
+
width: 0.45vw;
|
|
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 {
|
|
@@ -775,7 +776,7 @@ button {
|
|
|
775
776
|
.u-multiselectbox-select-open ~ .u-multiselectbox-select-icon-arrow {
|
|
776
777
|
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.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
777
778
|
}
|
|
778
|
-
.u-multiselectbox-select-open ~ .u-multiselectbox-options {
|
|
779
|
+
.u-multiselectbox-select-open ~ .u-multiselectbox-options-wrapper {
|
|
779
780
|
display: block;
|
|
780
781
|
}
|
|
781
782
|
.u-multiselectbox-select-icon-arrow {
|
|
@@ -816,15 +817,21 @@ 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-top-left-radius: 10px;
|
|
824
|
+
border-bottom-left-radius: 10px;
|
|
825
|
+
background-color: #FFFFFF;
|
|
826
|
+
}
|
|
827
|
+
.u-multiselectbox-options-wrapper {
|
|
828
|
+
padding-right: 2px;
|
|
822
829
|
z-index: 100;
|
|
823
|
-
|
|
830
|
+
display: none;
|
|
831
|
+
position: absolute;
|
|
824
832
|
border-radius: 10px;
|
|
833
|
+
border: 1px solid #748AB9;
|
|
825
834
|
margin-top: 2px;
|
|
826
|
-
overflow-y: auto;
|
|
827
|
-
max-height: 195px;
|
|
828
835
|
}
|
|
829
836
|
.u-multiselectbox-option {
|
|
830
837
|
background-color: #FFFFFF;
|
|
@@ -866,14 +873,8 @@ button {
|
|
|
866
873
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='1.5' fill='white' stroke='%23D3D3D3'/%3E%3C/svg%3E ");
|
|
867
874
|
margin-right: 16px;
|
|
868
875
|
}
|
|
869
|
-
.u-multiselectbox-option:first-child {
|
|
870
|
-
border-top-right-radius: 10px;
|
|
871
|
-
border-top-left-radius: 10px;
|
|
872
|
-
}
|
|
873
876
|
.u-multiselectbox-option:last-child {
|
|
874
877
|
border-bottom: none;
|
|
875
|
-
border-bottom-right-radius: 10px;
|
|
876
|
-
border-bottom-left-radius: 10px;
|
|
877
878
|
}
|
|
878
879
|
.u-multiselectbox-option:hover {
|
|
879
880
|
background-color: #E7F2FF;
|
|
@@ -1292,6 +1293,8 @@ button {
|
|
|
1292
1293
|
.u-switch-gradient {
|
|
1293
1294
|
cursor: pointer;
|
|
1294
1295
|
display: flex;
|
|
1296
|
+
align-items: center;
|
|
1297
|
+
column-gap: 10px;
|
|
1295
1298
|
}
|
|
1296
1299
|
.u-switch-gradient input {
|
|
1297
1300
|
display: none;
|
|
@@ -1664,7 +1667,9 @@ button {
|
|
|
1664
1667
|
display: flex;
|
|
1665
1668
|
align-items: center;
|
|
1666
1669
|
justify-content: space-between;
|
|
1667
|
-
padding:
|
|
1670
|
+
padding: 20px 50px;
|
|
1671
|
+
border-radius: 10px;
|
|
1672
|
+
background-color: #FFFFFF;
|
|
1668
1673
|
}
|
|
1669
1674
|
.u-pagination__result,
|
|
1670
1675
|
.u-pagination__limits,
|
|
@@ -1894,6 +1899,7 @@ button {
|
|
|
1894
1899
|
min-width: 300px;
|
|
1895
1900
|
display: flex;
|
|
1896
1901
|
justify-content: space-between;
|
|
1902
|
+
align-items: center;
|
|
1897
1903
|
padding: 18px 16px 18px 52px;
|
|
1898
1904
|
border-radius: 10px;
|
|
1899
1905
|
font-weight: 400;
|
|
@@ -1911,7 +1917,6 @@ button {
|
|
|
1911
1917
|
flex: 0 0 12px;
|
|
1912
1918
|
height: 12px;
|
|
1913
1919
|
position: relative;
|
|
1914
|
-
top: -3px;
|
|
1915
1920
|
padding: 5px;
|
|
1916
1921
|
background-repeat: no-repeat;
|
|
1917
1922
|
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 +1926,7 @@ button {
|
|
|
1921
1926
|
min-width: 300px;
|
|
1922
1927
|
display: flex;
|
|
1923
1928
|
justify-content: space-between;
|
|
1929
|
+
align-items: center;
|
|
1924
1930
|
padding: 18px 16px 18px 52px;
|
|
1925
1931
|
border-radius: 10px;
|
|
1926
1932
|
font-weight: 400;
|
|
@@ -1939,7 +1945,6 @@ button {
|
|
|
1939
1945
|
flex: 0 0 12px;
|
|
1940
1946
|
height: 12px;
|
|
1941
1947
|
position: relative;
|
|
1942
|
-
top: -3px;
|
|
1943
1948
|
padding: 5px;
|
|
1944
1949
|
background-repeat: no-repeat;
|
|
1945
1950
|
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 +1954,7 @@ button {
|
|
|
1949
1954
|
min-width: 300px;
|
|
1950
1955
|
display: flex;
|
|
1951
1956
|
justify-content: space-between;
|
|
1957
|
+
align-items: center;
|
|
1952
1958
|
padding: 18px 16px 18px 52px;
|
|
1953
1959
|
border-radius: 10px;
|
|
1954
1960
|
font-weight: 400;
|
|
@@ -1967,7 +1973,6 @@ button {
|
|
|
1967
1973
|
flex: 0 0 12px;
|
|
1968
1974
|
height: 12px;
|
|
1969
1975
|
position: relative;
|
|
1970
|
-
top: -3px;
|
|
1971
1976
|
padding: 5px;
|
|
1972
1977
|
background-repeat: no-repeat;
|
|
1973
1978
|
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 +1982,7 @@ button {
|
|
|
1977
1982
|
min-width: 300px;
|
|
1978
1983
|
display: flex;
|
|
1979
1984
|
justify-content: space-between;
|
|
1985
|
+
align-items: center;
|
|
1980
1986
|
padding: 18px 16px 18px 52px;
|
|
1981
1987
|
border-radius: 10px;
|
|
1982
1988
|
font-weight: 400;
|
|
@@ -1995,7 +2001,6 @@ button {
|
|
|
1995
2001
|
flex: 0 0 12px;
|
|
1996
2002
|
height: 12px;
|
|
1997
2003
|
position: relative;
|
|
1998
|
-
top: -3px;
|
|
1999
2004
|
padding: 5px;
|
|
2000
2005
|
background-repeat: no-repeat;
|
|
2001
2006
|
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 ");
|
|
@@ -2766,7 +2771,7 @@ button {
|
|
|
2766
2771
|
overflow: hidden;
|
|
2767
2772
|
overflow-y: auto;
|
|
2768
2773
|
}
|
|
2769
|
-
.u-modal
|
|
2774
|
+
.u-modal-active {
|
|
2770
2775
|
transform: scale(1);
|
|
2771
2776
|
}
|
|
2772
2777
|
.u-modal__container {
|
|
@@ -2788,6 +2793,209 @@ button {
|
|
|
2788
2793
|
top: 0;
|
|
2789
2794
|
right: -68px;
|
|
2790
2795
|
}
|
|
2796
|
+
.u-menu-list {
|
|
2797
|
+
margin: 0;
|
|
2798
|
+
padding: 0;
|
|
2799
|
+
overflow-y: auto;
|
|
2800
|
+
max-height: 100vh;
|
|
2801
|
+
}
|
|
2802
|
+
.u-menu-list-item {
|
|
2803
|
+
display: flex;
|
|
2804
|
+
cursor: pointer;
|
|
2805
|
+
margin-top: 28px;
|
|
2806
|
+
/*simple text*/
|
|
2807
|
+
/*simple text*/
|
|
2808
|
+
font-weight: 400;
|
|
2809
|
+
font-size: 16px;
|
|
2810
|
+
line-height: 22.4px;
|
|
2811
|
+
color: #545454;
|
|
2812
|
+
padding-left: 18px;
|
|
2813
|
+
}
|
|
2814
|
+
.u-menu-list-item:first-child {
|
|
2815
|
+
margin-top: 0;
|
|
2816
|
+
}
|
|
2817
|
+
.u-menu-list-item:hover {
|
|
2818
|
+
color: #1E4391;
|
|
2819
|
+
}
|
|
2820
|
+
.u-menu-list-item:hover img {
|
|
2821
|
+
color: #1E4391;
|
|
2822
|
+
}
|
|
2823
|
+
.u-menu-list-item:hover .u-menu-context {
|
|
2824
|
+
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 ");
|
|
2825
|
+
}
|
|
2826
|
+
.u-menu-list-item.u-menu-active {
|
|
2827
|
+
color: #1E4391;
|
|
2828
|
+
}
|
|
2829
|
+
.u-menu-list-item::before {
|
|
2830
|
+
position: relative;
|
|
2831
|
+
left: -12px;
|
|
2832
|
+
}
|
|
2833
|
+
.u-menu-list-item.u-menu-subtitle {
|
|
2834
|
+
display: none;
|
|
2835
|
+
padding-left: 44px;
|
|
2836
|
+
margin-top: 16px;
|
|
2837
|
+
}
|
|
2838
|
+
.u-menu-list-item.u-menu-subtitle::before {
|
|
2839
|
+
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");
|
|
2840
|
+
top: -3px;
|
|
2841
|
+
left: -6px;
|
|
2842
|
+
}
|
|
2843
|
+
.u-menu-list-item.u-menu-subtitle.u-menu-active::before {
|
|
2844
|
+
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");
|
|
2845
|
+
}
|
|
2846
|
+
.u-menu-list-item.u-menu-subtitle:hover::before {
|
|
2847
|
+
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");
|
|
2848
|
+
}
|
|
2849
|
+
.u-menu-list-item.u-menu-title.u-menu-active {
|
|
2850
|
+
color: #545454;
|
|
2851
|
+
}
|
|
2852
|
+
.u-menu-list-item.u-menu-title.u-menu-active ~ .u-menu-subtitle {
|
|
2853
|
+
display: block;
|
|
2854
|
+
}
|
|
2855
|
+
.u-menu-list-item.u-menu-title.u-menu-active:hover {
|
|
2856
|
+
color: #1E4391;
|
|
2857
|
+
}
|
|
2858
|
+
.u-menu-list-item .u-menu-context {
|
|
2859
|
+
margin: auto 0 auto auto;
|
|
2860
|
+
width: 12px;
|
|
2861
|
+
height: 9px;
|
|
2862
|
+
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 ");
|
|
2863
|
+
background-repeat: no-repeat;
|
|
2864
|
+
}
|
|
2865
|
+
.u-menu-list-item .u-menu-context.u-menu-active {
|
|
2866
|
+
transform: rotate(180deg);
|
|
2867
|
+
}
|
|
2868
|
+
.u-collapsible-menu {
|
|
2869
|
+
position: relative;
|
|
2870
|
+
max-width: max-content;
|
|
2871
|
+
}
|
|
2872
|
+
.u-collapsible-menu-toggle {
|
|
2873
|
+
position: absolute;
|
|
2874
|
+
right: -21px;
|
|
2875
|
+
top: 27px;
|
|
2876
|
+
cursor: pointer;
|
|
2877
|
+
width: 21px;
|
|
2878
|
+
height: 84px;
|
|
2879
|
+
border-top-left-radius: 10px;
|
|
2880
|
+
border-bottom-left-radius: 10px;
|
|
2881
|
+
background-color: #D3D3D3;
|
|
2882
|
+
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 ");
|
|
2883
|
+
background-repeat: no-repeat;
|
|
2884
|
+
border-left: 1px solid #C8C7C7;
|
|
2885
|
+
border-right: none;
|
|
2886
|
+
transform: rotate(180deg);
|
|
2887
|
+
transition-property: background-image;
|
|
2888
|
+
transition-duration: 0.2s;
|
|
2889
|
+
transition-timing-function: ease-in-out;
|
|
2890
|
+
}
|
|
2891
|
+
.u-collapsible-menu-input {
|
|
2892
|
+
-webkit-appearance: none;
|
|
2893
|
+
appearance: none;
|
|
2894
|
+
position: absolute;
|
|
2895
|
+
width: 0;
|
|
2896
|
+
height: 0;
|
|
2897
|
+
}
|
|
2898
|
+
.u-collapsible-menu-input:checked ~ .u-collapsible-menu-body {
|
|
2899
|
+
max-width: 1px;
|
|
2900
|
+
overflow: hidden;
|
|
2901
|
+
}
|
|
2902
|
+
.u-collapsible-menu-input:checked ~ .u-collapsible-menu-toggle {
|
|
2903
|
+
border-top-left-radius: 0px;
|
|
2904
|
+
border-bottom-left-radius: 0px;
|
|
2905
|
+
border-top-right-radius: 10px;
|
|
2906
|
+
border-bottom-right-radius: 10px;
|
|
2907
|
+
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 ");
|
|
2908
|
+
border-left: none;
|
|
2909
|
+
border-right: 1px solid #C8C7C7;
|
|
2910
|
+
transform: rotate(0deg);
|
|
2911
|
+
}
|
|
2912
|
+
.u-collapsible-menu-body {
|
|
2913
|
+
max-width: 268px;
|
|
2914
|
+
overflow: hidden;
|
|
2915
|
+
background-color: #F9F9F9;
|
|
2916
|
+
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.1);
|
|
2917
|
+
-webkit-transition: max-width 0.2s ease-in-out;
|
|
2918
|
+
transition: max-width 0.2s ease-in-out;
|
|
2919
|
+
}
|
|
2920
|
+
.u-collapsible-menu-list {
|
|
2921
|
+
margin: 0;
|
|
2922
|
+
padding: 0;
|
|
2923
|
+
overflow-y: auto;
|
|
2924
|
+
max-height: 100vh;
|
|
2925
|
+
}
|
|
2926
|
+
.u-collapsible-menu-list-item {
|
|
2927
|
+
display: flex;
|
|
2928
|
+
cursor: pointer;
|
|
2929
|
+
margin-top: 28px;
|
|
2930
|
+
/*simple text*/
|
|
2931
|
+
/*simple text*/
|
|
2932
|
+
font-weight: 400;
|
|
2933
|
+
font-size: 16px;
|
|
2934
|
+
line-height: 22.4px;
|
|
2935
|
+
color: #545454;
|
|
2936
|
+
padding-left: 18px;
|
|
2937
|
+
}
|
|
2938
|
+
.u-collapsible-menu-list-item:first-child {
|
|
2939
|
+
margin-top: 0;
|
|
2940
|
+
}
|
|
2941
|
+
.u-collapsible-menu-list-item:hover {
|
|
2942
|
+
color: #1E4391;
|
|
2943
|
+
}
|
|
2944
|
+
.u-collapsible-menu-list-item:hover img {
|
|
2945
|
+
color: #1E4391;
|
|
2946
|
+
}
|
|
2947
|
+
.u-collapsible-menu-list-item:hover .u-menu-context {
|
|
2948
|
+
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 ");
|
|
2949
|
+
}
|
|
2950
|
+
.u-collapsible-menu-list-item.u-menu-active {
|
|
2951
|
+
color: #1E4391;
|
|
2952
|
+
}
|
|
2953
|
+
.u-collapsible-menu-list-item::before {
|
|
2954
|
+
position: relative;
|
|
2955
|
+
left: -12px;
|
|
2956
|
+
}
|
|
2957
|
+
.u-collapsible-menu-list-item.u-menu-subtitle {
|
|
2958
|
+
display: none;
|
|
2959
|
+
padding-left: 44px;
|
|
2960
|
+
margin-top: 16px;
|
|
2961
|
+
}
|
|
2962
|
+
.u-collapsible-menu-list-item.u-menu-subtitle::before {
|
|
2963
|
+
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");
|
|
2964
|
+
top: -3px;
|
|
2965
|
+
left: -6px;
|
|
2966
|
+
}
|
|
2967
|
+
.u-collapsible-menu-list-item.u-menu-subtitle.u-menu-active::before {
|
|
2968
|
+
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");
|
|
2969
|
+
}
|
|
2970
|
+
.u-collapsible-menu-list-item.u-menu-subtitle:hover::before {
|
|
2971
|
+
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");
|
|
2972
|
+
}
|
|
2973
|
+
.u-collapsible-menu-list-item.u-menu-title.u-menu-active {
|
|
2974
|
+
color: #545454;
|
|
2975
|
+
}
|
|
2976
|
+
.u-collapsible-menu-list-item.u-menu-title.u-menu-active ~ .u-menu-subtitle {
|
|
2977
|
+
display: block;
|
|
2978
|
+
}
|
|
2979
|
+
.u-collapsible-menu-list-item.u-menu-title.u-menu-active:hover {
|
|
2980
|
+
color: #1E4391;
|
|
2981
|
+
}
|
|
2982
|
+
.u-collapsible-menu-list-item .u-menu-context {
|
|
2983
|
+
margin: auto 0 auto auto;
|
|
2984
|
+
width: 12px;
|
|
2985
|
+
height: 9px;
|
|
2986
|
+
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 ");
|
|
2987
|
+
background-repeat: no-repeat;
|
|
2988
|
+
}
|
|
2989
|
+
.u-collapsible-menu-list-item .u-menu-context.u-menu-active {
|
|
2990
|
+
transform: rotate(180deg);
|
|
2991
|
+
}
|
|
2992
|
+
.u-collapsible-menu-action-hide ~ .u-collapsible-menu-body {
|
|
2993
|
+
width: 1px;
|
|
2994
|
+
background-color: #D3D3D3;
|
|
2995
|
+
}
|
|
2996
|
+
.u-collapsible-menu-action-hide ~ .u-collapsible-menu-body .u-collapsible-menu-list {
|
|
2997
|
+
visibility: hidden;
|
|
2998
|
+
}
|
|
2791
2999
|
.bg-gradient-main {
|
|
2792
3000
|
background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
2793
3001
|
}
|
|
@@ -3022,15 +3230,15 @@ button {
|
|
|
3022
3230
|
/* полоса прокрутки (скроллбар) */
|
|
3023
3231
|
::-webkit-scrollbar {
|
|
3024
3232
|
background-color: transparent;
|
|
3025
|
-
width:
|
|
3026
|
-
height:
|
|
3233
|
+
width: 0.45vw;
|
|
3234
|
+
height: 1.5vh;
|
|
3027
3235
|
}
|
|
3028
3236
|
/* ползунок скроллбара */
|
|
3029
3237
|
::-webkit-scrollbar-thumb {
|
|
3030
3238
|
background-color: #D3D3D3;
|
|
3031
|
-
border-radius:
|
|
3032
|
-
width:
|
|
3033
|
-
height:
|
|
3239
|
+
border-radius: 10px;
|
|
3240
|
+
width: 0.45vw;
|
|
3241
|
+
height: 1.5vh;
|
|
3034
3242
|
}
|
|
3035
3243
|
::-webkit-scrollbar-thumb:hover {
|
|
3036
3244
|
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.45vw;
|
|
48
|
+
height: 1.5vh;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
/* ползунок скроллбара */
|
|
51
52
|
::-webkit-scrollbar-thumb {
|
|
52
53
|
background-color: #D3D3D3;
|
|
53
|
-
border-radius:
|
|
54
|
-
width:
|
|
55
|
-
height:
|
|
54
|
+
border-radius: 10px;
|
|
55
|
+
width: 0.45vw;
|
|
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 {
|
|
@@ -277,7 +278,7 @@
|
|
|
277
278
|
& ~ .u-multiselectbox-select-icon-arrow {
|
|
278
279
|
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.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
279
280
|
}
|
|
280
|
-
& ~ .u-multiselectbox-options {
|
|
281
|
+
& ~ .u-multiselectbox-options-wrapper {
|
|
281
282
|
display: block;
|
|
282
283
|
}
|
|
283
284
|
}
|
|
@@ -318,15 +319,21 @@
|
|
|
318
319
|
}
|
|
319
320
|
}
|
|
320
321
|
&-options {
|
|
321
|
-
display: none;
|
|
322
|
-
position: absolute;
|
|
323
|
-
width: 100%;
|
|
324
|
-
z-index: 100;
|
|
325
|
-
border: 1px solid @clr-secondary-cold;
|
|
326
|
-
border-radius: @radius;
|
|
327
|
-
margin-top: 2px;
|
|
328
322
|
overflow-y: auto;
|
|
329
323
|
max-height: 195px;
|
|
324
|
+
width: 100%;
|
|
325
|
+
border-top-left-radius: @radius;
|
|
326
|
+
border-bottom-left-radius: @radius;
|
|
327
|
+
background-color: #FFFFFF;
|
|
328
|
+
&-wrapper {
|
|
329
|
+
padding-right: 2px;
|
|
330
|
+
z-index: 100;
|
|
331
|
+
display: none;
|
|
332
|
+
position: absolute;
|
|
333
|
+
border-radius: @radius;
|
|
334
|
+
border: 1px solid @clr-secondary-cold;
|
|
335
|
+
margin-top: 2px;
|
|
336
|
+
}
|
|
330
337
|
}
|
|
331
338
|
&-option {
|
|
332
339
|
background-color: @clr-secondary-empty;
|
|
@@ -362,14 +369,8 @@
|
|
|
362
369
|
margin-right: 16px;
|
|
363
370
|
}
|
|
364
371
|
}
|
|
365
|
-
&:first-child {
|
|
366
|
-
border-top-right-radius: @radius;
|
|
367
|
-
border-top-left-radius: @radius;
|
|
368
|
-
}
|
|
369
372
|
&:last-child {
|
|
370
373
|
border-bottom: none;
|
|
371
|
-
border-bottom-right-radius: @radius;
|
|
372
|
-
border-bottom-left-radius: @radius;
|
|
373
374
|
}
|
|
374
375
|
&:hover {
|
|
375
376
|
background-color: #E7F2FF;
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.u-menu {
|
|
4
|
+
&-list {
|
|
5
|
+
margin: 0;
|
|
6
|
+
padding: 0;
|
|
7
|
+
overflow-y: auto;
|
|
8
|
+
max-height: 100vh;
|
|
9
|
+
&-item {
|
|
10
|
+
display: flex;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
margin-top: 28px;
|
|
13
|
+
.st;
|
|
14
|
+
color: @clr-secondary-supportive;
|
|
15
|
+
padding-left: 18px;
|
|
16
|
+
&:first-child {
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
}
|
|
19
|
+
&:hover {
|
|
20
|
+
color: @clr-main-primary;
|
|
21
|
+
img {
|
|
22
|
+
color: @clr-main-primary;
|
|
23
|
+
}
|
|
24
|
+
.u-menu-context {
|
|
25
|
+
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 ");
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
&.u-menu-active {
|
|
29
|
+
color: @clr-main-primary;
|
|
30
|
+
}
|
|
31
|
+
&::before {
|
|
32
|
+
position: relative;
|
|
33
|
+
left: -12px;
|
|
34
|
+
}
|
|
35
|
+
&.u-menu-subtitle {
|
|
36
|
+
display: none;
|
|
37
|
+
padding-left: 44px;
|
|
38
|
+
margin-top: 16px;
|
|
39
|
+
&::before {
|
|
40
|
+
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");
|
|
41
|
+
top: -3px;
|
|
42
|
+
left: -6px;
|
|
43
|
+
}
|
|
44
|
+
&.u-menu-active {
|
|
45
|
+
&::before {
|
|
46
|
+
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");
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&:hover {
|
|
50
|
+
&::before {
|
|
51
|
+
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");
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
&.u-menu-title {
|
|
56
|
+
&.u-menu-active {
|
|
57
|
+
color: @clr-secondary-supportive;
|
|
58
|
+
& ~ .u-menu-subtitle {
|
|
59
|
+
display: block;
|
|
60
|
+
}
|
|
61
|
+
&:hover {
|
|
62
|
+
color: @clr-main-primary;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
.u-menu-context {
|
|
67
|
+
margin: auto 0 auto auto;
|
|
68
|
+
width: 12px;
|
|
69
|
+
height: 9px;
|
|
70
|
+
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 ");
|
|
71
|
+
background-repeat: no-repeat;
|
|
72
|
+
&.u-menu-active {
|
|
73
|
+
transform: rotate(180deg);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
.u-collapsible-menu {
|
|
83
|
+
position: relative;
|
|
84
|
+
max-width: max-content;
|
|
85
|
+
&-toggle {
|
|
86
|
+
position: absolute;
|
|
87
|
+
right: -21px;
|
|
88
|
+
top: 27px;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
width: 21px;
|
|
91
|
+
height: 84px;
|
|
92
|
+
border-top-left-radius: 10px;
|
|
93
|
+
border-bottom-left-radius: 10px;
|
|
94
|
+
background-color: #D3D3D3;
|
|
95
|
+
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 ");
|
|
96
|
+
background-repeat: no-repeat;
|
|
97
|
+
border-left: 1px solid #C8C7C7;
|
|
98
|
+
border-right: none;
|
|
99
|
+
transform: rotate(180deg);
|
|
100
|
+
transition-property: background-image;
|
|
101
|
+
transition-duration: .2s;
|
|
102
|
+
transition-timing-function: ease-in-out;
|
|
103
|
+
}
|
|
104
|
+
&-input {
|
|
105
|
+
-webkit-appearance: none;
|
|
106
|
+
appearance: none;
|
|
107
|
+
position: absolute;
|
|
108
|
+
width: 0;
|
|
109
|
+
height: 0;
|
|
110
|
+
&:checked ~ .u-collapsible-menu-body {
|
|
111
|
+
max-width: 1px;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
|
114
|
+
&:checked ~ .u-collapsible-menu-toggle {
|
|
115
|
+
border-top-left-radius: 0px;
|
|
116
|
+
border-bottom-left-radius: 0px;
|
|
117
|
+
border-top-right-radius: 10px;
|
|
118
|
+
border-bottom-right-radius: 10px;
|
|
119
|
+
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 ");
|
|
120
|
+
border-left: none;
|
|
121
|
+
border-right: 1px solid #C8C7C7;
|
|
122
|
+
transform: rotate(0deg);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
&-body {
|
|
126
|
+
max-width: 268px;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
background-color: #F9F9F9;
|
|
129
|
+
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.10);
|
|
130
|
+
-webkit-transition: max-width .2s ease-in-out;
|
|
131
|
+
transition: max-width .2s ease-in-out;
|
|
132
|
+
}
|
|
133
|
+
&-list {
|
|
134
|
+
margin: 0;
|
|
135
|
+
padding: 0;
|
|
136
|
+
overflow-y: auto;
|
|
137
|
+
max-height: 100vh;
|
|
138
|
+
&-item {
|
|
139
|
+
display: flex;
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
margin-top: 28px;
|
|
142
|
+
.st;
|
|
143
|
+
color: @clr-secondary-supportive;
|
|
144
|
+
padding-left: 18px;
|
|
145
|
+
&:first-child {
|
|
146
|
+
margin-top: 0;
|
|
147
|
+
}
|
|
148
|
+
&:hover {
|
|
149
|
+
color: @clr-main-primary;
|
|
150
|
+
img {
|
|
151
|
+
color: @clr-main-primary;
|
|
152
|
+
}
|
|
153
|
+
.u-menu-context {
|
|
154
|
+
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 ");
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
&.u-menu-active {
|
|
158
|
+
color: @clr-main-primary;
|
|
159
|
+
}
|
|
160
|
+
&::before {
|
|
161
|
+
position: relative;
|
|
162
|
+
left: -12px;
|
|
163
|
+
}
|
|
164
|
+
&.u-menu-subtitle {
|
|
165
|
+
display: none;
|
|
166
|
+
padding-left: 44px;
|
|
167
|
+
margin-top: 16px;
|
|
168
|
+
&::before {
|
|
169
|
+
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");
|
|
170
|
+
top: -3px;
|
|
171
|
+
left: -6px;
|
|
172
|
+
}
|
|
173
|
+
&.u-menu-active {
|
|
174
|
+
&::before {
|
|
175
|
+
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");
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
&:hover {
|
|
179
|
+
&::before {
|
|
180
|
+
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");
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
&.u-menu-title {
|
|
185
|
+
&.u-menu-active {
|
|
186
|
+
color: @clr-secondary-supportive;
|
|
187
|
+
& ~ .u-menu-subtitle {
|
|
188
|
+
display: block;
|
|
189
|
+
}
|
|
190
|
+
&:hover {
|
|
191
|
+
color: @clr-main-primary;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
.u-menu-context {
|
|
196
|
+
margin: auto 0 auto auto;
|
|
197
|
+
width: 12px;
|
|
198
|
+
height: 9px;
|
|
199
|
+
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 ");
|
|
200
|
+
background-repeat: no-repeat;
|
|
201
|
+
&.u-menu-active {
|
|
202
|
+
transform: rotate(180deg);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.u-collapsible-menu-action-hide ~ .u-collapsible-menu-body {
|
|
210
|
+
width: 1px;
|
|
211
|
+
background-color: #D3D3D3;
|
|
212
|
+
.u-collapsible-menu-list {
|
|
213
|
+
visibility: hidden;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
@@ -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
|
}
|