Rampeur
842 lines
51 KiB
HTML
842 lines
51 KiB
HTML
<div class="banner bg-accent mat-elevation-z2">
|
|
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
|
<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="warn" routerLink="/settings">
|
|
<mat-icon aria-label="Modifier le compte" fontIcon="settings"></mat-icon> {{ btnSettingsTitle }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-page">
|
|
<div class="d-flex">
|
|
<div class="flex-fill">
|
|
<h1 class="mb-1">{{title}}</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>
|
|
<mat-card class="mt-4">
|
|
<mat-card-content>
|
|
<div class="row mt-2">
|
|
<div class="col-lg-6 col-md-12">
|
|
<dl class="dl-horizontal mb-0">
|
|
<dt>Nom:</dt>
|
|
<dd>{{ user.lastname }}</dd>
|
|
<dt>Prénom:</dt>
|
|
<dd>{{ user.firstname }}</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="col-lg-6 col-md-12">
|
|
<dl class="dl-horizontal mb-0">
|
|
<dt>Email:</dt>
|
|
<dd>{{ user.email }}</dd>
|
|
<dt>Téléphone:</dt>
|
|
<dd>{{ user.phone }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<mat-card>
|
|
<mat-card-header class="bg-primary text-bg-primary rounded-top py-2 px-4">
|
|
<div class="flex-fill">
|
|
<mat-card-title>
|
|
Mes commandes
|
|
</mat-card-title>
|
|
</div>
|
|
<span class="flex-spacer"></span>
|
|
<div class="flex-fill"></div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<table class="table table-dark table-striped table-condensed mat-elevation-z2">
|
|
<thead>
|
|
<tr role="row" class="table-dark">
|
|
<th class="align-middle w-25 ps-4">
|
|
<div class="text-left">
|
|
Date
|
|
</div>
|
|
</th>
|
|
<th class="align-middle w-25">
|
|
<div class="text-left">
|
|
Numéro
|
|
</div>
|
|
</th>
|
|
<th class="align-middle w-25">
|
|
<div class="text-left">
|
|
Statut
|
|
</div>
|
|
</th>
|
|
<th class="align-middle w-25">
|
|
<div class="text-left">
|
|
Total
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr role="row" class="align-middle">
|
|
<td class="cell ps-4">
|
|
20/04/2025 13:37
|
|
</td>
|
|
<td class="cell">
|
|
#aa2025042013371
|
|
</td>
|
|
<td class="cell">
|
|
<span class="text-green">Terminé</span>
|
|
</td>
|
|
<td class="cell">
|
|
56.00 €
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="align-middle">
|
|
<td class="cell ps-4">
|
|
20/04/2025 13:42
|
|
</td>
|
|
<td class="cell">
|
|
#aa2025042013421
|
|
</td>
|
|
<td class="cell">
|
|
<span class="text-teal">Expédié</span>
|
|
</td>
|
|
<td class="cell">
|
|
224.70 €
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="align-middle">
|
|
<td class="cell ps-4">
|
|
20/04/2025 13:54
|
|
</td>
|
|
<td class="cell">
|
|
#aa2025042013541
|
|
</td>
|
|
<td class="cell">
|
|
<span class="text-red">Annulé</span>
|
|
</td>
|
|
<td class="cell">
|
|
128.80 €
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="align-middle">
|
|
<td class="cell ps-4">
|
|
14/06/2025 13:37
|
|
</td>
|
|
<td class="cell">
|
|
#aa2025061413371
|
|
</td>
|
|
<td class="cell">
|
|
<span class="text-cyan">En cours de préparation</span>
|
|
</td>
|
|
<td class="cell">
|
|
195.30 €
|
|
</td>
|
|
</tr>
|
|
<tr role="row" class="align-middle">
|
|
<td class="cell ps-4">
|
|
07/07/2025 14:39
|
|
</td>
|
|
<td class="cell">
|
|
#aa2025070714391
|
|
</td>
|
|
<td class="cell">
|
|
<span class="text-orange">En attente de paiement</span>
|
|
</td>
|
|
<td class="cell">
|
|
64.00 €
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</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> |