feat: Hinzufügen-Button für zentrale Dateneingabe hinzugefügt; Hover-Effekt für CSS-Pseudo-Klasse implementiert

This commit is contained in:
Developer 02 2024-07-25 12:48:37 +02:00
parent f38c351cc8
commit dd1d911354
2 changed files with 26 additions and 2 deletions

View File

@ -94,7 +94,7 @@ html {
display: block !important;
}
.mat-icon:hover {
.turn-360:hover {
animation: rotate 1s ease forwards;
}
@ -105,4 +105,25 @@ html {
100% {
transform: rotate(360deg);
}
}
.scale-pulse {
display: inline-block;
transition: transform 1s ease;
}
.scale-pulse:hover {
animation: pulse 1s ease forwards;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

View File

@ -30,8 +30,11 @@
<!-- Right menu -->
<div class="navbar-collapse justify-content-end me-5">
<a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
<button class="btn">
<mat-icon class="scale-pulse">add_to_photos</mat-icon>
</button>
<button class="btn" (click)="refreshService.executeAll()">
<mat-icon>sync</mat-icon>
<mat-icon class="turn-360">sync</mat-icon>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">