urfu-ui-kit-vanilla 0.0.0

package/src/styles/const/icons.less

@@ -0,0 +1,8 @@
+// // плюс, минус
+// @icon-plus-white: 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%3Cg clip-path='url(%23clip0_1140_9727)'%3E%3Cpath d='M6 1.19922V10.7992' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1.19995 6H10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1140_9727'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+// @icon-plus-primary: 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%3Cg clip-path='url(%23clip0_575_7791)'%3E%3Cpath d='M6 1.20001V10.8' stroke='%231E4391' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1.19995 6H10.8' stroke='%231E4391' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_575_7791'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+// @icon-plus-secondary-primary: 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%3Cg clip-path='url(%23clip0_575_7791)'%3E%3Cpath d='M6 1.20001V10.8' stroke='%230F2B5E' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1.19995 6H10.8' stroke='%230F2B5E' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_575_7791'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+// // 
+
+
+

package/src/styles/fonts.less

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
+
+* {
+  font-family: 'Montserrat';
+}

package/src/styles/reset.less

@@ -0,0 +1,63 @@
+/**
+ * Global Reset of all HTML Elements
+ *
+ * Resetting all of our HTML Elements ensures a smoother
+ * visual transition between browsers. If you don't believe me,
+ * try temporarily commenting out this block of code, then go
+ * and look at Mozilla versus Safari, both good browsers with
+ * a good implementation of CSS. The thing is, all browser CSS
+ * defaults are different and at the end of the day if visual
+ * consistency is what we're shooting for, then we need to
+ * make sure we're resetting all spacing elements.
+ *
+ */
+ * {
+  box-sizing: border-box;
+ }
+
+ html, body {
+    border: 0;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+  }
+  
+  div, span, object, iframe, img, table, caption, thead, tbody,
+  tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
+  nav, footer, header, section, summary, mark, audio, video {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+  
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code,
+  del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
+  ol, ul, li, fieldset, legend, label {
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    margin: 0;
+    padding: 0;
+  }
+  
+  article, aside, canvas, figure, figure img, figcaption, hgroup,
+  footer, header, nav, section, audio, video {
+    display: block;
+  }
+  
+  table {
+    border-collapse: separate;
+    border-spacing: 0;
+    caption, th, td {
+      text-align: left;
+      vertical-align: middle;
+    }
+  }
+  
+  a img {
+    border: 0;
+  }
+  
+  :focus {
+    outline: 0;
+  }

package/src/styles/special-classes/colors.less

@@ -0,0 +1,58 @@
+@import "../const/colors.less";
+
+//property: background
+.bg {
+    &-gradient {
+        background: @gradient;
+    }
+    &-transparent {
+        background-color: transparent;
+    }
+    &-blue {
+        background-color: @clr-main-primary;
+    }
+    &-red {
+        background-color: @clr-main-danger;
+    }
+    &-dark {
+        &-blue {
+            background-color: @clr-secondary-primary;
+        }
+        &-red {
+            background-color: @clr-secondary-danger;
+        }
+    }
+    &-light {
+        &-blue {
+            background-color: @clr-secondary-chilly;
+        }
+        &-red {
+            background-color: @clr-secondary-focusing;
+        }
+    }
+    
+}
+//property: color
+.clr {
+    &-transparent {
+        color: transparent;
+    }
+    &-blue {
+        color: @clr-main-primary;
+        &-dark {
+            color: @clr-secondary-primary;
+        }
+        &-light {
+            color: @clr-secondary-chilly;
+        }
+    }
+    &-red {
+        color: @clr-main-danger;
+        &-dark {
+            color: @clr-secondary-danger;
+        }
+        &-light {
+            color: @clr-secondary-focusing;
+        }
+    }
+}

package/src/styles/special-classes/font-weight.less

@@ -0,0 +1,11 @@
+.fw {
+    &-400 {
+        font-weight: 400;
+    }
+    &-500 {
+        font-weight: 500;
+    }
+    &-600 {
+        font-weight: 600;
+    }
+}

package/src/styles/special-classes/selectors.less

@@ -0,0 +1,44 @@
+@import "../const/fonts.less";
+h1 {
+    .h1;
+}
+h2 {
+    .h2;
+}
+h3 {
+    .h3;
+}
+h4 {
+    .h4;
+}
+h5 {
+    .h5
+}
+.st {
+    .st;
+}
+.ds {
+    .ds;
+}
+.th {
+    .th;
+}
+.tt {
+    .tt;
+}
+.bt {
+    .bt;
+}
+.required {
+    &::after {
+        content: '*';
+        color: @clr-main-danger;
+        padding-left: 3px;
+    }
+}
+.benefit {
+    .h2;
+    color: @clr-main-primary;
+    padding-bottom: 4px;
+    border-bottom: 8px solid @clr-main-primary;
+}

package/src/ui-icons.css

@@ -0,0 +1,356 @@
+@font-face {
+  font-family: 'urfu-ui-icons-fonts';
+  src:  url('fonts/urfu-ui-icons-fonts.eot?84ld82');
+  src:  url('fonts/urfu-ui-icons-fonts.eot?84ld82#iefix') format('embedded-opentype'),
+    url('fonts/urfu-ui-icons-fonts.ttf?84ld82') format('truetype'),
+    url('fonts/urfu-ui-icons-fonts.woff?84ld82') format('woff'),
+    url('fonts/urfu-ui-icons-fonts.svg?84ld82#urfu-ui-icons-fonts') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.u-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'urfu-ui-icons-fonts' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-active:before {
+  content: "\e900";
+  color: #1e4391;
+}
+.icon-application:before {
+  content: "\e901";
+  color: #1e4391;
+}
+.icon-attention:before {
+  content: "\e902";
+  color: #ef302b;
+}
+.icon-basket:before {
+  content: "\e903";
+  color: #1e4391;
+}
+.icon-block:before {
+  content: "\e904";
+  color: #1e4391;
+}
+.icon-briefcase:before {
+  content: "\e905";
+  color: #1e4391;
+}
+.icon-calculator:before {
+  content: "\e906";
+  color: #1e4391;
+}
+.icon-calendar:before {
+  content: "\e907";
+  color: #1e4391;
+}
+.icon-catalog:before {
+  content: "\e908";
+  color: #1e4391;
+}
+.icon-chat:before {
+  content: "\e909";
+  color: #1e4391;
+}
+.icon-check:before {
+  content: "\e90a";
+  color: #3ba68c;
+}
+.icon-clock:before {
+  content: "\e90b";
+  color: #1e4391;
+}
+.icon-cloud:before {
+  content: "\e90c";
+  color: #1e4391;
+}
+.icon-correct:before {
+  content: "\e90d";
+  color: #1e4391;
+}
+.icon-cross:before {
+  content: "\e90e";
+  color: #ef302b;
+}
+.icon-cup:before {
+  content: "\e90f";
+  color: #1e4391;
+}
+.icon-directory:before {
+  content: "\e910";
+  color: #1e4391;
+}
+.icon-doc:before {
+  content: "\e911";
+  color: #1e4391;
+}
+.icon-document:before {
+  content: "\e912";
+  color: #1e4391;
+}
+.icon-documents:before {
+  content: "\e913";
+  color: #1e4391;
+}
+.icon-down:before {
+  content: "\e914";
+  color: #1e4391;
+}
+.icon-down-arrow:before {
+  content: "\e915";
+  color: #1e4391;
+}
+.icon-download:before {
+  content: "\e916";
+  color: #1e4391;
+}
+.icon-download-line:before {
+  content: "\e917";
+  color: #1e4391;
+}
+.icon-dropdown:before {
+  content: "\e918";
+  color: #1e4391;
+}
+.icon-dropdown-horisontal:before {
+  content: "\e919";
+  color: #1e4391;
+}
+.icon-entrance:before {
+  content: "\e91a";
+  color: #1e4391;
+}
+.icon-extracurricular-activities:before {
+  content: "\e91b";
+  color: #1e4391;
+}
+.icon-filter:before {
+  content: "\e91c";
+  color: #1e4391;
+}
+.icon-filter-mobile .path1:before {
+  content: "\e91d";
+  color: rgb(30, 67, 145);
+}
+.icon-filter-mobile .path2:before {
+  content: "\e91e";
+  margin-left: -1em;
+  color: rgb(30, 67, 145);
+}
+.icon-filter-mobile .path3:before {
+  content: "\e91f";
+  margin-left: -1em;
+  color: rgb(246, 246, 246);
+}
+.icon-filter-mobile .path4:before {
+  content: "\e920";
+  margin-left: -1em;
+  color: rgb(30, 67, 145);
+}
+.icon-filter-mobile .path5:before {
+  content: "\e921";
+  margin-left: -1em;
+  color: rgb(246, 246, 246);
+}
+.icon-filter-mobile .path6:before {
+  content: "\e922";
+  margin-left: -1em;
+  color: rgb(30, 67, 145);
+}
+.icon-folder:before {
+  content: "\e923";
+  color: #e98446;
+}
+.icon-full-screen:before {
+  content: "\e924";
+  color: #1e4391;
+}
+.icon-hidden:before {
+  content: "\e925";
+  color: #1e4391;
+}
+.icon-home:before {
+  content: "\e926";
+  color: #1e4391;
+}
+.icon-img:before {
+  content: "\e927";
+  color: #467be3;
+}
+.icon-information:before {
+  content: "\e928";
+  color: #1e4391;
+}
+.icon-left:before {
+  content: "\e929";
+  color: #1e4391;
+}
+.icon-left-arrow:before {
+  content: "\e92a";
+  color: #1e4391;
+}
+.icon-letter:before {
+  content: "\e92b";
+  color: #1e4391;
+}
+.icon-like:before {
+  content: "\e92c";
+  color: #1e4391;
+}
+.icon-link:before {
+  content: "\e92d";
+  color: #1e4391;
+}
+.icon-lk-role:before {
+  content: "\e92e";
+  color: #1e4391;
+}
+.icon-minus:before {
+  content: "\e92f";
+  color: #1e4391;
+}
+.icon-moderation:before {
+  content: "\e930";
+  color: #1e4391;
+}
+.icon-news:before {
+  content: "\e931";
+  color: #1e4391;
+}
+.icon-notify:before {
+  content: "\e932";
+  color: #1e4391;
+}
+.icon-ok:before {
+  content: "\e933";
+  color: #1e4391;
+}
+.icon-pdf:before {
+  content: "\e934";
+  color: #ef302b;
+}
+.icon-pencil:before {
+  content: "\e935";
+  color: #1e4391;
+}
+.icon-plus:before {
+  content: "\e936";
+  color: #1e4391;
+}
+.icon-question:before {
+  content: "\e937";
+  color: #1e4391;
+}
+.icon-rating:before {
+  content: "\e938";
+  color: #1e4391;
+}
+.icon-right:before {
+  content: "\e939";
+  color: #1e4391;
+}
+.icon-right-arrow:before {
+  content: "\e93a";
+  color: #1e4391;
+}
+.icon-role:before {
+  content: "\e93b";
+  color: #1e4391;
+}
+.icon-search:before {
+  content: "\e93c";
+  color: #1e4391;
+}
+.icon-setting:before {
+  content: "\e93d";
+  color: #1e4391;
+}
+.icon-settlement:before {
+  content: "\e93e";
+  color: #1e4391;
+}
+.icon-sorting:before {
+  content: "\e93f";
+  color: #1e4391;
+}
+.icon-star:before {
+  content: "\e940";
+  color: #1e4391;
+}
+.icon-star-top20:before {
+  content: "\e941";
+  color: #147246;
+}
+.icon-star-top50:before {
+  content: "\e942";
+  color: #1e4391;
+}
+.icon-submenu:before {
+  content: "\e943";
+  color: #ef302b;
+}
+.icon-telephone:before {
+  content: "\e944";
+  color: #1e4391;
+}
+.icon-test-tube:before {
+  content: "\e945";
+  color: #1e4391;
+}
+.icon-top20:before {
+  content: "\e946";
+  color: #147246;
+}
+.icon-top50:before {
+  content: "\e947";
+  color: #1e4391;
+}
+.icon-top100:before {
+  content: "\e948";
+  color: #ef302b;
+}
+.icon-union:before {
+  content: "\e949";
+  color: #1e4391;
+}
+.icon-university:before {
+  content: "\e94a";
+  color: #1e4391;
+}
+.icon-up:before {
+  content: "\e94b";
+  color: #1e4391;
+}
+.icon-up-arrow:before {
+  content: "\e94c";
+  color: #1e4391;
+}
+.icon-upload:before {
+  content: "\e94d";
+  color: #1e4391;
+}
+.icon-user:before {
+  content: "\e94e";
+  color: #1e4391;
+}
+.icon-warning:before {
+  content: "\e94f";
+  color: #ef302b;
+}
+.icon-xls:before {
+  content: "\e950";
+  color: #3ba68c;
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+}

package/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import path from "path";
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, "src/main.less"),
+            name: "UrFU UI-Kit Vanilla",
+            fileName: 'main',
+        },
+    },
+});