julien/adastra_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mise à jour graphique

Browse Source
This commit is contained in:
Rampeur
2025-09-23 22:25:08 +02:00
parent 65ae9fce4b
commit 8b098f7545
31 changed files with 753 additions and 1044 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/home/home.component.html
-10
View File
@@ -90,14 +90,4 @@
</svg> </svg>
--> -->
</div> </div>
<!--
<mat-card>
<mat-card-header>
<mat-card-title>Card title</mat-card-title>
</mat-card-header>
<mat-card-content class="text-center mt-4">
</mat-card-content>
</mat-card>
-->
</div> </div>
src/app/components/home/home.component.scss
+21 -1
View File
@@ -1,6 +1,26 @@
/* Home */ /* Home */
//@use 'variable' as var; //@use 'variable' as var;
.icon-xxsmall {
transform: scale(0.25);
}
.icon-xsmall {
font-size: 16px;
height: 16px;
width: 16px;
}
.icon-small {
font-size: 18px;
height: 18px;
width: 18px;
}
.icon-medium {
font-size: 20px;
height: 20px;
width: 20px;
}
.hstack .value {
min-width: 56px;
}
/* /*
#FF41F8 #FF41F8
src/app/components/home/home.component.ts
+28 -5
View File
@@ -4,17 +4,18 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
import { Component, DestroyRef, inject, OnInit } from '@angular/core'; import { Component, DestroyRef, inject, OnInit } from '@angular/core';
import { MatCardModule } from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { ListErrorsComponent, } from 'src/app/components/shared'; import { ListErrorsComponent } from 'src/app/components/shared';
import { Errors } from 'src/app/core/models'; import { Errors } from 'src/app/core/models';
//import { UtilitiesService } from 'src/app/core/services';
//import { UserService } from 'src/app/core/services'; //import { UserService } from 'src/app/core/services';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
standalone: true, standalone: true,
imports: [ imports: [
DatePipe, DatePipe,
MatCardModule, MatDividerModule, MatCardModule, MatDividerModule, MatIconModule,
ListErrorsComponent ListErrorsComponent
], ],
templateUrl: './home.component.html', templateUrl: './home.component.html',
@@ -41,11 +42,33 @@ export class HomeComponent implements OnInit {
public now = new Date(); public now = new Date();
constructor( constructor(
private titleService: Title private _titleService: Title,
//private _utilitiesService: UtilitiesService
//private _userService: UserService //private _userService: UserService
) { } ) { }
ngOnInit() { ngOnInit() {
this.titleService.setTitle(this.title);
this._titleService.setTitle(this.title);
/*
type CreateArrayWithLengthX<
LENGTH extends number,
ACC extends unknown[] = [],
> = ACC['length'] extends LENGTH
? ACC
: CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;
type NumericRange<
START_ARR extends number[],
END extends number,
ACC extends number = never>
= START_ARR['length'] extends END
? ACC | END
: NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;
//type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<7>, 13, 7>;
//type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<13>, 19>;
type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<1>, 10>;
*/
} }
} }
src/app/components/index.ts
+2
View File
@@ -3,7 +3,9 @@ export * from './aeronefs/aeronefs.component';
export * from './calculator/calculator.component'; export * from './calculator/calculator.component';
export * from './canopies/canopies.component'; export * from './canopies/canopies.component';
export * from './dashboard/dashboard.component'; export * from './dashboard/dashboard.component';
export * from './demo/demo.component';
export * from './dropzones/dropzones.component'; export * from './dropzones/dropzones.component';
export * from './herowars/herowars.component';
export * from './home/home.component'; export * from './home/home.component';
export * from './jump/jump.component'; export * from './jump/jump.component';
export * from './jumps/jumps.component'; export * from './jumps/jumps.component';
src/app/components/jumps/jumps.component.html
+1 -1
View File
@@ -89,7 +89,7 @@
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="banner"> <mat-card class="bannercard">
<mat-card-header> <mat-card-header>
<mat-card-title>Types de sauts</mat-card-title> <mat-card-title>Types de sauts</mat-card-title>
</mat-card-header> </mat-card-header>
src/app/components/jumps/jumps.component.scss
+1 -1
View File
@@ -3,7 +3,7 @@ element.style {
padding: 0.9rem 1.1rem; padding: 0.9rem 1.1rem;
border-radius: 0; border-radius: 0;
} }
.banner { .bannercard {
background-color: #202020; background-color: #202020;
color: #ffffff; color: #ffffff;
margin: 1.5rem -1.5rem -1.5rem -1.5rem; margin: 1.5rem -1.5rem -1.5rem -1.5rem;
src/app/components/product/product.component.html
+28 -1
View File
@@ -1 +1,28 @@
<p>product works!</p> <div @flyInOut>
<div class="d-flex">
<div class="flex-fill">
<h1 class="mb-1">{{ product.name }}<small>- Sachet {{ product.weightNet | number : '1.0' }} g</small></h1>
<h2 class="mb-1">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</h2>
</div>
<span class="flex-spacer"></span>
<div class="align-self-center me-2 text-end">
<span class="fs-5 text-primary">{{ product.createdAt | date: 'dd/MM/yyyy' }}</span>
</div>
</div>
<mat-divider class="my-3"></mat-divider>
<app-list-errors [errors]="errors"></app-list-errors>
<div class="d-flex">
{{ product.description }}
</div>
@if (product.tags) {
<mat-divider class="my-3"></mat-divider>
<div class="d-flex">
@for (tag of getProductTags(); track tag) {
<span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
<mat-icon class="align-middle me-1" fontIcon="tag"></mat-icon>
{{ tag.name }}
</span>
}
</div>
}
</div>
src/app/components/product/product.component.ts
+62 -4
View File
@@ -1,12 +1,70 @@
import { Component } from '@angular/core'; import { Title } from '@angular/platform-browser';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { DatePipe, DecimalPipe } from '@angular/common';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { Observable, Subscription } from 'rxjs';
import { ListErrorsComponent, } from 'src/app/components/shared';
import { Errors, Product, ProductPageData } from 'src/app/core/models';
@Component({ @Component({
selector: 'app-product', selector: 'app-product',
standalone: true, standalone: true,
imports: [], imports: [
DatePipe, DecimalPipe, RouterLink,
MatCardModule, MatDividerModule, MatIconModule,
ListErrorsComponent
],
templateUrl: './product.component.html', templateUrl: './product.component.html',
styleUrl: './product.component.scss' styleUrl: './product.component.scss',
animations: [
trigger('flyInOut', [
state('in', style({ transform: 'translateY(0)' })),
transition('void => *', [
style({ transform: 'translateY(-100%)' }),
animate(200)
]),
transition('* => void', [
style({ transform: 'translateY(100%)' }),
animate(200)
])
])
]
}) })
export class ProductComponent { export class ProductComponent implements OnInit, OnDestroy {
private _data: Subscription = new Subscription();
public title = 'Ad Astra - Produit';
public description = 'Encore un peu de patience, notre shop sera mis en ligne d\'ici peu.';
public errors: Errors = { errors: {} };
public destroyRef = inject(DestroyRef);
public product: Product = {} as Product;
constructor(
private route: ActivatedRoute,
private titleService: Title
) { }
ngOnInit() {
const data$: Observable<{ pageData: ProductPageData }> = this.route.data as Observable<{ pageData: ProductPageData }>;
this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: ProductPageData }) => {
this.product = data.pageData.product;
this.title = this.product.name;
this.description = this.product.description;
this.titleService.setTitle(this.product.name);
console.log(this.product);
});
}
ngOnDestroy() {
this._data.unsubscribe();
}
getProductTags() {
return this.product.tags;
}
} }
src/app/components/products/products.component.html
+50 -1
View File
@@ -1 +1,50 @@
<p>products works!</p> <div @flyInOut>
<div class="d-flex">
<div class="flex-fill">
<h1 class="mb-1">{{ title }} <span class="ms-1 fs-3 text-muted">({{ productsCount }})</span></h1>
</div>
<span class="flex-spacer"></span>
<div class="align-self-center me-2 text-end">
</div>
</div>
<mat-divider class="my-3"></mat-divider>
<app-list-errors [errors]="errors"></app-list-errors>
<div class="d-flex">
<div class="fs-4" [innerHtml]="description"></div>
</div>
<mat-divider class="my-3"></mat-divider>
<div class="row">
@for (product of products; track product) {
<div class="col-xs-12 col-sm-6 col-md-4 col-xl-3">
<mat-card class="mb-3">
<mat-card-header class="d-flex rounded-top py-2 px-4">
<div class="flex-fill">
<mat-card-title>
{{ product.name }}
</mat-card-title>
</div>
<span class="flex-spacer"></span>
<div class="align-self-center me-2 text-end">
<span class="fs-4">Sachet {{ product.weightNet | number : '1.0' }} g</span>
</div>
</mat-card-header>
<mat-card-content>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales ultrices dolor, ullamcorper cursus mauris.<br />
Nam risus metus, porttitor eget lacinia nec, mollis ac augue. In hac habitasse platea dictumst.<br />
Aliquam vel volutpat diam. Integer sed nulla posuere, commodo augue ac, tincidunt.
</p>
<mat-card-subtitle>
{{ product.productCategories[0].name }} {{ product.brand.name }}
</mat-card-subtitle>
<div class="align-self-center me-2 text-end">
<span class="fs-4 fw-medium text-primary">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</span>
<button mat-flat-button class="ms-2" color="teal" type="button">Ajouter au panier</button>
</div>
</mat-card-content>
</mat-card>
</div>
}
</div>
</div>
src/app/components/products/products.component.ts
+64 -4
View File
@@ -1,12 +1,72 @@
import { Component } from '@angular/core'; import { Title } from '@angular/platform-browser';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { DatePipe, DecimalPipe } from '@angular/common';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { Observable, Subscription } from 'rxjs';
import { ListErrorsComponent, } from 'src/app/components/shared';
import { Errors, Product, ProductsPageData } from 'src/app/core/models';
@Component({ @Component({
selector: 'app-products', selector: 'app-products',
standalone: true, standalone: true,
imports: [], imports: [
DatePipe, DecimalPipe, RouterLink,
MatButtonModule, MatCardModule, MatDividerModule, MatIconModule,
ListErrorsComponent
],
templateUrl: './products.component.html', templateUrl: './products.component.html',
styleUrl: './products.component.scss' styleUrl: './products.component.scss',
animations: [
trigger('flyInOut', [
state('in', style({ transform: 'translateY(0)' })),
transition('void => *', [
style({ transform: 'translateY(-100%)' }),
animate(200)
]),
transition('* => void', [
style({ transform: 'translateY(100%)' }),
animate(200)
])
])
]
}) })
export class ProductsComponent { export class ProductsComponent implements OnInit, OnDestroy {
private _data: Subscription = new Subscription();
public title = 'Ad Astra - Produit';
public description = 'Encore un peu de patience, notre shop sera mis en ligne d\'ici peu.';
public errors: Errors = { errors: {} };
public destroyRef = inject(DestroyRef);
public products: Array<Product> = [];
public productsCount = 0;
constructor(
private route: ActivatedRoute,
private titleService: Title
) { }
ngOnInit() {
const data$: Observable<{ pageData: ProductsPageData }> = this.route.data as Observable<{ pageData: ProductsPageData }>;
this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: ProductsPageData }) => {
this.products = data.pageData.products;
this.productsCount = data.pageData.count;
//this.title = 'Fleurs CBD';
this.title = data.pageData.products[0].productCategories[0]!.name;
this.description = data.pageData.products[0].productCategories[0]!.description;
this.titleService.setTitle(this.title);
console.log(data.pageData);
console.log(this.products);
});
}
ngOnDestroy() {
this._data.unsubscribe();
}
} }
src/app/components/profile/profile.component.html
+3 -687
View File
@@ -1,5 +1,5 @@
<div class="banner bg-accent mat-elevation-z2"> <div class="banner mat-elevation-z2">
<div class="d-flex mx-2 mx-md-3 mx-lg-4"> <div class="banner-content d-flex text-bg-accent bg-opacity-50">
<img [src]="user.image" class="user-img me-3" [alt]="user.username" /> <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
<div class="flex-spacer"> <div class="flex-spacer">
<h3 class="mb-0">{{bannerTitle}}</h3> <h3 class="mb-0">{{bannerTitle}}</h3>
@@ -45,7 +45,7 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card> <mat-card>
<mat-card-header class="bg-primary text-bg-primary rounded-top py-2 px-4"> <mat-card-header class="text-bg-primary rounded-top py-2 px-4">
<div class="flex-fill"> <div class="flex-fill">
<mat-card-title> <mat-card-title>
Mes commandes Mes commandes
@@ -156,687 +156,3 @@
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
<mat-divider class="my-4"></mat-divider>
<!--
turquoise
cyan
navy
purple
raspberry
orange
yellow
-->
<div class="content">
<mat-card>
<mat-card-header class="bg-primary text-bg-primary rounded-top py-3 px-4">
<div class="flex-fill">
<mat-card-title>
Buttons variants
</mat-card-title>
<mat-card-subtitle class="fw-normal text-white">
turquoise / cyan / navy / purple / raspberry / orange / yellow / megna / magenta / pink
</mat-card-subtitle>
</div>
<span class="flex-spacer"></span>
<div class="flex-fill"></div>
</mat-card-header>
<mat-card-content>
<section class="mt-4">
<div class="mb-2">Links</div>
<div class="p-2">
<a href="#" class="me-2 text-muted">Muted</a>
<a href="#" class="me-2 text-primary">Primary</a>
<a href="#" class="me-2 text-accent">Accent</a>
<a href="#" class="me-2 text-warn">Warn</a>
<a href="#" class="me-2 text-danger">Danger</a>
<a href="#" class="me-2 text-info">Info</a>
<a href="#" class="me-2 text-success">Success</a>
<a href="#" class="me-2 text-turquoise">Turquoise</a>
<a href="#" class="me-2 text-cyan">Cyan</a>
<a href="#" class="me-2 text-navy">Navy</a>
<a href="#" class="me-2 text-navy-light">Navy light</a>
<a href="#" class="me-2 text-purple">Purple</a>
<a href="#" class="me-2 text-purple-light">Purple light</a>
<a href="#" class="me-2 text-raspberry">Raspberry</a>
<a href="#" class="me-2 text-orange">Orange</a>
<a href="#" class="me-2 text-yellow">Yellow</a>
<a href="#" class="me-2 text-teal">Teal</a>
<a href="#" class="me-2 text-megna">Megna</a>
<a href="#" class="me-2 text-magenta">Magenta</a>
<a href="#" class="me-2 text-pink">Pink</a>
</div>
<div class="p-2">
<span class="me-2 text-muted">Muted</span>
<span class="me-2 text-primary">Primary</span>
<span class="me-2 text-accent">Accent</span>
<span class="me-2 text-warn">Warn</span>
<span class="me-2 text-danger">Danger</span>
<span class="me-2 text-info">Info</span>
<span class="me-2 text-success">Success</span>
<span class="me-2 text-turquoise">Turquoise</span>
<span class="me-2 text-cyan">Cyan</span>
<span class="me-2 text-navy">Navy</span>
<span class="me-2 text-navy-light">Navy light</span>
<span class="me-2 text-purple">Purple</span>
<span class="me-2 text-purple-light">Purple light</span>
<span class="me-2 text-raspberry">Raspberry</span>
<span class="me-2 text-orange">Orange</span>
<span class="me-2 text-yellow">Yellow</span>
<span class="me-2 text-teal">Teal</span>
<span class="me-2 text-megna">Megna</span>
<span class="me-2 text-magenta">Magenta</span>
<span class="me-2 text-pink">Pink</span>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Basic</div>
<div class="p-2">
<button mat-button class="me-2">Basic</button>
<button mat-button class="me-2" color="primary">Primary</button>
<button mat-button class="me-2" color="accent">Accent</button>
<button mat-button class="me-2" color="warn">Warn</button>
<button mat-button class="me-2" color="danger">Danger</button>
<button mat-button class="me-2" color="info">Info</button>
<button mat-button class="me-2" color="success">Success</button>
<button mat-button class="me-2" color="turquoise">Turquoise</button>
<button mat-button class="me-2" color="cyan">Cyan</button>
<button mat-button class="me-2" color="navy">Navy</button>
<button mat-button class="me-2" color="navy-light">Navy light</button>
<button mat-button class="me-2" color="purple">Purple</button>
<button mat-button class="me-2" color="purple-light">Purple light</button>
<button mat-button class="me-2" color="raspberry">Raspberry</button>
<button mat-button class="me-2" color="orange">Orange</button>
<button mat-button class="me-2" color="yellow">Yellow</button>
<button mat-button class="me-2" color="teal">Teal</button>
<button mat-button class="me-2" color="megna">Megna</button>
<button mat-button class="me-2" color="magenta">Magenta</button>
<button mat-button class="me-2" color="pink">Pink</button>
<button mat-button class="me-2" disabled>Disabled</button>
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Stroked</div>
<div class="p-2">
<button mat-stroked-button class="me-2">Basic</button>
<button mat-stroked-button class="me-2" color="primary">Primary</button>
<button mat-stroked-button class="me-2" color="accent">Accent</button>
<button mat-stroked-button class="me-2" color="warn">Warn</button>
<button mat-stroked-button class="me-2" color="danger">Danger</button>
<button mat-stroked-button class="me-2" color="info">Info</button>
<button mat-stroked-button class="me-2" color="success">Success</button>
<button mat-stroked-button class="me-2" color="turquoise">Turquoise</button>
<button mat-stroked-button class="me-2" color="cyan">Cyan</button>
<button mat-stroked-button class="me-2" color="navy">Navy</button>
<button mat-stroked-button class="me-2" color="navy-light">Navy light</button>
<button mat-stroked-button class="me-2" color="purple">Purple</button>
<button mat-stroked-button class="me-2" color="purple-light">Purple light</button>
<button mat-stroked-button class="me-2" color="raspberry">Raspberry</button>
<button mat-stroked-button class="me-2" color="orange">Orange</button>
<button mat-stroked-button class="me-2" color="yellow">Yellow</button>
<button mat-stroked-button class="me-2" color="teal">Teal</button>
<button mat-stroked-button class="me-2" color="megna">Megna</button>
<button mat-stroked-button class="me-2" color="magenta">Magenta</button>
<button mat-stroked-button class="me-2" color="pink">Pink</button>
<button mat-stroked-button class="me-2" disabled>Disabled</button>
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Flat</div>
<div class="p-2">
<button mat-flat-button class="me-2">Basic</button>
<button mat-flat-button class="me-2" color="primary">Primary</button>
<button mat-flat-button class="me-2" color="accent">Accent</button>
<button mat-flat-button class="me-2" color="warn">Warn</button>
<button mat-flat-button class="me-2" color="danger">Danger</button>
<button mat-flat-button class="me-2" color="info">Info</button>
<button mat-flat-button class="me-2" color="success">Success</button>
<button mat-flat-button class="me-2" color="turquoise">Turquoise</button>
<button mat-flat-button class="me-2" color="cyan">Cyan</button>
<button mat-flat-button class="me-2" color="navy">Navy</button>
<button mat-flat-button class="me-2" color="navy-light">Navy light</button>
<button mat-flat-button class="me-2" color="purple">Purple</button>
<button mat-flat-button class="me-2" color="purple-light">Purple light</button>
<button mat-flat-button class="me-2" color="raspberry">Raspberry</button>
<button mat-flat-button class="me-2" color="orange">Orange</button>
<button mat-flat-button class="me-2" color="yellow">Yellow</button>
<button mat-flat-button class="me-2" color="teal">Teal</button>
<button mat-flat-button class="me-2" color="megna">Megna</button>
<button mat-flat-button class="me-2" color="magenta">Magenta</button>
<button mat-flat-button class="me-2" color="pink">Pink</button>
<button mat-flat-button class="me-2" disabled>Disabled</button>
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Raised</div>
<div class="p-2">
<button mat-raised-button class="me-2">Basic</button>
<button mat-raised-button class="me-2" color="primary">Primary</button>
<button mat-raised-button class="me-2" color="accent">Accent</button>
<button mat-raised-button class="me-2" color="warn">Warn</button>
<button mat-raised-button class="me-2" color="danger">Danger</button>
<button mat-raised-button class="me-2" color="info">Info</button>
<button mat-raised-button class="me-2" color="success">Success</button>
<button mat-raised-button class="me-2" color="turquoise">Turquoise</button>
<button mat-raised-button class="me-2" color="cyan">Cyan</button>
<button mat-raised-button class="me-2" color="navy">Navy</button>
<button mat-raised-button class="me-2" color="navy-light">Navy light</button>
<button mat-raised-button class="me-2" color="purple">Purple</button>
<button mat-raised-button class="me-2" color="purple-light">Purple light</button>
<button mat-raised-button class="me-2" color="raspberry">Raspberry</button>
<button mat-raised-button class="me-2" color="orange">Orange</button>
<button mat-raised-button class="me-2" color="yellow">Yellow</button>
<button mat-raised-button class="me-2" color="teal">Teal</button>
<button mat-raised-button class="me-2" color="megna">Megna</button>
<button mat-raised-button class="me-2" color="magenta">Magenta</button>
<button mat-raised-button class="me-2" color="pink">Pink</button>
<button mat-raised-button class="me-2" disabled>Disabled</button>
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">FAB</div>
<div class="p-2">
<div class="demo-flex-container">
<button mat-fab class="me-2" color="primary" aria-label="Example icon button with a delete icon">
<mat-icon>delete</mat-icon>
</button>
<button mat-fab class="me-2" color="accent" aria-label="Example icon button with a bookmark icon">
<mat-icon>bookmark</mat-icon>
</button>
<button mat-fab class="me-2" color="warn" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
<button mat-fab class="me-2" color="danger" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="info" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="success" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="navy" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="purple" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="orange" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="teal" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="megna" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" color="pink" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-fab class="me-2" disabled aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
</div>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Mini FAB</div>
<div class="p-2">
<div class="demo-flex-container">
<button mat-mini-fab class="me-2" color="primary" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="accent" aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="warn" aria-label="Example icon button with a filter list icon">
<mat-icon>filter_list</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="danger" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="info" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="success" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="navy" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="purple" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="orange" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="teal" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="megna" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" color="pink" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-mini-fab class="me-2" disabled aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Icon</div>
<div class="p-2">
<div class="demo-flex-container">
<button mat-icon-button class="me-2" aria-label="Example icon button with a vertical three dot icon">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-icon-button class="me-2" color="primary" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
<button mat-icon-button class="me-2" color="accent" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="me-2" color="warn" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="danger" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="info" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="success" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="navy" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="purple" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="orange" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="teal" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="megna" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" color="pink" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="me-2" disabled aria-label="Example icon button with a open in new tab icon">
<mat-icon>open_in_new</mat-icon>
</button>
</div>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
<section>
<div class="mb-2">Demo</div>
<div class="d-flex my-2">
<button mat-button color="primary" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="primary" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="primary" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="primary" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="primary" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="primary" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="primary" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="accent" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="accent" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="accent" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="accent" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="accent" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="accent" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="accent" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="warn" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="warn" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="warn" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="warn" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="warn" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="warn" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="warn" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="danger" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="danger" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="danger" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="danger" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="danger" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="danger" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="danger" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="info" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="info" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="info" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="info" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="info" class="me-2 align-self-center">
<mat-icon>info</mat-icon>
</button>
<button mat-mini-fab color="info" class="me-2 align-self-center">
<mat-icon>info</mat-icon>
</button>
<button mat-icon-button color="info" class="me-2 align-self-center">
<mat-icon>info</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="success" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="success" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="success" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="success" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="success" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="success" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="success" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="turquoise" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="turquoise" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="turquoise" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="turquoise" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="turquoise" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="turquoise" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="turquoise" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="cyan" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="cyan" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="cyan" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="cyan" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="cyan" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="cyan" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="cyan" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="navy" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="navy" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="navy" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="navy" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="navy" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="navy" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="navy" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="navy-light" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="navy-light" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="navy-light" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="navy-light" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="navy-light" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="navy-light" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="navy-light" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="purple" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="purple" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="purple" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="purple" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="purple" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="purple" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="purple" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="purple-light" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="purple-light" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="purple-light" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="purple-light" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="purple-light" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="purple-light" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="purple-light" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="raspberry" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="raspberry" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="raspberry" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="raspberry" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="raspberry" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="raspberry" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="raspberry" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="orange" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="orange" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="orange" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="orange" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="orange" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="orange" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="orange" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="yellow" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="yellow" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="yellow" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="yellow" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="yellow" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="yellow" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="yellow" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="teal" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="teal" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="teal" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="teal" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="teal" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="teal" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="teal" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="megna" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="megna" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="megna" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="megna" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="megna" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="megna" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="megna" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="magenta" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="magenta" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="magenta" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="magenta" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="magenta" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="magenta" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="magenta" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
<div class="d-flex my-2">
<button mat-button color="pink" class="me-2 align-self-center">Texte</button>
<button mat-stroked-button color="pink" class="me-2 align-self-center">Texte Stroked</button>
<button mat-flat-button color="pink" class="me-2 align-self-center">Texte Flat</button>
<button mat-raised-button color="pink" class="me-2 align-self-center">Texte Raised</button>
<button mat-fab color="pink" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-mini-fab color="pink" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
<button mat-icon-button color="pink" class="me-2 align-self-center">
<mat-icon>check_circle</mat-icon>
</button>
</div>
</section>
<mat-divider class="my-4"></mat-divider>
</mat-card-content>
</mat-card>
</div>
src/app/components/profile/profile.component.scss
+2 -21
View File
@@ -1,26 +1,7 @@
/* Profile */ /* Profile */
@use 'variable' as var; //@use 'variable' as var;
// --> background-color: var.$sidebar-footer;
.banner {
background-color: var.$sidebar-footer;
padding: 1.3rem 0 1.1rem 0;
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
.user-img {
width: var.$user-img-size;
height: var.$user-img-size;
border-radius: var.$user-img-size;
}
h4 {
font-weight: 500;
margin-bottom: 0.75rem;
}
p {
margin: 0 auto .5rem;
color: var.$muted;
max-width: 450px;
font-weight: 300;
}
}
.mat-mdc-card + .mat-mdc-card { .mat-mdc-card + .mat-mdc-card {
margin-top: 10px; margin-top: 10px;
} }
src/app/components/qcm/qcm.component.scss
+2 -2
View File
@@ -6,9 +6,9 @@ ol.squareItems {
margin: 1rem 0; margin: 1rem 0;
li { li {
color: var.$primary; color: var.$primary;
background-color: var.$sidenav-content; //var.$dark; background-color: var.$sidenav-content;
background-image: none; background-image: none;
border: 1px solid var.$dark; //var.$extra-muted; border: 1px solid var.$dark;
cursor: pointer; cursor: pointer;
float: left; float: left;
list-style-type: none; list-style-type: none;
src/app/components/settings/credentials/credentials.component.html
+3 -3
View File
@@ -1,12 +1,12 @@
<div class="banner bg-accent mat-elevation-z2"> <div class="banner mat-elevation-z2">
<div class="d-flex mx-2 mx-md-3 mx-lg-4"> <div class="banner-content d-flex text-bg-accent bg-opacity-50">
<img [src]="user.image" class="user-img me-3" [alt]="user.username" /> <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
<div class="flex-spacer"> <div class="flex-spacer">
<h3 class="mb-0">{{bannerTitle}}</h3> <h3 class="mb-0">{{bannerTitle}}</h3>
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span> <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
</div> </div>
<div class="align-self-center text-end"> <div class="align-self-center text-end">
<button mat-raised-button color="cyan" [routerLink]="['/profile', user.username]"> <button mat-raised-button color="megna" [routerLink]="['/profile', user.username]">
<mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte <mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
</button> </button>
<button mat-raised-button color="warn" routerLink="/settings" class="ms-2"> <button mat-raised-button color="warn" routerLink="/settings" class="ms-2">
src/app/components/settings/credentials/credentials.component.scss
+2 -21
View File
@@ -1,26 +1,7 @@
/* Credentials */ /* Credentials */
@use 'variable' as var; //@use 'variable' as var;
// --> background-color: var.$sidebar-footer;
.banner {
background-color: var.$sidebar-footer;
padding: 1.3rem 0 1.1rem 0;
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
.user-img {
width: var.$user-img-size;
height: var.$user-img-size;
border-radius: var.$user-img-size;
}
h4 {
font-weight: 500;
margin-bottom: 0.75rem;
}
p {
margin: 0 auto .5rem;
color: var.$muted;
max-width: 450px;
font-weight: 300;
}
}
/* Chrome, Safari, Edge, Opera */ /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
src/app/components/settings/settings.component.html
+3 -3
View File
@@ -1,12 +1,12 @@
<div class="banner bg-accent mat-elevation-z2"> <div class="banner mat-elevation-z2">
<div class="d-flex mx-2 mx-md-3 mx-lg-4"> <div class="banner-content d-flex text-bg-accent bg-opacity-50">
<img [src]="user.image" class="user-img me-3" [alt]="user.username" /> <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
<div class="flex-spacer"> <div class="flex-spacer">
<h3 class="mb-0">{{bannerTitle}}</h3> <h3 class="mb-0">{{bannerTitle}}</h3>
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span> <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
</div> </div>
<div class="align-self-center text-end"> <div class="align-self-center text-end">
<button mat-raised-button color="cyan" [routerLink]="['/profile', user.username]"> <button mat-raised-button color="megna" [routerLink]="['/profile', user.username]">
<mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte <mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
</button> </button>
</div> </div>
src/app/components/settings/settings.component.scss
+2 -34
View File
@@ -1,38 +1,6 @@
/* Settings */ /* Settings */
@use 'variable' as var; //@use 'variable' as var;
// --> background-color: var.$sidebar-footer;
.banner {
background-color: var.$sidebar-footer;
padding: 1.3rem 0 1.1rem 0;
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
/*
background-color: mat.get-color-from-palette(var.$md-custom-warn, 700);
margin-bottom: 1rem;
&.light {
background-color: mat.get-color-from-palette(var.$md-custom-accent, 700);
color: #555;
button {
color: #555;
border-color: #555;
}
}
*/
.user-img {
width: var.$user-img-size;
height: var.$user-img-size;
border-radius: var.$user-img-size;
}
h4 {
font-weight: 500;
margin-bottom: 0.75rem;
}
p {
margin: 0 auto .5rem;
color: var.$muted;
max-width: 450px;
font-weight: 300;
}
}
.settings-page > .container { .settings-page > .container {
margin-top: 2.4rem; margin-top: 2.4rem;
src/app/components/shared/index.ts
+3
View File
@@ -1,7 +1,9 @@
export * from './accordion'; export * from './accordion';
export * from './dashboard-components'; export * from './dashboard-components';
export * from './fortification-card-content/fortification-card-content.component';
export * from './helpers-chart'; export * from './helpers-chart';
export * from './helpers-jump'; export * from './helpers-jump';
export * from './herowars-components';
//export * from './layout'; //export * from './layout';
export * from './layout/footer.component'; export * from './layout/footer.component';
export * from './layout/full.component'; export * from './layout/full.component';
@@ -9,6 +11,7 @@ export * from './layout/header.component';
export * from './list-errors/list-errors.component'; export * from './list-errors/list-errors.component';
export * from './spinner/spinner.component'; export * from './spinner/spinner.component';
export * from './confirmed.validator'; export * from './confirmed.validator';
export * from './floor.pipe';
export * from './french-paginator.component'; export * from './french-paginator.component';
export * from './menu-items'; export * from './menu-items';
export * from './show-authed.directive'; export * from './show-authed.directive';
src/app/components/shared/layout/full.component.html
+3
View File
@@ -59,6 +59,9 @@
<button mat-menu-item routerLink="/settings" routerLinkActive="active"> <button mat-menu-item routerLink="/settings" routerLinkActive="active">
<mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres <mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
</button> </button>
<button mat-menu-item routerLink="/demo" routerLinkActive="active">
<mat-icon fontIcon="color_lens" color="primary"></mat-icon> Demo UI
</button>
<button mat-menu-item (click)="goToGitHub()"> <button mat-menu-item (click)="goToGitHub()">
<mat-icon fontIcon="code" color="primary"></mat-icon> GitHub <mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
</button> </button>
src/app/components/shared/layout/full.component.ts
+2 -1
View File
@@ -47,7 +47,8 @@ export class FullComponent implements OnInit, OnDestroy {
siteLink = 'https://www.adastra-cbd.com'; siteLink = 'https://www.adastra-cbd.com';
author = 'Ad Astra'; author = 'Ad Astra';
links: Menu[] = []; links: Menu[] = [];
visibleMenu: string[] = ['products', 'page']; visibleMenu: string[] = [];
//visibleMenu: string[] = ['products', 'page'];
//visibleMenu: string[] = ['products']; //visibleMenu: string[] = ['products'];
constructor( constructor(
src/app/components/shared/menu-items.ts
+2 -1
View File
@@ -52,7 +52,8 @@ const MENUITEMS: Menu[] = [
{ state: 'page', type: 'menu', name: 'Documentation', icon: 'books', desc: '' }, { state: 'page', type: 'menu', name: 'Documentation', icon: 'books', desc: '' },
{ parent: 'page', state: 'les-fleurs', type: 'link', name: 'Fleurs', icon: 'marijuana', desc: '' }, { parent: 'page', state: 'les-fleurs', type: 'link', name: 'Fleurs', icon: 'marijuana', desc: '' },
{ parent: 'page', state: 'les-resines', type: 'link', name: 'Résines', icon: 'butter', desc: '' }, { parent: 'page', state: 'les-resines', type: 'link', name: 'Résines', icon: 'butter', desc: '' },
{ parent: 'page', state: 'les-molecules', type: 'link', name: 'Molécules', icon: 'molecule', desc: '' } { parent: 'page', state: 'les-molecules', type: 'link', name: 'Molécules', icon: 'molecule', desc: '' },
{ state: 'herowars', type: 'link', name: 'Hero Wars', icon: 'military_tech', icontype: 'mat', desc: '' }
]; ];
const MENUPJUMP: Menu[] = [ const MENUPJUMP: Menu[] = [
src/app/core/models/index.ts
+1
View File
@@ -13,6 +13,7 @@ export * from './category.model';
export * from './chart.model'; export * from './chart.model';
export * from './dropzone.model'; export * from './dropzone.model';
export * from './errors.model'; export * from './errors.model';
export * from './hw.model';
export * from './jump.model'; export * from './jump.model';
export * from './jump-list.model'; export * from './jump-list.model';
export * from './jump-list-config.model'; export * from './jump-list-config.model';
src/app/core/services/utilities.service.ts
+9
View File
@@ -68,6 +68,15 @@ export class UtilitiesService {
return new Date().toLocaleDateString('fr'); return new Date().toLocaleDateString('fr');
} }
secondsToDuration(seconds: number, delimiter: string = ':'): string {
return [
Math.floor(seconds / 60 / 60),
Math.floor(seconds / 60 % 60),
Math.floor(seconds % 60)
].join(delimiter)
.replace(/\b(\d)\b/g, "0$1")//.replace(/^00\:/, '')
}
getSeriesColors(opacity: number, palette: string = 'all', offset: number = 0): string[] { getSeriesColors(opacity: number, palette: string = 'all', offset: number = 0): string[] {
let colors: string[] = []; let colors: string[] = [];
switch (palette) { switch (palette) {
src/app/routes/auth.routes.ts
+20 -10
View File
@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
import { import {
AeronefsComponent, CalculatorComponent, CanopiesComponent, CredentialsComponent, AeronefsComponent, CalculatorComponent, CanopiesComponent, CredentialsComponent,
DashboardComponent, DropzonesComponent, JumpComponent, JumpsComponent, DashboardComponent, DemoComponent, DropzonesComponent, HerowarsComponent, JumpComponent, JumpsComponent,
LogbookComponent, PageComponent, PagesComponent, ProductComponent, ProductsComponent, ProfileComponent, QcmComponent, SettingsComponent LogbookComponent, PageComponent, PagesComponent, ProductComponent, ProductsComponent, ProfileComponent, QcmComponent, SettingsComponent
} from 'src/app/components'; } from 'src/app/components';
import { authGuard, adminGuard } from 'src/app/core/guards'; import { authGuard, adminGuard } from 'src/app/core/guards';
@@ -44,6 +44,11 @@ export const AUTH_ROUTES: Routes = [
isAuthenticated: authResolver isAuthenticated: authResolver
} }
}, },
{
path: 'demo',
component: DemoComponent,
canActivate: [ authGuard ]
},
{ {
path: 'dropzones', path: 'dropzones',
component: DropzonesComponent, component: DropzonesComponent,
@@ -52,6 +57,11 @@ export const AUTH_ROUTES: Routes = [
dropZonesPageData: dropZonesPageResolver dropZonesPageData: dropZonesPageResolver
} }
}, },
{
path: 'herowars',
component: HerowarsComponent,
canActivate: [ authGuard ]
},
{ {
path: 'jumps', path: 'jumps',
component: JumpsComponent, component: JumpsComponent,
@@ -94,27 +104,27 @@ export const AUTH_ROUTES: Routes = [
} }
}, },
{ {
path: 'products', path: 'product/:slug',
component: ProductsComponent, component: ProductComponent,
canActivate: [ authGuard, adminGuard ], canActivate: [ authGuard ],
resolve: { resolve: {
pageData: productsResolver pageData: productResolver
} }
}, },
{ {
path: 'products/:category', path: 'products/:category',
component: ProductsComponent, component: ProductsComponent,
canActivate: [ authGuard, adminGuard ], canActivate: [ authGuard ],
resolve: { resolve: {
pageData: productsResolver pageData: productsResolver
} }
}, },
{ {
path: 'product/:slug', path: 'products',
component: ProductComponent, component: ProductsComponent,
canActivate: [ authGuard, adminGuard ], canActivate: [ authGuard ],
resolve: { resolve: {
pageData: productResolver pageData: productsResolver
} }
}, },
{ {
src/app/routes/noauth.routes.ts
+10 -2
View File
@@ -1,8 +1,8 @@
import { Routes } from '@angular/router'; import { Routes } from '@angular/router';
import { AuthComponent, HomeComponent, PageComponent, PagesComponent } from 'src/app/components'; import { AuthComponent, HomeComponent, PageComponent, PagesComponent, ProductComponent } from 'src/app/components';
import { noauthGuard } from 'src/app/core/guards'; import { noauthGuard } from 'src/app/core/guards';
import { articleResolver, articlesResolver } from 'src/app/core/resolvers'; import { articleResolver, articlesResolver, productResolver } from 'src/app/core/resolvers';
export const NOAUTH_ROUTES: Routes = [ export const NOAUTH_ROUTES: Routes = [
{ {
@@ -35,6 +35,14 @@ export const NOAUTH_ROUTES: Routes = [
pageData: articleResolver pageData: articleResolver
} }
}, },
{
path: 'product/:slug',
component: ProductComponent,
canActivate: [ noauthGuard ],
resolve: {
pageData: productResolver
}
},
{ {
path: '', path: '',
redirectTo: 'home', redirectTo: 'home',
src/styles/_palettes.scss
+99 -3
View File
@@ -153,9 +153,9 @@ $md-custom-warn: (
200 : #000000, 200 : #000000,
300 : #000000, 300 : #000000,
400 : #000000, 400 : #000000,
500 : #000000, 500 : #ffffff,
600 : #000000, 600 : #ffffff,
700 : #000000, 700 : #ffffff,
800 : #ffffff, 800 : #ffffff,
900 : #ffffff, 900 : #ffffff,
A100 : #000000, A100 : #000000,
@@ -580,6 +580,102 @@ $md-custom-pink: (
A700 : #000000, A700 : #000000,
) )
); );
$md-custom-red: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$md-custom-green: (
50: #e8f5e9,
100: #c8e6c9,
200: #a5d6a7,
300: #81c784,
400: #66bb6a,
500: #4caf50,
600: #43a047,
700: #388e3c,
800: #2e7d32,
900: #1b5e20,
A100: #b9f6ca,
A200: #69f0ae,
A400: #00e676,
A700: #00c853,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$md-custom-blue: (
50: #e3f2fd,
100: #bbdefb,
200: #90caf9,
300: #64b5f6,
400: #42a5f5,
500: #2196f3,
600: #1e88e5,
700: #1976d2,
800: #1565c0,
900: #0d47a1,
A100: #82b1ff,
A200: #448aff,
A400: #2979ff,
A700: #2962ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$md-complementary-green: ( $md-complementary-green: (
50 : #f6faf6, 50 : #f6faf6,
src/styles/_sidebar.scss
+23 -10
View File
@@ -25,7 +25,6 @@ Main sidebar
/*box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);*/ /*box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);*/
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
&.mat-drawer{ &.mat-drawer{
background-color: $sidebar-light;
width: $sidenav-width; width: $sidenav-width;
padding-top: 0px; padding-top: 0px;
} }
@@ -66,13 +65,9 @@ Main sidebar
font-size: 1rem; font-size: 1rem;
font-weight: 300; font-weight: 300;
white-space: nowrap; white-space: nowrap;
color:$sidebar-text;
mat-icon:not(.dd-icon){ mat-icon:not(.dd-icon){
margin-right: 8px; margin-right: 8px;
} }
mat-icon{
color:$sidebar-icons;
}
.dd-icon{ .dd-icon{
font-size: 16px; font-size: 16px;
width: 16px; width: 16px;
@@ -94,10 +89,6 @@ Main sidebar
&.selected > .mdc-list-item__content span > a{ &.selected > .mdc-list-item__content span > a{
background: $sidebar-selected; background: $sidebar-selected;
border-radius: $radius; border-radius: $radius;
color:$white;
mat-icon{
color:$white;
}
.dd-icon{ .dd-icon{
-webkit-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);
transform: rotate(-180deg); transform: rotate(-180deg);
@@ -106,11 +97,33 @@ Main sidebar
} }
&.selected .sub-item .mdc-list-item__content a.selected{ &.selected .sub-item .mdc-list-item__content a.selected{
background: transparent; background: transparent;
color:$inverse;
font-weight: 500; font-weight: 500;
} }
} }
} }
.light-theme #snav {
&.mat-drawer{
background-color: $sidebar-light;
}
mat-list-item {
a{
color:$sidebar-text;
mat-icon{
color:$sidebar-icons;
}
}
&.selected > .mdc-list-item__content span > a{
color:$white;
mat-icon{
color:$white;
}
}
&.selected .sub-item .mdc-list-item__content a.selected{
color: $white;
}
}
}
/******************* /*******************
use profile section use profile section
*******************/ *******************/
src/styles/app.scss
+71 -122
View File
@@ -107,7 +107,36 @@ a.accent:hover {
.font-monospace .fw-lighter { .font-monospace .fw-lighter {
font-weight: 200 !important; font-weight: 200 !important;
} }
.dark-theme {
.banner {
background-color: $white;
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
.banner-content {
padding: 1.3rem 1.1rem 1.1rem 1.1rem;
}
.user-img {
width: $user-img-size;
height: $user-img-size;
border-radius: $user-img-size;
}
h4 {
font-weight: 500;
margin-bottom: 0.75rem;
}
p {
margin: 0 auto .5rem;
color: $muted;
max-width: 450px;
font-weight: 300;
}
}
.dark-theme,
.primary-theme {
dl.dl-horizontal dt {
color: $light;
}
}
.primary-theme {
app-full-layout { app-full-layout {
/*--mat-sidenav-content-background-color: $sidenav-content;*/ /*--mat-sidenav-content-background-color: $sidenav-content;*/
.mat-drawer-content { .mat-drawer-content {
@@ -122,9 +151,9 @@ a.accent:hover {
background-color: color.scale($sidebar, $lightness: 8%); background-color: color.scale($sidebar, $lightness: 8%);
} }
} }
.banner {
background-color: color.scale($sidebar, $lightness: 90%);
} }
dl.dl-horizontal dt {
color: $light;
} }
} }
app-full-layout { app-full-layout {
@@ -152,6 +181,11 @@ app-full-layout {
.mat-mdc-table { .mat-mdc-table {
background-color: initial; background-color: initial;
} }
[class^="text-bg-"], [class*=" text-bg-"]{
.mat-mdc-card-subtitle {
color: inherit;
}
}
} }
.mat-icon.mini { .mat-icon.mini {
--mat-menu-item-icon-size: 22px; --mat-menu-item-icon-size: 22px;
@@ -205,10 +239,16 @@ dl.dl-horizontal {
margin-left: 140px; margin-left: 140px;
/* color: $extra-light; */ /* color: $extra-light; */
} }
.dl-large dt { &.dl-large dt {
width: 160px;
}
&.dl-large dd {
margin-left: 180px;
}
&.dl-xlarge dt {
width: 200px; width: 200px;
} }
.dl-large dd { &.dl-xlarge dd {
margin-left: 220px; margin-left: 220px;
} }
} }
@@ -216,130 +256,13 @@ dl.dl-horizontal {
/********************** /**********************
* Extra Text Colors * * Extra Text Colors *
**********************/ **********************/
.text-primary {
color: $primary;
}
.text-accent {
color: $accent;
}
.text-warn {
color: $warn;
}
.text-white {
color: $white !important;
}
.text-red {
color: $red !important;
}
.text-red-dark {
color: $red-dark !important;
}
.text-green {
color: $green !important;
}
.text-blue {
color: $blue !important;
}
.text-grey {
color: $grey !important;
}
.text-muted {
color: $muted !important;
}
.text-extra-muted {
color: $extra-muted !important;
}
.text-empty {
color: $empty !important;
}
.text-error { .text-error {
color: $error !important; color: $error !important;
} }
.text-light-danger {
color: $light-danger !important;
}
.text-light-success {
color: $light-success !important;
}
.text-light-warning {
color: $light-warning !important;
}
.text-light-primary {
color: $light-primary !important;
}
.text-light-info {
color: $light-info !important;
}
.text-light-inverse {
color: $light-inverse !important;
}
.text-light-megna {
color: $light-megna !important;
}
/**************************** /****************************
* Extra Background Colors * * Extra Background Colors *
****************************/ ****************************/
.bg-primary {
background-color: $headingtext !important; /* $primary */
}
.bg-accent {
background-color: $accent !important;
}
.bg-warn {
background-color: $warn !important;
}
.bg-white {
background-color: $white !important;
}
.bg-red {
background-color: $red !important;
}
.bg-red-dark {
background-color: $red-dark !important;
}
.bg-green {
background-color: $green !important;
}
.bg-blue {
background-color: $blue !important;
}
.bg-grey {
background-color: $grey !important;
}
.bg-muted {
background-color: $muted !important;
}
.bg-extra-muted {
background-color: $extra-muted !important;
}
.bg-empty {
background-color: $empty !important;
}
.bg-error {
background-color: $error !important;
}
.bg-light-danger {
background-color: $light-danger !important;
}
.bg-light-success {
background-color: $light-success !important;
}
.bg-light-warning {
background-color: $light-warning !important;
}
.bg-light-primary {
background-color: $light-primary !important;
}
.bg-light-info {
background-color: $light-info !important;
}
.bg-light-inverse {
background-color: $light-inverse !important;
}
.bg-light-megna {
background-color: $light-megna !important;
}
.bg-crystal, .bg-crystal,
.bg-crystal .mdc-text-field--filled:not(.mdc-text-field--disabled) { .bg-crystal .mdc-text-field--filled:not(.mdc-text-field--disabled) {
background-color: transparent !important; background-color: transparent !important;
@@ -347,3 +270,29 @@ dl.dl-horizontal {
.bg-dark-transparent { .bg-dark-transparent {
background-color: $dark-transparent !important; background-color: $dark-transparent !important;
} }
/*****************************
* Icon Sizes *
*****************************/
mat-icon {
&.icon-xxsmall {
font-size: 12px;
height: 12px;
width: 12px;
}
&.icon-xsmall {
font-size: 16px;
height: 16px;
width: 16px;
}
&.icon-small {
font-size: 18px;
height: 18px;
width: 18px;
}
&.icon-medium {
font-size: 20px;
height: 20px;
width: 20px;
}
}
src/styles/components/utils/_variants.scss
-17
View File
@@ -16,21 +16,4 @@
.mat-mdc-progress-bar { .mat-mdc-progress-bar {
@include _progress-bar-color($config, $variants); @include _progress-bar-color($config, $variants);
} }
@each $variant, $variant-palette in $variants {
.text-#{"" + $variant},
a.text-#{"" + $variant},
.text-#{"" + $variant} a {
color: mat.get-color-from-palette($variant-palette, 500) !important;
}
a.text-#{"" + $variant}:hover,
.text-#{"" + $variant} a:hover {
color: mat.get-color-from-palette($variant-palette, 800) !important;
}
.bg-#{"" + $variant} {
background-color: mat.get-color-from-palette($variant-palette) !important;
}
.border-#{"" + $variant} {
border-color: mat.get-color-from-palette($variant-palette) !important;
}
}
} }
src/styles/styles.scss
+40 -11
View File
@@ -4,6 +4,7 @@ Author: UnEspace
Email: rampeur@gmail.com Email: rampeur@gmail.com
File: scss File: scss
*/ */
@use 'sass:color';
@use 'sass:map'; @use 'sass:map';
@use './components'; @use './components';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@@ -52,12 +53,17 @@ File: scss
//$adastra_app-warn: mat.define-palette(mat.$blue-palette); //$adastra_app-warn: mat.define-palette(mat.$blue-palette);
$adastra_app-primary: mat.define-palette($md-custom-primary, 500); $adastra_app-primary: mat.define-palette($md-custom-primary, 500);
$adastra_app-secondary: mat.define-palette($md-custom-warn);
$adastra_app-accent: mat.define-palette($md-custom-accent, A200, A100, A400); $adastra_app-accent: mat.define-palette($md-custom-accent, A200, A100, A400);
$adastra_app-warn: mat.define-palette($md-custom-warn); //$adastra_app-warn: mat.define-palette($md-custom-warn);
$adastra_app-danger: mat.define-palette(mat.$red-palette); $adastra_app-warn: mat.define-palette($md-custom-raspberry, 400);
$adastra_app-success: mat.define-palette(mat.$green-palette); $adastra_app-danger: mat.define-palette($md-custom-red, 700);
$adastra_app-info: mat.define-palette(mat.$blue-palette); $adastra_app-success: mat.define-palette($md-custom-green);
$adastra_app-warning: mat.define-palette($md-custom-orange); $adastra_app-info: mat.define-palette($md-custom-blue);
$adastra_app-warning: mat.define-palette($md-custom-orange, 700);
$adastra_app-blue: mat.define-palette($md-custom-blue, 700);
$adastra_app-red: mat.define-palette($md-custom-red);
$adastra_app-green: mat.define-palette($md-custom-green, 400);
$adastra_app-turquoise: mat.define-palette($md-custom-turquoise); $adastra_app-turquoise: mat.define-palette($md-custom-turquoise);
$adastra_app-cyan: mat.define-palette($md-custom-cyan); $adastra_app-cyan: mat.define-palette($md-custom-cyan);
@@ -72,6 +78,8 @@ $adastra_app-pink: mat.define-palette($md-custom-pink);
$adastra_app-megna: mat.define-palette($md-custom-megna); $adastra_app-megna: mat.define-palette($md-custom-megna);
$adastra_app-purple-light: mat.define-palette($md-custom-purple-light); $adastra_app-purple-light: mat.define-palette($md-custom-purple-light);
$adastra_app-navy-light: mat.define-palette($md-custom-navy-light); $adastra_app-navy-light: mat.define-palette($md-custom-navy-light);
$adastra_app-grey: mat.define-palette(mat.$grey-palette, 400);
$adastra_app-muted: mat.define-palette(mat.$grey-palette, 300);
$custom-typography: mat.define-typography-config( $custom-typography: mat.define-typography-config(
$font-family: 'Barlow, sans-serif', $font-family: 'Barlow, sans-serif',
@@ -93,6 +101,7 @@ $custom-typography: mat.define-typography-config(
// Create the theme object. A theme consists of configurations for individual // Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography". // theming systems such as "color" or "typography".
//$adastra_app-theme: mat.define-dark-theme((
$adastra_app-theme: mat.define-light-theme(( $adastra_app-theme: mat.define-light-theme((
color: ( color: (
primary: $adastra_app-primary, primary: $adastra_app-primary,
@@ -104,23 +113,29 @@ $adastra_app-theme: mat.define-light-theme((
)); ));
$adastra_app-variants: ( $adastra_app-variants: (
secondary: $adastra_app-secondary,
danger: $adastra_app-danger, danger: $adastra_app-danger,
success: $adastra_app-success, success: $adastra_app-success,
info: $adastra_app-info, info: $adastra_app-info,
warning: $adastra_app-warning, warning: $adastra_app-warning,
turquoise: $adastra_app-turquoise, red: $adastra_app-red,
green: $adastra_app-green,
blue: $adastra_app-blue,
cyan: $adastra_app-cyan, cyan: $adastra_app-cyan,
teal: $adastra_app-teal,
turquoise: $adastra_app-turquoise,
megna: $adastra_app-megna,
navy: $adastra_app-navy, navy: $adastra_app-navy,
purple: $adastra_app-purple, navy-light: $adastra_app-navy-light,
raspberry: $adastra_app-raspberry, raspberry: $adastra_app-raspberry,
orange: $adastra_app-orange, orange: $adastra_app-orange,
yellow: $adastra_app-yellow, yellow: $adastra_app-yellow,
teal: $adastra_app-teal, purple: $adastra_app-purple,
purple-light: $adastra_app-purple-light,
magenta: $adastra_app-magenta, magenta: $adastra_app-magenta,
pink: $adastra_app-pink, pink: $adastra_app-pink,
megna: $adastra_app-megna, grey: $adastra_app-grey,
purple-light: $adastra_app-purple-light, muted: $adastra_app-muted
navy-light: $adastra_app-navy-light
); );
/* /*
$config: mat.get-color-config($adastra_app-theme); $config: mat.get-color-config($adastra_app-theme);
@@ -158,6 +173,20 @@ $background: map.get($adastra_app-theme, background);
//@import "chartist/dist/index"; //@import "chartist/dist/index";
@each $variant, $var-color in $grays {
.bg-gray-#{"" + $variant} {
--#{$prefix}-bg-opacity: 1;
background-color: RGBA(color.red($var-color), color.green($var-color), color.blue($var-color), var(--#{$prefix}bg-opacity, 1)) !important;
/* background-color: RGBA(color.channel($var-color, "red"), color.channel($var-color, "green"), color.channel($var-color, "blue"), var(--#{$prefix}bg-opacity, 1)) !important; */
}
}
@each $variant, $variant-palette in $adastra_app-variants {
.text-bg-#{"" + $variant} {
color: mat.get-contrast-color-from-palette($variant-palette, 500) !important;
}
}
@import 'spinner'; @import 'spinner';
@import 'icomoon'; @import 'icomoon';
@import 'header'; @import 'header';
src/styles/variable.scss
+187 -59
View File
@@ -23,77 +23,205 @@ $sidenav-width: 237px;
$sidenav-height: 35px; $sidenav-height: 35px;
/* Theme Colors */ /* Theme Colors */
$primary: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #a7d4c4; $primary: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #1c398e;
$accent: mat.get-color-from-palette(palettes.$md-custom-accent, 700); // #d9caae; $accent: mat.get-color-from-palette(palettes.$md-custom-accent, 700); // #d9caae;
$warn: mat.get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7; $warn: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f;
//$warn: mat.get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7;
$secondary: mat.get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7; $secondary: mat.get-color-from-palette(palettes.$md-custom-warn, 600); // #9788c7;
$headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #b7ddd0; $headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100); // #e9f5f1; $bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100); // #c0c7e3;
//$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #a7d4c4; //$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #1c398e;
$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 400); // #cde7de; $sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 900); // #4f64af;
$sidebar-light: #d9d9d9; $sidebar-light: #d9d9d9;
$sidebar-selected: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #b7ddd0; $sidebar-selected: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$sidebar-footer: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #90c7b3; $sidebar-footer: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
$sidebar-text: mat.get-color-from-palette(palettes.$md-custom-primary, 500); $sidebar-text: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3
$sidebar-icons: mat.get-color-from-palette(palettes.$md-custom-primary, 500); $sidebar-icons: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3
$sidenav-content: #1c1c1c; $sidenav-content: #1c1c1c;
$armygreen: #4b5320; $armygreen: #4b5320;
$odbgreen: #485b54; $odbgreen: #485b54;
$error: #b95252; //#b85c5c; $error: #b95252; //#b85c5c;
/*bootstrap Color*/ /* Bootstrap Colors */
$danger: #f15050; $danger: mat.get-color-from-palette(palettes.$md-custom-red, 700); // #f15050
$success: #16d57c; $success: mat.get-color-from-palette(palettes.$md-custom-green, 500); // #16d57c
$warning: #ffb035; $warning: mat.get-color-from-palette(palettes.$md-custom-orange, 700); // #ffb035
$info: #0dcaf0; $info: mat.get-color-from-palette(palettes.$md-custom-blue, 500); // #0dcaf0
$inverse: #292154; $inverse: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f
$empty: #717171; /* Dark Colors */
$muted: #aaaaaa; $danger-dark: shade-color($danger, 30%) !default; // #e6294b
$extra-muted: #c4c4c4; $success-dark: shade-color($success, 30%) !default; // #1eacbe
$dark: #505050; //#242424; $warning-dark: shade-color($warning, 30%) !default; // #e9ab2e
$light: #ebf5ef; $info-dark: shade-color($info, 30%) !default; // #028ee1
$extra-light: #f2f4f8; $inverse-dark: shade-color($inverse, 30%) !default; // #232a37
/*Light colors*/
$light-text: #a6b7bf;
$light-danger: #f9e7eb;
$light-success: #e8fdf8;
$light-warning: #fff8ec;
$light-primary: #f1effd;
$light-info: #e3f3fd;
$light-inverse: #f6f6f6;
$light-megna: #e0f2f4;
$danger-dark: #e6294b;
$success-dark: #1eacbe;
$warning-dark: #e9ab2e;
$info-dark: #028ee1;
$primary-dark: #6352ce; $primary-dark: #6352ce;
$inverse-dark: #232a37;
$dark-transparent: rgba(0, 0, 0, 0.05); $dark-transparent: rgba(0, 0, 0, 0.05);
/*Normal Color*/ /* Light Colors */
$white: #ffffff; $light-danger: tint-color($danger, 86%) !default; // #f9e7eb;
$red: #f15050; $light-success: tint-color($success, 86%) !default; // #e8fdf8;
$red-dark: #d61f1f; $light-warning: tint-color($warning, 86%) !default; // #fff8ec;
$orange: #f90; //#ffb035; $light-info: tint-color($info, 86%) !default; // #e3f3fd;
$yellow: #ffe205; //#e8dd56; //#d4ce70; $light-inverse: tint-color($inverse, 86%) !default; // #f6f6f6;
$megna: #00897b;
$green: #4cae4c;
$teal: #5dcc89; //#65e0b8; // scss-docs-start gray-color-variables
$turquoise: #02bfab; $white: #fff !default;
$cyan: #65dae0; $gray-100: #f8f9fa !default;
$blue: #20b6fc; $gray-200: #e9ecef !default;
$navy: #17466f; $gray-300: #dee2e6 !default;
$navy-light: #337ab7; $gray-400: #ced4da !default;
$pink: #ed5094; $gray-500: #adb5bd !default;
$magenta: #fd18f3; $gray-600: #6c757d !default;
$purple: #7460ee; $gray-700: #495057 !default;
$purple-light: #8a65e0; $gray-800: #343a40 !default;
$raspberry: #b51156; $gray-900: #212529 !default;
$grey: #99abb4; $black: #000 !default;
// scss-docs-end gray-color-variables
$empty: $gray-600 !default; // #6c757d;
$muted: $gray-500 !default; // #adb5bd;
$dark: $gray-700 !default; // #495057;
$light: $gray-200 !default; // #e9ecef;
$extra-light: $gray-100 !default; // #f8f9fa;
$grey: $gray-500 !default; // #adb5bd;
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue-light: #20b6fc !default; // #20b6fc
$indigo: #6610f2 !default; // #6610f2
$blue: mat.get-color-from-palette(palettes.$md-custom-blue, 700) !default; // #1976d2
$purple: mat.get-color-from-palette(palettes.$md-custom-purple, 500) !default; // #7460ee
$purple-light: mat.get-color-from-palette(palettes.$md-custom-purple-light, 500) !default; // #8a65e0
$pink: mat.get-color-from-palette(palettes.$md-custom-pink, 500) !default; // #ed5094
$magenta: mat.get-color-from-palette(palettes.$md-custom-magenta, 500) !default; // #fd18f3
$raspberry: mat.get-color-from-palette(palettes.$md-custom-raspberry, 500) !default; // #b51156
$red: mat.get-color-from-palette(palettes.$md-custom-red, 500) !default; // #f15050
$orange: mat.get-color-from-palette(palettes.$md-custom-orange, 500) !default; // #ff9900
$yellow: mat.get-color-from-palette(palettes.$md-custom-yellow, 500) !default; // #ffe205
$megna: mat.get-color-from-palette(palettes.$md-custom-megna, 500) !default; // #00897b
$green: mat.get-color-from-palette(palettes.$md-custom-green, 400) !default; // #4cae4c
$teal: mat.get-color-from-palette(palettes.$md-custom-teal, 500) !default; // #5dcc89
$turquoise: mat.get-color-from-palette(palettes.$md-custom-turquoise, 500) !default; // #02bfab
$cyan: mat.get-color-from-palette(palettes.$md-custom-cyan, 500) !default; // #65dae0
$navy: mat.get-color-from-palette(palettes.$md-custom-navy, 500) !default; // #17466f
$navy-light: mat.get-color-from-palette(palettes.$md-custom-navy-light, 500) !default; // #337ab7
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"blue-light": $blue-light,
"indigo": $indigo,
"purple": $purple,
"purple-light": $purple-light,
"pink": $pink,
"magenta": $magenta,
"raspberry": $raspberry,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"megna": $megna,
"green": $green,
"teal": $teal,
"turquoise": $turquoise,
"cyan": $cyan,
"navy": $navy,
"navy-light": $navy-light,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800,
"muted": $muted
) !default;
// scss-docs-end colors-map
// scss-docs-start theme-colors-map
$theme-colors: (
"primary": $primary,
"accent": $accent,
"warn": $warn,
"secondary": $secondary,
"muted": $muted,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark,
"white": $white,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"megna": $megna,
"green": $green,
"teal": $teal,
"turquoise": $turquoise,
"cyan": $cyan,
"blue": $blue,
"navy": $navy,
"navy-light": $navy-light,
"pink": $pink,
"magenta": $magenta,
"purple": $purple,
"purple-light": $purple-light,
"raspberry": $raspberry,
"grey": $grey
) !default;
// scss-docs-end theme-colors-map
/*
// scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables
*/
/*Extra Variable*/ /*Extra Variable*/
$rgt: right; $rgt: right;