npm - urfu-ui-kit-vanilla - Versions diffs - 1.0.40 → 1.0.42 - Mend

urfu-ui-kit-vanilla 1.0.40 → 1.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

@@ -3,10 +3,10 @@
   "description": "UrFU UI-Kit for Vanilla Web",
   "license": "UNLICENSED",
   "private": false,
-  "version": "1.0.40",
+  "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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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;
@@ -2997,6 +3026,107 @@ button {
 .u-collapsible-menu-action-hide ~ .u-collapsible-menu-body .u-collapsible-menu-list {
   visibility: hidden;
 }
+.u-card {
+  position: relative;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 100%;
+  justify-content: space-between;
+  min-height: 188px;
+  padding: 20px 20px 62px;
+  color: #1e4391;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%231E4391'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: bottom 20px left 20px;
+}
+.u-card:hover {
+  background-color: #2951B6;
+  color: #FFFFFF;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%23FFF'/%3E%3C/svg%3E");
+}
+.u-card:hover .u-card-action {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%23FFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+.u-card-action {
+  cursor: pointer;
+  position: absolute;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%231E4391' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%231E4391' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+  bottom: 20px;
+  right: 20px;
+}
+.u-card-second {
+  position: relative;
+  background-color: #2951B6;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  flex-wrap: wrap;
+  height: 100%;
+  justify-content: space-between;
+  min-height: 188px;
+  padding: 20px 20px 62px;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%23FFF'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: bottom 20px left 20px;
+}
+.u-card-second:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.5 13-.638-2.825a1 1 0 0 0-1.51-.625l-2.448 1.546L3.45 8.647a1 1 0 0 0-.625-1.509L0 6.5l2.825-.638a1 1 0 0 0 .625-1.51L1.904 1.905 4.353 3.45a1 1 0 0 0 1.509-.625L6.5 0l.638 2.825a1 1 0 0 0 1.51.625l2.448-1.546L9.55 4.353a1 1 0 0 0 .625 1.509L13 6.5l-2.825.638a1 1 0 0 0-.625 1.51l1.546 2.448L8.647 9.55a1 1 0 0 0-1.509.625L6.5 13ZM21.5 32l-.708-1.395a27.59 27.59 0 0 0-.462-.89 13 13 0 0 0-5.045-5.045 27.59 27.59 0 0 0-.89-.462L13 23.5l1.395-.708c.45-.228.675-.342.89-.462a13 13 0 0 0 5.045-5.045c.12-.215.234-.44.462-.89L21.5 15l.708 1.395c.228.45.342.675.462.89a13 13 0 0 0 5.045 5.045c.215.12.44.234.89.462L30 23.5l-1.395.708c-.45.228-.675.342-.89.462a13 13 0 0 0-5.045 5.045c-.12.215-.234.44-.462.89L21.5 32Z' fill='%23FF2D7F'/%3E%3C/svg%3E");
+  background-color: #fff;
+  color: #1e4391;
+}
+.u-card-second:hover .u-card-second-action {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%23FF2D7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%23FF2D7F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+.u-card-second-action {
+  cursor: pointer;
+  position: absolute;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.143 3 6 5-6 5' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8H1' stroke='%23FFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+  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 ADDED Viewed

@@ -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",
+// })