@morozeckiy/dd-lib 0.7.63 → 0.7.64

package/assets/scss/reset.scss

@@ -0,0 +1,154 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+span,
+div,
+input {
+  box-sizing: border-box;
+}
+
+input:focus-visible {
+  outline: none;
+}
+
+button,
+textarea {
+  font-family: inherit;
+}
+
+textarea {
+  outline: none;
+}

package/assets/scss/theme.scss

@@ -0,0 +1,68 @@
+@use './vars-light' as *;
+@use './vars-dark' as *;
+
+:root {
+  .theme-light {
+    @include style-light();
+
+    .plug-bg {
+      background-image: url('../../assets/images/svg/plug.svg');
+    }
+
+    .user-empty-bg {
+      background-image: url('../../assets/images/svg/user-empty.svg');
+    }
+
+    .not-found-bg {
+      background-image: url('../../assets/images/png/not-found.png');
+    }
+
+    .page-404-bg {
+      background-image: url('../../assets/images/png/404.png');
+    }
+
+    .error-page-bg {
+      background-image: url('../../assets/images/png/error-page.png');
+    }
+
+    .tech-works-bg {
+      background-image: url('../../assets/images/png/tech-works.png');
+    }
+
+    .iphone-bg {
+      background-image: url('../../assets/images/png/iphone.png');
+    }
+  }
+
+  .theme-dark {
+    @include style-dark();
+
+    .plug-bg {
+      background-image: url('../../assets/images/svg/plug-d.svg');
+    }
+
+    .user-empty-bg {
+      background-image: url('../../assets/images/svg/user-empty-d.svg');
+    }
+
+    .not-found-bg {
+      background-image: url('../../assets/images/png/not-found-d.png');
+    }
+
+    .page-404-bg {
+      background-image: url('../../assets/images/png/404-d.png');
+    }
+
+    .error-page-bg {
+      background-image: url('../../assets/images/png/error-page-d.png');
+    }
+
+    .tech-works-bg {
+      background-image: url('../../assets/images/png/tech-works-d.png');
+    }
+
+    .iphone-bg {
+      background-image: url('../../assets/images/png/iphone.png');
+    }
+  }
+}

package/assets/scss/titles.scss

