second project

master
Boris Voropaev 2023-11-01 16:21:13 +03:00
parent 4de10fce6e
commit 71934e9070
261 changed files with 3112 additions and 11 deletions

View File

@ -67,6 +67,10 @@
{
"replace": "projects/environments/environment.ts",
"with": "projects/app-a/environments/environment.ts"
},
{
"replace": "projects/environments/htmlenv.ts",
"with": "projects/app-a/environments/htmlenv.ts"
}
]
},
@ -76,7 +80,13 @@
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
"namedChunks": true,
"fileReplacements": [
{
"replace": "projects/environments/htmlenv.ts",
"with": "projects/app-a/environments/htmlenv.ts"
}
]
}
},
"defaultConfiguration": "production"
@ -134,6 +144,11 @@
}
}
},
"app-b": {
"projectType": "application",
"schematics": {
@ -161,7 +176,21 @@
"projects/app-b/src/assets"
],
"styles": [
"projects/app-b/src/styles-c.scss"
"projects/app-b/src/assets/css/fonts.scss",
"projects/app-b/src/assets/css/basics.scss",
"projects/app-b/src/assets/css/main-menu.scss",
"projects/app-b/src/assets/css/registry.scss",
"projects/app-b/src/assets/css/page-top-panel.scss",
"projects/app-b/src/assets/css/buttons.scss",
"projects/app-b/src/assets/css/dropdown.scss",
"projects/app-b/src/assets/css/forms.scss",
"projects/app-b/src/assets/css/grid.scss",
"projects/app-b/src/assets/css/tables.scss",
"projects/app-b/src/assets/css/tabs.scss",
"projects/app-b/src/assets/css/list-items.scss",
"projects/app-b/src/assets/css/documents-lists.scss",
"projects/app-b/src/assets/css/slider.scss",
"projects/app-b/src/styles.scss"
],
"scripts": []
},
@ -184,6 +213,10 @@
{
"replace": "projects/environments/environment.ts",
"with": "projects/app-b/environments/environment.ts"
},
{
"replace": "projects/environments/htmlenv.ts",
"with": "projects/app-b/environments/htmlenv.ts"
}
]
},
@ -193,7 +226,13 @@
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
"namedChunks": true,
"fileReplacements": [
{
"replace": "projects/environments/htmlenv.ts",
"with": "projects/app-b/environments/htmlenv.ts"
}
]
}
},
"defaultConfiguration": "production"
@ -230,6 +269,20 @@
"projects/app-b/src/assets"
],
"styles": [
"projects/app-b/src/assets/css/fonts.scss",
"projects/app-b/src/assets/css/basics.scss",
"projects/app-b/src/assets/css/main-menu.scss",
"projects/app-b/src/assets/css/registry.scss",
"projects/app-b/src/assets/css/page-top-panel.scss",
"projects/app-b/src/assets/css/buttons.scss",
"projects/app-b/src/assets/css/dropdown.scss",
"projects/app-b/src/assets/css/forms.scss",
"projects/app-b/src/assets/css/grid.scss",
"projects/app-b/src/assets/css/tables.scss",
"projects/app-b/src/assets/css/tabs.scss",
"projects/app-b/src/assets/css/list-items.scss",
"projects/app-b/src/assets/css/documents-lists.scss",
"projects/app-b/src/assets/css/slider.scss",
"projects/app-b/src/styles.scss"
],
"scripts": []

View File

@ -0,0 +1,3 @@
export const html = {
project:'app-a'
}

View File

@ -0,0 +1,3 @@
export const html = {
project:'app-b'
}

View File

