Mise à jour graphique
This commit is contained in:
Rampeur
@@ -90,14 +90,4 @@
|
||||
</svg>
|
||||
-->
|
||||
</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>
|
||||
@@ -1,6 +1,26 @@
|
||||
/* Home */
|
||||
//@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
|
||||
|
||||
@@ -4,17 +4,18 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
|
||||
import { Component, DestroyRef, inject, OnInit } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
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 { UtilitiesService } from 'src/app/core/services';
|
||||
//import { UserService } from 'src/app/core/services';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
standalone: true,
|
||||
imports: [
|
||||
DatePipe,
|
||||
MatCardModule, MatDividerModule,
|
||||
MatCardModule, MatDividerModule, MatIconModule,
|
||||
ListErrorsComponent
|
||||
],
|
||||
templateUrl: './home.component.html',
|
||||
@@ -41,11 +42,33 @@ export class HomeComponent implements OnInit {
|
||||
public now = new Date();
|
||||
|
||||
constructor(
|
||||
private titleService: Title
|
||||
private _titleService: Title,
|
||||
//private _utilitiesService: UtilitiesService
|
||||
//private _userService: UserService
|
||||
) { }
|
||||
|
||||
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>;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,9 @@ export * from './aeronefs/aeronefs.component';
|
||||
export * from './calculator/calculator.component';
|
||||
export * from './canopies/canopies.component';
|
||||
export * from './dashboard/dashboard.component';
|
||||
export * from './demo/demo.component';
|
||||
export * from './dropzones/dropzones.component';
|
||||
export * from './herowars/herowars.component';
|
||||
export * from './home/home.component';
|
||||
export * from './jump/jump.component';
|
||||
export * from './jumps/jumps.component';
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="banner">
|
||||
<mat-card class="bannercard">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Types de sauts</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
@@ -3,7 +3,7 @@ element.style {
|
||||
padding: 0.9rem 1.1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
.banner {
|
||||
.bannercard {
|
||||
background-color: #202020;
|
||||
color: #ffffff;
|
||||
margin: 1.5rem -1.5rem -1.5rem -1.5rem;
|
||||
|
||||
@@ -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>
|
||||
@@ -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({
|
||||
selector: 'app-product',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
DatePipe, DecimalPipe, RouterLink,
|
||||
MatCardModule, MatDividerModule, MatIconModule,
|
||||
ListErrorsComponent
|
||||
],
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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({
|
||||
selector: 'app-products',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [
|
||||
DatePipe, DecimalPipe, RouterLink,
|
||||
MatButtonModule, MatCardModule, MatDividerModule, MatIconModule,
|
||||
ListErrorsComponent
|
||||
],
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="banner bg-accent mat-elevation-z2">
|
||||
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
||||
<div class="banner mat-elevation-z2">
|
||||
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||
<div class="flex-spacer">
|
||||
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||
@@ -45,7 +45,7 @@
|
||||
</mat-card-content>
|
||||
</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">
|
||||
<mat-card-title>
|
||||
Mes commandes
|
||||
@@ -156,687 +156,3 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</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>
|
||||
@@ -1,26 +1,7 @@
|
||||
/* 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 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -6,9 +6,9 @@ ol.squareItems {
|
||||
margin: 1rem 0;
|
||||
li {
|
||||
color: var.$primary;
|
||||
background-color: var.$sidenav-content; //var.$dark;
|
||||
background-color: var.$sidenav-content;
|
||||
background-image: none;
|
||||
border: 1px solid var.$dark; //var.$extra-muted;
|
||||
border: 1px solid var.$dark;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="banner bg-accent mat-elevation-z2">
|
||||
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
||||
<div class="banner mat-elevation-z2">
|
||||
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||
<div class="flex-spacer">
|
||||
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
|
||||
</div>
|
||||
<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
|
||||
</button>
|
||||
<button mat-raised-button color="warn" routerLink="/settings" class="ms-2">
|
||||
|
||||
@@ -1,26 +1,7 @@
|
||||
/* 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 */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="banner bg-accent mat-elevation-z2">
|
||||
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
||||
<div class="banner mat-elevation-z2">
|
||||
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||
<div class="flex-spacer">
|
||||
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
|
||||
</div>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,6 @@
|
||||
/* Settings */
|
||||
@use 'variable' as var;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
//@use 'variable' as var;
|
||||
// --> background-color: var.$sidebar-footer;
|
||||
|
||||
.settings-page > .container {
|
||||
margin-top: 2.4rem;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
export * from './accordion';
|
||||
export * from './dashboard-components';
|
||||
export * from './fortification-card-content/fortification-card-content.component';
|
||||
export * from './helpers-chart';
|
||||
export * from './helpers-jump';
|
||||
export * from './herowars-components';
|
||||
//export * from './layout';
|
||||
export * from './layout/footer.component';
|
||||
export * from './layout/full.component';
|
||||
@@ -9,6 +11,7 @@ export * from './layout/header.component';
|
||||
export * from './list-errors/list-errors.component';
|
||||
export * from './spinner/spinner.component';
|
||||
export * from './confirmed.validator';
|
||||
export * from './floor.pipe';
|
||||
export * from './french-paginator.component';
|
||||
export * from './menu-items';
|
||||
export * from './show-authed.directive';
|
||||
|
||||
@@ -59,6 +59,9 @@
|
||||
<button mat-menu-item routerLink="/settings" routerLinkActive="active">
|
||||
<mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
|
||||
</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()">
|
||||
<mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
|
||||
</button>
|
||||
|
||||
@@ -47,7 +47,8 @@ export class FullComponent implements OnInit, OnDestroy {
|
||||
siteLink = 'https://www.adastra-cbd.com';
|
||||
author = 'Ad Astra';
|
||||
links: Menu[] = [];
|
||||
visibleMenu: string[] = ['products', 'page'];
|
||||
visibleMenu: string[] = [];
|
||||
//visibleMenu: string[] = ['products', 'page'];
|
||||
//visibleMenu: string[] = ['products'];
|
||||
|
||||
constructor(
|
||||
|
||||
@@ -52,7 +52,8 @@ const MENUITEMS: Menu[] = [
|
||||
{ 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-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[] = [
|
||||
|
||||
@@ -13,6 +13,7 @@ export * from './category.model';
|
||||
export * from './chart.model';
|
||||
export * from './dropzone.model';
|
||||
export * from './errors.model';
|
||||
export * from './hw.model';
|
||||
export * from './jump.model';
|
||||
export * from './jump-list.model';
|
||||
export * from './jump-list-config.model';
|
||||
|
||||
@@ -68,6 +68,15 @@ export class UtilitiesService {
|
||||
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[] {
|
||||
let colors: string[] = [];
|
||||
switch (palette) {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
|
||||
|
||||
import {
|
||||
AeronefsComponent, CalculatorComponent, CanopiesComponent, CredentialsComponent,
|
||||
DashboardComponent, DropzonesComponent, JumpComponent, JumpsComponent,
|
||||
DashboardComponent, DemoComponent, DropzonesComponent, HerowarsComponent, JumpComponent, JumpsComponent,
|
||||
LogbookComponent, PageComponent, PagesComponent, ProductComponent, ProductsComponent, ProfileComponent, QcmComponent, SettingsComponent
|
||||
} from 'src/app/components';
|
||||
import { authGuard, adminGuard } from 'src/app/core/guards';
|
||||
@@ -44,6 +44,11 @@ export const AUTH_ROUTES: Routes = [
|
||||
isAuthenticated: authResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'demo',
|
||||
component: DemoComponent,
|
||||
canActivate: [ authGuard ]
|
||||
},
|
||||
{
|
||||
path: 'dropzones',
|
||||
component: DropzonesComponent,
|
||||
@@ -52,6 +57,11 @@ export const AUTH_ROUTES: Routes = [
|
||||
dropZonesPageData: dropZonesPageResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'herowars',
|
||||
component: HerowarsComponent,
|
||||
canActivate: [ authGuard ]
|
||||
},
|
||||
{
|
||||
path: 'jumps',
|
||||
component: JumpsComponent,
|
||||
@@ -94,27 +104,27 @@ export const AUTH_ROUTES: Routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'products',
|
||||
component: ProductsComponent,
|
||||
canActivate: [ authGuard, adminGuard ],
|
||||
path: 'product/:slug',
|
||||
component: ProductComponent,
|
||||
canActivate: [ authGuard ],
|
||||
resolve: {
|
||||
pageData: productsResolver
|
||||
pageData: productResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'products/:category',
|
||||
component: ProductsComponent,
|
||||
canActivate: [ authGuard, adminGuard ],
|
||||
canActivate: [ authGuard ],
|
||||
resolve: {
|
||||
pageData: productsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'product/:slug',
|
||||
component: ProductComponent,
|
||||
canActivate: [ authGuard, adminGuard ],
|
||||
path: 'products',
|
||||
component: ProductsComponent,
|
||||
canActivate: [ authGuard ],
|
||||
resolve: {
|
||||
pageData: productResolver
|
||||
pageData: productsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
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 { articleResolver, articlesResolver } from 'src/app/core/resolvers';
|
||||
import { articleResolver, articlesResolver, productResolver } from 'src/app/core/resolvers';
|
||||
|
||||
export const NOAUTH_ROUTES: Routes = [
|
||||
{
|
||||
@@ -35,6 +35,14 @@ export const NOAUTH_ROUTES: Routes = [
|
||||
pageData: articleResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'product/:slug',
|
||||
component: ProductComponent,
|
||||
canActivate: [ noauthGuard ],
|
||||
resolve: {
|
||||
pageData: productResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'home',
|
||||
|
||||
@@ -153,9 +153,9 @@ $md-custom-warn: (
|
||||
200 : #000000,
|
||||
300 : #000000,
|
||||
400 : #000000,
|
||||
500 : #000000,
|
||||
600 : #000000,
|
||||
700 : #000000,
|
||||
500 : #ffffff,
|
||||
600 : #ffffff,
|
||||
700 : #ffffff,
|
||||
800 : #ffffff,
|
||||
900 : #ffffff,
|
||||
A100 : #000000,
|
||||
@@ -580,6 +580,102 @@ $md-custom-pink: (
|
||||
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: (
|
||||
50 : #f6faf6,
|
||||
|
||||
+24
-11
@@ -21,11 +21,10 @@ Main sidebar
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
#snav{
|
||||
#snav {
|
||||
/*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);
|
||||
&.mat-drawer{
|
||||
background-color: $sidebar-light;
|
||||
width: $sidenav-width;
|
||||
padding-top: 0px;
|
||||
}
|
||||
@@ -66,13 +65,9 @@ Main sidebar
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
color:$sidebar-text;
|
||||
mat-icon:not(.dd-icon){
|
||||
margin-right: 8px;
|
||||
}
|
||||
mat-icon{
|
||||
color:$sidebar-icons;
|
||||
}
|
||||
.dd-icon{
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
@@ -94,10 +89,6 @@ Main sidebar
|
||||
&.selected > .mdc-list-item__content span > a{
|
||||
background: $sidebar-selected;
|
||||
border-radius: $radius;
|
||||
color:$white;
|
||||
mat-icon{
|
||||
color:$white;
|
||||
}
|
||||
.dd-icon{
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
@@ -106,11 +97,33 @@ Main sidebar
|
||||
}
|
||||
&.selected .sub-item .mdc-list-item__content a.selected{
|
||||
background: transparent;
|
||||
color:$inverse;
|
||||
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
|
||||
*******************/
|
||||
|
||||
+71
-122
@@ -107,7 +107,36 @@ a.accent:hover {
|
||||
.font-monospace .fw-lighter {
|
||||
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 {
|
||||
/*--mat-sidenav-content-background-color: $sidenav-content;*/
|
||||
.mat-drawer-content {
|
||||
@@ -122,9 +151,9 @@ a.accent:hover {
|
||||
background-color: color.scale($sidebar, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
background-color: color.scale($sidebar, $lightness: 90%);
|
||||
}
|
||||
dl.dl-horizontal dt {
|
||||
color: $light;
|
||||
}
|
||||
}
|
||||
app-full-layout {
|
||||
@@ -152,6 +181,11 @@ app-full-layout {
|
||||
.mat-mdc-table {
|
||||
background-color: initial;
|
||||
}
|
||||
[class^="text-bg-"], [class*=" text-bg-"]{
|
||||
.mat-mdc-card-subtitle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-icon.mini {
|
||||
--mat-menu-item-icon-size: 22px;
|
||||
@@ -205,10 +239,16 @@ dl.dl-horizontal {
|
||||
margin-left: 140px;
|
||||
/* color: $extra-light; */
|
||||
}
|
||||
.dl-large dt {
|
||||
&.dl-large dt {
|
||||
width: 160px;
|
||||
}
|
||||
&.dl-large dd {
|
||||
margin-left: 180px;
|
||||
}
|
||||
&.dl-xlarge dt {
|
||||
width: 200px;
|
||||
}
|
||||
.dl-large dd {
|
||||
&.dl-xlarge dd {
|
||||
margin-left: 220px;
|
||||
}
|
||||
}
|
||||
@@ -216,130 +256,13 @@ dl.dl-horizontal {
|
||||
/**********************
|
||||
* 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 {
|
||||
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 *
|
||||
****************************/
|
||||
.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 .mdc-text-field--filled:not(.mdc-text-field--disabled) {
|
||||
background-color: transparent !important;
|
||||
@@ -347,3 +270,29 @@ dl.dl-horizontal {
|
||||
.bg-dark-transparent {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -16,21 +16,4 @@
|
||||
.mat-mdc-progress-bar {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+40
-11
@@ -4,6 +4,7 @@ Author: UnEspace
|
||||
Email: rampeur@gmail.com
|
||||
File: scss
|
||||
*/
|
||||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
@use './components';
|
||||
@use '@angular/material' as mat;
|
||||
@@ -52,12 +53,17 @@ File: scss
|
||||
//$adastra_app-warn: mat.define-palette(mat.$blue-palette);
|
||||
|
||||
$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-warn: mat.define-palette($md-custom-warn);
|
||||
$adastra_app-danger: mat.define-palette(mat.$red-palette);
|
||||
$adastra_app-success: mat.define-palette(mat.$green-palette);
|
||||
$adastra_app-info: mat.define-palette(mat.$blue-palette);
|
||||
$adastra_app-warning: mat.define-palette($md-custom-orange);
|
||||
//$adastra_app-warn: mat.define-palette($md-custom-warn);
|
||||
$adastra_app-warn: mat.define-palette($md-custom-raspberry, 400);
|
||||
$adastra_app-danger: mat.define-palette($md-custom-red, 700);
|
||||
$adastra_app-success: mat.define-palette($md-custom-green);
|
||||
$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-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-purple-light: mat.define-palette($md-custom-purple-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(
|
||||
$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
|
||||
// theming systems such as "color" or "typography".
|
||||
//$adastra_app-theme: mat.define-dark-theme((
|
||||
$adastra_app-theme: mat.define-light-theme((
|
||||
color: (
|
||||
primary: $adastra_app-primary,
|
||||
@@ -104,23 +113,29 @@ $adastra_app-theme: mat.define-light-theme((
|
||||
));
|
||||
|
||||
$adastra_app-variants: (
|
||||
secondary: $adastra_app-secondary,
|
||||
danger: $adastra_app-danger,
|
||||
success: $adastra_app-success,
|
||||
info: $adastra_app-info,
|
||||
warning: $adastra_app-warning,
|
||||
turquoise: $adastra_app-turquoise,
|
||||
red: $adastra_app-red,
|
||||
green: $adastra_app-green,
|
||||
blue: $adastra_app-blue,
|
||||
cyan: $adastra_app-cyan,
|
||||
teal: $adastra_app-teal,
|
||||
turquoise: $adastra_app-turquoise,
|
||||
megna: $adastra_app-megna,
|
||||
navy: $adastra_app-navy,
|
||||
purple: $adastra_app-purple,
|
||||
navy-light: $adastra_app-navy-light,
|
||||
raspberry: $adastra_app-raspberry,
|
||||
orange: $adastra_app-orange,
|
||||
yellow: $adastra_app-yellow,
|
||||
teal: $adastra_app-teal,
|
||||
purple: $adastra_app-purple,
|
||||
purple-light: $adastra_app-purple-light,
|
||||
magenta: $adastra_app-magenta,
|
||||
pink: $adastra_app-pink,
|
||||
megna: $adastra_app-megna,
|
||||
purple-light: $adastra_app-purple-light,
|
||||
navy-light: $adastra_app-navy-light
|
||||
grey: $adastra_app-grey,
|
||||
muted: $adastra_app-muted
|
||||
);
|
||||
/*
|
||||
$config: mat.get-color-config($adastra_app-theme);
|
||||
@@ -158,6 +173,20 @@ $background: map.get($adastra_app-theme, background);
|
||||
|
||||
//@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 'icomoon';
|
||||
@import 'header';
|
||||
|
||||
+187
-59
@@ -23,77 +23,205 @@ $sidenav-width: 237px;
|
||||
$sidenav-height: 35px;
|
||||
|
||||
/* 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;
|
||||
$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;
|
||||
$headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #b7ddd0;
|
||||
$bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100); // #e9f5f1;
|
||||
//$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #a7d4c4;
|
||||
$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 400); // #cde7de;
|
||||
$headingtext: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #2c4aa3;
|
||||
$bodytext: mat.get-color-from-palette(palettes.$md-custom-primary, 100); // #c0c7e3;
|
||||
//$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 700); // #1c398e;
|
||||
$sidebar: mat.get-color-from-palette(palettes.$md-custom-primary, 900); // #4f64af;
|
||||
$sidebar-light: #d9d9d9;
|
||||
$sidebar-selected: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #b7ddd0;
|
||||
$sidebar-footer: mat.get-color-from-palette(palettes.$md-custom-primary, 500); // #90c7b3;
|
||||
$sidebar-text: mat.get-color-from-palette(palettes.$md-custom-primary, 500);
|
||||
$sidebar-icons: mat.get-color-from-palette(palettes.$md-custom-primary, 500);
|
||||
$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); // #2c4aa3;
|
||||
$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); // #2c4aa3
|
||||
$sidenav-content: #1c1c1c;
|
||||
$armygreen: #4b5320;
|
||||
$odbgreen: #485b54;
|
||||
$error: #b95252; //#b85c5c;
|
||||
|
||||
/*bootstrap Color*/
|
||||
$danger: #f15050;
|
||||
$success: #16d57c;
|
||||
$warning: #ffb035;
|
||||
$info: #0dcaf0;
|
||||
$inverse: #292154;
|
||||
/* Bootstrap Colors */
|
||||
$danger: mat.get-color-from-palette(palettes.$md-custom-red, 700); // #f15050
|
||||
$success: mat.get-color-from-palette(palettes.$md-custom-green, 500); // #16d57c
|
||||
$warning: mat.get-color-from-palette(palettes.$md-custom-orange, 700); // #ffb035
|
||||
$info: mat.get-color-from-palette(palettes.$md-custom-blue, 500); // #0dcaf0
|
||||
$inverse: mat.get-color-from-palette(palettes.$md-custom-raspberry, 400); // #c0356f
|
||||
|
||||
$empty: #717171;
|
||||
$muted: #aaaaaa;
|
||||
$extra-muted: #c4c4c4;
|
||||
$dark: #505050; //#242424;
|
||||
$light: #ebf5ef;
|
||||
$extra-light: #f2f4f8;
|
||||
|
||||
|
||||
/*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;
|
||||
/* Dark Colors */
|
||||
$danger-dark: shade-color($danger, 30%) !default; // #e6294b
|
||||
$success-dark: shade-color($success, 30%) !default; // #1eacbe
|
||||
$warning-dark: shade-color($warning, 30%) !default; // #e9ab2e
|
||||
$info-dark: shade-color($info, 30%) !default; // #028ee1
|
||||
$inverse-dark: shade-color($inverse, 30%) !default; // #232a37
|
||||
$primary-dark: #6352ce;
|
||||
$inverse-dark: #232a37;
|
||||
$dark-transparent: rgba(0, 0, 0, 0.05);
|
||||
|
||||
/*Normal Color*/
|
||||
$white: #ffffff;
|
||||
$red: #f15050;
|
||||
$red-dark: #d61f1f;
|
||||
$orange: #f90; //#ffb035;
|
||||
$yellow: #ffe205; //#e8dd56; //#d4ce70;
|
||||
$megna: #00897b;
|
||||
$green: #4cae4c;
|
||||
$teal: #5dcc89; //#65e0b8;
|
||||
$turquoise: #02bfab;
|
||||
$cyan: #65dae0;
|
||||
$blue: #20b6fc;
|
||||
$navy: #17466f;
|
||||
$navy-light: #337ab7;
|
||||
$pink: #ed5094;
|
||||
$magenta: #fd18f3;
|
||||
$purple: #7460ee;
|
||||
$purple-light: #8a65e0;
|
||||
$raspberry: #b51156;
|
||||
$grey: #99abb4;
|
||||
/* Light Colors */
|
||||
$light-danger: tint-color($danger, 86%) !default; // #f9e7eb;
|
||||
$light-success: tint-color($success, 86%) !default; // #e8fdf8;
|
||||
$light-warning: tint-color($warning, 86%) !default; // #fff8ec;
|
||||
$light-info: tint-color($info, 86%) !default; // #e3f3fd;
|
||||
$light-inverse: tint-color($inverse, 86%) !default; // #f6f6f6;
|
||||
|
||||
|
||||
// scss-docs-start gray-color-variables
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$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*/
|
||||
$rgt: right;
|
||||
|
||||
Reference in New Issue
Block a user