urfu-ui-kit-vanilla 1.0.37 → 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.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/playground/index.html +56 -42
  3. package/src/main.css +24 -15
  4. package/src/main.less +3 -3
  5. package/src/styles/components/input.less +12 -12
  6. package/src/styles/components/menu.less +4 -0
  7. package/src/styles/components/modal.less +1 -1
  8. package/src/styles/components/pagination.less +3 -1
  9. package/src/styles/components/switch.less +2 -0
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "UrFU UI-Kit for Vanilla Web",
4
4
  "license": "UNLICENSED",
5
5
  "private": false,
6
- "version": "1.0.37",
6
+ "version": "1.0.38",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "start": "vite serve playground",
package/playground/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  </div>
117
117
  <div class="u-multiselectbox-select-item-wrapper">
118
118
  <div class="u-multiselectbox-select-item-container">
119
- <span class="u-multiselectbox-select-item">fj</span>
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>
120
120
  <div class="u-multiselectbox-select-cross"></div>
121
121
  </div>
122
122
  </div>
@@ -126,49 +126,63 @@
126
126
  <div class="u-multiselectbox-select-cross"></div>
127
127
  </div>
128
128
  </div>
129
- </div>
130
- <div class="u-multiselectbox-options">
131
- <div class="u-multiselectbox-option">
132
- <label class="u-multiselectbox-option-checkbox">
133
- <input type="checkbox"/>
134
- <div></div>
135
- Выбор 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>
136
- </label>
137
- </div>
138
- <div class="u-multiselectbox-option">
139
- <label class="u-multiselectbox-option-checkbox">
140
- <input type="checkbox"/>
141
- <div></div>
142
- Выбор <br>dsd <br>
143
- </label>
144
- </div>
145
- <div class="u-multiselectbox-option">
146
- <label class="u-multiselectbox-option-checkbox">
147
- <input type="checkbox"/>
148
- <div></div>
149
- Выбор <br>dsd <br>
150
- </label>
151
- </div>
152
- <div class="u-multiselectbox-option">
153
- <label class="u-multiselectbox-option-checkbox">
154
- <input type="checkbox"/>
155
- <div></div>
156
- Выбор <br>dsd <br>
157
- </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>
158
134
  </div>
159
- <div class="u-multiselectbox-option">
160
- <label class="u-multiselectbox-option-checkbox">
161
- <input type="checkbox"/>
162
- <div></div>
163
- Выбор
164
- </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>
165
140
  </div>
166
- <div class="u-multiselectbox-option">
167
- <label class="u-multiselectbox-option-checkbox">
168
- <input type="checkbox"/>
169
- <div></div>
170
- Выбор
171
- </label>
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>
172
186
  </div>
173
187
  </div>
174
188
  <i class="u-multiselectbox-select-icon-cross"></i>