@ -0,0 +1,350 @@
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
:root {
--smart: 688px;
--medium: 1048px;
--xs: 4px;
--s: 8px;
--m: 16px;
--l: 24px;
--xl: 36px;
--xxl: 48px;
--radius-1: 12px;
--radius-2: 20px;
--white: #ffffff;
--light: #F6F6F6;
--prime: #0070BA;
--prime-hov: #005799;
--prime-act: #004077;
--prime-dis: #A1CAE5;
--second: #6C6C6C;
--second-hov: #4D4D4D;
--second-act: #2D2D2D;
--second-dis: #C0C0C0;
--blue-0: #2EB2E8;
}
.style-color{
background-color: var(--light);
}
.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: "PT Sans";
font-size: 16px;
-webkit-font-smoothing:antialiased;
}
body {
height: 100%;
padding: 0;
margin: 0;
color: var(--second-act);
background-color: var(--light);
.wrapper {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
.content {
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
left-content{
flex-basis: 100%;
background-color: var(--light);
.background{
width: 100%;
height: 400px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
flex-direction: column;
border-bottom: 1px solid var(--second-dis);
border-top: 1px solid var(--second-dis);
.left-content{
width: 100%;
height: 100%;
max-width: 1280px;
margin: 0 40px;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
.h1-jumbotron{
display: inline-block;
border-bottom: 12px solid var(--blue-0);
font-family: PT Sans Narrow;
font-size: 76px;
font-weight: 700;
line-height:100%;
letter-spacing: 0.76px;
color: white;
}
header-user-bar{
position: absolute;
right: 0;
top: 32px;
}
.menu{
position: absolute;
left: 0px;
top: 32px;
}
}
}
.edit-field{
height: 58px;
width: 100%;
background-color: var(--white);
display: flex;
justify-content: center;
.edit-field-row{
width: 100%;
max-width: 1280px;
margin: 0 40px;
display: flex;
justify-content: right;
align-items: center;
font-size: 20px;
gap: 8px;
}
}
}
.main-content{
flex-basis: 840px;
.pages{
width: 100%;
}
}
right-content{
flex-basis: 400px;
}
}
}
}
.limiter {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
h2 {
color: var(--second-act);
font-family: PT Sans Narrow;
font-size: 50px;
font-style: normal;
font-weight: 700;
line-height: 60px; /* 120% */
letter-spacing: 0.5px;
padding-top: 16px;
margin:0;
}
h3 {
color: var(--second-act);
font-family: PT Sans Narrow;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 60px; /* 120% */
letter-spacing: 0.36px;
padding-top: 8px;
margin:0;
}
h4 {
color: var(--second-act);
font-family: PT Sans Narrow;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 44px; /* 133.333% */
letter-spacing: 0.24px;
padding-top: 8px;
margin:0;
}
a {
text-decoration: none;
color: var(--prime);
cursor: pointer;
&:hover{
color: var(--prime-act);
};
&.document {
display: inline-flex;
&:before {
width: 20px;
height: 20px;
margin-right: 8px;
flex-shrink: 0;
background: transparent url('~projects/app-b/src/assets/images/icons/document/document_20.svg') 50% 50% no-repeat;
content: '';
}
}
}
span.link {
font-weight: normal;
color: #86898E;
cursor: pointer;
}
.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;
}
html-section ul{
padding: 0;
>li{
list-style: none;
&::before{
display: inline-block;
content: "";
width: 16px;
height: 2px;
background-color: var(--prime);
margin-bottom: 5px;
margin-right: 16px;
}
}
}
@media screen and (min-width: 1330px) {
.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 (max-width: 480px) {
h2{
font-size: 36px;
line-height: 44px;
}
h3{
font-size: 24px;
line-height: 32px;
}
h4{
color:var(--second);
}
}
@media screen and (max-width: 1330px) {
.limiter {
padding: 0 24px;
}
.fullwidth {
width: calc(100% + 48px);
margin-left: -24px;
margin-right: -24px;
}
}

View File

@ -0,0 +1,212 @@
button, .btn, a.btn {
display: inline-flex;
padding: 8px 24px;
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
border-radius: 12px;
border: 1px solid var(--prime);
background:var(--prime);
color: #FFF;
font-family: PT Sans Narrow;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
letter-spacing: 0.24px;
&:hover{
border: 1px solid var(--prime-hov);
background: var(--prime-hov);
}
&:active{
border: 1px solid #004077;
background: #004077;
}
&[disabled] {
border: 1px solid #A1CAE5;
background: #A1CAE5;
}
&.outline{
background:#FFF;
color: var(--prime);
&:hover{
border: 1px solid var(--prime-hov);
color: var(--prime-hov);
}
&: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(--second-act);
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;
}
&.trash {
background-image: url('~src/assets/images/icons/trash_grey_24dp.svg');
}
&.add-child {
background-image: url('~src/assets/images/icons/add_web_page_24dp.svg');
}
&.edit {
background-image: url('~src/assets/images/icons/edit_24dp.svg');
}
&.close {
background-image: url('~src/assets/images/icons/close_24dp.svg');
}
&.close-blue {
background-image: url('~src/assets/images/icons/close_blue_24dp.svg');
};
&.move {
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
};
}
div.move{
cursor: move;
width: 24px;
height: 24px;
background: center no-repeat;
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
}
// .inline-menu.default {
// display: inline-flex;
// align-items: center;
// gap: 24px;
// padding: 8px 24px;
// background-color: #F5F4F4;
// border: #E8E8E8 solid 1px;
// border-radius: 4px;
// button {
// width: 20px;
// height: 20px;
// background: transparent none 50% 50% no-repeat;
// &.add {background-image: url('~src/assets/images/icons/note_add_20.svg');}
// &.edit {background-image: url('~src/assets/images/icons/edit_20.svg');}
// &.delete {background-image: url('~src/assets/images/icons/trash_20.svg');}
// &.move {background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');}
// }
// }
// .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('~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('~src/assets/images/icons/add_comment_20dp.svg');}
// //&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');}
// &.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');}
// &.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');}
// //&.chain {background-image: url('~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('~src/assets/images/icons/checkbox_24dp.svg');
// }
// &.mixed {
// &:before {
// display: block;
// width: 12px;
// height: 2px;
// margin: auto;
// background-color: #ffffff;
// content: "";
// }
// }
// }
// }
// }

View File

@ -0,0 +1,62 @@
.documents.list.default {
background: transparent url('~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('~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;
}
}
}
}

