urfu-ui-kit-vanilla 1.1.22 → 1.2.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.1.22",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "start": "vite",

package/src/main.css

@@ -5,21 +5,21 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
 }
 * {
   box-sizing: border-box;
@@ -761,9 +761,9 @@ button {
   width: calc(clamp(7px, 0.01vw, 16px) + 3px);
 }
 .u-selectbox-options::-webkit-scrollbar-thumb {
+  height: calc(clamp(7px, 0.01vh, 16px) + 3px);
   background-clip: content-box;
-  border-right: 2px solid transparent;
-  border-left: 2px solid transparent;
+  border: 2px solid transparent;
 }
 .u-selectbox-option {
   cursor: pointer;
@@ -800,9 +800,9 @@ button {
   width: calc(clamp(7px, 0.01vw, 16px) + 3px);
 }
 .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select::-webkit-scrollbar-thumb {
+  height: calc(clamp(7px, 0.01vh, 16px) + 3px);
   background-clip: content-box;
-  border-right: 2px solid transparent;
-  border-left: 2px solid transparent;
+  border: 2px solid transparent;
 }
 .u-multiselectbox.u-multiselectbox-disabled .u-multiselectbox-select .u-multiselectbox-select-cross {
   display: none;
@@ -945,9 +945,9 @@ button {
   width: calc(clamp(7px, 0.01vw, 16px) + 3px);
 }
 .u-multiselectbox-select::-webkit-scrollbar-thumb {
+  height: calc(clamp(7px, 0.01vh, 16px) + 3px);
   background-clip: content-box;
-  border-right: 2px solid transparent;
-  border-left: 2px solid transparent;
+  border: 2px solid transparent;
 }
 .u-multiselectbox-select-item {
   text-overflow: ellipsis;
@@ -1044,9 +1044,9 @@ button {
   width: calc(clamp(7px, 0.01vw, 16px) + 3px);
 }
 .u-multiselectbox-options::-webkit-scrollbar-thumb {
+  height: calc(clamp(7px, 0.01vh, 16px) + 3px);
   background-clip: content-box;
-  border-right: 2px solid transparent;
-  border-left: 2px solid transparent;
+  border: 2px solid transparent;
 }
 .u-multiselectbox-option {
   background-color: #FFFFFF;
@@ -1290,9 +1290,9 @@ button {
   width: calc(clamp(7px, 0.01vw, 16px) + 3px);
 }
 .u-multiselectbox-simple-options::-webkit-scrollbar-thumb {
+  height: calc(clamp(7px, 0.01vh, 16px) + 3px);
   background-clip: content-box;
-  border-right: 2px solid transparent;
-  border-left: 2px solid transparent;
+  border: 2px solid transparent;
 }
 .u-multiselectbox-simple-option {
   background-color: #FFFFFF;
@@ -1730,18 +1730,58 @@ button {
 .u-switch input {
   display: none;
 }
-.u-switch input:checked + div::after {
-  left: 60%;
+.u-switch input:checked + .u-switch__point::after {
+  left: calc(100% - 23.2px);
 }
-.u-switch input:disabled + div {
+.u-switch input:disabled + .u-switch__point {
   cursor: not-allowed;
-  background-color: #D3D3D3;
+  border-color: #D3D3D3;
+  background-color: #F9F9F9;
+}
+.u-switch input:disabled + .u-switch__point::after {
+  background-color: #A7A7A7;
+}
+.u-switch input:disabled:hover + .u-switch__point {
+  cursor: not-allowed;
+  border-color: #D3D3D3;
+  background-color: #F9F9F9;
+}
+.u-switch input:disabled:hover + .u-switch__point::after {
+  background-color: #A7A7A7;
+}
+.u-switch input:hover + .u-switch__point {
+  border-color: #2452B3;
+}
+.u-switch input:hover + .u-switch__point::after {
+  background-color: #2452B3;
 }
 .u-switch input:checked + .u-switch__point {
   background-color: #1E4391;
+  border-color: #1E4391;
 }
-.u-switch input:checked + .u-switch__point:hover {
-  background-color: #0F2B5E;
+.u-switch input:checked + .u-switch__point::after {
+  background-color: #FFFFFF;
+}
+.u-switch input:checked:disabled + .u-switch__point {
+  background-color: #D3D3D3;
+  border-color: #D3D3D3;
+}
+.u-switch input:checked:disabled + .u-switch__point::after {
+  background-color: #FFFFFF;
+}
+.u-switch input:checked:disabled:hover + .u-switch__point {
+  background-color: #D3D3D3;
+  border-color: #D3D3D3;
+}
+.u-switch input:checked:disabled:hover + .u-switch__point::after {
+  background-color: #FFFFFF;
+}
+.u-switch input:checked:hover + .u-switch__point {
+  background-color: #2452B3;
+  border-color: #2452B3;
+}
+.u-switch input:checked:hover + .u-switch__point::after {
+  background-color: #FFFFFF;
 }
 .u-switch__point {
   cursor: pointer;
@@ -1750,19 +1790,20 @@ button {
   position: relative;
   border-radius: 16px;
   transition: all 0.2s ease-in-out;
-  background-color: #D3D3D3;
+  background-color: #FFFFFF;
+  border: 1.4px solid #1E4391;
 }
 .u-switch__point::after {
   content: "";
   display: block;
   position: absolute;
-  left: 4px;
-  top: 4px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background-color: #FFFFFF;
   transition: all 0.2s ease-in-out;
+  background-color: #1E4391;
+  margin: 2.6px;
+  left: 0px;
 }
 .u-switch-gradient {
   cursor: pointer;
@@ -1773,10 +1814,10 @@ button {
 .u-switch-gradient input {
   display: none;
 }
-.u-switch-gradient input:checked + div::after {
-  left: 60%;
+.u-switch-gradient input:checked + .u-switch-gradient__point::after {
+  left: calc(100% - 26px);
 }
-.u-switch-gradient input:disabled + div {
+.u-switch-gradient input:disabled + .u-switch-gradient__point {
   cursor: not-allowed;
   background-image: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
 }
@@ -1785,6 +1826,10 @@ button {
   animation-name: from;
   animation-duration: 0.2s;
 }
+.u-switch-gradient input:checked:disabled + .u-switch-gradient__point {
+  cursor: not-allowed;
+  background-image: linear-gradient(0, #D3D3D3 100%, #D3D3D3 100%, #D3D3D3 100%);
+}
 .u-switch-gradient__point {
   cursor: pointer;
   width: 54px;
@@ -1800,13 +1845,38 @@ button {
   content: "";
   display: block;
   position: absolute;
-  left: 4px;
-  top: 4px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background-color: #FFFFFF;
   transition: all 0.2s ease-in-out;
+  margin: 4px;
+  left: 0px;
+  background-color: #FFFFFF;
+}
+.u-switch-small .u-switch__point,
+.u-switch-small .u-switch-gradient__point {
+  width: 42px;
+  height: 20px;
+}
+.u-switch-small .u-switch__point::after,
+.u-switch-small .u-switch-gradient__point::after {
+  width: 14px;
+  height: 14px;
+}
+.u-switch-small .u-switch__point {
+  border: 1px solid #1E4391;
+}
+.u-switch-small .u-switch__point::after {
+  margin: 2px;
+}
+.u-switch-small .u-switch-gradient__point::after {
+  margin: 3px;
+}
+.u-switch-small input:checked + .u-switch__point::after {
+  left: calc(100% - 18px);
+}
+.u-switch-small input:checked + .u-switch-gradient__point::after {
+  left: calc(100% - 20px);
 }
 @keyframes to {
   0% {
@@ -3832,6 +3902,328 @@ button {
 .u-fw-600 {
   font-weight: 600;
 }
+.up4 {
+  padding: 4px;
+}
+.up8 {
+  padding: 8px;
+}
+.up12 {
+  padding: 12px;
+}
+.up16 {
+  padding: 16px;
+}
+.up24 {
+  padding: 24px;
+}
+.up32 {
+  padding: 32px;
+}
+.up64 {
+  padding: 64px;
+}
+.upl4 {
+  padding-left: 4px;
+}
+.upl8 {
+  padding-left: 8px;
+}
+.upl12 {
+  padding-left: 12px;
+}
+.upl16 {
+  padding-left: 16px;
+}
+.upl24 {
+  padding-left: 24px;
+}
+.upl32 {
+  padding-left: 32px;
+}
+.upl64 {
+  padding-left: 64px;
+}
+.upr4 {
+  padding-right: 4px;
+}
+.upr8 {
+  padding-right: 8px;
+}
+.upr12 {
+  padding-right: 12px;
+}
+.upr16 {
+  padding-right: 16px;
+}
+.upr24 {
+  padding-right: 24px;
+}
+.upr32 {
+  padding-right: 32px;
+}
+.upr64 {
+  padding-right: 64px;
+}
+.upb4 {
+  padding-bottom: 4px;
+}
+.upb8 {
+  padding-bottom: 8px;
+}
+.upb12 {
+  padding-bottom: 12px;
+}
+.upb16 {
+  padding-bottom: 16px;
+}
+.upb24 {
+  padding-bottom: 24px;
+}
+.upb32 {
+  padding-bottom: 32px;
+}
+.upb64 {
+  padding-bottom: 64px;
+}
+.upt4 {
+  padding-top: 4px;
+}
+.upt8 {
+  padding-top: 8px;
+}
+.upt12 {
+  padding-top: 12px;
+}
+.upt16 {
+  padding-top: 16px;
+}
+.upt24 {
+  padding-top: 24px;
+}
+.upt32 {
+  padding-top: 32px;
+}
+.upt64 {
+  padding-top: 64px;
+}
+.upx4 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.upx8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.upx12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.upx16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.upx24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.upx32 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+.upx64 {
+  padding-left: 64px;
+  padding-right: 64px;
+}
+.upy4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.upy8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.upy12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.upy16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.upy24 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+.upy32 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+.upy64 {
+  padding-top: 64px;
+  padding-bottom: 64px;
+}
+.um4 {
+  margin: 4px;
+}
+.um8 {
+  margin: 8px;
+}
+.um12 {
+  margin: 12px;
+}
+.um16 {
+  margin: 16px;
+}
+.um24 {
+  margin: 24px;
+}
+.um32 {
+  margin: 32px;
+}
+.um64 {
+  margin: 64px;
+}
+.uml4 {
+  margin-left: 4px;
+}
+.uml8 {
+  margin-left: 8px;
+}
+.uml12 {
+  margin-left: 12px;
+}
+.uml16 {
+  margin-left: 16px;
+}
+.uml24 {
+  margin-left: 24px;
+}
+.uml32 {
+  margin-left: 32px;
+}
+.uml64 {
+  margin-left: 64px;
+}
+.umr4 {
+  margin-right: 4px;
+}
+.umr8 {
+  margin-right: 8px;
+}
+.umr12 {
+  margin-right: 12px;
+}
+.umr16 {
+  margin-right: 16px;
+}
+.umr24 {
+  margin-right: 24px;
+}
+.umr32 {
+  margin-right: 32px;
+}
+.umr64 {
+  margin-right: 64px;
+}
+.umb4 {
+  margin-bottom: 4px;
+}
+.umb8 {
+  margin-bottom: 8px;
+}
+.umb12 {
+  margin-bottom: 12px;
+}
+.umb16 {
+  margin-bottom: 16px;
+}
+.umb24 {
+  margin-bottom: 24px;
+}
+.umb32 {
+  margin-bottom: 32px;
+}
+.umb64 {
+  margin-bottom: 64px;
+}
+.umt4 {
+  margin-top: 4px;
+}
+.umt8 {
+  margin-top: 8px;
+}
+.umt12 {
+  margin-top: 12px;
+}
+.umt16 {
+  margin-top: 16px;
+}
+.umt24 {
+  margin-top: 24px;
+}
+.umt32 {
+  margin-top: 32px;
+}
+.umt64 {
+  margin-top: 64px;
+}
+.umx4 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.umx8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.umx12 {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+.umx16 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+.umx24 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+.umx32 {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+.umx64 {
+  margin-left: 64px;
+  margin-right: 64px;
+}
+.umy4 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+.umy8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.umy12 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.umy16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.umy24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+.umy32 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+.umy64 {
+  margin-top: 64px;
+  margin-bottom: 64px;
+}
 h1,
 .h1 {
   font-weight: 600;