urfu-ui-kit-vanilla 1.0.48 → 1.0.49

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.48",
+  "version": "1.0.49",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -16,9 +16,6 @@
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   },
-  "dependencies": {
-    "air-datepicker": "^3.4.0"
-  },
   "files": [
     "src/main.css",
     "src/ui-icons.css",

package/src/main.css

@@ -23,6 +23,9 @@
 }
 * {
   box-sizing: border-box;
+  transition-property: color, background-color, border-color, background-image, box-shadow;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
 }
 p,
 h1,
@@ -118,9 +121,6 @@ button {
   column-gap: 8px;
   justify-content: center;
   align-items: center;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   color: white;
   background-color: #1E4391;
 }
@@ -217,9 +217,6 @@ button {
   column-gap: 8px;
   justify-content: center;
   align-items: center;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   padding: 0;
   width: 52px;
   height: 52px;
@@ -249,9 +246,6 @@ button {
   align-items: center;
   white-space: nowrap;
   cursor: pointer;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   color: #1E4391;
 }
 .u-button-text:hover,
@@ -301,9 +295,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #D3D3D3;
 }
 .u-input:hover,
@@ -345,9 +336,6 @@ button {
   display: none;
 }
 .u-input[type="search"]::-webkit-search-cancel-button {
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: pointer;
   -webkit-appearance: none;
   width: 12px;
@@ -369,9 +357,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #EF302B;
 }
 .u-input-required:hover,