View File

@ -0,0 +1,84 @@
.dropdown {
position: absolute;
width: 250px;
left: 48px;
top: 32px;
z-index: 10;
z-index: 1000;
.menu {
display: flex;
flex-direction: column;
border: var(--second-dis) solid 1px;
border-radius: var(--radius-1);
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
.type {
display: flex;
flex-direction: column;
background-color: var(--white);
border-bottom: var(--second-dis) solid 1px;
overflow: hidden;
&:first-child {
border-radius: var(--radius-1) var(--radius-1) 0 0;
}
&:last-child {
border-radius: 0 0 var(--radius-1) var(--radius-1);
.row {
border-bottom: none;
}
a, span {
border-bottom: none;
}
}
>&:hover {
background-color: var(--light);
}
.row {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 20px;
column-gap: 12px;
cursor: pointer;
color: var(--second-act);
.title {
}
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;
}
}
}
.sub-row {
padding: 12px 16px 12px 32px;
border-top: var(--second-dis) solid 1px;
color: var(--second);
background-color: var(--white);
cursor: pointer;
&:hover {
background-color: var(--light);
}
}
}
}
}

View File

@ -0,0 +1,166 @@
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-Italic.eot');
// src: local('Open Sans Italic'), local('OpenSans-Italic'),
// url('../fonts/sans/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-Italic.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-Italic.woff') format('woff'),
// url('../fonts/sans/OpenSans-Italic.ttf') format('truetype');
// font-weight: normal;
// font-style: italic;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-Regular.eot');
// src: local('Open Sans Regular'), local('OpenSans-Regular'),
// url('../fonts/sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-Regular.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-Regular.woff') format('woff'),
// url('../fonts/sans/OpenSans-Regular.ttf') format('truetype');
// font-weight: normal;
// font-style: normal;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-BoldItalic.eot');
// src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
// url('../fonts/sans/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-BoldItalic.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-BoldItalic.woff') format('woff'),
// url('../fonts/sans/OpenSans-BoldItalic.ttf') format('truetype');
// font-weight: bold;
// font-style: italic;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-SemiBold.eot');
// src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
// url('../fonts/sans/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-SemiBold.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-SemiBold.woff') format('woff'),
// url('../fonts/sans/OpenSans-SemiBold.ttf') format('truetype');
// font-weight: 600;
// font-style: normal;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-ExtraBoldItalic.eot');
// src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
// url('../fonts/sans/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-ExtraBoldItalic.woff') format('woff'),
// url('../fonts/sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
// font-weight: 800;
// font-style: italic;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-LightItalic.eot');
// src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
// url('../fonts/sans/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-LightItalic.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-LightItalic.woff') format('woff'),
// url('../fonts/sans/OpenSans-LightItalic.ttf') format('truetype');
// font-weight: 300;
// font-style: italic;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-Bold.eot');
// src: local('Open Sans Bold'), local('OpenSans-Bold'),
// url('../fonts/sans/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-Bold.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-Bold.woff') format('woff'),
// url('../fonts/sans/OpenSans-Bold.ttf') format('truetype');
// font-weight: bold;
// font-style: normal;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-SemiBoldItalic.eot');
// src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
// url('../fonts/sans/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-SemiBoldItalic.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-SemiBoldItalic.woff') format('woff'),
// url('../fonts/sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
// font-weight: 600;
// font-style: italic;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-ExtraBold.eot');
// src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
// url('../fonts/sans/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-ExtraBold.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-ExtraBold.woff') format('woff'),
// url('../fonts/sans/OpenSans-ExtraBold.ttf') format('truetype');
// font-weight: 800;
// font-style: normal;
// }
// @font-face {
// font-family: 'Open Sans';
// src: url('../fonts/sans/OpenSans-Light.eot');
// src: local('Open Sans Light'), local('OpenSans-Light'),
// url('../fonts/sans/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
// url('../fonts/sans/OpenSans-Light.woff2') format('woff2'),
// url('../fonts/sans/OpenSans-Light.woff') format('woff'),
// url('../fonts/sans/OpenSans-Light.ttf') format('truetype');
// font-weight: 300;
// font-style: normal;
// }
@font-face {
font-family: 'PT Sans';
src: url('../fonts/ptsans/PT_Sans-Web-Regular.ttf');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'PT Sans';
src: url('../fonts/ptsans/PT_Sans-Web-Bold.ttf');
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'PT Sans';
src: url('../fonts/ptsans/PT_Sans-Web-Italic.ttf');
font-style: italic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'PT Sans';
src: url('../fonts/ptsans/PT_Sans-Web-Bolditalic.ttf');
font-style: italic;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'PT Sans Narrow';
src: url('../fonts/ptsans/PTSansNarrow-Regular.ttf');
font-style: itnormalalic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'PT Sans Narrow';
src: url('../fonts/ptsans/PTSansNarrow-Bold.ttf');
font-style: normal;
font-weight: 700;
font-display: swap;
}

