bastian/keyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Bastian Wagner
2026-03-05 10:34:10 +01:00
parent 020216026e
commit f88fe93182
3 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/app/core/layout/layout.component.html
View File

@@ -12,14 +12,14 @@
<mat-drawer-container class="example-container" autosize> <mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer class="main_sidenav" mode="side" opened="true" style="border-right: 1px solid #dfdfdf"> <mat-drawer #drawer class="main_sidenav" mode="side" opened="true" style="border-right: 1px solid #dfdfdf">
<button matButton routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Home</button> <div class="nav-button" routerLink="/" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"><mat-icon>home</mat-icon>Home</div>
<button matButton routerLink="/keys" routerLinkActive="active-link" class="mat-elevation-z1"><mat-icon>key</mat-icon>Schlüssel</button> <div class="nav-button" routerLink="/keys" routerLinkActive="active-link"><mat-icon>key</mat-icon>Schlüssel</div>
<button matButton routerLink="/cylinders" routerLinkActive="active-link"><mat-icon>lock</mat-icon>Zylinder</button> <div class="nav-button" routerLink="/cylinders" routerLinkActive="active-link"><mat-icon>lock</mat-icon>Zylinder</div>
<button matButton routerLink="/systems" routerLinkActive="active-link"><mat-icon>admin_panel_settings</mat-icon>Schließanlagen</button> <div class="nav-button" routerLink="/systems" routerLinkActive="active-link"><mat-icon>admin_panel_settings</mat-icon>Schließanlagen</div>
@if (isAdmin) { @if (isAdmin) {
<button matButton routerLink="/users" routerLinkActive="active-link"><mat-icon>user_attributes</mat-icon>Alle User</button> <div class="nav-button" routerLink="/users" routerLinkActive="active-link"><mat-icon>user_attributes</mat-icon>Alle User</div>
} }
<button matButton (click)="openSidebar()">Einstellungen</button> <div class="nav-button" (click)="openSidebar()"><mat-icon>settings</mat-icon>Einstellungen</div>
</mat-drawer> </mat-drawer>

20
client/src/app/core/layout/layout.component.scss
View File

@@ -16,6 +16,10 @@ mat-drawer-container {
cursor: pointer; cursor: pointer;
} }
mat-toolbar {
border-bottom: 1px solid #ccc;
}
mat-drawer, mat-toolbar { mat-drawer, mat-toolbar {
background-color: #fff; background-color: #fff;
border-radius: 0; border-radius: 0;
@@ -34,4 +38,20 @@ mat-drawer {
mat-toolbar { mat-toolbar {
gap: 12px; gap: 12px;
}
.nav-button {
display: flex;
padding: 12px 12px;
margin: 4px;
border-radius: 8px;
cursor: pointer;
align-items: center;
gap: 12px;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: rgb(246, 246, 247);
}
} }

5
client/src/styles.scss
View File

@@ -224,6 +224,7 @@ div.ag-row {
// background-color: rgba(0, 0, 0, 0.08) !important; // background-color: rgba(0, 0, 0, 0.08) !important;
font-weight: 500 !important; font-weight: 500 !important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
border-top-right-radius: 0 !important; // border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important; // border-bottom-right-radius: 0 !important;
color: #2D6B05;
} }