@@ -416,9 +401,6 @@ button {
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%23748AB9'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-number .u-number-down:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
@@ -437,9 +419,6 @@ button {
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%23748AB9'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   transform: rotate(180deg);
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-number .u-number-up:hover {
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
@@ -474,9 +453,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #D3D3D3;
   position: relative;
 }
@@ -519,9 +495,6 @@ button {
   display: none;
 }
 .u-selectbox-select[type="search"]::-webkit-search-cancel-button {
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: pointer;
   -webkit-appearance: none;
   width: 12px;
@@ -543,9 +516,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #EF302B;
 }
 .u-selectbox-select-required:hover,
@@ -588,9 +558,6 @@ button {
   height: 12px;
   right: 20px;
   top: calc(50% - 7px);
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-selectbox-select-icon-cross {
   position: absolute;
@@ -601,9 +568,6 @@ button {
   height: 12px;
   right: 44px;
   top: calc(50% - 5px);
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-selectbox-select-icon-cross:hover {
   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.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
@@ -697,9 +661,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #D3D3D3;
   min-height: 48px;
   height: 100%;
@@ -745,9 +706,6 @@ button {
   display: none;
 }
 .u-multiselectbox-select-wrapper[type="search"]::-webkit-search-cancel-button {
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: pointer;
   -webkit-appearance: none;
   width: 12px;
@@ -769,9 +727,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #EF302B;
 }
 .u-multiselectbox-select-wrapper-required:hover,
@@ -861,9 +816,6 @@ button {
   height: 12px;
   right: 46px;
   top: 19px;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-multiselectbox-select-icon-cross:hover {
   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.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
@@ -929,7 +881,6 @@ button {
   min-width: 16px;
   height: 16px;
   position: relative;
-  transition: all 0.15s ease-out;
   background-repeat: no-repeat;
   top: 2px;
   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 ");
@@ -976,9 +927,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #D3D3D3;
   position: relative;
   padding: 8px 16px 7px 16px;
@@ -1030,9 +978,6 @@ button {
   display: none;
 }
 .u-multiselectbox-simple-select[type="search"]::-webkit-search-cancel-button {
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: pointer;
   -webkit-appearance: none;
   width: 12px;
@@ -1054,9 +999,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   border: 1px solid #EF302B;
 }
 .u-multiselectbox-simple-select-required:hover,
@@ -1116,9 +1058,6 @@ button {
   height: 12px;
   right: 44px;
   top: 19px;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-multiselectbox-simple-select-icon-cross:hover {
   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.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
@@ -1177,7 +1116,6 @@ button {
   min-width: 16px;
   height: 16px;
   position: relative;
-  transition: all 0.15s ease-out;
   background-repeat: no-repeat;
   top: 2px;
   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 ");
@@ -1216,9 +1154,6 @@ button {
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.728 4C13.6396 4 16 6.36036 16 9.272C16 12.1836 13.6396 14.544 10.728 14.544C9.2719 14.544 7.95527 13.955 7.00013 12.9999C6.04499 12.0447 5.456 10.7281 5.456 9.272C5.456 6.36036 7.81635 4 10.728 4ZM18 9.272C18 5.25579 14.7442 2 10.728 2C6.71178 2 3.456 5.25579 3.456 9.272C3.456 10.9191 4.00448 12.4394 4.92744 13.6583L1.58579 17L3 18.4142L6.34165 15.0726C7.56063 15.9955 9.0809 16.544 10.728 16.544C14.7442 16.544 18 13.2882 18 9.272Z' fill='%231E4391'/%3E%3C/svg%3E ");
   background-repeat: no-repeat;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
 }
 .u-password {
   position: relative;
@@ -1417,9 +1352,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: text;
   display: inline-block;
   min-height: 48px;
@@ -1471,9 +1403,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: text;
   display: inline-block;
   min-height: 48px;
@@ -1525,9 +1454,6 @@ button {
   color: #222222;
   background-color: #FFFFFF;
   width: 100%;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   cursor: pointer;
   border: 1px solid #D3D3D3;
   background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7666_4018)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H4ZM0 6C0 3.79086 1.79086 2 4 2H16C18.2091 2 20 3.79086 20 6V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V6Z' fill='%231E4391'/%3E%3Cpath d='M5 1C5 0.447715 5.44772 0 6 0C6.55228 0 7 0.447715 7 1V5C7 5.55228 6.55228 6 6 6C5.44772 6 5 5.55228 5 5V1Z' fill='%231E4391'/%3E%3Cpath d='M13 1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V5C15 5.55228 14.5523 6 14 6C13.4477 6 13 5.55228 13 5V1Z' fill='%231E4391'/%3E%3Cpath d='M3 9C3 8.44772 3.44772 8 4 8H16C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10H4C3.44772 10 3 9.55228 3 9Z' fill='%231E4391'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7666_4018'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ") no-repeat;
@@ -1675,7 +1601,6 @@ button {
   width: 16px;
   height: 16px;
   position: relative;
-  transition: all 0.15s ease-in-out;
   background-repeat: no-repeat;
   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='%23D3D3D3'/%3E%3C/svg%3E%0A");
 }
@@ -1710,7 +1635,6 @@ button {
   min-width: 16px;
   height: 16px;
   position: relative;
-  transition: all 0.15s ease-out;
   background-repeat: no-repeat;
   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 ");
 }
@@ -1798,9 +1722,6 @@ button {
   padding: 0 18px;
   font-size: 16px;
   font-weight: 600;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   color: #A7A7A7;
   background-color: transparent;
   border: 2px solid #D3D3D3;
@@ -1835,9 +1756,6 @@ button {
   border-bottom: 2px solid transparent;
   font-size: 16px;
   font-weight: 400;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   background-color: transparent;
   color: #A7A7A7;
   border-bottom: 1px solid #A7A7A7;
@@ -1863,9 +1781,6 @@ button {
   border-bottom: 2px solid transparent;
   font-size: 16px;
   font-weight: 400;
-  transition-property: color, background-color, border-color, background-image;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
   background-color: transparent;
   color: #748AB9;
 }
@@ -2084,6 +1999,9 @@ button {
   border: none;
   outline: none;
 }
+.u-icon {
+  transition: none;
+}
 .u-status {
   display: flex;
   justify-content: center;
@@ -2096,7 +2014,6 @@ button {
   height: 20px;
   padding: 0 8px;
   border-radius: 8px;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 .u-status.u-status-large {
   line-height: 1.4;