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

Added an extra Material theme as an example to the "styles.scss" file

Browse Source 
Fixed bunch of color related stuff in order to apply the selected theme color correctly
This commit is contained in:
Sercan Yemen 2018-06-09 21:18:30 +03:00
parent 1c8cc35693
commit a284063d22
46 changed files with 144 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
@ -28,7 +28,7 @@
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

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

@ -2,7 +2,7 @@
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
@ -22,7 +22,7 @@
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>

29
src/@fuse/scss/partials/_colors.scss
View File

@ -227,6 +227,35 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
}
}
@mixin generateFuseColorClasses($primary, $accent, $warn) {
$colorMap: (
primary: $primary,
accent: $accent,
warn: $warn
);
// Generate the color classes...
@each $name, $map in $colorMap {
@each $hue in $matColorHues {
$color: map-get($map, $hue);
$contrastColor: map-get(map-get($map, 'contrast'), $hue);
@if ($color != null and $contrastColor != null) {
@include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
// Run the generator one more time for default values (500)
@if ($hue == 500) {
@include generateColorClasses($name, $color, $contrastColor, '');
}
}
}
}
}
// Generate the color classes...
@each $colorName, $colorMap in $matColorsMap {

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

@ -72,14 +72,14 @@
}
&.active {
background-color: mat-color($accent);
//background-color: mat-color($accent);
.mat-ripple-element {
background-color: mat-color($accent, default-contrast, 0.1);
//background-color: mat-color($accent, default-contrast, 0.1);
}
&, .nav-link-icon {
color: mat-color($accent, default-contrast);
//color: mat-color($accent, default-contrast);
}
.nav-link-badge {

6
src/app/main/apps/chat/chat-start/chat-start.component.html
View File

@ -3,13 +3,15 @@
<div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<mat-icon class="s-64 s-mat-128">chat</mat-icon>
<mat-icon class="s-64 s-mat-128 mat-accent">chat</mat-icon>
</div>
<span class="app-title my-24" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
<span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">Select contact to start the chat!..</span>
<span fxHide fxShow.gt-md class="app-message" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
Select contact to start the chat!..
</span>
<button mat-raised-button fxHide.gt-md class="" fuseMatSidenavToggler="chat-left-sidenav">
Select contact to start the chat!..

4
src/app/main/apps/chat/chat-start/chat-start.component.scss
View File

@ -18,10 +18,6 @@
height: 160px;
line-height: 160px;
}
mat-icon {
color: mat-color($accent);
}
}
.app-title {

2
src/app/main/apps/chat/sidenavs/left/chats/chats.component.html
View File

@ -136,7 +136,7 @@
<div class="contact-last-message-time">
{{chat.lastMessageTime | date}}
</div>
<div *ngIf="chat.unread" class="unread-message-count">{{chat.unread}}</div>
<div *ngIf="chat.unread" class="unread-message-count mat-accent-bg">{{chat.unread}}</div>
</div>
</div>
</div>

2
src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss
View File

@ -94,8 +94,6 @@
width: 24px;
height: 24px;
line-height: 24px;
background-color: mat-color($accent);
color: map-get($accent, default-contrast);
}
}
}

2
src/app/main/apps/chat/sidenavs/left/user/user.component.html
View File

@ -2,7 +2,7 @@
<div class="sidenav-header">
<!-- USER TOOLBAR -->
<mat-toolbar>
<mat-toolbar class="mat-accent-bg">
<!-- TOOLBAR TOP -->
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

3
src/app/main/apps/chat/sidenavs/left/user/user.component.scss
View File