View File

@ -0,0 +1,140 @@
input, select, textarea {
width: 100%;
height: 40px;
padding: 8px 16px;
border-radius: 12px;
border: solid 1px var(--second-dis);
font-family: "PT Sans";
font-size: 20px;
color: var(--second-act);
background-color: #fff;
&:hover{
border-color: var(--second);
outline: none;
}
&:focus, &:focus-visible {
border-color: var(--prime);
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
}
.invalid {
input, select, .textbox {
border-color: #e60046!important;
}
}
.switch {
width: 44px;
height: 24px;
margin: auto 0;
padding: 2px;
border-radius: 12px;
background-color: #fff;
border: 1px solid var(--second);
cursor: pointer;
transition: background-color 0.3s;
&:before {
display: block;
width: 18px;
height: 18px;
background-color: var(--second-dis);
border-radius: 9px;
transition: transform 0.3s;
content: '';
}
&.active {
background-color:var(--prime);
border-color:var(--prime);
&:before {
transform: translateX(20px);
background-color: #fff;
}
}
&.active{
&:hover {
background-color:var(--prime-hov);
border-color:var(--prime-hov);
&:before {
transform: translateX(20px);
}
}
&:focus{
background-color:var(--prime-act);
border-color:var(--prime-act);
&:before {
transform: translateX(20px);
}
}
}
&:not(.active):hover {
border-color:var(--second-hov);
&:before {
background-color: var(--second);
}
}
&.disabled {
opacity: 0.5;
}
}
.checkbox {
position: absolute;
z-index: -1;
opacity: 0;
}
.checkbox+label {
display: inline-flex;
align-items: center;
user-select: none;
font-size: 20px;
}
.checkbox+label::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
flex-shrink: 0;
flex-grow: 0;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_base_24dp.svg");
}
.checkbox:checked+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_base_24dp.svg");
}
.checkbox:not(:disabled):not(:checked)+label:hover::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
}
.checkbox:not(:disabled):checked+label:hover::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
}
.checkbox:not(:disabled):checked:active+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_active_24dp.svg");
}
.checkbox:not(:disabled):not(:checked):active+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_active_24dp.svg");
}
.checkbox:focus:checked+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_hover_24dp.svg");
}
.checkbox:focus:not(:checked)+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_hover_24dp.svg");
}
.checkbox:disabled:checked+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_check_disabled_24dp.svg");
}
.checkbox:disabled:not(:checked)+label::before {
background-image: url("~/src/assets/images/icons/checkbox/checbox_none_disabled_24dp.svg");
}

View File

View File

@ -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("~src/assets/images/icons/edit_24dp.svg");
}
.delete {
//background-image: url("~src/assets/images/icons/delete_24dp.svg");
}
.toggle {
margin-top: auto;
margin-left: auto;
//background-image: url("~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;
}
}

View File

