urfu-ui-kit-vanilla 1.0.49 → 1.0.51

package/package.json

@@ -3,7 +3,7 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.49",
+  "version": "1.0.51",
   "type": "module",
   "scripts": {
     "start": "vite",
@@ -17,8 +17,11 @@
     "vite": "^4.2.0"
   },
   "files": [
+    "src/main.ts",
+    "src/main.d.ts",
     "src/main.css",
     "src/ui-icons.css",
-    "src/fonts/*"
+    "src/fonts/*",
+    "src/js/*"
   ]
 }

package/src/js/upward.js

@@ -0,0 +1,13 @@
+window.addEventListener('scroll', () => {
+    var scroll = document.querySelector('.u-upward');
+    scroll.classList.toggle("active", window.scrollY > 500)
+})
+
+const uScrollTop = () => {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    })
+}
+
+module.exports.uScrollTop = uScrollTop;

package/src/main.css

@@ -23,9 +23,6 @@
 }
 * {
   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,
@@ -121,6 +118,9 @@ 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,6 +217,9 @@ 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;
@@ -246,6 +249,9 @@ 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,
@@ -295,6 +301,9 @@ 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,
@@ -336,6 +345,9 @@ 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;
@@ -357,6 +369,9 @@ 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,
@@ -401,6 +416,9 @@ 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");
@@ -419,6 +437,9 @@ 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");
@@ -453,6 +474,9 @@ 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;
 }
@@ -495,6 +519,9 @@ 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;
@@ -516,6 +543,9 @@ 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,
@@ -558,6 +588,9 @@ 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;
@@ -568,6 +601,9 @@ 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 ");
@@ -661,6 +697,9 @@ 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%;
@@ -706,6 +745,9 @@ 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;
@@ -727,6 +769,9 @@ 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,
@@ -816,6 +861,9 @@ 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 ");
@@ -881,6 +929,7 @@ 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 ");
@@ -927,6 +976,9 @@ 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;
@@ -978,6 +1030,9 @@ 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;
@@ -999,6 +1054,9 @@ 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,
@@ -1058,6 +1116,9 @@ 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 ");
@@ -1116,6 +1177,7 @@ 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 ");
@@ -1154,6 +1216,9 @@ 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;
@@ -1352,6 +1417,9 @@ 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;
@@ -1403,6 +1471,9 @@ 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;
@@ -1454,10 +1525,14 @@ 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;
   background-position: top 14px right 16px;
+  padding-right: 50px;
 }
 .u-calendar:hover,
 .u-calendar.active {
@@ -1601,6 +1676,7 @@ 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");
 }
@@ -1635,6 +1711,7 @@ 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 ");
 }
@@ -1722,6 +1799,9 @@ 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;
@@ -1756,6 +1836,9 @@ 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;
@@ -1781,6 +1864,9 @@ 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;
 }
@@ -1999,9 +2085,6 @@ button {
   border: none;
   outline: none;
 }
-.u-icon {
-  transition: none;
-}
 .u-status {
   display: flex;
   justify-content: center;

package/src/main.d.ts

@@ -0,0 +1 @@
+declare const ScrollTopTop: Function;

package/src/main.ts

@@ -0,0 +1,13 @@
+// import AirDatepicker from 'air-datepicker';
+// import 'air-datepicker/air-datepicker.css';
+import "./main.css";
+// import "./main.less";
+import "./js/upward.js"
+
+// new AirDatepicker('#airdatepicker', {
+//     toggleSelected: true,
+//     range: true,
+//     position: "bottom right",
+//     inline: true,
+// })
+