theme init
This commit is contained in:
Ben Wilson
+9
-2
@@ -32,7 +32,14 @@
|
|||||||
"styles": [
|
"styles": [
|
||||||
"src/styles.scss"
|
"src/styles.scss"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"stylePreprocessorOptions": {
|
||||||
|
"includePaths": [
|
||||||
|
"src/styles"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"scripts": [
|
||||||
|
"node_modules/chart.js/dist/chart.js"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
@@ -101,4 +108,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Generated
+3187
-2178
File diff suppressed because it is too large
Load Diff
+20
-17
@@ -10,29 +10,32 @@
|
|||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^16.0.0",
|
"@angular/animations": "15.1.5",
|
||||||
"@angular/common": "^16.0.0",
|
"@angular/common": "15.1.5",
|
||||||
"@angular/compiler": "^16.0.0",
|
"@angular/compiler": "15.1.5",
|
||||||
"@angular/core": "^16.0.0",
|
"@angular/core": "15.1.5",
|
||||||
"@angular/forms": "^16.0.0",
|
"@angular/forms": "15.1.5",
|
||||||
"@angular/platform-browser": "^16.0.0",
|
"@angular/platform-browser": "15.1.5",
|
||||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
"@angular/platform-browser-dynamic": "15.1.5",
|
||||||
"@angular/router": "^16.0.0",
|
"@angular/router": "15.1.5",
|
||||||
|
"chart.js": "^4.3.0",
|
||||||
|
"primeflex": "^3.3.0",
|
||||||
|
"primeng": "15.2.0",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.13.0"
|
"zone.js": "~0.12.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^16.0.3",
|
"@angular-devkit/build-angular": "^15.1.6",
|
||||||
"@angular/cli": "~16.0.3",
|
"@angular/cli": "~15.1.6",
|
||||||
"@angular/compiler-cli": "^16.0.0",
|
"@angular/compiler-cli": "^15.1.5",
|
||||||
"@types/jasmine": "~4.3.0",
|
"@types/jasmine": "~4.0.0",
|
||||||
"jasmine-core": "~4.6.0",
|
"jasmine-core": "~4.2.0",
|
||||||
"karma": "~6.4.0",
|
"karma": "~6.4.0",
|
||||||
"karma-chrome-launcher": "~3.2.0",
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
"karma-coverage": "~2.2.0",
|
"karma-coverage": "~2.2.0",
|
||||||
"karma-jasmine": "~5.1.0",
|
"karma-jasmine": "~5.1.0",
|
||||||
"karma-jasmine-html-reporter": "~2.0.0",
|
"karma-jasmine-html-reporter": "~2.0.0",
|
||||||
"typescript": "~5.0.2"
|
"typescript": "~4.8.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,21 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule, Routes } from '@angular/router';
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
|
||||||
const routes: Routes = [];
|
import { AppLayoutComponent } from './layout/app.layout.component';
|
||||||
|
import { SplashComponent } from './splash/splash.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: AppLayoutComponent,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: SplashComponent
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forRoot(routes)],
|
imports: [RouterModule.forRoot(routes)],
|
||||||
|
|||||||
+1
-484
@@ -1,484 +1 @@
|
|||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
<router-outlet></router-outlet>
|
||||||
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
font-size: 14px;
|
|
||||||
color: #333;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacer {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 60px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #1976d2;
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar img {
|
|
||||||
margin: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar #twitter-logo {
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar #youtube-logo {
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar #twitter-logo:hover,
|
|
||||||
.toolbar #youtube-logo:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
margin: 82px auto 32px;
|
|
||||||
padding: 0 16px;
|
|
||||||
max-width: 960px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg.material-icons {
|
|
||||||
height: 24px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg.material-icons:not(:last-child) {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card svg.material-icons path {
|
|
||||||
fill: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
all: unset;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
background-color: #fafafa;
|
|
||||||
height: 40px;
|
|
||||||
width: 200px;
|
|
||||||
margin: 0 8px 16px;
|
|
||||||
padding: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(:last-child) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.card-small {
|
|
||||||
height: 16px;
|
|
||||||
width: 168px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(.highlight-card) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(.highlight-card):hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container .card:not(.highlight-card):hover .material-icons path {
|
|
||||||
fill: rgb(105, 103, 103);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.highlight-card {
|
|
||||||
background-color: #1976d2;
|
|
||||||
color: white;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none;
|
|
||||||
width: auto;
|
|
||||||
min-width: 30%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.card.highlight-card span {
|
|
||||||
margin-left: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#rocket {
|
|
||||||
width: 80px;
|
|
||||||
position: absolute;
|
|
||||||
left: -10px;
|
|
||||||
top: -24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#rocket-smoke {
|
|
||||||
height: calc(100vh - 95px);
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 180px;
|
|
||||||
z-index: -10;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited,
|
|
||||||
a:hover {
|
|
||||||
color: #1976d2;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #125699;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal {
|
|
||||||
position: relative;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 600px;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding-top: 45px;
|
|
||||||
margin-top: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: rgb(15, 15, 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal::before {
|
|
||||||
content: "\2022 \2022 \2022";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: rgb(58, 58, 58);
|
|
||||||
color: #c2c3c4;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 0;
|
|
||||||
padding: 14px 0;
|
|
||||||
text-indent: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal pre {
|
|
||||||
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
|
||||||
color: white;
|
|
||||||
padding: 0 1rem 1rem;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle-link {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
border-radius: 40px;
|
|
||||||
margin: 8px;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
||||||
transition: 1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.circle-link:hover {
|
|
||||||
transform: translateY(-0.25rem);
|
|
||||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
margin-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-star-badge {
|
|
||||||
color: #24292e;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border: 1px solid rgba(27,31,35,.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
|
|
||||||
margin-left: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-star-badge:hover {
|
|
||||||
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
|
|
||||||
border-color: rgba(27,31,35,.35);
|
|
||||||
background-position: -.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.github-star-badge .material-icons {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#clouds {
|
|
||||||
position: fixed;
|
|
||||||
bottom: -160px;
|
|
||||||
left: -230px;
|
|
||||||
z-index: -10;
|
|
||||||
width: 1920px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Styles */
|
|
||||||
@media screen and (max-width: 767px) {
|
|
||||||
.card-container > *:not(.circle-link) ,
|
|
||||||
.terminal {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:not(.highlight-card) {
|
|
||||||
height: 16px;
|
|
||||||
margin: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card.highlight-card span {
|
|
||||||
margin-left: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg#rocket-smoke {
|
|
||||||
right: 120px;
|
|
||||||
transform: rotate(-5deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
|
||||||
svg#rocket-smoke {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- Toolbar -->
|
|
||||||
<div class="toolbar" role="banner">
|
|
||||||
<img
|
|
||||||
width="40"
|
|
||||||
alt="Angular Logo"
|
|
||||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
|
|
||||||
/>
|
|
||||||
<span>Welcome</span>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
|
|
||||||
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
|
||||||
<rect width="400" height="400" fill="none"/>
|
|
||||||
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
|
|
||||||
<svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
|
|
||||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
|
||||||
<path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content" role="main">
|
|
||||||
|
|
||||||
<!-- Highlight Card -->
|
|
||||||
<div class="card highlight-card card-small">
|
|
||||||
|
|
||||||
<svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
|
|
||||||
<title>Rocket Ship</title>
|
|
||||||
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
|
|
||||||
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
|
|
||||||
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
|
|
||||||
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
|
|
||||||
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<span>{{ title }} app is running!</span>
|
|
||||||
|
|
||||||
<svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
|
|
||||||
<title>Rocket Ship Smoke</title>
|
|
||||||
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Resources -->
|
|
||||||
<h2>Resources</h2>
|
|
||||||
<p>Here are some links to help you get started:</p>
|
|
||||||
|
|
||||||
<div class="card-container">
|
|
||||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
|
|
||||||
<span>Learn Angular</span>
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
|
|
||||||
|
|
||||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
|
|
||||||
<span>CLI Documentation</span>
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
|
|
||||||
<span>Angular Material</span>
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
|
|
||||||
<span>Angular Blog</span>
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
|
|
||||||
<span>Angular DevTools</span>
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Next Steps -->
|
|
||||||
<h2>Next Steps</h2>
|
|
||||||
<p>What do you want to do next with your app?</p>
|
|
||||||
|
|
||||||
<input type="hidden" #selection>
|
|
||||||
|
|
||||||
<div class="card-container">
|
|
||||||
<button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
||||||
<span>New Component</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
||||||
<span>Angular Material</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
||||||
<span>Add PWA Support</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
||||||
<span>Add Dependency</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
||||||
<span>Run and Watch Tests</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
|
|
||||||
<span>Build for Production</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Terminal -->
|
|
||||||
<div class="terminal" [ngSwitch]="selection.value">
|
|
||||||
<pre *ngSwitchDefault>ng generate component xyz</pre>
|
|
||||||
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
|
|
||||||
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
|
|
||||||
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
|
|
||||||
<pre *ngSwitchCase="'test'">ng test</pre>
|
|
||||||
<pre *ngSwitchCase="'build'">ng build</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Links -->
|
|
||||||
<div class="card-container">
|
|
||||||
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
|
|
||||||
<title>Meetup Logo</title>
|
|
||||||
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
|
|
||||||
<title>Discord Logo</title>
|
|
||||||
<path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
|
|
||||||
<path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer>
|
|
||||||
Love Angular?
|
|
||||||
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
|
|
||||||
<div class="github-star-badge">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
|
||||||
Star
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
|
|
||||||
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
|
|
||||||
<title>Gray Clouds Background</title>
|
|
||||||
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
|
|
||||||
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
|
|
||||||
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
@@ -1,16 +1,22 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
|
||||||
|
import { PrimeNGModule } from '../prime-ng.module';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
import { AppLayoutModule } from './layout/app.layout.module';
|
||||||
|
import { SplashComponent } from './splash/splash.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent
|
AppComponent,
|
||||||
|
SplashComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule
|
AppRoutingModule,
|
||||||
|
PrimeNGModule,
|
||||||
|
AppLayoutModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export interface MenuChangeEvent {
|
||||||
|
key: string;
|
||||||
|
routeEvent?: boolean;
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<div class="layout-footer">
|
||||||
|
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { LayoutService } from "./service/app.layout.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-footer',
|
||||||
|
templateUrl: './app.footer.component.html'
|
||||||
|
})
|
||||||
|
export class AppFooterComponent {
|
||||||
|
constructor(public layoutService: LayoutService) { }
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
<div class="layout-wrapper" [ngClass]="containerClass">
|
||||||
|
<app-topbar></app-topbar>
|
||||||
|
<div class="layout-sidebar">
|
||||||
|
<app-sidebar></app-sidebar>
|
||||||
|
</div>
|
||||||
|
<div class="layout-main-container">
|
||||||
|
<div class="layout-main">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
<app-footer></app-footer>
|
||||||
|
</div>
|
||||||
|
<app-config></app-config>
|
||||||
|
<div class="layout-mask"></div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
|
||||||
|
import { NavigationEnd, Router } from '@angular/router';
|
||||||
|
import { filter, Subscription } from 'rxjs';
|
||||||
|
import { LayoutService } from "./service/app.layout.service";
|
||||||
|
import { AppSidebarComponent } from "./app.sidebar.component";
|
||||||
|
import { AppTopBarComponent } from './app.topbar.component';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-layout',
|
||||||
|
templateUrl: './app.layout.component.html'
|
||||||
|
})
|
||||||
|
export class AppLayoutComponent implements OnDestroy {
|
||||||
|
|
||||||
|
overlayMenuOpenSubscription: Subscription;
|
||||||
|
|
||||||
|
menuOutsideClickListener: any;
|
||||||
|
|
||||||
|
profileMenuOutsideClickListener: any;
|
||||||
|
|
||||||
|
@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
|
||||||
|
|
||||||
|
@ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
|
||||||
|
|
||||||
|
constructor(public layoutService: LayoutService, public renderer: Renderer2, public router: Router) {
|
||||||
|
this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
|
||||||
|
if (!this.menuOutsideClickListener) {
|
||||||
|
this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
|
||||||
|
const isOutsideClicked = !(this.appSidebar.el.nativeElement.isSameNode(event.target) || this.appSidebar.el.nativeElement.contains(event.target)
|
||||||
|
|| this.appTopbar.menuButton.nativeElement.isSameNode(event.target) || this.appTopbar.menuButton.nativeElement.contains(event.target));
|
||||||
|
|
||||||
|
if (isOutsideClicked) {
|
||||||
|
this.hideMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.profileMenuOutsideClickListener) {
|
||||||
|
this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
|
||||||
|
const isOutsideClicked = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || this.appTopbar.menu.nativeElement.contains(event.target)
|
||||||
|
|| this.appTopbar.topbarMenuButton.nativeElement.isSameNode(event.target) || this.appTopbar.topbarMenuButton.nativeElement.contains(event.target));
|
||||||
|
|
||||||
|
if (isOutsideClicked) {
|
||||||
|
this.hideProfileMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.layoutService.state.staticMenuMobileActive) {
|
||||||
|
this.blockBodyScroll();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||||
|
.subscribe(() => {
|
||||||
|
this.hideMenu();
|
||||||
|
this.hideProfileMenu();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
hideMenu() {
|
||||||
|
this.layoutService.state.overlayMenuActive = false;
|
||||||
|
this.layoutService.state.staticMenuMobileActive = false;
|
||||||
|
this.layoutService.state.menuHoverActive = false;
|
||||||
|
if (this.menuOutsideClickListener) {
|
||||||
|
this.menuOutsideClickListener();
|
||||||
|
this.menuOutsideClickListener = null;
|
||||||
|
}
|
||||||
|
this.unblockBodyScroll();
|
||||||
|
}
|
||||||
|
|
||||||
|
hideProfileMenu() {
|
||||||
|
this.layoutService.state.profileSidebarVisible = false;
|
||||||
|
if (this.profileMenuOutsideClickListener) {
|
||||||
|
this.profileMenuOutsideClickListener();
|
||||||
|
this.profileMenuOutsideClickListener = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockBodyScroll(): void {
|
||||||
|
if (document.body.classList) {
|
||||||
|
document.body.classList.add('blocked-scroll');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.body.className += ' blocked-scroll';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
unblockBodyScroll(): void {
|
||||||
|
if (document.body.classList) {
|
||||||
|
document.body.classList.remove('blocked-scroll');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
|
||||||
|
'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get containerClass() {
|
||||||
|
return {
|
||||||
|
'layout-theme-light': this.layoutService.config.colorScheme === 'light',
|
||||||
|
'layout-theme-dark': this.layoutService.config.colorScheme === 'dark',
|
||||||
|
'layout-overlay': this.layoutService.config.menuMode === 'overlay',
|
||||||
|
'layout-static': this.layoutService.config.menuMode === 'static',
|
||||||
|
'layout-static-inactive': this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config.menuMode === 'static',
|
||||||
|
'layout-overlay-active': this.layoutService.state.overlayMenuActive,
|
||||||
|
'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
|
||||||
|
'p-input-filled': this.layoutService.config.inputStyle === 'filled',
|
||||||
|
'p-ripple-disabled': !this.layoutService.config.ripple
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
if (this.overlayMenuOpenSubscription) {
|
||||||
|
this.overlayMenuOpenSubscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.menuOutsideClickListener) {
|
||||||
|
this.menuOutsideClickListener();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
import { InputTextModule } from 'primeng/inputtext';
|
||||||
|
import { SidebarModule } from 'primeng/sidebar';
|
||||||
|
import { BadgeModule } from 'primeng/badge';
|
||||||
|
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||||
|
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||||
|
import { RippleModule } from 'primeng/ripple';
|
||||||
|
import { AppMenuComponent } from './app.menu.component';
|
||||||
|
import { AppMenuitemComponent } from './app.menuitem.component';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
import { AppTopBarComponent } from './app.topbar.component';
|
||||||
|
import { AppFooterComponent } from './app.footer.component';
|
||||||
|
import { AppConfigModule } from './config/config.module';
|
||||||
|
import { AppSidebarComponent } from "./app.sidebar.component";
|
||||||
|
import { AppLayoutComponent } from "./app.layout.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AppMenuitemComponent,
|
||||||
|
AppTopBarComponent,
|
||||||
|
AppFooterComponent,
|
||||||
|
AppMenuComponent,
|
||||||
|
AppSidebarComponent,
|
||||||
|
AppLayoutComponent,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
FormsModule,
|
||||||
|
HttpClientModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
InputTextModule,
|
||||||
|
SidebarModule,
|
||||||
|
BadgeModule,
|
||||||
|
RadioButtonModule,
|
||||||
|
InputSwitchModule,
|
||||||
|
RippleModule,
|
||||||
|
RouterModule,
|
||||||
|
AppConfigModule
|
||||||
|
],
|
||||||
|
exports: [AppLayoutComponent]
|
||||||
|
})
|
||||||
|
export class AppLayoutModule { }
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<ul class="layout-menu">
|
||||||
|
<ng-container *ngFor="let item of model; let i = index;">
|
||||||
|
<li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
|
||||||
|
<li *ngIf="item.separator" class="menu-separator"></li>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
</ul>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
import { LayoutService } from './service/app.layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-menu',
|
||||||
|
templateUrl: './app.menu.component.html'
|
||||||
|
})
|
||||||
|
export class AppMenuComponent implements OnInit {
|
||||||
|
|
||||||
|
model: any[] = [];
|
||||||
|
|
||||||
|
constructor(public layoutService: LayoutService) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.model = [
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
items: [
|
||||||
|
{ label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/'] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
import { MenuChangeEvent } from './api/menuchangeevent';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class MenuService {
|
||||||
|
|
||||||
|
private menuSource = new Subject<MenuChangeEvent>();
|
||||||
|
private resetSource = new Subject();
|
||||||
|
|
||||||
|
menuSource$ = this.menuSource.asObservable();
|
||||||
|
resetSource$ = this.resetSource.asObservable();
|
||||||
|
|
||||||
|
onMenuStateChange(event: MenuChangeEvent) {
|
||||||
|
this.menuSource.next(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.resetSource.next(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
import { ChangeDetectorRef, Component, Host, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
|
||||||
|
import { NavigationEnd, Router } from '@angular/router';
|
||||||
|
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { filter } from 'rxjs/operators';
|
||||||
|
import { MenuService } from './app.menu.service';
|
||||||
|
import { LayoutService } from './service/app.layout.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
// eslint-disable-next-line @angular-eslint/component-selector
|
||||||
|
selector: '[app-menuitem]',
|
||||||
|
template: `
|
||||||
|
<ng-container>
|
||||||
|
<div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
|
||||||
|
<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)"
|
||||||
|
[ngClass]="item.class" [attr.target]="item.target" tabindex="0" pRipple>
|
||||||
|
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||||
|
<span class="layout-menuitem-text">{{item.label}}</span>
|
||||||
|
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||||
|
</a>
|
||||||
|
<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.class"
|
||||||
|
[routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{ paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
|
||||||
|
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment"
|
||||||
|
[skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
|
||||||
|
[attr.target]="item.target" tabindex="0" pRipple>
|
||||||
|
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||||
|
<span class="layout-menuitem-text">{{item.label}}</span>
|
||||||
|
<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
|
||||||
|
<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
|
||||||
|
<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
|
||||||
|
</ng-template>
|
||||||
|
</ul>
|
||||||
|
</ng-container>
|
||||||
|
`,
|
||||||
|
animations: [
|
||||||
|
trigger('children', [
|
||||||
|
state('collapsed', style({
|
||||||
|
height: '0'
|
||||||
|
})),
|
||||||
|
state('expanded', style({
|
||||||
|
height: '*'
|
||||||
|
})),
|
||||||
|
transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
||||||
|
])
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class AppMenuitemComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
|
@Input() item: any;
|
||||||
|
|
||||||
|
@Input() index!: number;
|
||||||
|
|
||||||
|
@Input() @HostBinding('class.layout-root-menuitem') root!: boolean;
|
||||||
|
|
||||||
|
@Input() parentKey!: string;
|
||||||
|
|
||||||
|
active = false;
|
||||||
|
|
||||||
|
menuSourceSubscription: Subscription;
|
||||||
|
|
||||||
|
menuResetSubscription: Subscription;
|
||||||
|
|
||||||
|
key: string = "";
|
||||||
|
|
||||||
|
constructor(public layoutService: LayoutService, private cd: ChangeDetectorRef, public router: Router, private menuService: MenuService) {
|
||||||
|
this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
|
||||||
|
Promise.resolve(null).then(() => {
|
||||||
|
if (value.routeEvent) {
|
||||||
|
this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
|
||||||
|
this.active = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
|
||||||
|
this.active = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.router.events.pipe(filter(event => event instanceof NavigationEnd))
|
||||||
|
.subscribe(params => {
|
||||||
|
if (this.item.routerLink) {
|
||||||
|
this.updateActiveStateFromRoute();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
|
||||||
|
|
||||||
|
if (this.item.routerLink) {
|
||||||
|
this.updateActiveStateFromRoute();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
updateActiveStateFromRoute() {
|
||||||
|
let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
|
||||||
|
|
||||||
|
if (activeRoute) {
|
||||||
|
this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
itemClick(event: Event) {
|
||||||
|
// avoid processing disabled items
|
||||||
|
if (this.item.disabled) {
|
||||||
|
event.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// execute command
|
||||||
|
if (this.item.command) {
|
||||||
|
this.item.command({ originalEvent: event, item: this.item });
|
||||||
|
}
|
||||||
|
|
||||||
|
// toggle active state
|
||||||
|
if (this.item.items) {
|
||||||
|
this.active = !this.active;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.menuService.onMenuStateChange({ key: this.key });
|
||||||
|
}
|
||||||
|
|
||||||
|
get submenuAnimation() {
|
||||||
|
return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostBinding('class.active-menuitem')
|
||||||
|
get activeClass() {
|
||||||
|
return this.active && !this.root;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
if (this.menuSourceSubscription) {
|
||||||
|
this.menuSourceSubscription.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.menuResetSubscription) {
|
||||||
|
this.menuResetSubscription.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<app-menu></app-menu>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { Component, ElementRef } from '@angular/core';
|
||||||
|
import { LayoutService } from "./service/app.layout.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-sidebar',
|
||||||
|
templateUrl: './app.sidebar.component.html'
|
||||||
|
})
|
||||||
|
export class AppSidebarComponent {
|
||||||
|
constructor(public layoutService: LayoutService, public el: ElementRef) { }
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<div class="layout-topbar">
|
||||||
|
<a class="layout-topbar-logo" routerLink="">
|
||||||
|
<!-- <img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="logo">
|
||||||
|
<span>SAKAI</span> -->
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button #menubutton class="p-link layout-menu-button layout-topbar-button" (click)="layoutService.onMenuToggle()">
|
||||||
|
<i class="pi pi-bars"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button #topbarmenubutton class="p-link layout-topbar-menu-button layout-topbar-button"
|
||||||
|
(click)="layoutService.showProfileSidebar()">
|
||||||
|
<i class="pi pi-ellipsis-v"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div #topbarmenu class="layout-topbar-menu"
|
||||||
|
[ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}">
|
||||||
|
<!-- <button class="p-link layout-topbar-button">
|
||||||
|
<i class="pi pi-calendar"></i>
|
||||||
|
<span>Calendar</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-link layout-topbar-button">
|
||||||
|
<i class="pi pi-user"></i>
|
||||||
|
<span>Profile</span>
|
||||||
|
</button>
|
||||||
|
<button class="p-link layout-topbar-button" [routerLink]="'/documentation'">
|
||||||
|
<i class="pi pi-cog"></i>
|
||||||
|
<span>Settings</span>
|
||||||
|
</button> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||||
|
import { MenuItem } from 'primeng/api';
|
||||||
|
import { LayoutService } from "./service/app.layout.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-topbar',
|
||||||
|
templateUrl: './app.topbar.component.html'
|
||||||
|
})
|
||||||
|
export class AppTopBarComponent {
|
||||||
|
|
||||||
|
items!: MenuItem[];
|
||||||
|
|
||||||
|
@ViewChild('menubutton') menuButton!: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild('topbarmenubutton') topbarMenuButton!: ElementRef;
|
||||||
|
|
||||||
|
@ViewChild('topbarmenu') menu!: ElementRef;
|
||||||
|
|
||||||
|
constructor(public layoutService: LayoutService) { }
|
||||||
|
}
|
||||||
@@ -0,0 +1,242 @@
|
|||||||
|
<button class="layout-config-button p-link" type="button" (click)="onConfigButtonClick()">
|
||||||
|
<i class="pi pi-cog"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p-sidebar [(visible)]="visible" position="right" [transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'" styleClass="layout-config-sidebar w-20rem">
|
||||||
|
<h5>Scale</h5>
|
||||||
|
<div class="flex align-items-center">
|
||||||
|
<button icon="pi pi-minus" type="button" pButton (click)="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" [disabled]="scale === scales[0]"></button>
|
||||||
|
<div class="flex gap-2 align-items-center">
|
||||||
|
<i class="pi pi-circle-fill text-300" *ngFor="let s of scales" [ngClass]="{'text-primary-500': s === scale}"></i>
|
||||||
|
</div>
|
||||||
|
<button icon="pi pi-plus" type="button" pButton (click)="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" [disabled]="scale === scales[scales.length - 1]"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ng-container *ngIf="!minimal">
|
||||||
|
<h5>Menu Type</h5>
|
||||||
|
<div class="field-radiobutton">
|
||||||
|
<p-radioButton name="menuMode" value="static" [(ngModel)]="menuMode" inputId="mode1"></p-radioButton>
|
||||||
|
<label for="mode1">Static</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-radiobutton">
|
||||||
|
<p-radioButton name="menuMode" value="overlay" [(ngModel)]="menuMode" inputId="mode2"></p-radioButton>
|
||||||
|
<label for="mode2">Overlay</label>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="!minimal">
|
||||||
|
<h5>Input Style</h5>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="field-radiobutton flex-1">
|
||||||
|
<p-radioButton name="inputStyle" value="outlined" [(ngModel)]="inputStyle" inputId="outlined_input"></p-radioButton>
|
||||||
|
<label for="outlined_input">Outlined</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-radiobutton flex-1">
|
||||||
|
<p-radioButton name="inputStyle" value="filled" [(ngModel)]="inputStyle" inputId="filled_input"></p-radioButton>
|
||||||
|
<label for="filled_input">Filled</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Ripple Effect</h5>
|
||||||
|
<p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
<h5>Bootstrap</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-light-blue', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-light-purple', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-dark-blue', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('bootstrap4-dark-purple', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Material Design</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-light-indigo', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-light-deeppurple', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-dark-indigo', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('md-dark-deeppurple', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Material Design Compact</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-light-indigo', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-light-deeppurple', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-dark-indigo', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('mdc-dark-deeppurple', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Tailwind</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('tailwind-light', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Fluent UI</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('fluent-light', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>PrimeOne Design - 2022</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-indigo', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-blue', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-purple', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-light-teal', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-indigo', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-blue', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-purple', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('lara-dark-teal', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>PrimeOne Design - 2021</h5>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-blue', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-green', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-orange', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('saga-purple', 'light')">
|
||||||
|
<img src="assets/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-blue', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-green', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-orange', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('vela-purple', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-blue', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-green', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-orange', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<button class="p-link w-2rem h-2rem" (click)="changeTheme('arya-purple', 'dark')">
|
||||||
|
<img src="assets/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</p-sidebar>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
import { LayoutService } from "../service/app.layout.service";
|
||||||
|
import { MenuService } from "../app.menu.service";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-config',
|
||||||
|
templateUrl: './app.config.component.html'
|
||||||
|
})
|
||||||
|
export class AppConfigComponent {
|
||||||
|
|
||||||
|
@Input() minimal: boolean = false;
|
||||||
|
|
||||||
|
scales: number[] = [12, 13, 14, 15, 16];
|
||||||
|
|
||||||
|
constructor(public layoutService: LayoutService, public menuService: MenuService) { }
|
||||||
|
|
||||||
|
get visible(): boolean {
|
||||||
|
return this.layoutService.state.configSidebarVisible;
|
||||||
|
}
|
||||||
|
|
||||||
|
set visible(_val: boolean) {
|
||||||
|
this.layoutService.state.configSidebarVisible = _val;
|
||||||
|
}
|
||||||
|
|
||||||
|
get scale(): number {
|
||||||
|
return this.layoutService.config.scale;
|
||||||
|
}
|
||||||
|
|
||||||
|
set scale(_val: number) {
|
||||||
|
this.layoutService.config.scale = _val;
|
||||||
|
}
|
||||||
|
|
||||||
|
get menuMode(): string {
|
||||||
|
return this.layoutService.config.menuMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
set menuMode(_val: string) {
|
||||||
|
this.layoutService.config.menuMode = _val;
|
||||||
|
}
|
||||||
|
|
||||||
|
get inputStyle(): string {
|
||||||
|
return this.layoutService.config.inputStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
set inputStyle(_val: string) {
|
||||||
|
this.layoutService.config.inputStyle = _val;
|
||||||
|
}
|
||||||
|
|
||||||
|
get ripple(): boolean {
|
||||||
|
return this.layoutService.config.ripple;
|
||||||
|
}
|
||||||
|
|
||||||
|
set ripple(_val: boolean) {
|
||||||
|
this.layoutService.config.ripple = _val;
|
||||||
|
}
|
||||||
|
|
||||||
|
onConfigButtonClick() {
|
||||||
|
this.layoutService.showConfigSidebar();
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTheme(theme: string, colorScheme: string) {
|
||||||
|
const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
|
||||||
|
const newHref = themeLink.getAttribute('href')!.replace(this.layoutService.config.theme, theme);
|
||||||
|
this.layoutService.config.colorScheme
|
||||||
|
this.replaceThemeLink(newHref, () => {
|
||||||
|
this.layoutService.config.theme = theme;
|
||||||
|
this.layoutService.config.colorScheme = colorScheme;
|
||||||
|
this.layoutService.onConfigUpdate();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
replaceThemeLink(href: string, onComplete: Function) {
|
||||||
|
const id = 'theme-css';
|
||||||
|
const themeLink = <HTMLLinkElement>document.getElementById('theme-css');
|
||||||
|
const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
|
||||||
|
|
||||||
|
cloneLinkElement.setAttribute('href', href);
|
||||||
|
cloneLinkElement.setAttribute('id', id + '-clone');
|
||||||
|
|
||||||
|
themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
|
||||||
|
|
||||||
|
cloneLinkElement.addEventListener('load', () => {
|
||||||
|
themeLink.remove();
|
||||||
|
cloneLinkElement.setAttribute('id', id);
|
||||||
|
onComplete();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
decrementScale() {
|
||||||
|
this.scale--;
|
||||||
|
this.applyScale();
|
||||||
|
}
|
||||||
|
|
||||||
|
incrementScale() {
|
||||||
|
this.scale++;
|
||||||
|
this.applyScale();
|
||||||
|
}
|
||||||
|
|
||||||
|
applyScale() {
|
||||||
|
document.documentElement.style.fontSize = this.scale + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { SidebarModule } from 'primeng/sidebar';
|
||||||
|
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||||
|
import { ButtonModule } from 'primeng/button';
|
||||||
|
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||||
|
import { AppConfigComponent } from './app.config.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
FormsModule,
|
||||||
|
SidebarModule,
|
||||||
|
RadioButtonModule,
|
||||||
|
ButtonModule,
|
||||||
|
InputSwitchModule
|
||||||
|
],
|
||||||
|
declarations: [
|
||||||
|
AppConfigComponent
|
||||||
|
],
|
||||||
|
exports: [
|
||||||
|
AppConfigComponent
|
||||||
|
]
|
||||||
|
})
|
||||||
|
export class AppConfigModule { }
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
|
||||||
|
export interface AppConfig {
|
||||||
|
inputStyle: string;
|
||||||
|
colorScheme: string;
|
||||||
|
theme: string;
|
||||||
|
ripple: boolean;
|
||||||
|
menuMode: string;
|
||||||
|
scale: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LayoutState {
|
||||||
|
staticMenuDesktopInactive: boolean;
|
||||||
|
overlayMenuActive: boolean;
|
||||||
|
profileSidebarVisible: boolean;
|
||||||
|
configSidebarVisible: boolean;
|
||||||
|
staticMenuMobileActive: boolean;
|
||||||
|
menuHoverActive: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class LayoutService {
|
||||||
|
|
||||||
|
config: AppConfig = {
|
||||||
|
ripple: false,
|
||||||
|
inputStyle: 'outlined',
|
||||||
|
menuMode: 'static',
|
||||||
|
colorScheme: 'light',
|
||||||
|
theme: 'lara-light-indigo',
|
||||||
|
scale: 14,
|
||||||
|
};
|
||||||
|
|
||||||
|
state: LayoutState = {
|
||||||
|
staticMenuDesktopInactive: false,
|
||||||
|
overlayMenuActive: false,
|
||||||
|
profileSidebarVisible: false,
|
||||||
|
configSidebarVisible: false,
|
||||||
|
staticMenuMobileActive: false,
|
||||||
|
menuHoverActive: false
|
||||||
|
};
|
||||||
|
|
||||||
|
private configUpdate = new Subject<AppConfig>();
|
||||||
|
|
||||||
|
private overlayOpen = new Subject<any>();
|
||||||
|
|
||||||
|
configUpdate$ = this.configUpdate.asObservable();
|
||||||
|
|
||||||
|
overlayOpen$ = this.overlayOpen.asObservable();
|
||||||
|
|
||||||
|
onMenuToggle() {
|
||||||
|
if (this.isOverlay()) {
|
||||||
|
this.state.overlayMenuActive = !this.state.overlayMenuActive;
|
||||||
|
if (this.state.overlayMenuActive) {
|
||||||
|
this.overlayOpen.next(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isDesktop()) {
|
||||||
|
this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
|
||||||
|
|
||||||
|
if (this.state.staticMenuMobileActive) {
|
||||||
|
this.overlayOpen.next(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showProfileSidebar() {
|
||||||
|
this.state.profileSidebarVisible = !this.state.profileSidebarVisible;
|
||||||
|
if (this.state.profileSidebarVisible) {
|
||||||
|
this.overlayOpen.next(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showConfigSidebar() {
|
||||||
|
this.state.configSidebarVisible = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
isOverlay() {
|
||||||
|
return this.config.menuMode === 'overlay';
|
||||||
|
}
|
||||||
|
|
||||||
|
isDesktop() {
|
||||||
|
return window.innerWidth > 991;
|
||||||
|
}
|
||||||
|
|
||||||
|
isMobile() {
|
||||||
|
return !this.isDesktop();
|
||||||
|
}
|
||||||
|
|
||||||
|
onConfigUpdate() {
|
||||||
|
this.configUpdate.next(this.config);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<p>splash works!</p>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SplashComponent } from './splash.component';
|
||||||
|
|
||||||
|
describe('SplashComponent', () => {
|
||||||
|
let component: SplashComponent;
|
||||||
|
let fixture: ComponentFixture<SplashComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ SplashComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(SplashComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-splash',
|
||||||
|
templateUrl: './splash.component.html',
|
||||||
|
styleUrls: ['./splash.component.scss']
|
||||||
|
})
|
||||||
|
export class SplashComponent {
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg width="85" height="63" viewBox="0 0 85 63" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.017 30.3135C27.0057 30.5602 27 30.8085 27 31.0581C27 39.9267 34.1894 47.1161 43.0581 47.1161C51.9267 47.1161 59.1161 39.9267 59.1161 31.0581C59.1161 30.8026 59.1102 30.5485 59.0984 30.2959C60.699 30.0511 62.2954 29.7696 63.8864 29.4515L64.0532 29.4181C64.0949 29.9593 64.1161 30.5062 64.1161 31.0581C64.1161 42.6881 54.6881 52.1161 43.0581 52.1161C31.428 52.1161 22 42.6881 22 31.0581C22 30.514 22.0206 29.9747 22.0612 29.441L22.1136 29.4515C23.7428 29.7773 25.3777 30.0646 27.017 30.3135ZM52.4613 18.0397C49.8183 16.1273 46.5698 15 43.0581 15C39.54 15 36.2862 16.1313 33.6406 18.05C31.4938 17.834 29.3526 17.5435 27.221 17.1786C31.0806 12.7781 36.7449 10 43.0581 10C49.3629 10 55.0207 12.7708 58.8799 17.1612C56.7487 17.5285 54.6078 17.8214 52.4613 18.0397ZM68.9854 28.4316C69.0719 29.2954 69.1161 30.1716 69.1161 31.0581C69.1161 45.4495 57.4495 57.1161 43.0581 57.1161C28.6666 57.1161 17 45.4495 17 31.0581C17 30.1793 17.0435 29.3108 17.1284 28.4544L12.2051 27.4697C12.0696 28.6471 12 29.8444 12 31.0581C12 48.211 25.9052 62.1161 43.0581 62.1161C60.211 62.1161 74.1161 48.211 74.1161 31.0581C74.1161 29.8366 74.0456 28.6317 73.9085 27.447L68.9854 28.4316ZM69.6705 15.0372L64.3929 16.0927C59.6785 9.38418 51.8803 5 43.0581 5C34.2269 5 26.4218 9.39306 21.7089 16.1131L16.4331 15.0579C21.867 6.03506 31.7578 0 43.0581 0C54.3497 0 64.234 6.02581 69.6705 15.0372Z" fill="black"/>
|
||||||
|
<mask id="path-2-inside-1" fill="white">
|
||||||
|
<path d="M42.5 28.9252C16.5458 30.2312 0 14 0 14C0 14 26 22.9738 42.5 22.9738C59 22.9738 85 14 85 14C85 14 68.4542 27.6193 42.5 28.9252Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M0 14L5.87269 -3.01504L-12.6052 26.8495L0 14ZM42.5 28.9252L41.5954 10.948L42.5 28.9252ZM85 14L96.4394 27.8975L79.1273 -3.01504L85 14ZM0 14C-12.6052 26.8495 -12.5999 26.8546 -12.5946 26.8598C-12.5928 26.8617 -12.5874 26.8669 -12.5837 26.8706C-12.5762 26.8779 -12.5685 26.8854 -12.5605 26.8932C-12.5445 26.9088 -12.5274 26.9254 -12.5092 26.943C-12.4729 26.9782 -12.4321 27.0174 -12.387 27.0605C-12.2969 27.1467 -12.1892 27.2484 -12.0642 27.3646C-11.8144 27.5968 -11.4949 27.8874 -11.1073 28.2273C-10.3332 28.9063 -9.28165 29.7873 -7.96614 30.7967C-5.34553 32.8073 -1.61454 35.3754 3.11693 37.872C12.5592 42.8544 26.4009 47.7581 43.4046 46.9025L41.5954 10.948C32.6449 11.3983 25.2366 8.83942 19.9174 6.03267C17.2682 4.63475 15.2406 3.22667 13.9478 2.23478C13.3066 1.74283 12.8627 1.366 12.6306 1.16243C12.5151 1.06107 12.4538 1.00422 12.4485 0.999363C12.446 0.996981 12.4576 1.00773 12.4836 1.03256C12.4966 1.04498 12.5132 1.06094 12.5334 1.08055C12.5436 1.09035 12.5546 1.10108 12.5665 1.11273C12.5725 1.11855 12.5787 1.12461 12.5852 1.13091C12.5884 1.13405 12.5934 1.13895 12.595 1.14052C12.6 1.14548 12.6052 1.15049 0 14ZM43.4046 46.9025C59.3275 46.1013 72.3155 41.5302 81.3171 37.1785C85.8337 34.9951 89.4176 32.8333 91.9552 31.151C93.2269 30.3079 94.2446 29.5794 94.9945 29.0205C95.3698 28.7409 95.6788 28.503 95.92 28.3138C96.0406 28.2192 96.1443 28.1366 96.2309 28.067C96.2742 28.0321 96.3133 28.0005 96.348 27.9723C96.3654 27.9581 96.3817 27.9448 96.3969 27.9323C96.4045 27.9261 96.4119 27.9201 96.419 27.9143C96.4225 27.9114 96.4276 27.9072 96.4294 27.9057C96.4344 27.9016 96.4394 27.8975 85 14C73.5606 0.102497 73.5655 0.0985097 73.5703 0.0945756C73.5718 0.0933319 73.5765 0.0894438 73.5795 0.0869551C73.5856 0.0819751 73.5914 0.077195 73.597 0.0726136C73.6082 0.0634509 73.6185 0.055082 73.6278 0.0474955C73.6465 0.0323231 73.6614 0.0202757 73.6726 0.0112606C73.695 -0.00676378 73.7026 -0.0126931 73.6957 -0.00726687C73.6818 0.00363418 73.6101 0.0596753 73.4822 0.154983C73.2258 0.346025 72.7482 0.691717 72.0631 1.14588C70.6873 2.05798 68.5127 3.38259 65.6485 4.7672C59.8887 7.55166 51.6267 10.4432 41.5954 10.948L43.4046 46.9025ZM85 14C79.1273 -3.01504 79.1288 -3.01557 79.1303 -3.01606C79.1306 -3.01618 79.1319 -3.01664 79.1326 -3.01688C79.134 -3.01736 79.135 -3.0177 79.1356 -3.01791C79.1369 -3.01834 79.1366 -3.01823 79.1347 -3.01759C79.131 -3.01633 79.1212 -3.01297 79.1055 -3.00758C79.0739 -2.99681 79.0185 -2.97794 78.9404 -2.95151C78.7839 -2.89864 78.5366 -2.81564 78.207 -2.7068C77.5472 -2.48895 76.561 -2.16874 75.3165 -1.78027C72.8181 -1.00046 69.3266 0.039393 65.3753 1.07466C57.0052 3.26771 48.2826 4.97383 42.5 4.97383V40.9738C53.2174 40.9738 65.7448 38.193 74.4997 35.8992C79.1109 34.691 83.1506 33.4874 86.0429 32.5846C87.4937 32.1318 88.6676 31.7509 89.4942 31.478C89.9077 31.3414 90.2351 31.2317 90.4676 31.1531C90.5839 31.1138 90.6765 31.0823 90.7443 31.0591C90.7783 31.0475 90.806 31.038 90.8275 31.0306C90.8382 31.0269 90.8473 31.0238 90.8549 31.0212C90.8586 31.0199 90.862 31.0187 90.865 31.0177C90.8665 31.0172 90.8684 31.0165 90.8691 31.0163C90.871 31.0156 90.8727 31.015 85 14ZM42.5 4.97383C36.7174 4.97383 27.9948 3.26771 19.6247 1.07466C15.6734 0.039393 12.1819 -1.00046 9.68352 -1.78027C8.43897 -2.16874 7.4528 -2.48895 6.79299 -2.7068C6.46337 -2.81564 6.21607 -2.89864 6.05965 -2.95151C5.98146 -2.97794 5.92606 -2.99681 5.89453 -3.00758C5.87876 -3.01297 5.86897 -3.01633 5.86528 -3.01759C5.86344 -3.01823 5.86312 -3.01834 5.86435 -3.01791C5.86497 -3.0177 5.86597 -3.01736 5.86736 -3.01688C5.86805 -3.01664 5.86939 -3.01618 5.86973 -3.01606C5.87116 -3.01557 5.87269 -3.01504 0 14C-5.87269 31.015 -5.87096 31.0156 -5.86914 31.0163C-5.8684 31.0165 -5.86647 31.0172 -5.86498 31.0177C-5.86201 31.0187 -5.85864 31.0199 -5.85486 31.0212C-5.84732 31.0238 -5.83818 31.0269 -5.82747 31.0306C-5.80603 31.038 -5.77828 31.0475 -5.74435 31.0591C-5.67649 31.0823 -5.58388 31.1138 -5.46761 31.1531C-5.23512 31.2317 -4.9077 31.3414 -4.49416 31.478C-3.66764 31.7509 -2.49366 32.1318 -1.04289 32.5846C1.84938 33.4874 5.88908 34.691 10.5003 35.8992C19.2552 38.193 31.7826 40.9738 42.5 40.9738V4.97383Z" fill="black" mask="url(#path-2-inside-1)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg width="85" height="63" viewBox="0 0 85 63" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.017 30.3135C27.0057 30.5602 27 30.8085 27 31.0581C27 39.9267 34.1894 47.1161 43.0581 47.1161C51.9267 47.1161 59.1161 39.9267 59.1161 31.0581C59.1161 30.8026 59.1102 30.5485 59.0984 30.2959C60.699 30.0511 62.2954 29.7696 63.8864 29.4515L64.0532 29.4181C64.0949 29.9593 64.1161 30.5062 64.1161 31.0581C64.1161 42.6881 54.6881 52.1161 43.0581 52.1161C31.428 52.1161 22 42.6881 22 31.0581C22 30.514 22.0206 29.9747 22.0612 29.441L22.1136 29.4515C23.7428 29.7773 25.3777 30.0646 27.017 30.3135ZM52.4613 18.0397C49.8183 16.1273 46.5698 15 43.0581 15C39.54 15 36.2862 16.1313 33.6406 18.05C31.4938 17.834 29.3526 17.5435 27.221 17.1786C31.0806 12.7781 36.7449 10 43.0581 10C49.3629 10 55.0207 12.7708 58.8799 17.1612C56.7487 17.5285 54.6078 17.8214 52.4613 18.0397ZM68.9854 28.4316C69.0719 29.2954 69.1161 30.1716 69.1161 31.0581C69.1161 45.4495 57.4495 57.1161 43.0581 57.1161C28.6666 57.1161 17 45.4495 17 31.0581C17 30.1793 17.0435 29.3108 17.1284 28.4544L12.2051 27.4697C12.0696 28.6471 12 29.8444 12 31.0581C12 48.211 25.9052 62.1161 43.0581 62.1161C60.211 62.1161 74.1161 48.211 74.1161 31.0581C74.1161 29.8366 74.0456 28.6317 73.9085 27.447L68.9854 28.4316ZM69.6705 15.0372L64.3929 16.0927C59.6785 9.38418 51.8803 5 43.0581 5C34.2269 5 26.4218 9.39306 21.7089 16.1131L16.4331 15.0579C21.867 6.03506 31.7578 0 43.0581 0C54.3497 0 64.234 6.02581 69.6705 15.0372Z" fill="white"/>
|
||||||
|
<mask id="path-2-inside-1" fill="white">
|
||||||
|
<path d="M42.5 28.9252C16.5458 30.2312 0 14 0 14C0 14 26 22.9738 42.5 22.9738C59 22.9738 85 14 85 14C85 14 68.4542 27.6193 42.5 28.9252Z"/>
|
||||||
|
</mask>
|
||||||
|
<path d="M0 14L5.87269 -3.01504L-12.6052 26.8495L0 14ZM42.5 28.9252L41.5954 10.948L42.5 28.9252ZM85 14L96.4394 27.8975L79.1273 -3.01504L85 14ZM0 14C-12.6052 26.8495 -12.5999 26.8546 -12.5946 26.8598C-12.5928 26.8617 -12.5874 26.8669 -12.5837 26.8706C-12.5762 26.8779 -12.5685 26.8854 -12.5605 26.8932C-12.5445 26.9088 -12.5274 26.9254 -12.5092 26.943C-12.4729 26.9782 -12.4321 27.0174 -12.387 27.0605C-12.2969 27.1467 -12.1892 27.2484 -12.0642 27.3646C-11.8144 27.5968 -11.4949 27.8874 -11.1073 28.2273C-10.3332 28.9063 -9.28165 29.7873 -7.96614 30.7967C-5.34553 32.8073 -1.61454 35.3754 3.11693 37.872C12.5592 42.8544 26.4009 47.7581 43.4046 46.9025L41.5954 10.948C32.6449 11.3983 25.2366 8.83942 19.9174 6.03267C17.2682 4.63475 15.2406 3.22667 13.9478 2.23478C13.3066 1.74283 12.8627 1.366 12.6306 1.16243C12.5151 1.06107 12.4538 1.00422 12.4485 0.999363C12.446 0.996981 12.4576 1.00773 12.4836 1.03256C12.4966 1.04498 12.5132 1.06094 12.5334 1.08055C12.5436 1.09035 12.5546 1.10108 12.5665 1.11273C12.5725 1.11855 12.5787 1.12461 12.5852 1.13091C12.5884 1.13405 12.5934 1.13895 12.595 1.14052C12.6 1.14548 12.6052 1.15049 0 14ZM43.4046 46.9025C59.3275 46.1013 72.3155 41.5302 81.3171 37.1785C85.8337 34.9951 89.4176 32.8333 91.9552 31.151C93.2269 30.3079 94.2446 29.5794 94.9945 29.0205C95.3698 28.7409 95.6788 28.503 95.92 28.3138C96.0406 28.2192 96.1443 28.1366 96.2309 28.067C96.2742 28.0321 96.3133 28.0005 96.348 27.9723C96.3654 27.9581 96.3817 27.9448 96.3969 27.9323C96.4045 27.9261 96.4119 27.9201 96.419 27.9143C96.4225 27.9114 96.4276 27.9072 96.4294 27.9057C96.4344 27.9016 96.4394 27.8975 85 14C73.5606 0.102497 73.5655 0.0985097 73.5703 0.0945756C73.5718 0.0933319 73.5765 0.0894438 73.5795 0.0869551C73.5856 0.0819751 73.5914 0.077195 73.597 0.0726136C73.6082 0.0634509 73.6185 0.055082 73.6278 0.0474955C73.6465 0.0323231 73.6614 0.0202757 73.6726 0.0112606C73.695 -0.00676378 73.7026 -0.0126931 73.6957 -0.00726687C73.6818 0.00363418 73.6101 0.0596753 73.4822 0.154983C73.2258 0.346025 72.7482 0.691717 72.0631 1.14588C70.6873 2.05798 68.5127 3.38259 65.6485 4.7672C59.8887 7.55166 51.6267 10.4432 41.5954 10.948L43.4046 46.9025ZM85 14C79.1273 -3.01504 79.1288 -3.01557 79.1303 -3.01606C79.1306 -3.01618 79.1319 -3.01664 79.1326 -3.01688C79.134 -3.01736 79.135 -3.0177 79.1356 -3.01791C79.1369 -3.01834 79.1366 -3.01823 79.1347 -3.01759C79.131 -3.01633 79.1212 -3.01297 79.1055 -3.00758C79.0739 -2.99681 79.0185 -2.97794 78.9404 -2.95151C78.7839 -2.89864 78.5366 -2.81564 78.207 -2.7068C77.5472 -2.48895 76.561 -2.16874 75.3165 -1.78027C72.8181 -1.00046 69.3266 0.039393 65.3753 1.07466C57.0052 3.26771 48.2826 4.97383 42.5 4.97383V40.9738C53.2174 40.9738 65.7448 38.193 74.4997 35.8992C79.1109 34.691 83.1506 33.4874 86.0429 32.5846C87.4937 32.1318 88.6676 31.7509 89.4942 31.478C89.9077 31.3414 90.2351 31.2317 90.4676 31.1531C90.5839 31.1138 90.6765 31.0823 90.7443 31.0591C90.7783 31.0475 90.806 31.038 90.8275 31.0306C90.8382 31.0269 90.8473 31.0238 90.8549 31.0212C90.8586 31.0199 90.862 31.0187 90.865 31.0177C90.8665 31.0172 90.8684 31.0165 90.8691 31.0163C90.871 31.0156 90.8727 31.015 85 14ZM42.5 4.97383C36.7174 4.97383 27.9948 3.26771 19.6247 1.07466C15.6734 0.039393 12.1819 -1.00046 9.68352 -1.78027C8.43897 -2.16874 7.4528 -2.48895 6.79299 -2.7068C6.46337 -2.81564 6.21607 -2.89864 6.05965 -2.95151C5.98146 -2.97794 5.92606 -2.99681 5.89453 -3.00758C5.87876 -3.01297 5.86897 -3.01633 5.86528 -3.01759C5.86344 -3.01823 5.86312 -3.01834 5.86435 -3.01791C5.86497 -3.0177 5.86597 -3.01736 5.86736 -3.01688C5.86805 -3.01664 5.86939 -3.01618 5.86973 -3.01606C5.87116 -3.01557 5.87269 -3.01504 0 14C-5.87269 31.015 -5.87096 31.0156 -5.86914 31.0163C-5.8684 31.0165 -5.86647 31.0172 -5.86498 31.0177C-5.86201 31.0187 -5.85864 31.0199 -5.85486 31.0212C-5.84732 31.0238 -5.83818 31.0269 -5.82747 31.0306C-5.80603 31.038 -5.77828 31.0475 -5.74435 31.0591C-5.67649 31.0823 -5.58388 31.1138 -5.46761 31.1531C-5.23512 31.2317 -4.9077 31.3414 -4.49416 31.478C-3.66764 31.7509 -2.49366 32.1318 -1.04289 32.5846C1.84938 33.4874 5.88908 34.691 10.5003 35.8992C19.2552 38.193 31.7826 40.9738 42.5 40.9738V4.97383Z" fill="white" mask="url(#path-2-inside-1)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#007BFF"/>
|
||||||
|
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7V1105.84ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.13 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857V493.164ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7V1748.19Z" fill="#121212"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#883CAE"/>
|
||||||
|
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="#121212"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#007BFF"/>
|
||||||
|
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7V1105.84ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.13 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857V493.164ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7V1748.19Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#883CAE"/>
|
||||||
|
<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>4</title>
|
||||||
|
<g id="4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<circle id="circle" fill="#9D1BB2" cx="512" cy="512" r="512"></circle>
|
||||||
|
<rect id="rectangle" fill="#CE93D8" x="154" y="155" width="715" height="716"></rect>
|
||||||
|
<polygon id="triangle" fill="#121212" points="154 154.5 868.5 154.5 512 870.5"></polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 576 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>2</title>
|
||||||
|
<g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<circle id="circle" fill="#3D4DB7" cx="512" cy="512" r="512"></circle>
|
||||||
|
<rect id="rectangle" fill="#9FA8DA" x="154" y="155" width="715" height="716"></rect>
|
||||||
|
<polygon id="triangle" fill="#121212" points="154 154.5 868.5 154.5 512 870.5"></polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 576 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>4</title>
|
||||||
|
<g id="4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<circle id="circle" fill="#9D1BB2" cx="512" cy="512" r="512"></circle>
|
||||||
|
<rect id="rectangle" fill="#CE93D8" x="154" y="155" width="715" height="716"></rect>
|
||||||
|
<polygon id="triangle" fill="#ffffff" points="154 154.5 868.5 154.5 512 870.5"></polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 576 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>2</title>
|
||||||
|
<g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<circle id="circle" fill="#3D4DB7" cx="512" cy="512" r="512"></circle>
|
||||||
|
<rect id="rectangle" fill="#9FA8DA" x="154" y="155" width="715" height="716"></rect>
|
||||||
|
<polygon id="triangle" fill="#FFFFFF" points="154 154.5 868.5 154.5 512 870.5"></polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 576 B |
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
Binary file not shown.
|
After Width: | Height: | Size: 943 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,42 @@
|
|||||||
|
.layout-config-button {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
background: var(--primary-color);
|
||||||
|
color: var(--primary-color-text);
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
margin-top: -1.5rem;
|
||||||
|
border-top-left-radius: var(--border-radius);
|
||||||
|
border-bottom-left-radius: var(--border-radius);
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
transition: background-color var(--transition-duration);
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 999;
|
||||||
|
box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: inherit;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
transition: transform 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-config-sidebar {
|
||||||
|
&.p-sidebar {
|
||||||
|
.p-sidebar-content {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
.layout-main-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 7rem 2rem 2rem 4rem;
|
||||||
|
transition: margin-left $transitionDuration;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-main {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
.layout-footer {
|
||||||
|
transition: margin-left $transitionDuration;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--surface-border);
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
font-size: $scale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--surface-ground);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
@@ -0,0 +1,135 @@
|
|||||||
|
.layout-sidebar {
|
||||||
|
position: fixed;
|
||||||
|
width: 300px;
|
||||||
|
height: calc(100vh - 9rem);
|
||||||
|
z-index: 999;
|
||||||
|
overflow-y: auto;
|
||||||
|
user-select: none;
|
||||||
|
top: 7rem;
|
||||||
|
left: 2rem;
|
||||||
|
transition: transform $transitionDuration, left $transitionDuration;
|
||||||
|
background-color: var(--surface-overlay);
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
padding: 0.5rem 1.5rem;
|
||||||
|
box-shadow: 0px 3px 5px rgba(0, 0, 0, .02), 0px 0px 2px rgba(0, 0, 0, .05), 0px 1px 4px rgba(0, 0, 0, .08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
.layout-root-menuitem {
|
||||||
|
>.layout-menuitem-root-text {
|
||||||
|
font-size: .857rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--surface-900);
|
||||||
|
margin: .75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
>a {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&.active-menuitem {
|
||||||
|
>.layout-submenu-toggler {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li.active-menuitem {
|
||||||
|
>a {
|
||||||
|
.layout-submenu-toggler {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
outline: 0 none;
|
||||||
|
color: var(--text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .75rem 1rem;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
transition: background-color $transitionDuration, box-shadow $transitionDuration;
|
||||||
|
|
||||||
|
.layout-menuitem-icon {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-submenu-toggler {
|
||||||
|
font-size: 75%;
|
||||||
|
margin-left: auto;
|
||||||
|
transition: transform $transitionDuration;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active-route {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused-inset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
margin-left: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
margin-left: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
margin-left: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
margin-left: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
@mixin focused() {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
transition: box-shadow .2s;
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin focused-inset() {
|
||||||
|
outline: 0 none;
|
||||||
|
outline-offset: 0;
|
||||||
|
transition: box-shadow .2s;
|
||||||
|
box-shadow: inset var(--focus-ring);
|
||||||
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
.preloader {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999999;
|
||||||
|
background: #edf1f5;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.preloader-content {
|
||||||
|
border: 0 solid transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50vh - 75px);
|
||||||
|
left: calc(50vw - 75px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preloader-content:before, .preloader-content:after{
|
||||||
|
content: '';
|
||||||
|
border: 1em solid var(--primary-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
animation: loader 2s linear infinite;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preloader-content:before{
|
||||||
|
animation-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader{
|
||||||
|
0%{
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
@media screen and (min-width: 1960px) {
|
||||||
|
.layout-main, .landing-wrapper {
|
||||||
|
width: 1504px;
|
||||||
|
margin-left: auto !important;
|
||||||
|
margin-right: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.layout-wrapper {
|
||||||
|
&.layout-overlay {
|
||||||
|
.layout-main-container {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-sidebar {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.layout-overlay-active {
|
||||||
|
.layout-sidebar {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.layout-static {
|
||||||
|
.layout-main-container {
|
||||||
|
margin-left: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.layout-static-inactive {
|
||||||
|
.layout-sidebar {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-main-container {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-mask {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.blocked-scroll {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-wrapper {
|
||||||
|
.layout-main-container {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-sidebar {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-mask {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 998;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--maskbg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.layout-mobile-active {
|
||||||
|
.layout-sidebar {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-mask {
|
||||||
|
display: block;
|
||||||
|
animation: fadein $transitionDuration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,149 @@
|
|||||||
|
.layout-topbar {
|
||||||
|
position: fixed;
|
||||||
|
height: 5rem;
|
||||||
|
z-index: 997;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 2rem;
|
||||||
|
background-color: var(--surface-card);
|
||||||
|
transition: left $transitionDuration;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
|
||||||
|
|
||||||
|
.layout-topbar-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--surface-900);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 2.5rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-button {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color $transitionDuration;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-color);
|
||||||
|
background-color: var(--surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@include focused();
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 1rem;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-menu-button {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-menu-button {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-menu {
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.layout-topbar-button {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.layout-topbar {
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.layout-topbar-logo {
|
||||||
|
width: auto;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-menu-button {
|
||||||
|
margin-left: 0;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-menu-button {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 0;
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-menu {
|
||||||
|
margin-left: 0;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: var(--surface-overlay);
|
||||||
|
box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem;
|
||||||
|
right: 2rem;
|
||||||
|
top: 5rem;
|
||||||
|
min-width: 15rem;
|
||||||
|
display: none;
|
||||||
|
-webkit-animation: scalein 0.15s linear;
|
||||||
|
animation: scalein 0.15s linear;
|
||||||
|
|
||||||
|
&.layout-topbar-menu-mobile-active {
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-topbar-button {
|
||||||
|
margin-left: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
justify-content: flex-start;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: medium;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 1.5rem 0 1rem 0;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--surface-900);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #FFF8E1;
|
||||||
|
padding: .25rem .4rem;
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0 2rem;
|
||||||
|
border-left: 4px solid #90A4AE;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border-top: solid var(--surface-border);
|
||||||
|
border-width: 1px 0 0 0;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
.card {
|
||||||
|
background: var(--surface-card);
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
border-radius: $borderRadius;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-toast {
|
||||||
|
&.p-toast-top-right,
|
||||||
|
&.p-toast-top-left,
|
||||||
|
&.p-toast-top-center {
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
/* General */
|
||||||
|
$scale:14px; /* main font size */
|
||||||
|
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
|
||||||
|
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
@import './_variables';
|
||||||
|
@import "./_mixins";
|
||||||
|
@import "./_preloading";
|
||||||
|
@import "./_main";
|
||||||
|
@import "./_topbar";
|
||||||
|
@import "./_menu";
|
||||||
|
@import "./_config";
|
||||||
|
@import "./_content";
|
||||||
|
@import "./_footer";
|
||||||
|
@import "./_responsive";
|
||||||
|
@import "./_utils";
|
||||||
|
@import "./_typography";
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
BIN
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user