urfu-ui-kit-vanilla 2.1.0 → 2.2.0

package/package.json

@@ -3,16 +3,19 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "Apache-2.0",
   "private": false,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "npm-run-all --parallel less:watch vite",
     "build": "vite build && copy LICENSE dist\\",
-    "preview": "vite preview"
+    "less:watch": "chokidar \"src/**/*.less\" -c \"npx lessc src/main.less src/main.css\"",
+    "vite": "vite"
   },
   "devDependencies": {
     "@types/node": "^18.15.11",
+    "chokidar-cli": "^3.0.0",
     "less": "^4.1.3",
+    "npm-run-all": "^4.1.5",
     "typescript": "^4.9.3",
     "vite": "^4.2.0"
   },

package/src/main.css

@@ -1,5 +1,4 @@
 @import "ui-icons.css";
-@import "ui-icons.css";
 * {
   box-sizing: border-box;
 }
@@ -54,126 +53,126 @@ button {
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
   font-weight: 100;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
   font-weight: 200;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
+  src: url('./fonts/montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
   font-weight: 200;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
   font-weight: 600;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
   font-weight: 800;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
   font-weight: 800;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Montserrat';
-  src: url('fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
+  src: url('./fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
   font-weight: 900;
   font-style: italic;
   font-display: swap;
@@ -1454,7 +1453,7 @@ button {
   display: block;
   border: none;
   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-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.6001 4.39941C14.5117 4.39941 16.8721 6.75977 16.8721 9.67141C16.8721 12.5831 14.5117 14.9434 11.6001 14.9434C10.144 14.9434 8.82734 14.3544 7.8722 13.3993C6.91706 12.4441 6.32807 11.1275 6.32807 9.67141C6.32807 6.75977 8.68842 4.39941 11.6001 4.39941ZM18.8721 9.67141C18.8721 5.6552 15.6163 2.39941 11.6001 2.39941C7.58385 2.39941 4.32807 5.6552 4.32807 9.67141C4.32807 11.3185 4.87655 12.8388 5.79951 14.0578L3.16496 16.6923C2.77444 17.0828 2.77444 17.716 3.16496 18.1065C3.55549 18.497 4.18865 18.497 4.57918 18.1065L7.21372 15.472C8.4327 16.3949 9.95297 16.9434 11.6001 16.9434C15.6163 16.9434 18.8721 13.6876 18.8721 9.67141Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   transition-property: color, background-color, border-color, background-image;
   transition-duration: 0.15s;
@@ -3990,6 +3989,33 @@ button {
 .u-fw-600 {
   font-weight: 600;
 }
+.ufw100 {
+  font-weight: 100;
+}
+.ufw200 {
+  font-weight: 200;
+}
+.ufw300 {
+  font-weight: 300;
+}
+.ufw400 {
+  font-weight: 400;
+}
+.ufw500 {
+  font-weight: 500;
+}
+.ufw600 {
+  font-weight: 600;
+}
+.ufw700 {
+  font-weight: 700;
+}
+.ufw800 {
+  font-weight: 800;
+}
+.ufw900 {
+  font-weight: 900;
+}
 .up0 {
   padding: 0px;
 }
@@ -10277,6 +10303,612 @@ h5,
 .ujse {
   justify-self: stretch;
 }
+.ufos0 {
+  font-size: 0px;
+}
+.ulh0 {
+  line-height: 0px;
+}
+.ufos1 {
+  font-size: 1px;
+}
+.ulh1 {
+  line-height: 1px;
+}
+.ufos2 {
+  font-size: 2px;
+}
+.ulh2 {
+  line-height: 2px;
+}
+.ufos3 {
+  font-size: 3px;
+}
+.ulh3 {
+  line-height: 3px;
+}
+.ufos4 {
+  font-size: 4px;
+}
+.ulh4 {
+  line-height: 4px;
+}
+.ufos5 {
+  font-size: 5px;
+}
+.ulh5 {
+  line-height: 5px;
+}
+.ufos6 {
+  font-size: 6px;
+}
+.ulh6 {
+  line-height: 6px;
+}
+.ufos7 {
+  font-size: 7px;
+}
+.ulh7 {
+  line-height: 7px;
+}
+.ufos8 {
+  font-size: 8px;
+}
+.ulh8 {
+  line-height: 8px;
+}
+.ufos9 {
+  font-size: 9px;
+}
+.ulh9 {
+  line-height: 9px;
+}
+.ufos10 {
+  font-size: 10px;
+}
+.ulh10 {
+  line-height: 10px;
+}
+.ufos11 {
+  font-size: 11px;
+}
+.ulh11 {
+  line-height: 11px;
+}
+.ufos12 {
+  font-size: 12px;
+}
+.ulh12 {
+  line-height: 12px;
+}
+.ufos13 {
+  font-size: 13px;
+}
+.ulh13 {
+  line-height: 13px;
+}
+.ufos14 {
+  font-size: 14px;
+}
+.ulh14 {
+  line-height: 14px;
+}
+.ufos15 {
+  font-size: 15px;
+}
+.ulh15 {
+  line-height: 15px;
+}
+.ufos16 {
+  font-size: 16px;
+}
+.ulh16 {
+  line-height: 16px;
+}
+.ufos17 {
+  font-size: 17px;
+}
+.ulh17 {
+  line-height: 17px;
+}
+.ufos18 {
+  font-size: 18px;
+}
+.ulh18 {
+  line-height: 18px;
+}
+.ufos19 {
+  font-size: 19px;
+}
+.ulh19 {
+  line-height: 19px;
+}
+.ufos20 {
+  font-size: 20px;
+}
+.ulh20 {
+  line-height: 20px;
+}
+.ufos21 {
+  font-size: 21px;
+}
+.ulh21 {
+  line-height: 21px;
+}
+.ufos22 {
+  font-size: 22px;
+}
+.ulh22 {
+  line-height: 22px;
+}
+.ufos23 {
+  font-size: 23px;
+}
+.ulh23 {
+  line-height: 23px;
+}
+.ufos24 {
+  font-size: 24px;
+}
+.ulh24 {
+  line-height: 24px;
+}
+.ufos25 {
+  font-size: 25px;
+}
+.ulh25 {
+  line-height: 25px;
+}
+.ufos26 {
+  font-size: 26px;
+}
+.ulh26 {
+  line-height: 26px;
+}
+.ufos27 {
+  font-size: 27px;
+}
+.ulh27 {
+  line-height: 27px;
+}
+.ufos28 {
+  font-size: 28px;
+}
+.ulh28 {
+  line-height: 28px;
+}
+.ufos29 {
+  font-size: 29px;
+}
+.ulh29 {
+  line-height: 29px;
+}
+.ufos30 {
+  font-size: 30px;
+}
+.ulh30 {
+  line-height: 30px;
+}
+.ufos31 {
+  font-size: 31px;
+}
+.ulh31 {
+  line-height: 31px;
+}
+.ufos32 {
+  font-size: 32px;
+}
+.ulh32 {
+  line-height: 32px;
+}
+.ufos33 {
+  font-size: 33px;
+}
+.ulh33 {
+  line-height: 33px;
+}
+.ufos34 {
+  font-size: 34px;
+}
+.ulh34 {
+  line-height: 34px;
+}
+.ufos35 {
+  font-size: 35px;
+}
+.ulh35 {
+  line-height: 35px;
+}
+.ufos36 {
+  font-size: 36px;
+}
+.ulh36 {
+  line-height: 36px;
+}
+.ufos37 {
+  font-size: 37px;
+}
+.ulh37 {
+  line-height: 37px;
+}
+.ufos38 {
+  font-size: 38px;
+}
+.ulh38 {
+  line-height: 38px;
+}
+.ufos39 {
+  font-size: 39px;
+}
+.ulh39 {
+  line-height: 39px;
+}
+.ufos40 {
+  font-size: 40px;
+}
+.ulh40 {
+  line-height: 40px;
+}
+.ufos41 {
+  font-size: 41px;
+}
+.ulh41 {
+  line-height: 41px;
+}
+.ufos42 {
+  font-size: 42px;
+}
+.ulh42 {
+  line-height: 42px;
+}
+.ufos43 {
+  font-size: 43px;
+}
+.ulh43 {
+  line-height: 43px;
+}
+.ufos44 {
+  font-size: 44px;
+}
+.ulh44 {
+  line-height: 44px;
+}
+.ufos45 {
+  font-size: 45px;
+}
+.ulh45 {
+  line-height: 45px;
+}
+.ufos46 {
+  font-size: 46px;
+}
+.ulh46 {
+  line-height: 46px;
+}
+.ufos47 {
+  font-size: 47px;
+}
+.ulh47 {
+  line-height: 47px;
+}
+.ufos48 {
+  font-size: 48px;
+}
+.ulh48 {
+  line-height: 48px;
+}
+.ufos49 {
+  font-size: 49px;
+}
+.ulh49 {
+  line-height: 49px;
+}
+.ufos50 {
+  font-size: 50px;
+}
+.ulh50 {
+  line-height: 50px;
+}
+.ufos51 {
+  font-size: 51px;
+}
+.ulh51 {
+  line-height: 51px;
+}
+.ufos52 {
+  font-size: 52px;
+}
+.ulh52 {
+  line-height: 52px;
+}
+.ufos53 {
+  font-size: 53px;
+}
+.ulh53 {
+  line-height: 53px;
+}
+.ufos54 {
+  font-size: 54px;
+}
+.ulh54 {
+  line-height: 54px;
+}
+.ufos55 {
+  font-size: 55px;
+}
+.ulh55 {
+  line-height: 55px;
+}
+.ufos56 {
+  font-size: 56px;
+}
+.ulh56 {
+  line-height: 56px;
+}
+.ufos57 {
+  font-size: 57px;
+}
+.ulh57 {
+  line-height: 57px;
+}
+.ufos58 {
+  font-size: 58px;
+}
+.ulh58 {
+  line-height: 58px;
+}
+.ufos59 {
+  font-size: 59px;
+}
+.ulh59 {
+  line-height: 59px;
+}
+.ufos60 {
+  font-size: 60px;
+}
+.ulh60 {
+  line-height: 60px;
+}
+.ufos61 {
+  font-size: 61px;
+}
+.ulh61 {
+  line-height: 61px;
+}
+.ufos62 {
+  font-size: 62px;
+}
+.ulh62 {
+  line-height: 62px;
+}
+.ufos63 {
+  font-size: 63px;
+}
+.ulh63 {
+  line-height: 63px;
+}
+.ufos64 {
+  font-size: 64px;
+}
+.ulh64 {
+  line-height: 64px;
+}
+.ufos65 {
+  font-size: 65px;
+}
+.ulh65 {
+  line-height: 65px;
+}
+.ufos66 {
+  font-size: 66px;
+}
+.ulh66 {
+  line-height: 66px;
+}
+.ufos67 {
+  font-size: 67px;
+}
+.ulh67 {
+  line-height: 67px;
+}
+.ufos68 {
+  font-size: 68px;
+}
+.ulh68 {
+  line-height: 68px;
+}
+.ufos69 {
+  font-size: 69px;
+}
+.ulh69 {
+  line-height: 69px;
+}
+.ufos70 {
+  font-size: 70px;
+}
+.ulh70 {
+  line-height: 70px;
+}
+.ufos71 {
+  font-size: 71px;
+}
+.ulh71 {
+  line-height: 71px;
+}
+.ufos72 {
+  font-size: 72px;
+}
+.ulh72 {
+  line-height: 72px;
+}
+.ufos73 {
+  font-size: 73px;
+}
+.ulh73 {
+  line-height: 73px;
+}
+.ufos74 {
+  font-size: 74px;
+}
+.ulh74 {
+  line-height: 74px;
+}
+.ufos75 {
+  font-size: 75px;
+}
+.ulh75 {
+  line-height: 75px;
+}
+.ufos76 {
+  font-size: 76px;
+}
+.ulh76 {
+  line-height: 76px;
+}
+.ufos77 {
+  font-size: 77px;
+}
+.ulh77 {
+  line-height: 77px;
+}
+.ufos78 {
+  font-size: 78px;
+}
+.ulh78 {
+  line-height: 78px;
+}
+.ufos79 {
+  font-size: 79px;
+}
+.ulh79 {
+  line-height: 79px;
+}
+.ufos80 {
+  font-size: 80px;
+}
+.ulh80 {
+  line-height: 80px;
+}
+.ufos81 {
+  font-size: 81px;
+}
+.ulh81 {
+  line-height: 81px;
+}
+.ufos82 {
+  font-size: 82px;
+}
+.ulh82 {
+  line-height: 82px;
+}
+.ufos83 {
+  font-size: 83px;
+}
+.ulh83 {
+  line-height: 83px;
+}
+.ufos84 {
+  font-size: 84px;
+}
+.ulh84 {
+  line-height: 84px;
+}
+.ufos85 {
+  font-size: 85px;
+}
+.ulh85 {
+  line-height: 85px;
+}
+.ufos86 {
+  font-size: 86px;
+}
+.ulh86 {
+  line-height: 86px;
+}
+.ufos87 {
+  font-size: 87px;
+}
+.ulh87 {
+  line-height: 87px;
+}
+.ufos88 {
+  font-size: 88px;
+}
+.ulh88 {
+  line-height: 88px;
+}
+.ufos89 {
+  font-size: 89px;
+}
+.ulh89 {
+  line-height: 89px;
+}
+.ufos90 {
+  font-size: 90px;
+}
+.ulh90 {
+  line-height: 90px;
+}
+.ufos91 {
+  font-size: 91px;
+}
+.ulh91 {
+  line-height: 91px;
+}
+.ufos92 {
+  font-size: 92px;
+}
+.ulh92 {
+  line-height: 92px;
+}
+.ufos93 {
+  font-size: 93px;
+}
+.ulh93 {
+  line-height: 93px;
+}
+.ufos94 {
+  font-size: 94px;
+}
+.ulh94 {
+  line-height: 94px;
+}
+.ufos95 {
+  font-size: 95px;
+}
+.ulh95 {
+  line-height: 95px;
+}
+.ufos96 {
+  font-size: 96px;
+}
+.ulh96 {
+  line-height: 96px;
+}
+.ufos97 {
+  font-size: 97px;
+}
+.ulh97 {
+  line-height: 97px;
+}
+.ufos98 {
+  font-size: 98px;
+}
+.ulh98 {
+  line-height: 98px;
+}
+.ufos99 {
+  font-size: 99px;
+}
+.ulh99 {
+  line-height: 99px;
+}
+.ufos100 {
+  font-size: 100px;
+}
+.ulh100 {
+  line-height: 100px;
+}
 .uw0 {
   width: 0px;
 }
@@ -12104,10 +12736,10 @@ h5,
 .utar {
   text-align: right;
 }
-.uww {
+.uwsn {
   white-space: nowrap;
 }
-.ubw {
+.uwbbw {
   word-break: break-word;
 }
 .uop0 {

package/src/main.ts

@@ -1,3 +1 @@
-import "./main.css";
-// import "./main.less";
-// import "./js/upward.js"
+import "./main.css";