Uniformiser le survol des boutons (orange) et le rendu des boutons Annuler

- Survol orange plein (texte blanc) étendu aux boutons d'action
  secondaires : « Utiliser mon domicile », « Export PDF » (résumés
  mensuel/annuel), « Recopier le dernier barème », « Modifier » et
  « Enregistrer/Ajouter » (carnet d'adresses)
- Boutons « Annuler » uniformisés sur tout le site (fond blanc, bordure
  grise, survol gris clair), via classes dédiées .btn-annuler (barème)
  et .btn--annuler (carnet), alignés sur trajet-form et confirm-dialog
- Suppression (rouge), boutons à icône et indicateurs d'état inchangés
- Charte graphique de design.md mise à jour (convention d'interaction)
This commit is contained in:
2026-10-03 10:20:25 +02:00
parent 5b72e21c9d
commit 6bdd67fd00
8 changed files with 65 additions and 4 deletions
@@ -107,7 +107,7 @@
</button>
<button
type="button"
class="btn-secondaire"
class="btn-secondaire btn-annuler"
*ngIf="trancheEnEdition() !== null"
(click)="annulerEdition()"
>
@@ -83,6 +83,25 @@ h2 {
border-radius: 6px;
cursor: pointer;
font-size: 0.95rem;
// "Recopier" : même rendu que le bouton "Export PDF" des résumés
// (fond blanc/bleu, survol orange plein + texte blanc).
&:hover:not(:disabled) {
background: var(--couleur-orange);
border-color: var(--couleur-orange);
color: #fff;
}
}
// Bouton "Annuler" uniformisé : fond blanc, bordure grise, survol gris clair
// (même rendu que l'écran d'ajout/modification d'un trajet).
.btn-annuler {
color: #33475b;
border-color: #c4c9d1;
&:hover:not(:disabled) {
background: #f3f5f8;
}
}
.btn-lien {
@@ -66,7 +66,7 @@
<button type="submit" [disabled]="form.invalid || enregistrement()">
{{ enEdition ? 'Enregistrer' : 'Ajouter' }}
</button>
<button type="button" class="btn--secondary" (click)="annuler()">
<button type="button" class="btn--secondary btn--annuler" (click)="annuler()">
Annuler
</button>
</div>
@@ -139,6 +139,10 @@ button {
font-size: 0.9rem;
cursor: pointer;
&:hover:not(:disabled) {
background: var(--couleur-orange);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -148,6 +152,26 @@ button {
.btn--secondary {
background: #e0e0e0;
color: #333;
// "Modifier" (et autres actions secondaires) : passage à l'orange au survol,
// comme les boutons bleus.
&:hover:not(:disabled) {
background: var(--couleur-orange);
color: #fff;
}
}
// "Annuler" : rendu uniformisé sur tout le site — fond blanc, bordure grise,
// survol gris clair (même rendu que l'écran d'ajout/modification d'un trajet).
.btn--annuler {
background: #fff;
color: #33475b;
border: 1px solid #c4c9d1;
&:hover:not(:disabled) {
background: #f3f5f8;
color: #33475b;
}
}
.btn--danger {
@@ -70,6 +70,12 @@ h1 {
background: #fff;
color: #1565c0;
border: 1px solid #1565c0;
&:hover:not(:disabled) {
background: var(--couleur-orange);
border-color: var(--couleur-orange);
color: #fff;
}
}
.btn-principal:disabled,
@@ -46,6 +46,12 @@ h1 {
background: #fff;
color: #1565c0;
border: 1px solid #1565c0;
&:hover:not(:disabled) {
background: var(--couleur-orange);
border-color: var(--couleur-orange);
color: #fff;
}
}
.btn-principal:disabled,
@@ -59,7 +59,9 @@
cursor: pointer;
&:hover:not(:disabled) {
background: #ebf3fb;
background: var(--couleur-orange);
border-color: var(--couleur-orange);
color: #fff;
}
&:disabled {