@ -6,8 +6,6 @@
flex-direction: column;
mat-toolbar {
background-color: mat-color($accent);
color: map-get($accent, default-contrast);
.toolbar-bottom {
height: 240px;
@ -16,7 +14,6 @@
height: 180px;
}
}
}
.sidenav-content {

2
src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
View File

@ -2,7 +2,7 @@
<div class="sidenav-header" *ngIf="contact">
<!-- CONTACT TOOLBAR -->
<mat-toolbar>
<mat-toolbar class="mat-accent-bg">
<!-- TOOLBAR TOP -->
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

3
src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
View File

@ -6,8 +6,6 @@
flex-direction: column;
mat-toolbar {
background-color: mat-color($accent);
color: map-get($accent, default-contrast);
.toolbar-bottom {
height: 240px;
@ -16,7 +14,6 @@
height: 180px;
}
}
}
.sidenav-content {

2
src/app/main/apps/contacts/contact-list/contact-list.component.html
View File

@ -97,7 +97,7 @@
<mat-row *cdkRowDef="let contact; columns: displayedColumns;"
class="contact"
(click)="editContact(contact)"
[ngClass]="{'mat-light-blue-50-bg':checkboxes[contact.id]}"
[ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}"
matRipple
[@animate]="{value:'*',params:{y:'100%'}}">
</mat-row>

7
src/app/main/apps/contacts/sidenavs/main/main.component.html
View File

@ -18,19 +18,20 @@
<div class="nav">
<div class="nav-item" aria-label="inbox">
<a class="nav-link" matRipple (click)="changeFilter('all')" [ngClass]="{'active':filterBy ==='all'}">
<a class="nav-link" matRipple (click)="changeFilter('all')"
[ngClass]="{'active mat-accent-bg':filterBy ==='all'}">
<span class="title">All Contacts</span>
</a>
</div>
<div class="nav-item" aria-label="frequently contacted" (click)="changeFilter('frequent')">
<a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='frequent'}">
<a class="nav-link" matRipple [ngClass]="{'active mat-accent-bg':filterBy ==='frequent'}">
<div class="title">Freequently contacted</div>
</a>
</div>
<div class="nav-item" aria-label="starred" (click)="changeFilter('starred')">
<a class="nav-link" matRipple [ngClass]="{'active':filterBy ==='starred'}">
<a class="nav-link" matRipple [ngClass]="{'active mat-accent-bg':filterBy ==='starred'}">
<div class="title">Starred Contacts</div>
</a>
</div>

2
src/app/main/apps/e-commerce/order/order.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- HEADER -->
<div class="header white-fg"
<div class="header mat-accent-bg"
fxLayout="row" fxLayoutAlign="space-between center">
<!-- APP TITLE -->

2
src/app/main/apps/e-commerce/orders/orders.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- HEADER -->
<div class="header white-fg"
<div class="header mat-accent-bg"
fxLayout="column" fxLayoutAlign="center center"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">

2
src/app/main/apps/e-commerce/product/product.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- HEADER -->
<div class="header white-fg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="header mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
<!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center">

2
src/app/main/apps/e-commerce/products/products.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- HEADER -->
<div class="header white-fg"
<div class="header mat-accent-bg"
fxLayout="column" fxLayoutAlign="center center"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">

5
src/app/main/apps/file-manager/file-list/file-list.component.html
View File

@ -52,9 +52,8 @@
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let row; columns: displayedColumns;"
(click)="onSelect(row)"
[ngClass]="{'mat-light-blue-50-bg':row == selected}"
matRipple
[@animate]="{value:'*',params:{y:'100%'}}"
[ngClass]="{'mat-accent-50-bg':row == selected}"
matRipple [@animate]="{value:'*',params:{y:'100%'}}"
>
</mat-row>
</mat-table>

2
src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.html
View File

@ -10,7 +10,7 @@
<div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
<div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<div class="avatar mat-accent-bg" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
<mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
</div>

21
src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.scss
View File

