Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 09:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(demo): added backend integration descriptions

Browse source
This commit is contained in:
Sergey Filinsky 2020-09-16 22:18:58 +03:00
parent 3a24d308f2
commit cc937192d7
19 changed files with 672 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss Normal file
View file

@ -0,0 +1,108 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
width: 100%;
height: 0;
position: relative;
padding-top: 80%; /* Aspect Ratio */
//background-color: transparentize(red, 0.8);
font-size: 0.9vw;
$subheader-color: nb-theme(text-hint-color);
.header, .subheader {
justify-content: center;
}
& > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 0;
& > .header {
font-size: 1.25em;
font-weight: bold;
}
& > .subheader {
font-size: 0.9em;
color: $subheader-color;
}
}
div {
display: flex;
text-align: center;
}
.json-container {
font-weight: bold;
div {
margin: 0 1em;
}
}
.headers-container {
height: 2.5rem;
& > .header {
font-size: 0.9em;
height: 0.9rem;
font-weight: bold;
}
& > .subheader {
font-size: 0.7em;
height: 0.7rem;
color: $subheader-color;
}
}
.dashboard-container {
width: 40%;
}
.json-container {
width: fit-content;
nb-icon {
width: 0.75em;
height: 0.75em;
}
}
.backend-container {
width: 40%;
}
.border-dashed {
border: 2px dashed nb-theme(border-basic-color-4);
}
.pad1 {
background-color: transparentize(nb-theme(background-basic-color-2), 0.5);
padding: 1em;
height: 100%;
}
.item {
background-color: nb-theme(background-basic-color-1);
justify-content: center;
padding: 0.5em 0;
flex-direction: column;
& > .header {
font-size: 0.7em;
font-weight: bold;
line-height: 1.1em;
}
& > .subheader {
font-size: 0.6em;
color: $subheader-color;
line-height: 1em;
flex-direction: column;
align-items: center;
}
}
}