purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Icon colors on navigations

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-11 18:18:01 +03:00
parent a174c00072
commit 8520ca77be
7 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
View File

@ -41,7 +41,7 @@
</a> </a>
<ng-template #itemContent> <ng-template #itemContent>
<mat-icon class="nav-link-icon secondary-text" *ngIf="item.icon">{{item.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span> <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate" <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}"> [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">

2
src/@fuse/components/navigation/vertical/item/item.component.html
View File

@ -35,7 +35,7 @@
</a> </a>
<ng-template #itemContent> <ng-template #itemContent>
<mat-icon class="nav-link-icon secondary-text" *ngIf="item.icon">{{item.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span> <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate" <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}"> [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">

10
src/@fuse/scss/partials/_navigation.scss
View File

@ -72,14 +72,9 @@
} }
&.active { &.active {
//background-color: mat-color($accent);
.mat-ripple-element { .nav-link-icon {
//background-color: mat-color($accent, default-contrast, 0.1); opacity: 1;
}
&, .nav-link-icon {
//color: mat-color($accent, default-contrast);
} }
.nav-link-badge { .nav-link-badge {
@ -90,6 +85,7 @@
.nav-link-icon { .nav-link-icon {
margin-right: 16px; margin-right: 16px;
opacity: 0.7;
} }
.nav-link-icon, .nav-link-icon,

12
src/app/main/apps/file-manager/sidebars/main/main.component.html
View File

@ -2,7 +2,7 @@
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between"> <div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
<div class="logo" fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon secondary-text mr-16">folder</mat-icon> <mat-icon class="logo-icon secondary-text s-36 mr-16">folder</mat-icon>
<span class="logo-text h1">File Manager</span> <span class="logo-text h1">File Manager</span>
</div> </div>
@ -16,35 +16,35 @@
<div class="nav-item" aria-label="inbox"> <div class="nav-item" aria-label="inbox">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon secondary-text">folder</mat-icon> <mat-icon class="nav-link-icon">folder</mat-icon>
<span class="title">My Files</span> <span class="title">My Files</span>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon secondary-text">star</mat-icon> <mat-icon class="nav-link-icon">star</mat-icon>
<div class="title">Starred</div> <div class="title">Starred</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon secondary-text">folder_shared</mat-icon> <mat-icon class="nav-link-icon">folder_shared</mat-icon>
<div class="title">Sharred with me</div> <div class="title">Sharred with me</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon secondary-text">access_time</mat-icon> <mat-icon class="nav-link-icon">access_time</mat-icon>
<div class="title">Recent</div> <div class="title">Recent</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon secondary-text">not_interested</mat-icon> <mat-icon class="nav-link-icon">not_interested</mat-icon>
<div class="title">Offline</div> <div class="title">Offline</div>
</a> </a>
</div> </div>

2
src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html
View File

@ -41,7 +41,7 @@
<div class="nav-item" *ngFor="let folder of (folders$ | async)"> <div class="nav-item" *ngFor="let folder of (folders$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle" <a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle"
[routerLinkActive]="['active', 'mat-accent-bg']"> [routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<span>{{folder.title}}</span> <span>{{folder.title}}</span>
</a> </a>
</div> </div>

2
src/app/main/apps/mail/sidebars/main/main-sidebar.component.html
View File

@ -42,7 +42,7 @@
<div class="nav-item" *ngFor="let folder of folders"> <div class="nav-item" *ngFor="let folder of folders">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle" <a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle"
[routerLinkActive]="['active', 'mat-accent-bg']"> [routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<span>{{folder.title}}</span> <span>{{folder.title}}</span>
</a> </a>
</div> </div>

4
src/app/main/apps/todo/sidebars/main/main-sidebar.component.html
View File

@ -40,7 +40,7 @@
<div class="nav-item"> <div class="nav-item">
<a class="nav-link" matRipple [routerLink]="'/apps/todo/all'" <a class="nav-link" matRipple [routerLink]="'/apps/todo/all'"
[routerLinkActive]="['active', 'mat-accent-bg']"> [routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text">view_headline</mat-icon> <mat-icon class="nav-link-icon">view_headline</mat-icon>
<span>All</span> <span>All</span>
</a> </a>
</div> </div>
@ -50,7 +50,7 @@
<div class="nav-item" *ngFor="let filter of filters"> <div class="nav-item" *ngFor="let filter of filters">
<a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle" <a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle"
[routerLinkActive]="['active', 'mat-accent-bg']"> [routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text" *ngIf="filter.icon">{{filter.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span> <span>{{filter.title}}</span>
</a> </a>
</div> </div>