@ -44,20 +44,6 @@
}
}
&.current-mail {
background: #E3F2FD;
.info {
.row-2 {
.labels {
background: #E3F2FD;
}
}
}
}
.info {
overflow: hidden;
width: 0;
@ -76,7 +62,6 @@
width: 32px;
height: 32px;
line-height: 32px;
background-color: mat-color($accent);
}
}
@ -104,11 +89,7 @@
}
.labels {
position: absolute;
background: #FFFFFF;
bottom: 0;
right: 0;
padding-left: 6px;
margin-top: 8px;
.label {
font-size: 11px;

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

@ -4,6 +4,6 @@
<div class="mail-list">
<mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
[ngClass]="{'current-mail':mail?.id == currentMail?.id}">
[ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}">
</mail-list-item>
</div>

8
src/app/main/apps/mail-ngrx/mail.component.html
View File

@ -65,11 +65,11 @@
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<mat-icon>delete</mat-icon>
<mat-icon class="secondary-text">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<mat-icon>folder</mat-icon>
<mat-icon class="secondary-text">folder</mat-icon>
</button>
<mat-menu #folderMenu="matMenu">
<button mat-menu-item *ngFor="let folder of folders$ | async"
@ -78,7 +78,7 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<mat-icon>label</mat-icon>
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels$ | async"
@ -89,7 +89,7 @@
<div *ngIf="currentMail$ | async" fxHide.gt-xs>
<button mat-icon-button (click)="deselectCurrentMail()">
<mat-icon>arrow_back</mat-icon>
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>

11
src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
View File

@ -1,6 +1,6 @@
<!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
class="header mat-accent-bg p-24 pb-4">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32">mail</mat-icon>
@ -39,8 +39,9 @@
<div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
<div class="nav-item" *ngFor="let folder of (folders$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle" routerLinkActive="active">
<mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/' + folder.handle"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<span>{{folder.title}}</span>
</a>
</div>
@ -49,7 +50,7 @@
<div class="nav-item" *ngFor="let filter of (filters$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/filter/' + filter.handle"
routerLinkActive="active">
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span>
</a>
@ -59,7 +60,7 @@
<div class="nav-item" *ngFor="let label of (labels$ | async)">
<a class="nav-link" matRipple [routerLink]="'/apps/mail-ngrx/label/' + label.handle"
routerLinkActive="active">
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
<span>{{label.title}}</span>
</a>

2
src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.html
View File

@ -9,7 +9,7 @@
<div class="name" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>
<div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<div class="avatar mat-accent-bg" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>
<span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>
<mat-icon *ngIf="mail.hasAttachments">attachment</mat-icon>
</div>

21
src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
View File

@ -43,20 +43,6 @@
}
}
&.current-mail {
background: #E3F2FD;
.info {
.row-2 {
.labels {
background: #E3F2FD;
}
}
}
}
.info {
overflow: hidden;
width: 0;
@ -75,7 +61,6 @@
width: 32px;
height: 32px;
line-height: 32px;
background-color: mat-color($accent);
}
}
@ -103,11 +88,7 @@
}
.labels {
position: absolute;
background: #FFFFFF;
bottom: 0;
right: 0;
padding-left: 6px;
margin-top: 8px;
.label {
font-size: 11px;

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

@ -4,7 +4,7 @@
<div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
[ngClass]="{'current-mail':mail?.id == currentMail?.id}"
[ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}"
[@animate]="{value:'*',params:{y:'100%'}}">
</mail-list-item>
</div>

8
src/app/main/apps/mail/mail.component.html
View File

@ -63,11 +63,11 @@
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<mat-icon>delete</mat-icon>
<mat-icon class="secondary-text">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<mat-icon>folder</mat-icon>
<mat-icon class="secondary-text">folder</mat-icon>
</button>
<mat-menu #folderMenu="matMenu">
<button mat-menu-item *ngFor="let folder of folders"
@ -76,7 +76,7 @@
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<mat-icon>label</mat-icon>
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels"
@ -87,7 +87,7 @@
<div *ngIf="currentMail" fxHide.gt-xs>
<button mat-icon-button (click)="deselectCurrentMail()">
<mat-icon>arrow_back</mat-icon>
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>

16
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -1,9 +1,10 @@
<!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
class="header mat-accent-bg p-24 pb-4">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail
</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
</div>
@ -39,8 +40,9 @@
<div class="nav-subheader">{{ 'MAIL.FOLDERS' | translate }}</div>
<div class="nav-item" *ngFor="let folder of folders">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
<mat-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<a class="nav-link" matRipple [routerLink]="'/apps/mail/' + folder.handle"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text" *ngIf="folder.icon">{{folder.icon}}</mat-icon>
<span>{{folder.title}}</span>
</a>
</div>
@ -48,7 +50,8 @@
<div class="nav-subheader">{{ 'MAIL.FILTERS' | translate }}</div>
<div class="nav-item" *ngFor="let filter of filters">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/filter/' + filter.handle"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon" [ngClass]="filter.color" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span>
</a>
@ -57,7 +60,8 @@
<div class="nav-subheader">{{ 'MAIL.LABELS' | translate }}</div>
<div class="nav-item" *ngFor="let label of labels">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
<a class="nav-link" matRipple [routerLink]="'/apps/mail/label/' + label.handle"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</mat-icon>
<span>{{label.title}}</span>
</a>

19
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -1,8 +1,10 @@
<!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
class="header mat-accent-bg p-24 pb-4">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
check_box
</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-Do</span>
</div>
@ -36,8 +38,9 @@
<div class="nav">
<div class="nav-item">
<a class="nav-link" matRipple [routerLink]="'/apps/todo/all'" routerLinkActive="active">
<mat-icon class="nav-link-icon">view_headline</mat-icon>
<a class="nav-link" matRipple [routerLink]="'/apps/todo/all'"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text">view_headline</mat-icon>
<span>All</span>
</a>
</div>
@ -45,8 +48,9 @@
<div class="nav-subheader">FILTERS</div>
<div class="nav-item" *ngFor="let filter of filters">
<a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle" routerLinkActive="active">
<mat-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<a class="nav-link" matRipple [routerLink]="'/apps/todo/filter/' + filter.handle"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon secondary-text" *ngIf="filter.icon">{{filter.icon}}</mat-icon>
<span>{{filter.title}}</span>
</a>
</div>
@ -54,7 +58,8 @@
<div class="nav-subheader">TAGS</div>
<div class="nav-item" *ngFor="let tag of tags">
<a class="nav-link" matRipple [routerLink]="'/apps/todo/tag/' + tag.handle" routerLinkActive="active">
<a class="nav-link" matRipple [routerLink]="'/apps/todo/tag/' + tag.handle"
[routerLinkActive]="['active', 'mat-accent-bg']">
<mat-icon class="nav-link-icon" [ngStyle]="{'color':tag.color}">label</mat-icon>
<span>{{tag.title}}</span>
</a>

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

@ -1,5 +1,5 @@
<div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
<span class="no-todos-text hint-text">There are no todos!</span>
<span class="no-todos-text hint-text">There are no todos!</span>
</div>
<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<todo-list-item class="todo-list-item has-handle"
@ -7,7 +7,7 @@
ngxDraggable
[model]="todo"
(click)="readTodo(todo.id)"
[ngClass]="{'current-todo':todo?.id == currentTodo?.id}"
[ngClass]="{'current-todo mat-accent-50-bg':todo?.id == currentTodo?.id}"
matRipple
[@animate]="{value:'*',params:{y:'100%'}}">
</todo-list-item>

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

@ -63,7 +63,7 @@
<div class="toolbar-separator" *ngIf="hasSelectedTodos"></div>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedTodos">
<mat-icon>label</mat-icon>
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let tag of tags" (click)="toggleTagOnSelectedTodos(tag.id)">
@ -74,7 +74,7 @@
<div *ngIf="currentTodo" fxHide.gt-lg>
<button mat-icon-button (click)="deselectCurrentTodo()">
<mat-icon>arrow_back</mat-icon>
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>

2
src/app/main/pages/authentication/mail-confirm/mail-confirm.component.html
View File

@ -5,7 +5,7 @@
<div id="mail-confirm-form" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
<div class="logo">
<mat-icon class="blue-fg s-96">email</mat-icon>
<mat-icon class="mat-accent s-96">email</mat-icon>
</div>
<div class="title">Confirm your email address!</div>

2
src/app/main/ui/page-layouts/carded/full-width-1/full-width-1.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/carded/full-width-2/full-width-2.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/carded/full-width-tabbed-1/full-width-tabbed-1.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with tabs and content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/carded/full-width-tabbed-2/full-width-tabbed-2.component.html
View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Full width with tabs and inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->

4
src/app/main/ui/page-layouts/carded/left-sidenav-1/left-sidenav-1.component.html
View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header p-24 mat-accent-bg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -31,7 +31,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<h2>Left sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

4
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -31,7 +31,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<h2>Left sidenav with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->

4
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-1/left-sidenav-tabbed-1.component.html
View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -31,7 +31,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">

4
src/app/main/ui/page-layouts/carded/left-sidenav-tabbed-2/left-sidenav-tabbed-2.component.html
View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -31,7 +31,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">

4
src/app/main/ui/page-layouts/carded/right-sidenav-1/right-sidenav-1.component.html
View File

@ -10,7 +10,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<h2>Right sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -49,7 +49,7 @@
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

4
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -10,7 +10,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<h2>Right sidenav with inner scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -49,7 +49,7 @@
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

4
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-1/right-sidenav-tabbed-1.component.html
View File

@ -10,7 +10,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
@ -130,7 +130,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

4
src/app/main/ui/page-layouts/carded/right-sidenav-tabbed-2/right-sidenav-tabbed-2.component.html
View File

@ -10,7 +10,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div class="header mat-accent-bg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
@ -130,7 +130,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
<div class="header mat-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

24
src/styles.scss
View File

@ -1,2 +1,24 @@
// Import Fuse core library
@import "@fuse/scss/core";
@import "@fuse/scss/core";
// -----------------------------------------------------------------------------------------------------
// @ Multiple material themes example
// -----------------------------------------------------------------------------------------------------
// Define the Material palettes
$yellow-theme-primary: mat-palette($mat-fusedark);
$yellow-theme-accent: mat-palette($mat-yellow, 600, 400, 700);
$yellow-theme-warn: mat-palette($mat-red);
// Create the Material theme object
$yellow-theme: mat-light-theme($yellow-theme-primary, $yellow-theme-accent, $yellow-theme-warn);
// Add ".yellow-theme" class to the body to activate this theme
.yellow-theme {
// Generate the Angular Material theme
@include angular-material-theme($yellow-theme);
// Generate the fuse color classes with the new colors...
@include generateFuseColorClasses($yellow-theme-primary, $yellow-theme-accent, $yellow-theme-warn);
}