new project A

angular.json

@@ -30,7 +30,21 @@
               "projects/app-a/src/assets"
             ],
             "styles": [
-              "projects/app-a/src/styles-b.scss"
+            "projects/app-a/src/assets/css/fonts.scss",
+            "projects/app-a/src/assets/css/basics.scss",
+            "projects/app-a/src/assets/css/main-menu.scss",
+            "projects/app-a/src/assets/css/registry.scss",
+            "projects/app-a/src/assets/css/page-top-panel.scss",
+            "projects/app-a/src/assets/css/buttons.scss",
+            "projects/app-a/src/assets/css/dropdown.scss",
+            "projects/app-a/src/assets/css/forms.scss",
+            "projects/app-a/src/assets/css/grid.scss",
+            "projects/app-a/src/assets/css/tables.scss",
+            "projects/app-a/src/assets/css/tabs.scss",
+            "projects/app-a/src/assets/css/list-items.scss",
+            "projects/app-a/src/assets/css/documents-lists.scss",
+            "projects/app-a/src/assets/css/slider.scss",
+            "projects/app-a/src/styles.scss"
             ],
             "scripts": []
           },
@@ -99,6 +113,20 @@
               "projects/app-a/src/assets"
             ],
             "styles": [
+              "projects/app-a/src/assets/css/fonts.scss",
+              "projects/app-a/src/assets/css/basics.scss",
+              "projects/app-a/src/assets/css/main-menu.scss",
+              "projects/app-a/src/assets/css/registry.scss",
+              "projects/app-a/src/assets/css/page-top-panel.scss",
+              "projects/app-a/src/assets/css/buttons.scss",
+              "projects/app-a/src/assets/css/dropdown.scss",
+              "projects/app-a/src/assets/css/forms.scss",
+              "projects/app-a/src/assets/css/grid.scss",
+              "projects/app-a/src/assets/css/tables.scss",
+              "projects/app-a/src/assets/css/tabs.scss",
+              "projects/app-a/src/assets/css/list-items.scss",
+              "projects/app-a/src/assets/css/documents-lists.scss",
+              "projects/app-a/src/assets/css/slider.scss",
               "projects/app-a/src/styles.scss"
             ],
             "scripts": []

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "common-space",
+  "name": "front",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -10,29 +10,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.1.0",
-    "@angular/common": "^16.1.0",
-    "@angular/compiler": "^16.1.0",
-    "@angular/core": "^16.1.0",
-    "@angular/forms": "^16.1.0",
-    "@angular/platform-browser": "^16.1.0",
-    "@angular/platform-browser-dynamic": "^16.1.0",
-    "@angular/router": "^16.1.0",
-    "rxjs": "~7.8.0",
+    "@angular/animations": "~15.1.0",
+    "@angular/cdk": "^15.0.0",
+    "@angular/common": "~15.1.0",
+    "@angular/compiler": "~15.1.0",
+    "@angular/core": "~15.1.0",
+    "@angular/forms": "~15.1.0",
+    "@angular/material": "^15.0.0",
+    "@angular/platform-browser": "~15.1.0",
+    "@angular/platform-browser-dynamic": "~15.1.0",
+    "@angular/router": "~15.1.0",
+    "@dustfoundation/ngx-sortablejs": "^15.0.0",
+    "@tinymce/tinymce-angular": "^7.0.0",
+    "angularx-qrcode": "^15.0.1",
+    "echarts": "^5.4.0",
+    "ngx-echarts": "^8.0.1",
+    "particles.js": "^2.0.0",
+    "rxjs": "~6.6.0",
+    "swiper": "^8.4.7",
+    "tinymce": "^6.4.2",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.8",
-    "@angular/cli": "~16.1.4",
-    "@angular/compiler-cli": "^16.1.0",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.6.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.1.3"
+    "@angular-devkit/build-angular": "^15.1.0",
+    "@angular/cli": "^15.2.9",
+    "@angular/compiler-cli": "~15.1.0",
+    "@types/echarts": "^4.9.12",
+    "@types/jasmine": "^4.0.0",
+    "@types/node": "^12.11.1",
+    "@types/sortablejs": "^1.15.1",
+    "jasmine-core": "^4.0.0",
+    "karma": "^6.4.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.0.3",
+    "karma-jasmine": "^4.0.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
+    "typescript": "~4.9.3"
   }
 }

