urfu-ui-kit-vanilla 1.1.13 → 1.1.15

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/main.css +47 -25
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.1.13",
6
+ "version": "1.1.15",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "start": "vite",
package/src/main.css CHANGED
@@ -42,15 +42,15 @@ button {
42
42
  /* полоса прокрутки (скроллбар) */
43
43
  ::-webkit-scrollbar {
44
44
  background-color: transparent;
45
- width: 0.45vw;
46
- height: 1vh;
45
+ width: clamp(7px, 0.01vw, 16px);
46
+ height: clamp(7px, 0.01vh, 16px);
47
47
  }
48
48
  /* ползунок скроллбара */
49
49
  ::-webkit-scrollbar-thumb {
50
50
  background-color: #D3D3D3;
51
51
  border-radius: 10px;
52
- width: 0.45vw;
53
- height: 1vh;
52
+ width: clamp(7px, 0.01vw, 16px);
53
+ height: clamp(7px, 0.01vh, 16px);
54
54
  }
55
55
  ::-webkit-scrollbar-thumb:hover {
56
56
  background-color: #7A7A7A;
@@ -254,6 +254,9 @@ button {
254
254
  .u-button-cross:hover {
255
255
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='26' transform='rotate(90 26 26)' fill='white'/%3E%3Cpath d='M20 20L31.5 32M32 20L20 32' stroke='%231E4391' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
256
256
  }
257
+ .u-button-icon-left {
258
+ flex-direction: row-reverse;
259
+ }
257
260
  .u-button-medium {
258
261
  height: 44px;
259
262
  }
@@ -294,13 +297,24 @@ button {
294
297
  }
295
298
  .u-button-text-icon-left {
296
299
  flex-direction: row-reverse;
300
+ font-weight: 400;
297
301
  }
298
302
  .u-button-text-icon-left .u-icon {
299
303
  margin-left: 0;
300
304
  margin-right: 8px;
301
305
  }
306
+ .u-button-text-table {
307
+ color: #748AB9;
308
+ }
309
+ .u-button-text-table:hover,
310
+ .u-button-text-table:focus {
311
+ color: #0F2B5E;
312
+ }
313
+ .u-button-text-table:disabled {
314
+ cursor: not-allowed;
315
+ color: #CAD1E1;
316
+ }
302
317
  .u-button-text-danger {
303
- font-weight: 400;
304
318
  color: #E54B6A;
305
319
  }
306
320
  .u-button-text-danger:hover,
@@ -311,6 +325,17 @@ button {
311
325
  cursor: not-allowed;
312
326
  color: #D995A2;
313
327
  }
328
+ .u-button-text-danger-table {
329
+ color: #F58380;
330
+ }
331
+ .u-button-text-danger-table:hover,
332
+ .u-button-text-danger-table:focus {
333
+ color: #E54B6A;
334
+ }
335
+ .u-button-text-danger-table:disabled {
336
+ cursor: not-allowed;
337
+ color: #FE514D1F;
338
+ }
314
339
  .u-input {
315
340
  height: 48px;
316
341
  padding: 14px 16px;
@@ -731,7 +756,7 @@ button {
731
756
  position: absolute;
732
757
  }
733
758
  .u-selectbox-options::-webkit-scrollbar {
734
- width: calc(0.45vw + 4px);
759
+ width: calc(clamp(7px, 0.01vw, 16px) + 3px);
735
760
  }
736
761
  .u-selectbox-options::-webkit-scrollbar-thumb {
737
762
  background-clip: content-box;
@@ -769,7 +794,7 @@ button {
769
794
  padding: 8px 16px 7px 16px;
770
795
  }
771
796
  .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select::-webkit-scrollbar {
772
- width: calc(0.45vw + 4px);
797
+ width: calc(clamp(7px, 0.01vw, 16px) + 3px);
773
798
  }
774
799
  .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select::-webkit-scrollbar-thumb {
775
800
  background-clip: content-box;
@@ -807,7 +832,7 @@ button {
807
832
  transition-duration: 0.15s;
808
833
  transition-timing-function: ease-in-out;
809
834
  border: 1px solid #D3D3D3;
810
- max-height: 132px;
835
+ max-height: 131px;
811
836
  overflow: auto;
812
837
  line-height: 30px;
813
838
  position: relative;
@@ -913,7 +938,7 @@ button {
913
938
  color: #A7A7A7;
914
939
  }
915
940
  .u-multiselectbox-select::-webkit-scrollbar {
916
- width: calc(0.45vw + 4px);
941
+ width: calc(clamp(7px, 0.01vw, 16px) + 3px);
917
942
  }
918
943
  .u-multiselectbox-select::-webkit-scrollbar-thumb {
919
944
  background-clip: content-box;
@@ -1011,7 +1036,7 @@ button {
1011
1036
  width: 100%;
1012
1037
  }
1013
1038
  .u-multiselectbox-options::-webkit-scrollbar {
1014
- width: calc(0.45vw + 4px);
1039
+ width: calc(clamp(7px, 0.01vw, 16px) + 3px);
1015
1040
  }
1016
1041
  .u-multiselectbox-options::-webkit-scrollbar-thumb {
1017
1042
  background-clip: content-box;
@@ -1087,9 +1112,7 @@ button {
1087
1112
  }
1088
1113
  .u-multiselectbox-simple-select {
1089
1114
  cursor: pointer;
1090
- max-height: 132px;
1091
1115
  overflow: auto;
1092
- height: 48px;
1093
1116
  padding: 14px 16px;
1094
1117
  border-radius: 10px;
1095
1118
  font-weight: 400;
@@ -1106,8 +1129,7 @@ button {
1106
1129
  padding: 8px 16px 7px 16px;
1107
1130
  display: flex;
1108
1131
  flex-wrap: wrap;
1109
- min-height: 48px;
1110
- height: 100%;
1132
+ height: 48px;
1111
1133
  grid-row-gap: 8px;
1112
1134
  grid-column-gap: 4px;
1113
1135
  padding-right: 75px;
@@ -1259,7 +1281,7 @@ button {
1259
1281
  width: 100%;
1260
1282
  }
1261
1283
  .u-multiselectbox-simple-options::-webkit-scrollbar {
1262
- width: calc(0.45vw + 4px);
1284
+ width: calc(clamp(7px, 0.01vw, 16px) + 3px);
1263
1285
  }
1264
1286
  .u-multiselectbox-simple-options::-webkit-scrollbar-thumb {
1265
1287
  background-clip: content-box;
@@ -1797,20 +1819,20 @@ button {
1797
1819
  .u-radio input {
1798
1820
  display: none;
1799
1821
  }
1800
- .u-radio input:hover + div {
1822
+ .u-radio input:hover + div.u-radio-input {
1801
1823
  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='7.5' stroke='%231E4391'/%3E%3C/svg%3E%0A");
1802
1824
  }
1803
- .u-radio input:checked + div {
1825
+ .u-radio input:checked + div.u-radio-input {
1804
1826
  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='7.5' stroke='%231E4391'/%3E%3Crect x='4' y='4' width='8' height='8' rx='4' fill='%231E4391'/%3E%3C/svg%3E%0A");
1805
1827
  }
1806
- .u-radio input:disabled + div {
1828
+ .u-radio input:disabled + div.u-radio-input {
1807
1829
  cursor: not-allowed;
1808
1830
  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='7.5' fill='%23F6F6F6' stroke='%23D3D3D3'/%3E%3C/svg%3E%0A");
1809
1831
  }
1810
- .u-radio input:disabled:checked + div {
1832
+ .u-radio input:disabled:checked + div.u-radio-input {
1811
1833
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23F6F6F6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%23D3D3D3'/%3E%3Crect x='4' y='4' width='8' height='8' rx='4' fill='%23D3D3D3'/%3E%3C/svg%3E%0A");
1812
1834
  }
1813
- .u-radio div {
1835
+ .u-radio div.u-radio-input {
1814
1836
  cursor: pointer;
1815
1837
  width: 16px;
1816
1838
  height: 16px;
@@ -1830,20 +1852,20 @@ button {
1830
1852
  .u-checkbox input {
1831
1853
  display: none;
1832
1854
  }
1833
- .u-checkbox input:hover + div {
1855
+ .u-checkbox input:hover + div.u-checkbox-input {
1834
1856
  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='%231E4391'/%3E%3C/svg%3E ");
1835
1857
  }
1836
- .u-checkbox input:checked + div {
1858
+ .u-checkbox input:checked + div.u-checkbox-input {
1837
1859
  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='%231E4391' stroke='%23174496'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3478 4C12.1701 3.9993 11.9926 4.07723 11.8626 4.23169L7.03896 9.96824L4.09412 7.0596C3.82512 6.79422 3.41063 6.81809 3.16843 7.11295C2.92614 7.40781 2.94782 7.86275 3.21692 8.12813L6.5806 11.4504C6.87819 11.7443 7.36472 11.7162 7.62643 11.3899V11.3899L8.01435 10.9315L12.8264 5.20614C13.0718 4.91409 13.055 4.45985 12.7889 4.19026C12.6637 4.06389 12.5056 4.00071 12.3478 4Z' fill='white'/%3E%3C/svg%3E ");
1838
1860
  }
1839
- .u-checkbox input:disabled + div {
1861
+ .u-checkbox input:disabled + div.u-checkbox-input {
1840
1862
  cursor: not-allowed;
1841
1863
  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='%23F6F6F6' stroke='%23D3D3D3'/%3E%3C/svg%3E ");
1842
1864
  }
1843
- .u-checkbox input:disabled:checked + div {
1865
+ .u-checkbox input:disabled:checked + div.u-checkbox-input {
1844
1866
  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 width='16' height='16' rx='2' fill='%23D3D3D3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3478 4C12.1701 3.9993 11.9926 4.07723 11.8626 4.23169L7.03896 9.96824L4.09412 7.0596C3.82512 6.79422 3.41063 6.81809 3.16843 7.11295C2.92614 7.40781 2.94782 7.86275 3.21692 8.12813L6.5806 11.4504C6.87819 11.7443 7.36472 11.7162 7.62643 11.3899L8.01435 10.9315L12.8264 5.20614C13.0718 4.91409 13.055 4.45985 12.7889 4.19026C12.6637 4.06389 12.5056 4.00071 12.3478 4Z' fill='%23F6F6F6'/%3E%3C/svg%3E%0A");
1845
1867
  }
1846
- .u-checkbox div {
1868
+ .u-checkbox div.u-checkbox-input {
1847
1869
  cursor: pointer;
1848
1870
  min-width: 16px;
1849
1871
  height: 16px;