+
-
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss
index f01c54f4..bc116a3c 100644
--- a/src/app/core/components/theme-options/theme-options.component.scss
+++ b/src/app/core/components/theme-options/theme-options.component.scss
@@ -14,6 +14,7 @@
display: block;
right: 0;
top: 160px;
+ z-index: 998;
&.bar-closed .theme-options-panel {
display: none;
@@ -48,7 +49,7 @@
color: rgba(0, 0, 0, 0.54);
}
- .mat-divider{
+ .mat-divider {
display: block !important;
width: 100%;
margin: 24px 0 16px 0;
@@ -102,7 +103,7 @@
opacity: .75;
z-index: 998;
- md-icon {
+ mat-icon {
animation: rotating 3s linear infinite;
}
diff --git a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
index b7042968..403bce13 100644
--- a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
+++ b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts
@@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
{
setTimeout(() => {
this.viewContainer.createEmbeddedView(this.templateRef);
- }, 350);
+ }, 300);
this.isCreated = true;
}
else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )
diff --git a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
index b1b42b41..4979c2a4 100644
--- a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -1,5 +1,5 @@
-import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
-import * as Ps from 'perfect-scrollbar';
+import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import PerfectScrollbar from 'perfect-scrollbar';
import { FuseConfigService } from '../../services/config.service';
import { Subscription } from 'rxjs/Subscription';
import { Platform } from '@angular/cdk/platform';
@@ -13,10 +13,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
isDisableCustomScrollbars = false;
isMobile = false;
isInitialized = true;
+ ps;
constructor(
private element: ElementRef,
- private zone: NgZone,
private fuseConfig: FuseConfigService,
private platform: Platform
)
@@ -48,11 +48,8 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
return;
}
- this.zone.runOutsideAngular(() => {
-
- // Initialize the perfect-scrollbar
- Ps.initialize(this.element.nativeElement);
- });
+ // Initialize the perfect-scrollbar
+ this.ps = new PerfectScrollbar(this.element.nativeElement);
}
ngOnDestroy()
@@ -65,7 +62,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
this.onSettingsChanged.unsubscribe();
// Destroy the perfect-scrollbar
- Ps.destroy(this.element.nativeElement);
+ this.ps.destroy();
}
update()
@@ -76,7 +73,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
}
// Update the perfect-scrollbar
- Ps.update(this.element.nativeElement);
+ this.ps.update();
}
destroy()
@@ -126,7 +123,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
// PS has weird event sending order, this is a workaround for that
this.update();
-
this.update();
}
else if ( value !== this.element.nativeElement[target] )
diff --git a/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts
new file mode 100644
index 00000000..55161597
--- /dev/null
+++ b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts
@@ -0,0 +1,99 @@
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+
+@Directive({
+ selector: '[fuseMatSidenavHelper]'
+})
+export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
+{
+ matchMediaSubscription: Subscription;
+
+ @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
+ @HostBinding('class.mat-stop-transition') stopTransition = true;
+
+ @Input('fuseMatSidenavHelper') id: string;
+ @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
+
+ constructor(
+ private fuseMatSidenavService: FuseMatSidenavHelperService,
+ private fuseMatchMedia: FuseMatchMedia,
+ private observableMedia: ObservableMedia,
+ private matSidenav: MatSidenav
+ )
+ {
+ }
+
+ ngOnInit()
+ {
+ this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
+
+ if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+ {
+ setTimeout(() => {
+ this.isLockedOpen = true;
+ this.matSidenav.mode = 'side';
+ this.matSidenav.open();
+ });
+ this.stopTransition = false;
+ }
+ else
+ {
+ setTimeout(() => {
+ this.isLockedOpen = false;
+ this.matSidenav.mode = 'over';
+ this.matSidenav.close();
+ });
+
+ setTimeout(() => {
+ this.stopTransition = false;
+ }, 3000);
+ }
+
+ this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
+ if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+ {
+ setTimeout(() => {
+ this.isLockedOpen = true;
+ this.matSidenav.mode = 'side';
+ this.matSidenav.open();
+ });
+ }
+ else
+ {
+ setTimeout(() => {
+ this.isLockedOpen = false;
+ this.matSidenav.mode = 'over';
+ this.matSidenav.close();
+ });
+ }
+ });
+
+ }
+
+ ngOnDestroy()
+ {
+ this.matchMediaSubscription.unsubscribe();
+ }
+}
+
+@Directive({
+ selector: '[fuseMatSidenavToggler]'
+})
+export class FuseMatSidenavTogglerDirective
+{
+ @Input('fuseMatSidenavToggler') id;
+
+ constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
+ {
+ }
+
+ @HostListener('click')
+ onClick()
+ {
+ this.fuseMatSidenavService.getSidenav(this.id).toggle();
+ }
+}
diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts
similarity index 70%
rename from src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts
rename to src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts
index d928f46e..748d9480 100644
--- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts
+++ b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts
@@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
-import { MdSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
@Injectable()
-export class FuseMdSidenavHelperService
+export class FuseMatSidenavHelperService
{
- sidenavInstances: MdSidenav[];
+ sidenavInstances: MatSidenav[];
constructor()
{
diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
deleted file mode 100644
index f0ad7ab4..00000000
--- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MdSidenav } from '@angular/material';
-import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
-
-@Directive({
- selector: '[fuseMdSidenavHelper]'
-})
-export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
-{
- matchMediaSubscription: Subscription;
-
- @HostBinding('class.md-is-locked-open') isLockedOpen = true;
- @HostBinding('class.md-stop-transition') stopTransition = true;
-
- @Input('fuseMdSidenavHelper') id: string;
- @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
-
- constructor(
- private fuseMdSidenavService: FuseMdSidenavHelperService,
- private fuseMatchMedia: FuseMatchMedia,
- private observableMedia: ObservableMedia,
- private mdSidenav: MdSidenav
- )
- {
- }
-
- ngOnInit()
- {
- this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
-
- if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
- {
- setTimeout(() => {
- this.isLockedOpen = true;
- this.mdSidenav.mode = 'side';
- this.mdSidenav.open();
- });
- this.stopTransition = false;
- }
- else
- {
- setTimeout(() => {
- this.isLockedOpen = false;
- this.mdSidenav.mode = 'over';
- this.mdSidenav.close();
- });
-
- setTimeout(() => {
- this.stopTransition = false;
- }, 3000);
- }
-
- this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
- if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
- {
- setTimeout(() => {
- this.isLockedOpen = true;
- this.mdSidenav.mode = 'side';
- this.mdSidenav.open();
- });
- }
- else
- {
- setTimeout(() => {
- this.isLockedOpen = false;
- this.mdSidenav.mode = 'over';
- this.mdSidenav.close();
- });
- }
- });
-
- }
-
- ngOnDestroy()
- {
- this.matchMediaSubscription.unsubscribe();
- }
-}
-
-@Directive({
- selector: '[fuseMdSidenavToggler]'
-})
-export class FuseMdSidenavTogglerDirective
-{
- @Input('fuseMdSidenavToggler') id;
-
- constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
- {
- }
-
- @HostListener('click')
- onClick()
- {
- this.fuseMdSidenavService.getSidenav(this.id).toggle();
- }
-}
diff --git a/src/app/core/modules/material.module.ts b/src/app/core/modules/material.module.ts
index f4a3d895..36d357c6 100644
--- a/src/app/core/modules/material.module.ts
+++ b/src/app/core/modules/material.module.ts
@@ -1,106 +1,108 @@
import { NgModule } from '@angular/core';
import {
- MdAutocompleteModule,
- MdButtonModule,
- MdButtonToggleModule,
- MdCheckboxModule,
- MdToolbarModule,
- MdTooltipModule,
- MdCardModule,
- MdChipsModule,
- MdDatepickerModule,
- MdDialogModule,
- MdExpansionModule,
- MdGridListModule,
- MdIconModule,
- MdInputModule,
- MdListModule,
- MdMenuModule,
- MdNativeDateModule,
- MdPaginatorModule,
- MdProgressBarModule,
- MdProgressSpinnerModule,
- MdRadioModule,
- MdRippleModule,
- MdSelectModule,
- MdSidenavModule,
- MdSliderModule,
- MdSlideToggleModule,
- MdSnackBarModule,
- MdStepperModule,
- MdSortModule,
- MdTableModule,
- MdTabsModule
+ MatAutocompleteModule,
+ MatButtonModule,
+ MatButtonToggleModule,
+ MatCheckboxModule,
+ MatToolbarModule,
+ MatTooltipModule,
+ MatCardModule,
+ MatChipsModule,
+ MatDatepickerModule,
+ MatDialogModule,
+ MatExpansionModule,
+ MatFormFieldModule,
+ MatGridListModule,
+ MatIconModule,
+ MatInputModule,
+ MatListModule,
+ MatMenuModule,
+ MatNativeDateModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatProgressSpinnerModule,
+ MatRadioModule,
+ MatRippleModule,
+ MatSelectModule,
+ MatSidenavModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatSortModule,
+ MatTableModule,
+ MatTabsModule,
+ MatStepperModule
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
@NgModule({
imports: [
- MdAutocompleteModule,
- MdButtonModule,
- MdButtonToggleModule,
- MdCardModule,
- MdCheckboxModule,
- MdChipsModule,
- MdDatepickerModule,
- MdDialogModule,
- MdExpansionModule,
- MdGridListModule,
- MdIconModule,
- MdInputModule,
- MdListModule,
- MdMenuModule,
- MdNativeDateModule,
- MdPaginatorModule,
- MdProgressBarModule,
- MdProgressSpinnerModule,
- MdRadioModule,
- MdRippleModule,
- MdSelectModule,
- MdSidenavModule,
- MdSliderModule,
- MdSlideToggleModule,
- MdSnackBarModule,
- MdStepperModule,
- MdSortModule,
- MdTableModule,
- MdTabsModule,
- MdToolbarModule,
- MdTooltipModule,
+ MatAutocompleteModule,
+ MatButtonModule,
+ MatButtonToggleModule,
+ MatCardModule,
+ MatCheckboxModule,
+ MatChipsModule,
+ MatDatepickerModule,
+ MatDialogModule,
+ MatExpansionModule,
+ MatFormFieldModule,
+ MatGridListModule,
+ MatIconModule,
+ MatInputModule,
+ MatListModule,
+ MatMenuModule,
+ MatNativeDateModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatProgressSpinnerModule,
+ MatRadioModule,
+ MatRippleModule,
+ MatSelectModule,
+ MatSidenavModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatStepperModule,
+ MatSortModule,
+ MatTableModule,
+ MatTabsModule,
+ MatToolbarModule,
+ MatTooltipModule,
CdkTableModule
],
exports: [
- MdAutocompleteModule,
- MdButtonModule,
- MdButtonToggleModule,
- MdCardModule,
- MdCheckboxModule,
- MdChipsModule,
- MdDatepickerModule,
- MdDialogModule,
- MdExpansionModule,
- MdGridListModule,
- MdIconModule,
- MdInputModule,
- MdListModule,
- MdMenuModule,
- MdNativeDateModule,
- MdPaginatorModule,
- MdProgressBarModule,
- MdProgressSpinnerModule,
- MdRadioModule,
- MdRippleModule,
- MdSelectModule,
- MdSidenavModule,
- MdSliderModule,
- MdSlideToggleModule,
- MdSnackBarModule,
- MdStepperModule,
- MdSortModule,
- MdTableModule,
- MdTabsModule,
- MdToolbarModule,
- MdTooltipModule,
+ MatAutocompleteModule,
+ MatButtonModule,
+ MatButtonToggleModule,
+ MatCardModule,
+ MatCheckboxModule,
+ MatChipsModule,
+ MatDatepickerModule,
+ MatDialogModule,
+ MatExpansionModule,
+ MatGridListModule,
+ MatIconModule,
+ MatInputModule,
+ MatListModule,
+ MatMenuModule,
+ MatNativeDateModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatProgressSpinnerModule,
+ MatRadioModule,
+ MatRippleModule,
+ MatSelectModule,
+ MatSidenavModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatStepperModule,
+ MatSortModule,
+ MatTableModule,
+ MatTabsModule,
+ MatToolbarModule,
+ MatTooltipModule,
CdkTableModule
]
})
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 8e83073b..38051f01 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -8,24 +8,23 @@ import { ColorPickerModule } from 'ngx-color-picker';
import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
import { FusePipesModule } from '../pipes/pipes.module';
import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
import { FuseCountdownComponent } from '../components/countdown/countdown.component';
import { FuseMatchMedia } from '../services/match-media.service';
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
+import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
import { FuseHljsComponent } from '../components/hljs/hljs.component';
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
-import { Md2Module } from 'md2';
import { CookieService } from 'ngx-cookie-service';
@NgModule({
declarations : [
- FuseMdSidenavHelperDirective,
- FuseMdSidenavTogglerDirective,
+ FuseMatSidenavHelperDirective,
+ FuseMatSidenavTogglerDirective,
FuseConfirmDialogComponent,
FuseCountdownComponent,
FuseHljsComponent,
@@ -42,16 +41,15 @@ import { CookieService } from 'ngx-cookie-service';
ReactiveFormsModule,
ColorPickerModule,
NgxDnDModule,
- NgxDatatableModule,
- Md2Module
+ NgxDatatableModule
],
exports : [
FlexLayoutModule,
MaterialModule,
CommonModule,
FormsModule,
- FuseMdSidenavHelperDirective,
- FuseMdSidenavTogglerDirective,
+ FuseMatSidenavHelperDirective,
+ FuseMatSidenavTogglerDirective,
FusePipesModule,
FuseCountdownComponent,
FuseHljsComponent,
@@ -61,8 +59,7 @@ import { CookieService } from 'ngx-cookie-service';
NgxDnDModule,
NgxDatatableModule,
FuseIfOnDomDirective,
- FuseMaterialColorPickerComponent,
- Md2Module
+ FuseMaterialColorPickerComponent
],
entryComponents: [
FuseConfirmDialogComponent
@@ -71,7 +68,7 @@ import { CookieService } from 'ngx-cookie-service';
CookieService,
FuseMatchMedia,
FuseNavbarVerticalService,
- FuseMdSidenavHelperService
+ FuseMatSidenavHelperService
]
})
diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
index ec657acc..c960cbda 100644
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -3,7 +3,7 @@
@import '~@swimlane/ngx-datatable/release/themes/material.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
// Perfect scrollbar
-@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
// Fuse
@import "fuse";
diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss
index 168656a3..45cc656e 100644
--- a/src/app/core/scss/partials/_angular-material-fix.scss
+++ b/src/app/core/scss/partials/_angular-material-fix.scss
@@ -7,11 +7,11 @@
}
// Fix: "Sidenav opening with animations for the first time"
-md-sidenav-container {
+mat-sidenav-container {
- md-sidenav {
+ mat-sidenav {
- &[md-is-locked-open].md-stop-transition {
+ &[mat-is-locked-open].mat-stop-transition {
transition: none !important;
transform: translate3d(0, 0, 0) !important;
opacity: 0;
diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index 7d61345f..0bfdfa10 100644
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@@ -51,14 +51,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// If the base text color is black...
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
- &.secondary-text,
- .secondary-text,
.mat-icon,
- .icon,
- .md2-datepicker-button {
+ .icon {
color: rgba(0, 0, 0, 0.54);
}
+ &.secondary-text,
+ .secondary-text {
+ color: rgba(0, 0, 0, 0.54) !important;
+ }
+
&.hint-text,
.hint-text,
&.disabled-text,
@@ -80,8 +82,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
@else {
.mat-icon,
- .icon,
- .md2-datepicker-button {
+ .icon {
color: rgba(255, 255, 255, 1);
}
@@ -111,49 +112,60 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
@mixin generateMaterialElementColors($contrastColor) {
// If the contrast color is white...
- $foreground: $mat-dark-theme-foreground;
+ $fuseForeground: (
+ base: white,
+ text: white,
+ hint-text: rgba(white, 0.5),
+ divider: rgba(white, 0.12),
+ );
// If the contrast color is black...
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
- $foreground: $mat-light-theme-foreground;
+
+ $fuseForeground: (
+ base: black,
+ hint-text: rgba(black, 0.38),
+ divider: rgba(black, 0.12),
+ );
}
// Native Input
input[type="text"] {
- color: mat-color($foreground, base);
+ color: map_get($fuseForeground, base);
}
// Input
.mat-input-placeholder {
- color: mat-color($foreground, hint-text);
+ color: map_get($fuseForeground, hint-text);
}
.mat-input-underline {
- background-color: mat-color($foreground, divider);
+ background-color: map_get($fuseForeground, divider);
}
// Select
.mat-select-trigger,
.mat-select-arrow {
- color: mat-color($foreground, hint-text);
+ color: map_get($fuseForeground, hint-text);
}
.mat-select-underline {
- background-color: mat-color($foreground, divider);
+ background-color: map_get($fuseForeground, divider);
}
.mat-select-disabled .mat-select-value,
.mat-select-arrow,
.mat-select-trigger {
- color: mat-color($foreground, hint-text);
+ color: map_get($fuseForeground, hint-text);
}
- .mat-select-content, .mat-select-panel-done-animating {
- background: mat-color($background, card);
+ .mat-select-content,
+ .mat-select-panel-done-animating {
+ background: map_get($background, card);
}
.mat-select-value {
- color: mat-color($foreground, text);
+ color: map_get($fuseForeground, text);
}
}
@@ -164,7 +176,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
background-color: $color !important;
}
- .md-#{$colorName}#{$hue}-bg {
+ .mat-#{$colorName}#{$hue}-bg {
background-color: $color !important;
color: $contrastColor !important;
diff --git a/src/app/core/scss/partials/_global.scss b/src/app/core/scss/partials/_global.scss
index dfdf4f60..f7b93621 100644
--- a/src/app/core/scss/partials/_global.scss
+++ b/src/app/core/scss/partials/_global.scss
@@ -1,6 +1,6 @@
body {
- > md-sidenav-container {
+ > mat-sidenav-container {
height: 100%;
}
}
diff --git a/src/app/core/scss/partials/_icons.scss b/src/app/core/scss/partials/_icons.scss
index 44f18524..43281c59 100644
--- a/src/app/core/scss/partials/_icons.scss
+++ b/src/app/core/scss/partials/_icons.scss
@@ -1,5 +1,5 @@
i,
-md-icon {
+mat-icon {
color: rgba(0, 0, 0, 0.54);
font-size: 24px;
width: 24px;
diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss
index bb91fdc9..fb6c488e 100644
--- a/src/app/core/scss/partials/_material.scss
+++ b/src/app/core/scss/partials/_material.scss
@@ -46,14 +46,14 @@
margin-top: 0;
margin-bottom: 0;
}
- md-icon.status {
+ mat-icon.status {
position: absolute;
top: 28px;
left: 28px;
}
}
-md-icon.status {
+mat-icon.status {
border-radius: 50%;
&.online {
@@ -116,7 +116,7 @@ md-icon.status {
max-height: 48px;
height: 48px;
- md-icon {
+ mat-icon {
margin: 0 16px 0 0;
}
@@ -142,7 +142,7 @@ md-icon.status {
}
}
- md-divider {
+ mat-divider {
margin: 8px 0;
}
}
@@ -196,7 +196,7 @@ md-icon.status {
background-color: #FFFFFF;
width: 280px;
border-radius: 2px;
- margin: 24px 24px 0 0;
+ margin: 12px;
overflow: hidden;
&.style-1 {
@@ -234,7 +234,7 @@ md-icon.status {
}
}
- md-divider {
+ mat-divider {
margin: 16px 32px;
}
diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss
index 51595b0a..29d66d7f 100644
--- a/src/app/core/scss/partials/_page-layouts.scss
+++ b/src/app/core/scss/partials/_page-layouts.scss
@@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Single scroll
&.single-scroll {
- > md-sidenav-container {
+ > mat-sidenav-container {
flex: 1 0 auto;
}
}
- > md-sidenav-container {
+ > mat-sidenav-container {
display: flex;
flex: 1;
background: none;
@@ -132,11 +132,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
min-width: 240px;
max-width: 240px;
height: auto;
- z-index: 2;
+ z-index: 4;
overflow-y: hidden;
@include mat-elevation(7);
- &.md-is-locked-open {
+ &.mat-is-locked-open {
background: none;
box-shadow: none;
}
@@ -145,6 +145,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $carded-header-height;
min-height: $carded-header-height;
max-height: $carded-header-height;
+
+ @include media-breakpoint-down('sm') {
+ height: $carded-header-height-sm;
+ min-height: $carded-header-height-sm;
+ max-height: $carded-header-height-sm;
+ }
}
.content {
@@ -175,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar;
+
+ @include media-breakpoint-down('sm') {
+ height: $carded-header-height-without-toolbar-sm;
+ min-height: $carded-header-height-without-toolbar-sm;
+ max-height: $carded-header-height-without-toolbar-sm;
+ }
}
.content-card {
@@ -216,11 +228,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav {
// Sidenav
- > md-sidenav-container {
+ > mat-sidenav-container {
.sidenav {
- &.md-is-locked-open {
+ &.mat-is-locked-open {
~ .mat-sidenav-content,
~ .mat-drawer-content {
@@ -238,12 +250,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.right-sidenav {
// Sidenav
- > md-sidenav-container {
+ > mat-sidenav-container {
.sidenav {
order: 999;
- &.md-is-locked-open {
+ &.mat-is-locked-open {
~ .mat-sidenav-content,
~ .mat-drawer-content {
@@ -295,7 +307,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Single scroll
&.single-scroll {
- > md-sidenav-container {
+ > mat-sidenav-container {
flex: 1 0 auto;
> .mat-sidenav-content,
@@ -309,7 +321,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
// Inner Sidenav
&.inner-sidenav {
- > md-sidenav-container {
+ > mat-sidenav-container {
flex: 1;
.sidenav {
@@ -338,10 +350,9 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
}
}
- > md-sidenav-container {
+ > mat-sidenav-container {
display: flex;
flex-direction: column;
- //flex-direction: row;
flex: 1;
background: none;
z-index: 2;
@@ -354,7 +365,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
z-index: 51;
@include mat-elevation(7);
- &.md-is-locked-open {
+ &.mat-is-locked-open {
width: 220px;
min-width: 220px;
max-width: 220px;
@@ -440,7 +451,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav,
&.right-sidenav {
- > md-sidenav-container {
+ > mat-sidenav-container {
flex: 1 0 auto;
}
}
@@ -458,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav,
&.right-sidenav {
- > md-sidenav-container {
+ > mat-sidenav-container {
flex: 1 0 auto !important;
> .mat-sidenav-content,
@@ -483,7 +494,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.left-sidenav,
&.right-sidenav {
- > md-sidenav-container {
+ > mat-sidenav-container {
> .mat-sidenav-content,
> .mat-drawer-content {
diff --git a/src/app/core/scss/partials/_reset.scss b/src/app/core/scss/partials/_reset.scss
index 1c42a8ac..3b5ea1fa 100644
--- a/src/app/core/scss/partials/_reset.scss
+++ b/src/app/core/scss/partials/_reset.scss
@@ -28,7 +28,7 @@ html, body {
}
// Reset non angular-material input's default browser/os styles
-*:not(md-input-container) {
+*:not(mat-input-container) {
> input {
border: none;
@@ -55,7 +55,7 @@ html, body {
}
}
-*:not(md-input-container) {
+*:not(mat-input-container) {
> input[type="button"],
> button,
diff --git a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
index 917597a0..b4e97061 100644
--- a/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
+++ b/src/app/core/scss/partials/plugins/_perfect-scrollbar.scss
@@ -1,11 +1,12 @@
.ps {
position: relative;
- > .ps__scrollbar-y-rail {
+ > .ps__rail-x {
z-index: 99999;
}
- > .ps__scrollbar-y-rail {
+ > .ps__rail-y {
z-index: 99999;
+ left: auto !important;
}
}
\ No newline at end of file
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
index 6cdc2383..2335da84 100644
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -28,12 +28,12 @@ export class FuseConfigService
mode : 'fullwidth' // 'boxed', 'fullwidth'
},
colorClasses : {
- toolbar: 'md-white-500-bg',
- navbar : 'md-fuse-dark-500-bg',
- footer : 'md-fuse-dark-700-bg'
+ toolbar: 'mat-white-500-bg',
+ navbar : 'mat-fuse-dark-700-bg',
+ footer : 'mat-fuse-dark-900-bg'
},
customScrollbars: true,
- routerAnimation : 'fadeIn'
+ routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
};
/**
diff --git a/src/app/fuse-fake-db/faq.ts b/src/app/fuse-fake-db/faq.ts
new file mode 100644
index 00000000..be28a980
--- /dev/null
+++ b/src/app/fuse-fake-db/faq.ts
@@ -0,0 +1,61 @@
+export class FaqFakeDb
+{
+ public static data = [
+ {
+ 'question': 'Proident tempor est nulla irure ad est?',
+ 'answer': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.'
+ },
+ {
+ 'question': 'Ullamco duis commodo sint ad aliqua aute?',
+ 'answer': 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.'
+ },
+ {
+ 'question': 'Eiusmod non occaecat pariatur Lorem in ex?',
+ 'answer': 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.'
+ },
+ {
+ 'question': 'Lorem magna cillum consequat consequat mollit?',
+ 'answer': 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.'
+ },
+ {
+ 'question': 'Quis irure cupidatat ad consequat reprehenderit excepteur?',
+ 'answer': 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.'
+ },
+ {
+ 'question': 'Officia voluptate tempor ut mollit ea cillum?',
+ 'answer': 'Deserunt veniam reprehenderit do elit magna ut.'
+ },
+ {
+ 'question': 'Sunt fugiat officia nisi minim sunt duis?',
+ 'answer': 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.'
+ },
+ {
+ 'question': 'Non cupidatat enim quis aliquip minim laborum?',
+ 'answer': 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.'
+ },
+ {
+ 'question': 'Dolor ex occaecat magna labore laboris qui?',
+ 'answer': 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.'
+ },
+ {
+ 'question': 'Nisi et ullamco minim ea proident tempor?',
+ 'answer': 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.'
+ },
+ {
+ 'question': 'Amet sunt et quis amet commodo quis?',
+ 'answer': 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.'
+ },
+ {
+ 'question': 'Ut eiusmod ex ea eiusmod culpa incididunt?',
+ 'answer': 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.'
+ },
+ {
+ 'question': 'Proident reprehenderit laboris pariatur ut et nisi?',
+ 'answer': 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.'
+ },
+ {
+ 'question': 'Aliqua aliquip aliquip aliquip et exercitation aute?',
+ 'answer': 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.'
+ }
+ ];
+}
diff --git a/src/app/main/footer/footer.component.html b/src/app/main/footer/footer.component.html
index 2b1cecfb..72bff219 100644
--- a/src/app/main/footer/footer.component.html
+++ b/src/app/main/footer/footer.component.html
@@ -1,20 +1,20 @@
-
+
-
+
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 7c5a2fd7..4155a298 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,6 +1,6 @@
-
+
-
+
@@ -19,8 +19,8 @@
@@ -62,11 +62,11 @@
-
+
-
+
-
+
diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
index db5d2d6e..18a66d68 100644
--- a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
+++ b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
@@ -8,7 +8,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
})
export class FuseNavbarHorizontalComponent implements OnInit
{
- constructor() {
+ constructor()
+ {
}
ngOnInit()
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.html b/src/app/main/navbar/vertical/navbar-vertical.component.html
index a88e997b..fe98e297 100644
--- a/src/app/main/navbar/vertical/navbar-vertical.component.html
+++ b/src/app/main/navbar/vertical/navbar-vertical.component.html
@@ -5,12 +5,12 @@
FUSE