projects/app-a/src/assets/css/basics.scss

@@ -0,0 +1,255 @@
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+
+:root {
+  // --radius-1: 12px;
+  // --radius-2: 20px;
+  --white: #ffffff;
+  --dark: #222;
+  --prime: #0079C2;
+  --active: #005e99;
+  --danger: #C20017;
+  --disabled: #A3D1EB;
+  --second: #7D7D7D;
+
+  --smart: 688px;
+  --medium: 1048px;
+  --xs: 4px;
+  --s: 8px;
+  --m: 16px;
+  --l: 24px;
+  --xl: 36px;
+  --xxl: 48px;
+}
+
+* {
+  font-family: "Roboto";
+  font-weight: 300;
+}
+
+.style-color{
+
+}
+
+
+ .mat-calendar-body-selected {
+  background-color: #0079c2;
+}
+
+button.mat-calendar-body-cell:hover{
+  background-color: transparent;
+  border: none;
+  font-weight: 400;
+}
+
+button.mat-calendar-body-cell{
+  font-weight: 400;
+}
+
+.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){
+  background-color: rgba(0, 162, 255,0.3);
+  font-weight: 400;
+}
+
+.tox-promotion, .tox-statusbar__branding {
+  display: none!important;
+}
+
+
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+
+* {scrollbar-color:transparent transparent; scrollbar-width:none;}
+*::-webkit-scrollbar-track {background-color:transparent;}
+*::-webkit-scrollbar {width:0; height:0; background-color:transparent;}
+*::-webkit-scrollbar-thumb {background-color:transparent; border-radius:2rem;}
+
+
+html {
+  height: 100%;
+  font-family: "Roboto";
+  font-size: 15px;
+  -webkit-font-smoothing:antialiased;
+}
+
+body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: var(--dark);
+}
+
+.limiter {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+p{
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+b, strong {
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 48px;
+  margin: 32px 0;
+  line-height: 140%;
+}
+
+h2 {
+  font-size: 32px;
+  margin: 24px 0;
+  line-height: 125%;
+}
+h3 {
+  font-size: 24px;
+  margin: 15px 0;
+  line-height: 120%;
+}
+h4 {
+  font-size: 18px;
+  margin: 10px 0;
+}
+
+a {
+  text-decoration: none;
+  color: var(--prime);
+  cursor: pointer;
+  &:hover{
+    color: var(--active);
+  };
+}
+
+hr {
+
+    border: 0;
+    border-bottom: 1px solid var(--second);
+    background: transparent;
+    }
+
+
+.fullwidth {
+  width: calc(100% + 80px);
+  margin-left: -40px;
+  margin-right: -40px;
+}
+
+.loader {
+  margin-top: 32px;
+  text-align: center;
+  animation: fade-in-and-scale 0.5s infinite;
+  &:before {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+    border-radius: 100px;
+    background-image: radial-gradient(rgba(44,134,205,1), rgba(44,134,205,0));
+    content: '';
+  }
+}
+
+.op-63{
+  opacity: 0.63;
+}
+
+
+.image-hidden {
+  img, svg {
+    visibility: hidden !important;
+  }
+  *, *::after, *::before {
+    background-image: none !important;
+  }
+}
+
+.style-brown {
+  filter: sepia(150%) !important;
+}
+.style-white-black {
+  filter: grayscale(100%) !important;;
+}
+.style-black-white {
+  filter: grayscale(100%) invert(100%) !important;;
+}
+
+
+
+@media screen and (min-width: 1360px) {
+  .fullwidth {
+    width: 100vw;
+    margin-left: calc((1160px - 100vw) / 2);
+    margin-right: 0;
+  }
+}
+
+
+
+@keyframes slide-from-right {
+  0% {transform: translateX(100%);}
+  100% {transform: translateX(0);}
+}
+
+@keyframes slide-from-left {
+  0% {transform: translateX(-100%);}
+  100% {transform: translateX(0);}
+}
+
+@keyframes slide-from-top-and-fade-in {
+  0% {transform: translateY(-100%); opacity: 0}
+  100% {transform: translateY(0); opacity: 1}
+}
+
+@keyframes slide-from-bottom-and-fade-in {
+  0% {transform: translateY(100%); opacity: 0}
+  100% {transform: translateY(0); opacity: 1}
+}
+
+
+@keyframes fade-in-and-scale {
+  0% {transform:scale(0.3); opacity:0;}
+  100% {transform:scale(1); opacity:0.5;}
+}
+
+
+
+
+@media screen and (var(--smart)) {
+  .limiter {
+
+  }
+  .fullwidth {
+    width: calc(100% + 48px);
+    margin-left: -24px;
+    margin-right: -24px;
+  }
+
+}
+
+@media screen and (var(--medium)) {
+  .limiter {
+
+  }
+  .fullwidth {
+    width: calc(100% + 32px);
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+  h2 {
+    font-size: 24px;
+    margin: 15px 0;
+  }
+  h3 {
+    font-size: 21px;
+    margin: 10px 0;
+  }
+  h4 {
+    font-size: 18px;
+    margin: 8px 0;
+  
+  }
+
+}

projects/app-a/src/assets/css/buttons.scss

@@ -0,0 +1,186 @@
+button{
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+  gap: var(--s);
+  cursor: pointer;
+  border-radius: 0;
+  border: none;
+  background-color: transparent;
+  font-style: normal;
+
+
+  &:disabled{
+    cursor: default;
+  }
+}
+.btn, a.btn {
+  display: inline-flex;
+  padding: 5px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: var(--s);
+  border: 1px solid var(--prime);
+  background:var(--prime);
+  color: #FFF;
+  font-weight: 500;
+
+  &:hover{
+    border: 1px solid var(--active);
+    background: var(--active);
+  }
+
+  &[disabled]{
+    cursor: default;
+    background-color: var(--disabled);
+    border-color: var(--disabled);
+  }
+
+  &.lt{
+    background:#FFF;
+    color: var(--prime);
+    &:hover{
+      border-color: var(--active);
+      color:  var(--active);
+    }
+
+    &:active{
+      border: 1px solid #004077;
+      color: #004077;
+    }
+
+    &[disabled] {
+      border: 1px solid #A1CAE5;
+      color: #A1CAE5;
+    }
+  }
+
+  &.clear,&.icon{
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    border-radius: 0;
+    border: none;
+    background-color: transparent;
+    color: var(--dark-1);
+    font-family: PT Sans Narrow;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%; /* 133.333% */
+    letter-spacing: 100%;
+  }
+
+  &.trash,&.add-child,&.edit,&.delete,&.close-blue,&.move{
+
+      width: 24px;
+      height: 24px;
+      background: center no-repeat;
+
+  }
+
+
+
+
+}
+
+ .inline-menu.default {
+   display: inline-flex;
+   align-items: center;
+   gap: 24px;
+   padding: 12px 24px;
+   background-color: var(--sky);
+   button {
+     width: 24px;
+     height: 24px;
+   }
+ }
+
+// .btn {
+//   color: #ffffff;
+//   padding: 11px 24px;
+//   background: var(--orange-2);
+//   border: 1px solid var(--orange-2);
+//   border-radius: 4px;
+//   font-weight: 500;
+//   font-size: 0.875rem;
+//   line-height: 18px;
+//   letter-spacing: 0.02em;
+//   text-transform: uppercase;
+
+
+//   &.with-icon {
+//     display: flex;
+//     flex-direction: row;
+//     align-items: center;
+//     padding: 8px 20px 8px 12px;
+//     &:before {
+//       display: block;
+//       width: 24px;
+//       height: 24px;
+//       margin-right: 8px;
+//       background: transparent none 50% 50% no-repeat;
+//       content: "";
+//     }
+//     &.add {
+//       &:before {
+//         //background-image: url('~projects/app-a/src/assets/images/icons/add_circle_white_24dp.svg');
+//       }
+//     }
+//   }
+//   &.small {
+//     height: 28px;
+//     padding: 4px 16px;
+//   }
+//   &.danger {
+//     background-color: #db373a;
+//   }
+//   &.secondary {
+//     background-color: var(--white);
+//     color: var(--orange-2);
+//     border: var(--orange-2) solid 1px;
+//     &.danger {
+//       border-color: #db373a;
+//       color: #db373a;
+//     }
+//   }
+//   &.icon {
+//     width: 24px;
+//     height: 24px;
+//     padding: 0;
+//     border-color: transparent;
+//     background: transparent none 50% 50% no-repeat;
+//     //&.reply {background-image: url('~projects/app-a/src/assets/images/icons/add_comment_20dp.svg');}
+//     //&.delete {background-image: url('~projects/app-a/src/assets/images/icons/close_20dp.svg');}
+//     &.trash {background-image: url('~projects/app-a/src/assets/images/icons/delete_24dp.svg');}
+//     &.edit {background-image: url('~projects/app-a/src/assets/images/icons/edit_dark_24.svg');}
+//     //&.chain {background-image: url('~projects/app-a/src/assets/images/icons/linked_24dp.svg');}
+//     &.checkbox {
+//       display: flex;
+//       width: 18px;
+//       height: 18px;
+//       border: solid 1px #7f7f7f;
+//       border-radius: 2px;
+//       &.checked,&.mixed {
+//         background-color: #2c86cd;
+//         border-color: #2c86cd;
+//       }
+//       &.checked {
+//         //background-image: url('~projects/app-a/src/assets/images/icons/checkbox_24dp.svg');
+//       }
+//       &.mixed {
+//         &:before {
+//           display: block;
+//           width: 12px;
+//           height: 2px;
+//           margin: auto;
+//           background-color: #ffffff;
+//           content: "";
+//         }
+//       }
+//     }
+//   }
+// }

projects/app-a/src/assets/css/documents-lists.scss

@@ -0,0 +1,62 @@
+.documents.list.default {
+  background: transparent url('~projects/app-a/src/assets/images/icons/document/document_pdf_60dp.svg') 0 0 no-repeat;
+  min-height: 60px;
+  padding-left: 72px;
+  font-size: 20px;
+  .title {
+    margin: 0 0 16px;
+    font-weight: bold;    
+  }
+  .items {
+    .item {
+      margin: 0 0 16px;
+      a {
+        display: inline-block;        
+      }
+      &:last-child {
+        margin: 0;
+      }
+    }
+    .none {
+      color: #7f7f7f;
+    }
+  }
+  .buttons {
+    margin-top: 24px;
+    button {
+      margin-right: 24px;
+      margin-bottom: 8px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.documents.list.inline {
+  .item {
+    display: inline-block;
+    padding: 3px 30px 3px 12px;
+    margin: 0 12px 4px 0;
+    border: solid 1px rgba(0, 0, 0, 0.06);
+    border-radius: 12px;
+    //background: #e3eff9 url('~projects/app-a/src/assets/images/icons/open_in_new_18dp.svg') calc(100% - 8px) 50% no-repeat;
+    font-size: 0.875rem;
+    a {
+      color: #000000;
+    }
+  }
+}
+
+
+@media screen and (max-width: 410px) {
+  .documents.list.default {
+    .buttons {
+      button {
+        width: 100%;
+        margin: 0 0 12px;
+      }
+    }
+  }
+}
+

projects/app-a/src/assets/css/dropdown.scss

@@ -0,0 +1,62 @@
+.dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 100%;
+  background-color: #ffffff;
+  border: #dedede solid 1px;
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
+  z-index: 1000;
+  border-radius: 4px;
+  .menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-radius: 4px;
+    .type {
+      width: 100%;
+      .row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        column-gap: 16px;
+
+        .title {
+
+        }
+        .submenu {
+          width: 20px;
+          height: 20px;
+          background: transparent url('~projects/app-a/src/assets/images/icons/expand_less_20.svg') 50% 50% no-repeat;
+          transform: rotateZ(180deg);
+          transition: transform 0.3s;
+          &.active {
+            transform: rotateZ(0deg);
+          }
+        }
+
+
+        a, span {
+          display: block;
+          padding: 12px 16px;
+          color: #000000;
+          cursor: pointer;
+          border-bottom: #E0E0E0 solid 1px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        &:last-child {
+          a, span {
+            border-bottom: none;
+          }
+        }
+        &:hover {
+          background-color: #f7f7f7;
+        }
+      }
+    }
+  }
+}

projects/app-a/src/assets/css/fonts.scss

@@ -0,0 +1,35 @@
+
+
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto/Roboto-Light.ttf');
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto/Roboto-Italic.ttf');
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto/Roboto-Medium.ttf');
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto/Roboto-MediumItalic.ttf');
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+

projects/app-a/src/assets/css/forms.scss

@@ -0,0 +1,78 @@
+input, select, textarea {
+  width: 100%;
+  height: 32px;
+  padding: 4px 8px ;
+  border-radius: 4px;
+  border: solid 1px var(--second);
+  background-color: #fff;
+  font-size: 15px;
+  &:hover{
+    border-color: var(--active);
+    outline: none;
+  }
+  &:focus, &:focus-visible {
+    border-color: var(--prime);
+    outline: none;
+    
+  }
+  &:disabled{
+    border-color: #EDEDED;
+    outline: none;
+  }
+}
+
+.invalid {
+  input, select, .textbox {
+    border-color: var(--active)!important;
+  }
+}
+
+
+.toggle {
+  cursor: pointer;
+  &:hover{
+    color: var(--active);
+    .switch{
+      background-color: white;
+      border-color:var(--active);
+      &:before {
+        background-color: var(--active);
+      }
+      &.active{
+        background-color:var(--active);
+        border-color:var(--active);
+        &:before {
+          background-color: white;
+        }
+      }
+    }
+  }
+  .switch {
+    width: 28px;
+    height: 16px;
+    margin: auto 0;
+    padding: 1px;
+    border-radius: 8px;
+    background-color: white;
+    border: 1px solid var(--second);
+    cursor: pointer;
+    transition: background-color 0.3s;
+    &:before {
+      display: block;
+      width: 12px;
+      height: 12px;
+      background-color: var(--second);
+      border-radius: 6px;
+      transition: transform 0.3s;
+      content: '';
+    }
+    &.active{
+      background-color:var(--prime);
+      border-color:var(--prime);
+      &:before {
+        background-color: white;
+        transform: translateX(12px);
+      }
+    }
+  }
+}

projects/app-a/src/assets/css/grid.scss

@@ -0,0 +1,159 @@
+left-content, right-content{
+    flex-basis: 272px;
+    flex-shrink: 0;
+}
+
+grid{
+    >.wrapper {
+        width: 100%;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        header, footer {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+        >.content {
+            flex-grow: 1;
+            display: flex;
+          }
+    }
+}
+
+
+
+
+@media screen and (max-width: 1048px){
+    .wrapper {
+      &:not(.hide-menu){
+        overflow-y: hidden;
+        height: 100vh;
+      }
+      .content {
+  
+  
+      }
+    }
+  }
+
+@media screen and (min-width: 1360px) {
+
+     grid{
+
+       .wrapper{
+        >.content {
+            gap: var(--xl);
+            padding: 0 var(--xxl);
+            >.main-content{
+                flex-grow: 1;
+              }
+        }
+       }   
+     }    
+}
+
+@media screen and (max-width: 1360px) {
+    grid{
+        .wrapper{
+
+            >.content {
+
+                gap: var(--xl);
+                padding: 0 var(--xxl);
+    
+
+                >.main-content{
+                   flex-basis: 640px;
+                    min-width: 320px;
+                }
+
+                right-content{
+                    display: none;
+                  }
+    
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1048px){
+    grid{
+        .wrapper{
+
+            >.content {
+                padding: 0 var(--l);
+    
+
+                >.main-content{
+                   flex-basis: 640px;
+                    min-width: 320px;
+                }
+    
+            }
+        }
+    }
+}
+ 
+
+
+
+
+footer{
+    display: flex;
+    justify-content: center;
+    padding: 0 48px;
+    margin-top: 68px;
+    border-top: 1px solid var(--second);
+  }
+  .footer{
+  
+    flex-grow: 1;
+    display: flex;
+    gap: 8px;
+    padding: 16px 0 32px 0;
+    color: var(--second);
+    font-weight: 300;
+  
+  }
+  
+  @media screen and (min-width: 1048px){
+    .footer{
+  
+      flex-direction: row-reverse;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-content: flex-start;
+  
+      div{
+  
+        &:first-child{
+          flex-basis: 35%;
+        }
+        &:nth-child(2){
+          order:-1;
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 1048px){
+    footer{
+      padding: 0 24px;
+      margin-top: 48px;
+    }
+    .footer{
+    
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 16px 0 24px 0;
+      color: var(--second);
+      font-weight: 300;
+    }
+  }
+  
+  @media screen and (max-width: 668px){
+    footer{
+      padding: 0 16px;
+      margin-top: 48px;
+    }
+  }

projects/app-a/src/assets/css/list-items.scss

@@ -0,0 +1,86 @@
+.list.item.default {
+  padding: 24px;
+  margin-bottom: 24px;
+  background-color: #FFFFFF;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  .main-bar {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    .left {
+      flex-grow: 1;
+    }
+    .right {
+      display: flex;
+      flex-direction: column;
+      margin-left: 24px;
+      flex-shrink: 0;
+      .row {
+        display: flex;
+        flex-direction: row;
+        button {
+          margin: 0 12px 0 0;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .params {
+      p {
+        margin-bottom: 14px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .title {
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .status {
+    margin-bottom: 14px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    color: #7f7f7f;
+  }
+  .yellow, .reviewing {color: #c48723;}
+  .green, .active {color: #669933;}
+  .red, .declined {color: #e60046;}
+  .edit {
+    //background-image: url("~projects/app-a/src/assets/images/icons/edit_24dp.svg");
+  }
+  .delete {
+    //background-image: url("~projects/app-a/src/assets/images/icons/delete_24dp.svg");
+  }
+  .toggle {
+    margin-top: auto;
+    margin-left: auto;
+    //background-image: url("~projects/app-a/src/assets/images/icons/arrow_down_24dp.svg");
+    transition: transform 0.2s;
+    &.active {
+      transform: rotateZ(180deg);
+    }
+  }
+  .name {
+    margin-bottom: 14px;
+    font-weight: bold;
+  }
+
+  .details {
+    margin-top: 24px;
+  }
+}
+
+
+@media screen and (max-width: 767px) {
+  .list.item.default {
+    padding: 16px;
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+}

projects/app-a/src/assets/css/main-menu.scss

@@ -0,0 +1,116 @@
+header{
+
+  .header{
+    height: 149px;
+    background-color: white;
+    padding: 0 var(--xxl);
+    border-bottom:1px solid var(--second);
+
+
+
+    .main-menu{
+
+
+
+      .main-menu-logo{
+        display: block;
+        cursor: pointer;
+        width: 235px;
+        height: 80px;
+        background: url('~projects/app-a/src/assets/images/logo_tks.svg') 100% center;
+        background-size: cover;
+      }
+
+      .main-menu-btns{
+        display: flex;
+        gap:32px;  
+      }
+
+    }
+  }
+
+
+  pages-menu{    
+    &.level-0{
+      flex-direction: row;
+      gap:20px;
+      >pages-menu-item{
+        >.item>drop-down{
+          display: none;
+        }
+        position: relative;
+        >.sub-menu{
+          display: none;
+        }
+
+        .level-1{
+          >pages-menu{
+            padding-left: 24px;
+            position: absolute;
+            width: 300px;
+            background-color: var(--white);
+            border: 1px solid var(--second);
+            z-index: 10;}
+        }
+
+        &:hover{
+          >.sub-menu{
+            display: block;
+          }
+        }
+      }
+    }
+  }  
+}
+
+div.left-content>pages-menu{
+  padding-top: 24px;
+  >pages-menu-item{
+    >.item{
+      display: none ;
+    }
+    >pages-menu{
+      padding-left: 0;
+    }
+  }
+}
+
+.current{
+  a{ color: var(--active)};
+}
+.parent{
+   a{ color: var(--dark)};
+}
+
+
+
+
+@media screen and (max-width: 1048px){
+
+header{
+    .header{
+      height: 64px;
+      padding: 0 var(--l);
+
+      .main-menu{
+        .main-menu-logo{
+          width: 118px;
+          height: 40px;
+        }
+      }
+    }
+  }    
+
+
+
+  div.left-content>pages-menu{
+    
+    padding-top: 24px;
+    >pages-menu-item{
+      margin-left: var(--m);
+      >.item{
+        display: block ;
+      }
+    }
+  }
+}

projects/app-a/src/assets/css/page-top-panel.scss

@@ -0,0 +1,45 @@
+.top-panel {
+  margin: 0 auto 32px;
+  max-width: 1240px;
+  &.pt-40 {
+    padding-top: 40px;
+  }
+
+  .filters {
+
+    .limiter {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      margin: 30px 0;
+    }
+    .search {
+      flex-grow: 1;
+      position: relative;
+      input{
+        padding-right: 32px;
+      }
+      ico {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+      }
+    }
+    .advanced {
+      margin-left: 24px;
+      span{display: inline-block;}
+      ico{display:none;}
+    }      
+    button {
+      height: 32px;
+    }
+  }
+}
+
+@media screen and (max-width: 688px) {
+  .top-panel .filters .advanced{
+    span{display:none}
+    ico{display: inline-block;}
+  }
+}
+

projects/app-a/src/assets/css/registry.scss

@@ -0,0 +1 @@
+

projects/app-a/src/assets/css/slider.scss

@@ -0,0 +1,194 @@
+
+.slider-bar {
+
+
+  max-width: 720px;
+
+  background-color: #ffffff;
+
+
+  &.right-side{
+    animation: slide-from-right 0.3s;
+    right: 0;
+    box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+&.left-side{
+    animation: slide-from-left 0.3s;
+    left: 0;
+    box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+
+  
+  z-index: 110;
+
+  .header {
+    padding: var(--m) var(--l);
+    border-bottom: 1px solid var(--second);
+
+    .title {
+
+      
+
+      h2 {
+        font-size: 30px;
+        margin: 0;
+      }
+
+    }
+
+    .stepper {
+      padding: var(--l) 0 0;
+      .items {
+        display: flex;
+        flex-direction: row;
+        gap: var(--l);
+        .item {
+          width: 150px;
+          flex-shrink: 1;
+          font-size: 14px;
+          overflow: hidden;
+          .num {
+            position: relative;
+            width: calc(100% - 13px);
+            height: var(--l);
+            padding: 4px 6px;
+            margin: 0 0 4px;
+            border-radius: 2px 0 0 2px;
+            background-color: #E8E9EB;
+            color: #86898E;
+            font-weight: bold;
+            &:after {
+              position: absolute;
+              left: 100%;
+              top: 0;
+              width: 13px;
+              height: 100%;
+              background: transparent url('~projects/app-a/src/assets/images/icons/step_upcoming.svg') 100% 50% no-repeat;
+              content: '';
+            }
+          }
+          .name {
+            font-size: 14px;
+            color: #6c6c6c;
+          }
+          &.active {
+            .num {
+              background-color: #B88E12;
+              color: #ffffff;
+              &:after {
+                background-image: url('~projects/app-a/src/assets/images/icons/step_active.svg');
+              }
+            }
+            .name {
+              color: #B88E12;
+              font-weight: bold;
+            }
+          }
+          &.finished {
+            .num {
+              background-color: rgba(184, 142, 18, 0.2);
+              color: #B88E12;
+              &:after {
+                background-image: url('~projects/app-a/src/assets/images/icons/step_finished.svg');
+              }
+            }
+            .name {
+              color: #B88E12;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    height: 100%;
+    padding: var(--xxl) 0;
+    >div>pages-menu{
+      padding: 0 var(--s) var(--xl) var(--xl);
+    }
+    form-frame{
+      margin: 0 var(--l);
+      display: block;
+    }
+  }
+
+  .btn-menu{
+    display: block;
+    padding: 15px var(--xl);
+      border-top: 1px solid var(--second);
+    div{
+      
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      button{
+        display: flex;
+        justify-content: start;
+        font-weight: 300;
+        font-size: 15px;
+        &:hover{
+          color: var(--active);
+        }
+      }
+      
+    }
+  }
+
+
+  [footer] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--m) var(--l);
+    border-top: 1px solid var(--second);
+
+    
+    .left {
+      .reset {
+        color: #6C6C6C;
+        cursor: pointer;
+      }
+
+      .notice {
+        font-weight: 300;
+        line-height: var(--l); /* 150% */
+      }
+    }
+
+    .right {
+      margin-left: auto;
+      display: flex;
+      button {
+        margin-left: var(--l);
+      }
+    }
+  }
+}
+
+.slider-overlay {
+
+  background-color: rgba(0, 0, 0, 0.37);
+
+}
+
+
+@media screen and (max-width: 767px) {
+  .slider-bar {
+    .header, .footer {
+      padding: var(--m);
+    }
+
+    [footer] {
+      .left {
+        font-size: 14px;
+      }
+      .right {
+        button {
+          padding: var(--s) var(--m);
+          margin-left: var(--m);
+        }
+      }
+    }
+  }
+}

projects/app-a/src/assets/css/tables.scss

@@ -0,0 +1,60 @@
+table.default {
+  width: 100%;
+  border-collapse: collapse;
+  tr {
+    td {
+      padding: 6px 0;
+      &.caption {
+        width: 232px;
+        padding-right: 24px;
+        color: #86898E;
+        vertical-align: top;
+      }
+      &.value {
+        vertical-align: top;
+        p {
+          margin: 0 0 12px;
+        }
+      }
+    }
+  }
+  &.lined {
+    tr {
+      td {
+        border-bottom: #e0e0e0 solid 1px;
+      }
+      &:last-child {
+        td {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+
+@media screen and (max-width: 767px) {
+  table.default {
+    tr {
+      display: block;
+      td {
+        display: block;
+        padding: 0;
+        b {
+          display: block;
+          padding: 14px 0 0;
+        }
+        &.caption {
+          width: 100%;
+          margin: 14px 0 6px;
+        }
+        &.value {
+
+        }
+      }
+    }
+    &.lined tr td {
+      border-bottom: none;
+    }
+  }
+}

projects/app-a/src/assets/css/tabs.scss

@@ -0,0 +1,47 @@
+.tabs.default {
+  display: flex;
+  margin-bottom: 32px;
+  max-width: 100%;
+  overflow: auto;
+  border-bottom: #E8E8E8 solid 1px;
+  -webkit-overflow-scrolling: touch;
+  &.simple {
+    margin-bottom: 24px;
+  }
+  button {
+    padding: 7px 16px;
+    margin-right: -1px;
+    background: #ffffff;
+    border-radius: 8px 8px 0 0;
+    border: #E8E8E8 solid 1px;
+    border-bottom: none;
+    color: #86898E;
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    &:last-child {
+      margin-right: 0;
+    }
+    span {
+      white-space: nowrap;
+    }
+    &:last-child {
+      span {
+      }
+    }
+    &.active {
+      color: #ffffff;
+      background-color: #F9B417;
+      border-color: #F9B417;
+    }
+    &.disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
+    &:hover {
+      background-color: #F9B417;
+      border-color: #F9B417;
+      color: #ffffff;
+    }
+  }
+}