urfu-ui-kit-vanilla 1.1.23 → 1.3.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.1.23",
+  "version": "1.3.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/v30/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/v30/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/v30/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
 }
 * {
   box-sizing: border-box;
@@ -79,7 +79,7 @@ button {
   font-weight: 400;
   font-stretch: normal;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
@@ -87,7 +87,7 @@ button {
   font-weight: 600;
   font-stretch: normal;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Open Sans';
@@ -95,7 +95,7 @@ button {
   font-weight: 700;
   font-stretch: normal;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
+  src: url(https://fonts.gstatic.com/s/opensans/v43/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype');
 }
 * {
   font-family: 'Montserrat';
@@ -127,7 +127,7 @@ button {
 .u-button:hover {
   background-color: #0F2B5E;
 }
-.u-button:focus {
+.u-button:active {
   background-color: #0F2B5E;
 }
 .u-button:disabled {
@@ -147,7 +147,7 @@ button {
   border: 2px solid #1E4391;
 }
 .u-button-outline:hover,
-.u-button-outline:focus {
+.u-button-outline:active {
   background-color: #0F2B5E;
   color: #FFFFFF;
   border: 2px solid #0F2B5E;
@@ -163,7 +163,7 @@ button {
   background-color: #EF302B;
 }
 .u-button-danger:hover,
-.u-button-danger:focus {
+.u-button-danger:active {
   background-color: #C0231F;
 }
 .u-button-danger:disabled {
@@ -176,7 +176,7 @@ button {
   border: 2px solid #EF302B;
 }
 .u-button-danger-outline:hover,
-.u-button-danger-outline:focus {
+.u-button-danger-outline:active {
   background-color: #C0231F;
   color: #FFFFFF;
   border: 2px solid #C0231F;
@@ -193,7 +193,7 @@ button {
   color: #222222;
 }
 .u-button-simple:hover,
-.u-button-simple:focus {
+.u-button-simple:active {
   border: 2px solid #D3D3D3;
   background-color: #D3D3D3;
   color: #222222;
@@ -212,7 +212,7 @@ button {
   width: 48px;
 }
 .u-button-icon:hover,
-.u-button-icon:focus {
+.u-button-icon:active {
   border: 1px solid #1E4391;
   background-color: #FFFFFF;
   color: #1E4391;
@@ -281,7 +281,7 @@ button {
   color: #1E4391;
 }
 .u-button-text:hover,
-.u-button-text:focus {
+.u-button-text:active {
   color: #0F2B5E;
 }
 .u-button-text:disabled {
@@ -308,7 +308,7 @@ button {
   color: #748AB9;
 }
 .u-button-text-table:hover,
-.u-button-text-table:focus {
+.u-button-text-table:active {
   color: #0F2B5E;
 }
 .u-button-text-table:disabled {
@@ -319,7 +319,7 @@ button {
   color: #E54B6A;
 }
 .u-button-text-danger:hover,
-.u-button-text-danger:focus {
+.u-button-text-danger:active {
   color: #B62C48;
 }
 .u-button-text-danger:disabled {
@@ -331,7 +331,7 @@ button {
   color: #F58380;
 }
 .u-button-text-danger-table:hover,
-.u-button-text-danger-table:focus {
+.u-button-text-danger-table:active {
   color: #E54B6A;
 }
 .u-button-text-danger-table:disabled {
@@ -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;