package/src/main.css CHANGED
@@ -48,14 +48,14 @@ button {
48
48
  /* полоса прокрутки (скроллбар) */
49
49
  ::-webkit-scrollbar {
50
50
  background-color: transparent;
51
- width: 0.5vw;
51
+ width: 0.45vw;
52
52
  height: 1.5vh;
53
53
  }
54
54
  /* ползунок скроллбара */
55
55
  ::-webkit-scrollbar-thumb {
56
56
  background-color: #D3D3D3;
57
- border-radius: 5px;
58
- width: 0.5vw;
57
+ border-radius: 10px;
58
+ width: 0.45vw;
59
59
  height: 1.5vh;
60
60
  }
61
61
  ::-webkit-scrollbar-thumb:hover {
@@ -776,7 +776,7 @@ button {
776
776
  .u-multiselectbox-select-open ~ .u-multiselectbox-select-icon-arrow {
777
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 ");
778
778
  }
779
- .u-multiselectbox-select-open ~ .u-multiselectbox-options {
779
+ .u-multiselectbox-select-open ~ .u-multiselectbox-options-wrapper {
780
780
  display: block;
781
781
  }
782
782
  .u-multiselectbox-select-icon-arrow {
@@ -820,13 +820,18 @@ button {
820
820
  overflow-y: auto;
821
821
  max-height: 195px;
822
822
  width: 100%;
823
- border-radius: 10px;
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;
824
829
  z-index: 100;
825
830
  display: none;
826
831
  position: absolute;
832
+ border-radius: 10px;
827
833
  border: 1px solid #748AB9;
828
834
  margin-top: 2px;
829
- background-color: #FFFFFF;
830
835
  }
831
836
  .u-multiselectbox-option {
832
837
  background-color: #FFFFFF;
@@ -868,12 +873,8 @@ button {
868
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 ");
869
874
  margin-right: 16px;
870
875
  }
871
- .u-multiselectbox-option:first-child {
872
- border-top-left-radius: 10px;
873
- }
874
876
  .u-multiselectbox-option:last-child {
875
877
  border-bottom: none;
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: 1.5rem 3.6rem;
1670
+ padding: 20px 50px;
1671
+ border-radius: 10px;
1672
+ background-color: #FFFFFF;
1668
1673
  }
1669
1674
  .u-pagination__result,
1670
1675
  .u-pagination__limits,
@@ -2766,7 +2771,7 @@ button {
2766
2771
  overflow: hidden;
2767
2772
  overflow-y: auto;
2768
2773
  }
2769
- .u-modal.active {
2774
+ .u-modal-active {
2770
2775
  transform: scale(1);
2771
2776
  }
2772
2777
  .u-modal__container {
@@ -2791,6 +2796,8 @@ button {
2791
2796
  .u-menu-list {
2792
2797
  margin: 0;
2793
2798
  padding: 0;
2799
+ overflow-y: auto;
2800
+ max-height: 100vh;
2794
2801
  }
2795
2802
  .u-menu-list-item {
2796
2803
  display: flex;
@@ -2913,6 +2920,8 @@ button {
2913
2920
  .u-collapsible-menu-list {
2914
2921
  margin: 0;
2915
2922
  padding: 0;
2923
+ overflow-y: auto;
2924
+ max-height: 100vh;
2916
2925
  }
2917
2926
  .u-collapsible-menu-list-item {
2918
2927
  display: flex;
@@ -3221,14 +3230,14 @@ button {
3221
3230
  /* полоса прокрутки (скроллбар) */
3222
3231
  ::-webkit-scrollbar {
3223
3232
  background-color: transparent;
3224
- width: 0.5vw;
3233
+ width: 0.45vw;
3225
3234
  height: 1.5vh;
3226
3235
  }
3227
3236
  /* ползунок скроллбара */
3228
3237
  ::-webkit-scrollbar-thumb {
3229
3238
  background-color: #D3D3D3;
3230
- border-radius: 5px;
3231
- width: 0.5vw;
3239
+ border-radius: 10px;
3240
+ width: 0.45vw;
3232
3241
  height: 1.5vh;
3233
3242
  }
3234
3243
  ::-webkit-scrollbar-thumb:hover {
package/src/main.less CHANGED
@@ -44,15 +44,15 @@ button {
44
44
  /* полоса прокрутки (скроллбар) */
45
45
  ::-webkit-scrollbar {
46
46
  background-color: transparent;
47
- width: 0.5vw;
47
+ width: 0.45vw;
48
48
  height: 1.5vh;
49
49
  }
50
50
 
51
51
  /* ползунок скроллбара */
52
52
  ::-webkit-scrollbar-thumb {
53
53
  background-color: #D3D3D3;
54
- border-radius: 5px;
55
- width: 0.5vw;
54
+ border-radius: 10px;
55
+ width: 0.45vw;
56
56
  height: 1.5vh;
57
57
  }
58
58
 
package/src/styles/components/input.less CHANGED
@@ -278,7 +278,7 @@
278
278
  & ~ .u-multiselectbox-select-icon-arrow {
279
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 ");
280
280
  }
281
- & ~ .u-multiselectbox-options {
281
+ & ~ .u-multiselectbox-options-wrapper {
282
282
  display: block;
283
283
  }
284
284
  }
@@ -322,14 +322,18 @@
322
322
  overflow-y: auto;
323
323
  max-height: 195px;
324
324
  width: 100%;
325
- border-radius: @radius;
326
- z-index: 100;
327
- display: none;
328
- position: absolute;
329
- border: 1px solid @clr-secondary-cold;
330
- margin-top: 2px;
325
+ border-top-left-radius: @radius;
326
+ border-bottom-left-radius: @radius;
331
327
  background-color: #FFFFFF;
332
- // padding-right: 2px;
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
+ }
333
337
  }
334
338
  &-option {
335
339
  background-color: @clr-secondary-empty;
@@ -365,12 +369,8 @@
365
369
  margin-right: 16px;
366
370
  }
367
371
  }
368
- &:first-child {
369
- border-top-left-radius: @radius;
370
- }
371
372
  &:last-child {
372
373
  border-bottom: none;
373
- border-bottom-left-radius: @radius;
374
374
  }
375
375
  &:hover {
376
376
  background-color: #E7F2FF;
package/src/styles/components/menu.less CHANGED
@@ -4,6 +4,8 @@
4
4
  &-list {
5
5
  margin: 0;
6
6
  padding: 0;
7
+ overflow-y: auto;
8
+ max-height: 100vh;
7
9
  &-item {
8
10
  display: flex;
9
11
  cursor: pointer;
@@ -131,6 +133,8 @@
131
133
  &-list {
132
134
  margin: 0;
133
135
  padding: 0;
136
+ overflow-y: auto;
137
+ max-height: 100vh;
134
138
  &-item {
135
139
  display: flex;
136
140
  cursor: pointer;
package/src/styles/components/modal.less CHANGED
@@ -11,7 +11,7 @@
11
11
  transform: scale(0);
12
12
  overflow: hidden;
13
13
  overflow-y: auto;
14
- &.active {
14
+ &-active {
15
15
  transform: scale(1);
16
16
  }
17
17
  &__container {
package/src/styles/components/pagination.less CHANGED
@@ -8,7 +8,9 @@
8
8
  .u-pagination {
9
9
  .flex-container;
10
10
  justify-content: space-between;
11
- padding: 1.5rem 3.6rem;
11
+ padding: 20px 50px;
12
+ border-radius: @radius;
13
+ background-color: @clr-secondary-empty;
12
14
 
13
15
  &__result,
14
16
  &__limits,
package/src/styles/components/switch.less CHANGED
@@ -65,6 +65,8 @@
65
65
  .u-switch-gradient {
66
66
  cursor: pointer;
67
67
  display: flex;
68
+ align-items: center;
69
+ column-gap: 10px;
68
70
  input {
69
71
  display: none;
70
72
  &:checked + div::after {