added new style from website
This commit is contained in:
121
src/app/app.css
121
src/app/app.css
@@ -6,60 +6,83 @@
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-nav {
|
nz-header {
|
||||||
line-height: 64px;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
background: #001529;
|
||||||
.logo {
|
padding: 0 24px;
|
||||||
float: left;
|
|
||||||
height: 64px;
|
|
||||||
padding-right: 24px;
|
|
||||||
line-height: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
display: inline-block;
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo h1 {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0 0 15px;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
nz-content {
|
|
||||||
padding: 24px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner-content {
|
|
||||||
padding: 24px;
|
|
||||||
background: #fff;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
.header-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- LOGO + TITRE --- */
|
||||||
.logo {
|
.logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-nav {
|
.logo a {
|
||||||
flex: 1;
|
display: flex;
|
||||||
margin-left: 40px;
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 40px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- MENU PRINCIPAL --- */
|
||||||
|
.top-nav {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 40px;
|
||||||
|
line-height: 64px;
|
||||||
|
background: #001529;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Couleur grise par défaut + effet blanc et zoom au survol */
|
||||||
|
.top-nav li {
|
||||||
|
transition: transform 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav li a {
|
||||||
|
color: #bfbfbf !important; /* gris clair par défaut */
|
||||||
|
transition: transform 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Au survol → zoom + blanc pur */
|
||||||
|
.top-nav li:hover {
|
||||||
|
transform: scale(1.08);
|
||||||
|
background: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-nav li:hover a {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Supprime toute coloration bleue ou fond par défaut NG-ZORRO */
|
||||||
|
.top-nav li.ant-menu-item-active,
|
||||||
|
.top-nav li.ant-menu-item-selected {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- ICONES DROITES --- */
|
||||||
.right-icons {
|
.right-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -69,6 +92,22 @@ nz-content {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-icons nz-icon:hover {
|
.right-icons app-modal-nav {
|
||||||
color: #40a9ff;
|
transition: transform 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-icons app-modal-nav:hover {
|
||||||
|
color: #40a9ff; /* survol bleu clair uniquement pour les icônes */
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- CONTENU --- */
|
||||||
|
nz-content {
|
||||||
|
padding: 24px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-content {
|
||||||
|
padding: 24px;
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
140
src/app/app.html
140
src/app/app.html
@@ -1,73 +1,81 @@
|
|||||||
<nz-layout class="app-layout">
|
<nz-layout class="app-layout">
|
||||||
<nz-header>
|
<nz-header>
|
||||||
<div class="logo">
|
<div class="header-container">
|
||||||
<a routerLink="/welcome">
|
<!-- LOGO -->
|
||||||
<img src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png" alt="logo" style="width: 100px; height: auto">
|
<div class="logo">
|
||||||
<h1>PYRO FÊTES</h1>
|
<a routerLink="/welcome">
|
||||||
</a>
|
<img
|
||||||
|
src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
|
||||||
|
alt="logo"
|
||||||
|
style="width: 100px; height: auto"
|
||||||
|
/>
|
||||||
|
<h1>PYRO FÊTES</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MENU PRINCIPAL -->
|
||||||
|
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/stock">
|
||||||
|
<nz-icon nzType="stock"></nz-icon>
|
||||||
|
<span>Stock</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
||||||
|
<ul>
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/supplier">
|
||||||
|
<nz-icon nzType="shop"></nz-icon>
|
||||||
|
<span>Fournisseurs</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/deliverer">
|
||||||
|
<nz-icon nzType="car"></nz-icon>
|
||||||
|
<span>Livreurs</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
||||||
|
<ul>
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/quotation">
|
||||||
|
<nz-icon nzType="file"></nz-icon>
|
||||||
|
<span>Devis</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/purchase-order">
|
||||||
|
<nz-icon nzType="file"></nz-icon>
|
||||||
|
<span>Bon de commande</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/delivery-note">
|
||||||
|
<nz-icon nzType="file"></nz-icon>
|
||||||
|
<span>Bon de livraison</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
||||||
|
<a routerLink="/user">
|
||||||
|
<nz-icon nzType="user"></nz-icon>
|
||||||
|
<span>Utilisateur</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- ICONES À DROITE -->
|
||||||
|
<div class="right-icons">
|
||||||
|
<app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
|
||||||
|
<app-modal-nav nameIcon="user" name="Profil"></app-modal-nav>
|
||||||
|
<app-modal-nav nameIcon="setting" name="Paramètres"></app-modal-nav>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul nz-menu class="top-nav" nzTheme="dark" nzMode="horizontal">
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/stock">
|
|
||||||
<nz-icon nzType="stock"></nz-icon>
|
|
||||||
<span>Stock</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li nz-submenu nzTitle="Partenaires" nzIcon="team">
|
|
||||||
<ul>
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/supplier">
|
|
||||||
<nz-icon nzType="shop"></nz-icon>
|
|
||||||
<span>Fournisseurs</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/deliverer">
|
|
||||||
<nz-icon nzType="car"></nz-icon>
|
|
||||||
<span>Livreurs</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li nz-submenu nzTitle="Recettes" nzIcon="euro-circle">
|
|
||||||
<ul>
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/quotation">
|
|
||||||
<nz-icon nzType="file"></nz-icon>
|
|
||||||
<span>Devis</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/purchase-order">
|
|
||||||
<nz-icon nzType="file"></nz-icon>
|
|
||||||
<span>Bon de commande</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/delivery-note">
|
|
||||||
<nz-icon nzType="file"></nz-icon>
|
|
||||||
<span>Bon de livraison</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
|
|
||||||
<a routerLink="/user">
|
|
||||||
<nz-icon nzType="user"></nz-icon>
|
|
||||||
<span>Utilisateur</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item>
|
|
||||||
<app-modalNav nameIcon="bell" name="Notification"></app-modalNav>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item>
|
|
||||||
<app-modalNav nameIcon="user" name="Profil"></app-modalNav>
|
|
||||||
</li>
|
|
||||||
<li nz-menu-item>
|
|
||||||
<app-modalNav nameIcon="setting" name="Paramètres"></app-modalNav>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nz-header>
|
</nz-header>
|
||||||
|
|
||||||
<nz-content>
|
<nz-content>
|
||||||
<div class="inner-content">
|
<div class="inner-content">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
|
|||||||
Reference in New Issue
Block a user