@@ -0,0 +1,299 @@
+@use 'mixins'  as *;
+@use 'vars'  as *;
+
+.g-h1-title {
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 60px;
+  color: var(--light-black-color);
+
+  @include below($mobile) {
+    font-size: 24px;
+    line-height: 32px;
+  }
+}
+
+.g-h2-title {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 48px;
+  color: var(--light-black-color);
+
+  @include below($mobile) {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.g-h3-title {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+  color: var(--light-black-color);
+
+  @include below($mobile) {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 28px;
+  }
+}
+
+.g-h4-title {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  color: var(--light-black-color);
+
+  @include below($mobile) {
+    font-size: 18px;
+  }
+}
+
+.g-h5-title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--light-black-color);
+}
+
+.g-text,
+.g-text-sm {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--font-light-black-color);
+}
+
+.g-text-sm {
+  font-size: 14px;
+}
+
+.h1-title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 60px;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h2-title {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 48px;
+  letter-spacing: 0;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h3-title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 32px;
+  letter-spacing: 0;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h4-title {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h5-title {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 28px;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h5-title-medium {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 28px;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h4-title-light {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+  letter-spacing: 0;
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.h6-title {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0;
+  text-align: left;
+
+  cursor: default;
+  color: var(--light-black-color);
+}
+
+.b1-title {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 28px;
+  cursor: default;
+  color: var(--font-light-black-color);
+}
+
+.b2-title {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0;
+  cursor: default;
+  color: var(--font-light-black-color);
+}
+
+.b3-title {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  cursor: default;
+  color: var(--font-light-black-color);
+}
+
+.b4-title {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: left;
+  cursor: default;
+  color: var(--font-light-black-color);
+}
+
+.b5-title {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: 0;
+  color: var(--font-light-black-color);
+}
+
+.b6-title {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  cursor: default;
+
+  color: var(--font-light-black-color);
+}
+
+.c2-title {
+  font-size: 12px;
+  font-weight: 400;
+  cursor: default;
+  line-height: 18px;
+  color: var(--font-light-black-color);
+}
+
+.text-plain {
+  font-size: 16px;
+  font-weight: 400;
+  cursor: default;
+  line-height: 24px;
+  color: var(--font-light-black-color);
+}
+
+.small {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+  color: var(--font-light-black-color);
+}
+
+.font-regular {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.no-wrap-text {
+  white-space: nowrap;
+}
+
+.ellipsis-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  &.line-2 {
+    -webkit-line-clamp: 2;
+  }
+
+  &.line-3 {
+    -webkit-line-clamp: 3;
+  }
+}
+
+.text-center {
+  display: block;
+  text-align: center;
+}
+
+.gray {
+  color: var(--second-gray-color);
+}
+
+.dark {
+  color: var(--dark-color);
+}
+
+.black {
+  color: var(--light-black-color);
+}
+
+.light-black {
+  color: var(--font-light-black-color);
+}
+
+.green {
+  color: var(--primary-green-color);
+}
+
+.red {
+  color: var(--red-error-color);
+}
+
+.blue {
+  color: var(--blue-color);
+}
+
+.green-hover {
+  &:hover {
+    color: var(--primary-green-color);
+  }
+}
+
+.underline-link {
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+}

package/assets/scss/vars-dark.scss

@@ -0,0 +1,140 @@
+@mixin style-dark() {
+  --main-body-width: 1320px;
+  --side-padding: 24px;
+  --side-padding-mobile: 16px;
+
+  //header
+  --header-color: #160d1d;
+  --header-height: 202px;
+  --header-border-color: #3e3e3e;
+  --switch-color: #07b700;
+  --switch-circle-color: #ffffff;
+  --menu-hover-bgc: #2e193d;
+  --menu-arr-color: #a79bad;
+  --menu-item-color: #D7D7D7;
+  --menu-item-hover: #3E3E3E;
+  --menu-item-color-foot: #D7D7D7;
+  --burger-menu-color: #1a1a1a;
+  --burger-menu-border: #3e3e3e;
+  --burger-menu-ttl: #ffffff;
+  --burger-menu-txt: #ffffff;
+
+  //footer
+  --footer-color: #121212;
+  --footer-border-color: #3e3e3e;
+  --footer-font-coolor: #ffffff;
+  --footer-soc-icon: #d7d7d7;
+
+  //main
+  --main-bgc: #121212;
+  --main-layer: var(--dark-green-color);
+  --main-card-color: #1a1a1a;
+  --main-card-shadow: 0 14px 64px -4px #18274b0a, 0 8px 22px -6px #18274b0a;
+  --shared-img-color: #ffffff;
+  --main-img-color: #1e2841;
+  --shared-bgc: #182442;
+  --select-act-hov-bgc: #182442;
+  --filter-color: #1A1A1A;
+  --tooltip-bgc: #3E3E3E;
+
+  //button
+  --btn-green-bgc: var(--primary-green-color);
+  --btn-green-hover: var(--primary-green-hover);
+  --btn-green-color: var(--white-color);
+
+  --btn-light-green-bgc: var(--light-green-color);
+  --btn-light-green-color: var(--primary-green-color);
+  --btn-light-green-hover-color: var(--primary-green-hover);
+
+  --btn-white-bgc: var(--gray-color-200);
+  --btn-white-color: var(--primary-green-color);
+  --btn-white-hover-color: var(--primary-green-hover);
+
+  --btn-red-bgc: var(--red-light-color);
+  --btn-red-color: var(--red-error-color);
+  --btn-red-hover-color: var(--red-hover-color);
+
+  --btn-dark-bgc: var(--dark-color);
+  --btn-dark-color: #FFFFFF;
+  --btn-dark-hover-color: var(--dark-hover-color);
+
+  --btn-disabled-bgc: var(--disabled-bgc);
+  --btn-disabled-color: var(--disabled-color);
+
+  //input/textarea
+  --input-border-color: var(--primary-gray-color);
+  --input-error-border-color: var(--primary-red-color);
+  --input-error-border-shadow: 0px 0px 0px 3px #ff36451a;
+  --input-active-border-colort: var(--primary-green-color);
+  --input-active-border-shadow: 0px 0px 0px 3px #07b7001a;
+  --input-placeholder: var(--second-gray-color);
+  --input-disable-input: #1a1a1a;
+  --input-disable-text: #434343;
+  --input-gray-bgc: #262626;
+  --input-gray-placeholder: #969696;
+
+  //checkbox
+  --cb-checked-bgc: var(--primary-green-color);
+  --cb-hover-bgc: var(--primary-green-hover);
+  --cb-init-border: var(--gray-bgc);
+
+  //radio
+  --radio-active-color: var(--primary-green-color);
+  --radio-hover-color: var(--primary-green-hover);
+  --radio-disabled: var(--gray-color-200);
+
+  //claims
+  --claim-status-bgc-published: #8e9cbe;
+  --claim-status-bgc-in-work: var(--blue-color);
+  --claim-status-bgc-received: #ba00fb;
+  --claim-status-bgc-deadline: #faad14;
+  --claim-status-bgc-decided: #07b700;
+  --claim-status-bgc-close: #ff3645;
+
+  //zabota
+  --zabota-banner-bgc: var(--dark-green-color);
+
+  //district selector
+  --district-color: var(--font-light-black-color);
+
+  // colors
+  --primary-green-color: #07b700;
+  --primary-green-color-rgb: 7, 183, 0;
+  --primary-green-hover: #069700;
+  --primary-gray-color: #3e3e3e;
+  --second-gray-color: #969696;
+  --calendar-gray-color: #D7D7D7;
+  --calendar-gray-hide-color: #bdbdbd;
+  --primary-red-color: #ff3645;
+  --primary-red-color-rgb: 255, 54, 69;
+  --light-green-color: #262626;
+  --light-blue-color: #e5f2ff;
+  --light-black-color: #ffffff;
+  --black-color: #D7D7D7;
+  --dark-color: #2e193d;
+  --dark-green-color: #1c2b20;
+  --dark-hover-color: #2C173C;
+  --white-color: #1a1a1a;
+  --gray-bgc: #d7d7d7;
+  --disabled-color: #8e9cbe;
+  --disabled-bgc: #3E3E3E;
+  --red-light-color: #feedf0;
+  --red-error-color: #ff3645;
+  --red-hover-color: #c03c54;
+  --font-light-black-color: #d7d7d7;
+  --font-wheit-small: 400;
+  --font-wheit-big: 500;
+  --gray-color-200: #3E3E3E;
+  --gray-color-300: #262626;
+  --active-border-color-shadow: #07b7001a;
+  --low-bgc-color: #262626;
+  --yellow-card: #594D0D;
+  --gold-bgc-color: #fffbe6;
+  --gold-border-color: #ffe58f;
+  --gold-svg-color: #faad14;
+  --blue-color: #007bfb;
+  --blue-card: #1E2841;
+  --blue-light-bgc: #e5f2ff;
+  --blue-light-border-color: #cce5fe;
+  --gray-bgc-2: #3E3E3E;
+}