@ -0,0 +1,175 @@
header{
display: flex;
align-items: center;
justify-content: center;
background-color: var(--white);
.header{
width: 1280px;
height: 80px;
margin: 12px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
};
a.logo{
img{
width:114px;
height: 80px;
}
}
@media screen and (max-width: 1330px){
.header{
>pages-menu.top-menu, >a.vnii{
display: none;
}
}
}
@media screen and (min-width: 1330px){
.header{
.burger{
display: none;
}
>pages-menu.top-menu{
flex-direction: row;
gap:24px;
pages-menu-item{
font-size: 20px;
.item{
drop-down{
display: none;
}
}
.sub-menu:not(.current){
display:none;
}
.sub-menu>pages-menu{
position: absolute;
padding: 0;
height: 68px;
width: 100vw;
background-color: var(--white);
left: 0px;
top: 104px;
flex-direction: row;
gap:24px;
align-items: start;
justify-content: center;
z-index:1;
pages-menu-item{
pages-menu{
display: none;
}
}
}
}
}
}
}
right-content{
drop-down{
display: none !important;
}
.item{
padding: 10px;
}
.sub-menu>pages-menu{
padding-left: 0;
}
.lavel-1{
&.item{
display: none;
}
}
.lavel-2{
&.item{
display: none;
}
&.sub-menu{
display: none;
&.parent,&.current{
display: block;
>pages-menu{
background-color: var(--white);
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
}
}
}
}
.lavel-3 {
>a {
font-family: PT Sans Narrow;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px;
/* 133.333% */
letter-spacing: 0.24px;
color: var(--second);
&:hover {
color: var(--prime-act);
}
}
&.parent>a,
&.current>a {
color: var(--prime);
}
}
.lavel-4 {
a {
font-family: PT Sans;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 24px;
color: var(--second);
&:hover {
color: var(--second-act);
}
}
&.current,&.parent {
background-color: #ededed;
border-radius: 8px;
a {
color: var(--second-act);
}
}
}
}

View File

@ -0,0 +1,68 @@
.top-panel {
margin: 0 auto 32px;
max-width: 1240px;
&.pt-40 {
padding-top: 40px;
}
.buttons {
margin-bottom: 32px;
.btn {
font-weight: 700;
}
}
.filters {
padding: 16px 0 24px;
background-color: #F5F4F4;
border-top: #E8E8E8 solid 1px;
border-bottom: #E8E8E8 solid 1px;
.limiter {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.search {
flex-grow: 1;
label {
margin-bottom: 2px;
color: #86898E;
}
input {
height: 40px;
padding: 8px 52px 8px 16px;
border: #BFBFBF solid 1px;
border-radius: 12px;
background: #ffffff url('~src/assets/images/icons/search_24dp.svg') calc(100% - 12px) 50% no-repeat;
}
}
.advanced {
margin-left: 24px;
button {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
height: 40px;
padding: 8px 16px;
background-color: #F9B417;
color: #ffffff;
border-radius: 20px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
&:before {
width: 24px;
height: 24px;
background: transparent url('~src/assets/images/icons/filter_empty_24.svg') 50% 50% no-repeat;
content: '';
}
&.filled:before {
background-image: url('~src/assets/images/icons/filter_filled_24.svg');
}
}
}
}
}

View File

@ -0,0 +1,56 @@
.registry {
.bar {
background-color: #3E3D40;
color: #ffffff;
.menu {
button {
background: transparent 50% 50% no-repeat;
&.add.category {background-image: url('~src/assets/images/icons/add_library_24.svg');}
&.add.entry {background-image: url('~src/assets/images/icons/add_notes_24.svg');}
&.move {
background-image: url('~src/assets/images/icons/drag-n-drop_24w.svg');
cursor: move;
}
&.edit {background-image: url('~src/assets/images/icons/edit_24.svg');}
&.delete {background-image: url('~src/assets/images/icons/close_white_24dp.svg');}
}
}
.expand {
button {
background: url('~src/assets/images/icons/expand_less_24.svg') 50% 50% no-repeat;
}
}
}
registry-category {
display: block;
.bar {
background-color: #86898E;
}
registry-category {
.bar {
background-color: #F5F4F4;
color: #86898E;
.menu {
button {
&.add.category {background-image: url('~src/assets/images/icons/add_library_dark_24.svg');}
&.add.entry {background-image: url('~src/assets/images/icons/add_notes_dark_24.svg');}
&.move {background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');}
&.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');}
&.delete {background-image: url('~src/assets/images/icons/close_24dp.svg');}
}
}
.expand {
button {
background: url('~src/assets/images/icons/expand_less_dark_24.svg') 50% 50% no-repeat;
}
}
}
registry-category {
padding-left: 24px;
}
}
}
}

View File

@ -0,0 +1,387 @@
.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('~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('~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('~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);
}
}
}
}
}
// .slider-bar {
// position: fixed;
// top: 0;
// right: 0;
// display: flex;
// flex-direction: column;
// width: 100%;
// max-width: 720px;
// height: 100%;
// background-color: #ffffff;
// box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.16);
// overflow: hidden;
// animation: slide-from-right 0.3s;
// z-index: 110;
// &.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);
// }
// .header {
// padding: 14px 24px;
// border-bottom: 1px solid #C0C0C0;
// .title {
// display: flex;
// flex-direction: row;
// align-items: center;
// h2 {
// margin: 0;
// font-family: PT Sans Narrow;
// font-size: 36px;
// font-style: normal;
// font-weight: 700;
// line-height: 44px; /* 122.222% */
// letter-spacing: 0.36px;
// color: var(--dark-1);
// }
// .close {
// width: 24px;
// height: 24px;
// margin-left: auto;
// padding: 0;
// border: none;
// border-radius: 0;
// background: transparent url(/assets/images/icons/close_24dp.svg) 50% 50% no-repeat;
// }
// }
// .stepper {
// padding: 24px 0 0;
// .items {
// display: flex;
// flex-direction: row;
// gap: 24px;
// .item {
// width: 150px;
// flex-shrink: 1;
// font-size: 14px;
// overflow: hidden;
// .num {
// position: relative;
// width: calc(100% - 13px);
// height: 24px;
// 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('~src/assets/images/icons/step_upcoming.svg') 100% 50% no-repeat;
// content: '';
// }
// }
// .name {
// font-size: 14px;
// color: var(--second);
// }
// &.active {
// .num {
// background-color: #B88E12;
// color: #ffffff;
// &:after {
// background-image: url('~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('~src/assets/images/icons/step_finished.svg');
// }
// }
// .name {
// color: #B88E12;
// }
// }
// }
// }
// }
// }
// .body {
// height: 100%;
// padding: 32px 24px;
// flex-grow: 1;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
// }
// .footer {
// display: flex;
// flex-direction: row;
// align-items: center;
// padding: 16px 24px;
// border-top: 1px solid #C0C0C0;
// .left {
// .reset {
// color: var(--second);
// cursor: pointer;
// }
// .notice {
// font-family: PT Sans;
// font-size: 16px;
// font-style: normal;
// font-weight: 400;
// line-height: 24px; /* 150% */
// }
// }
// .right {
// margin-left: auto;
// display: flex;
// button {
// margin-left: 24px;
// }
// }
// }
// }
// .slider-overlay {
// position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background-color: rgba(0, 0, 0, 0.37);
// z-index: 100;
// }
// @media screen and (max-width: 767px) {
// .slider-bar {
// .header, .body, .footer {
// padding: 16px;
// }
// .footer {
// .left {
// font-size: 14px;
// }
// .right {
// button {
// padding: 8px 16px;
// margin-left: 16px;
// }
// }
// }
// }
// }

View File

@ -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;
}
}
}

View File

@ -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;
}
}
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 464 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 84 KiB

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ico">
<path id="Vector" d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="currentColor"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ico">
<path id="Vector" d="M11 4V16.175L5.4 10.575L4 12L12 20L20 12L18.6 10.575L13 16.175V4H11Z" fill="currentColor"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 234 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ico">
<path id="arrow_drop_down_24" d="M12 9L17 14H7L12 9Z" fill="currentColor"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 197 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ico">
<path id="arrow_drop_down_24" d="M12 15L7 10H17L12 15Z" fill="currentColor"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 199 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="ico">
<path id="Vector" d="M11 20V7.825L5.4 13.425L4 12L12 4L20 12L18.6 13.425L13 7.825V20H11Z" fill="currentColor"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 233 B

View File

@ -0,0 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" id="ico">
<rect x="6" y="10" width="28" height="4" fill="#0070BA"/>
<rect x="6" y="18" width="28" height="4" fill="#0070BA"/>
<rect x="6" y="26" width="28" height="4" fill="#0070BA"/>
</svg>

After

Width:  |  Height:  |  Size: 286 B

Some files were not shown because too many files have changed in this diff Show More