urfu-ui-kit-vanilla 1.0.41 → 1.0.42

package/package.json

@@ -3,10 +3,10 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.41",
+  "version": "1.0.42",
   "type": "module",
   "scripts": {
-    "start": "vite serve playground",
+    "start": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -19,5 +19,11 @@
   "dependencies": {
     "air-datepicker": "^3.3.5"
   },
-  "files": ["src/main.css", "src/ui-icons.css", "src/fonts/*"]
+  "files": [
+    "src/main.ts",
+    "src/js/*",
+    "src/main.css",
+    "src/ui-icons.css",
+    "src/fonts/*"
+  ]
 }

package/src/js/upward.js

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

package/src/main.css

@@ -1,5 +1,26 @@
 @import "ui-icons.css";
 @import "ui-icons.css";
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/montserrat/v26/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');
+}
+@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');
+}
 * {
   box-sizing: border-box;
 }
@@ -1523,13 +1544,21 @@ button {
   transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
   background-color: transparent;
-  color: #545454;
+  color: #A7A7A7;
+  border-bottom: 1px solid #A7A7A7;
+}
+.u-tab-line:hover {
+  color: #748AB9;
+  background-color: #F2F3F5;
+  border-bottom: 1px solid #748AB9;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
 }
-.u-tab-line:hover,
 .u-tab-line:focus,
 .u-tab-line.u-tab-active {
   color: #1E4391;
   border-bottom: 2px solid #1E4391;
+  background-color: transparent;
 }
 .u-tab-line-secondary {
   cursor: pointer;
@@ -1770,7 +1799,7 @@ button {
   white-space: nowrap;
   font-size: 10px;
   line-height: 1.6;
-  font-weight: 400;
+  font-weight: 600;
   height: 20px;
   padding: 0 8px;
   border-radius: 8px;
@@ -3006,7 +3035,7 @@ button {
   height: 100%;
   justify-content: space-between;
   min-height: 188px;
-  padding: 20px;
+  padding: 20px 20px 62px;
   color: #1e4391;
   font-size: 24px;
   font-weight: 600;
@@ -3043,7 +3072,7 @@ button {
   height: 100%;
   justify-content: space-between;
   min-height: 188px;
-  padding: 20px;
+  padding: 20px 20px 62px;
   font-size: 24px;
   font-weight: 600;
   line-height: 28px;
@@ -3069,6 +3098,35 @@ button {
   bottom: 20px;
   right: 20px;
 }
+.u-upward {
+  position: fixed;
+  bottom: 700px;
+  right: 25px;
+  width: 62px;
+  height: 62px;
+  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%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6402 7.7682C13.2159 8.12176 12.5853 8.06444 12.2318 7.64016L7.99997 2.56202L3.7682 7.64016C3.41463 8.06444 2.78407 8.12176 2.35979 7.7682C1.93551 7.41463 1.87819 6.78407 2.23175 6.35979L7.23174 0.359791C7.42174 0.131798 7.70318 -2.47955e-05 7.99996 -2.47955e-05C8.29674 -2.47955e-05 8.57819 0.131797 8.76819 0.359789L13.7682 6.35979C14.1218 6.78407 14.0644 7.41463 13.6402 7.7682Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 2.14258C8.55228 2.14258 9 2.59029 9 3.14258L9 14.1426C9 14.6949 8.55229 15.1426 8 15.1426C7.44772 15.1426 7 14.6949 7 14.1426L7 3.14258C7 2.59029 7.44772 2.14258 8 2.14258Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: center;
+  box-shadow: 0px 0px 6px rgba(111, 127, 150, 0.25);
+  cursor: pointer;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 100;
+  border-radius: 50%;
+  transition: 0.5s;
+  background-color: #E7F2FF;
+  border: 1px solid #E3EAF1;
+  filter: drop-shadow(0px 0px 6px rgba(111, 127, 150, 0.25));
+}
+.u-upward.active {
+  bottom: 25px;
+  visibility: visible;
+  opacity: 1;
+}
+.u-upward:hover {
+  border: 1px solid #CAD1E1;
+  filter: drop-shadow(0px 0px 6px rgba(111, 127, 150, 0.25));
+}
 .bg-gradient-main {
   background: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
 }

package/src/main.ts

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