payne8/am-product-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Mason Payne
2019-03-19 23:08:27 -06:00
commit 61eba0531d
189 changed files with 42957 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/app.component.css Normal file
View File

2
src/app/app.component.html Normal file
View File

@ -0,0 +1,2 @@
<router-outlet></router-outlet>

32
src/app/app.component.spec.ts Normal file
View File

@ -0,0 +1,32 @@
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app works!'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
});

11
src/app/app.component.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}

46
src/app/app.module.ts Normal file
View File

@ -0,0 +1,46 @@
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { TableListComponent } from './table-list/table-list.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { MapsComponent } from './maps/maps.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UpgradeComponent } from './upgrade/upgrade.component';
import {
AgmCoreModule
} from '@agm/core';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
@NgModule({
imports: [
BrowserAnimationsModule,
FormsModule,
HttpModule,
ComponentsModule,
RouterModule,
AppRoutingModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})
],
declarations: [
AppComponent,
AdminLayoutComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

41
src/app/app.routing.ts Normal file
View File

@ -0,0 +1,41 @@
import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
const routes: Routes =[
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
}, {
path: '',
component: AdminLayoutComponent,
children: [
{
path: '',
loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
}]}
// { path: 'dashboard', component: DashboardComponent },
// { path: 'user-profile', component: UserProfileComponent },
// { path: 'table-list', component: TableListComponent },
// { path: 'typography', component: TypographyComponent },
// { path: 'icons', component: IconsComponent },
// { path: 'maps', component: MapsComponent },
// { path: 'notifications', component: NotificationsComponent },
// { path: 'upgrade', component: UpgradeComponent },
// { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
];
@NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [
],
})
export class AppRoutingModule { }

25
src/app/components/components.module.ts Normal file
View File

@ -0,0 +1,25 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FooterComponent } from './footer/footer.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
@NgModule({
imports: [
CommonModule,
RouterModule,
],
declarations: [
FooterComponent,
NavbarComponent,
SidebarComponent
],
exports: [
FooterComponent,
NavbarComponent,
SidebarComponent
]
})
export class ComponentsModule { }

0
src/app/components/footer/footer.component.css Normal file
View File

33
src/app/components/footer/footer.component.html Normal file
View File

@ -0,0 +1,33 @@
<footer class="footer ">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="https://www.creative-tim.com">
Creative Tim
</a>
</li>
<li>
<a href="https://creative-tim.com/about-us">
About Us
</a>
</li>
<li>
<a href="http://blog.creative-tim.com">
Blog
</a>
</li>
<li>
<a href="https://www.creative-tim.com/license">
Licenses
</a>
</li>
</ul>
</nav>
<div class="copyright pull-right">
&copy;
{{test | date: 'yyyy'}}, made with love by
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
</div>
</div>
</footer>

25
src/app/components/footer/footer.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

16
src/app/components/footer/footer.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
test : Date = new Date();
constructor() { }
ngOnInit() {
}
}

0
src/app/components/navbar/navbar.component.css Normal file
View File

114
src/app/components/navbar/navbar.component.html Normal file
View File

@ -0,0 +1,114 @@
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#">{{getTitle()}}</a>
</div>
<button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<form class="navbar-form">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p>
<span class="d-lg-none d-md-block">Stats</span>
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">person</i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--
<nav class="navbar navbar-transparent navbar-absolute">
<div class="container-fluid">
<div class="navbar-header">
<button mat-raised-button type="button" class="navbar-toggle" data-toggle="collapse" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{getTitle()}}</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons">dashboard</i>
<p class="hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="hidden-lg hidden-md">Notifications</p>
</a>
<ul class="dropdown-menu">
<li><a href="#">Mike John responded to your email</a></li>
<li><a href="#">You have 5 new tasks</a></li>
<li><a href="#">You're now friend with Andrew</a></li>
<li><a href="#">Another Notification</a></li>
<li><a href="#">Another One</a></li>
</ul>
</li>
<li>
<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons">person</i>
<p class="hidden-lg hidden-md">Profile</p>
</a>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group form-black is-empty">
<input type="text" class="form-control" placeholder="Search">
<span class="material-input"></span>
</div>
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i><div class="ripple-container"></div>
</button>
</form>
</div>
</div>
</nav> -->

25
src/app/components/navbar/navbar.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

126
src/app/components/navbar/navbar.component.ts Normal file
View File

@ -0,0 +1,126 @@
import { Component, OnInit, ElementRef } from '@angular/core';
import { ROUTES } from '../sidebar/sidebar.component';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
private listTitles: any[];
location: Location;
mobile_menu_visible: any = 0;
private toggleButton: any;
private sidebarVisible: boolean;
constructor(location: Location, private element: ElementRef, private router: Router) {
this.location = location;
this.sidebarVisible = false;
}
ngOnInit(){
this.listTitles = ROUTES.filter(listTitle => listTitle);
const navbar: HTMLElement = this.element.nativeElement;
this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
this.router.events.subscribe((event) => {
this.sidebarClose();
var $layer: any = document.getElementsByClassName('close-layer')[0];
if ($layer) {
$layer.remove();
this.mobile_menu_visible = 0;
}
});
}
sidebarOpen() {
const toggleButton = this.toggleButton;
const body = document.getElementsByTagName('body')[0];
setTimeout(function(){
toggleButton.classList.add('toggled');
}, 500);
body.classList.add('nav-open');
this.sidebarVisible = true;
};
sidebarClose() {
const body = document.getElementsByTagName('body')[0];
this.toggleButton.classList.remove('toggled');
this.sidebarVisible = false;
body.classList.remove('nav-open');
};
sidebarToggle() {
// const toggleButton = this.toggleButton;
// const body = document.getElementsByTagName('body')[0];
var $toggle = document.getElementsByClassName('navbar-toggler')[0];
if (this.sidebarVisible === false) {
this.sidebarOpen();
} else {
this.sidebarClose();
}
const body = document.getElementsByTagName('body')[0];
if (this.mobile_menu_visible == 1) {
// $('html').removeClass('nav-open');
body.classList.remove('nav-open');
if ($layer) {
$layer.remove();
}
setTimeout(function() {
$toggle.classList.remove('toggled');
}, 400);
this.mobile_menu_visible = 0;
} else {
setTimeout(function() {
$toggle.classList.add('toggled');
}, 430);
var $layer = document.createElement('div');
$layer.setAttribute('class', 'close-layer');
if (body.querySelectorAll('.main-panel')) {
document.getElementsByClassName('main-panel')[0].appendChild($layer);
}else if (body.classList.contains('off-canvas-sidebar')) {
document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
}
setTimeout(function() {
$layer.classList.add('visible');
}, 100);
$layer.onclick = function() { //asign a function
body.classList.remove('nav-open');
this.mobile_menu_visible = 0;
$layer.classList.remove('visible');
setTimeout(function() {
$layer.remove();
$toggle.classList.remove('toggled');
}, 400);
}.bind(this);
body.classList.add('nav-open');
this.mobile_menu_visible = 1;
}
};
getTitle(){
var titlee = this.location.prepareExternalUrl(this.location.path());
if(titlee.charAt(0) === '#'){
titlee = titlee.slice( 2 );
}
titlee = titlee.split('/').pop();
for(var item = 0; item < this.listTitles.length; item++){
if(this.listTitles[item].path === titlee){
return this.listTitles[item].title;
}
}
return 'Dashboard';
}
}

0
src/app/components/sidebar/sidebar.component.css Normal file
View File

65
src/app/components/sidebar/sidebar.component.html Normal file
View File

@ -0,0 +1,65 @@
<div class="logo">
<a href="https://www.creative-tim.com" class="simple-text">
<div class="logo-img">
<img src="/assets/img/angular2-logo-red.png"/>
</div>
Creative Tim
</a>
</div>
<div class="sidebar-wrapper">
<div *ngIf="isMobileMenu()">
<form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button mat-raised-button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</span>
</form>
<ul class="nav navbar-nav nav-mobile-menu">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p>
<span class="d-lg-none d-md-block">Stats</span>
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">person</i>
<p>
<span class="d-lg-none d-md-block">Account</span>
</p>
</a>
</li>
</ul>
</div>
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
</li>
</ul>
</div>

25
src/app/components/sidebar/sidebar.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SidebarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

40
src/app/components/sidebar/sidebar.component.ts Normal file
View File

@ -0,0 +1,40 @@
import { Component, OnInit } from '@angular/core';
declare const $: any;
declare interface RouteInfo {
path: string;
title: string;
icon: string;
class: string;
}
export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'Dashboard', icon: 'dashboard', class: '' },
{ path: '/user-profile', title: 'User Profile', icon:'person', class: '' },
{ path: '/table-list', title: 'Table List', icon:'content_paste', class: '' },
{ path: '/typography', title: 'Typography', icon:'library_books', class: '' },
{ path: '/icons', title: 'Icons', icon:'bubble_chart', class: '' },
{ path: '/maps', title: 'Maps', icon:'location_on', class: '' },
{ path: '/notifications', title: 'Notifications', icon:'notifications', class: '' },
{ path: '/upgrade', title: 'Upgrade to PRO', icon:'unarchive', class: 'active-pro' },
];
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
menuItems: any[];
constructor() { }
ngOnInit() {
this.menuItems = ROUTES.filter(menuItem => menuItem);
}
isMobileMenu() {
if ($(window).width() > 991) {
return false;
}
return true;
};
}

0
src/app/dashboard/dashboard.component.css Normal file
View File

415
src/app/dashboard/dashboard.component.html Normal file
View File

@ -0,0 +1,415 @@
<div class="main-content">
<div class="container-fluid">
<!-- <div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-warning card-header-icon">
<div class="card-icon">
<i class="material-icons">content_copy</i>
</div>
<p class="card-category">Used Space</p>
<h3 class="card-title">49/50
<small>GB</small>
</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons text-danger">warning</i>
<a href="#pablo">Get More Space...</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-success card-header-icon">
<div class="card-icon">
<i class="material-icons">store</i>
</div>
<p class="card-category">Revenue</p>
<h3 class="card-title">$34,245</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">date_range</i> Last 24 Hours
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-danger card-header-icon">
<div class="card-icon">
<i class="material-icons">info_outline</i>
</div>
<p class="card-category">Fixed Issues</p>
<h3 class="card-title">75</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">local_offer</i> Tracked from Github
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card card-stats">
<div class="card-header card-header-info card-header-icon">
<div class="card-icon">
<i class="fa fa-twitter"></i>
</div>
<p class="card-category">Followers</p>
<h3 class="card-title">+245</h3>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">update</i> Just Updated
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="row">
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-success">
<div class="ct-chart" id="dailySalesChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Daily Sales</h4>
<p class="card-category">
<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> updated 4 minutes ago
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-warning">
<div class="ct-chart" id="websiteViewsChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Email Subscriptions</h4>
<p class="card-category">Last Campaign Performance</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> campaign sent 2 days ago
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-danger">
<div class="ct-chart" id="completedTasksChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Completed Tasks</h4>
<p class="card-category">Last Campaign Performance</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> campaign sent 2 days ago
</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="row">
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-tabs card-header-primary">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<span class="nav-tabs-title">Tasks:</span>
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="nav-item">
<a mat-button class="nav-link active" href="#profile" data-toggle="tab">
<i class="material-icons">bug_report</i> Bugs
<div class="ripple-container"></div>
</a>
</li>
<li class="nav-item">
<a mat-button class="nav-link" href="#messages" data-toggle="tab">
<i class="material-icons">code</i> Website
<div class="ripple-container"></div>
</a>
</li>
<li class="nav-item">
<a mat-button class="nav-link" href="#settings" data-toggle="tab">
<i class="material-icons">cloud</i> Server
<div class="ripple-container"></div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="profile">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Create 4 Invisible User Experiences you Never Knew About</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="messages">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="settings">
<table class="table">
<tbody>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Lines From Great Russian Literature? Or E-mails From My Boss?</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit
</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</td>
<td>Sign contract for "What are conference organizers afraid of?"</td>
<td class="td-actions text-right">
<button mat-raised-button type="button" matTooltip="Edit Task" [matTooltipPosition]="'above'" class="btn btn-primary btn-link btn-sm btn-just-icon">
<i class="material-icons">edit</i>
</button>
<button mat-raised-button type="button" matTooltip="Remove" [matTooltipPosition]="'above'" class="btn btn-danger btn-link btn-sm btn-just-icon">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Employees Stats</h4>
<p class="card-category">New employees on 15th September, 2016</p>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>$36,738</td>
<td>Niger</td>
</tr>
<tr>
<td>2</td>
<td>Minerva Hooper</td>
<td>$23,789</td>
<td>Curaçao</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>$56,142</td>
<td>Netherlands</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>$38,735</td>
<td>Korea, South</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div> -->
</div>
</div>

25
src/app/dashboard/dashboard.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

150
src/app/dashboard/dashboard.component.ts Normal file
View File

@ -0,0 +1,150 @@
import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
constructor() { }
startAnimationForLineChart(chart){
let seq: any, delays: any, durations: any;
seq = 0;
delays = 80;
durations = 500;
chart.on('draw', function(data) {
if(data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 600,
dur: 700,
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
} else if(data.type === 'point') {
seq++;
data.element.animate({
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'ease'
}
});
}
});
seq = 0;
};
startAnimationForBarChart(chart){
let seq2: any, delays2: any, durations2: any;
seq2 = 0;
delays2 = 80;
durations2 = 500;
chart.on('draw', function(data) {
if(data.type === 'bar'){
seq2++;
data.element.animate({
opacity: {
begin: seq2 * delays2,
dur: durations2,
from: 0,
to: 1,
easing: 'ease'
}
});
}
});
seq2 = 0;
};
ngOnInit() {
/* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
const dataDailySalesChart: any = {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
series: [
[12, 17, 7, 17, 23, 18, 38]
]
};
const optionsDailySalesChart: any = {
lineSmooth: Chartist.Interpolation.cardinal({
tension: 0
}),
low: 0,
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
}
var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
this.startAnimationForLineChart(dailySalesChart);
/* ----------========== Completed Tasks Chart initialization ==========---------- */
const dataCompletedTasksChart: any = {
labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
series: [
[230, 750, 450, 300, 280, 240, 200, 190]
]
};
const optionsCompletedTasksChart: any = {
lineSmooth: Chartist.Interpolation.cardinal({
tension: 0
}),
low: 0,
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
}
var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
// start animation for the Completed Tasks Chart - Line Chart
this.startAnimationForLineChart(completedTasksChart);
/* ----------========== Emails Subscription Chart initialization ==========---------- */
var datawebsiteViewsChart = {
labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
series: [
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
]
};
var optionswebsiteViewsChart = {
axisX: {
showGrid: false
},
low: 0,
high: 1000,
chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
};
var responsiveOptions: any[] = [
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
//start animation for the Emails Subscription Chart
this.startAnimationForBarChart(websiteViewsChart);
}
}

0
src/app/icons/icons.component.css Normal file
View File

29
src/app/icons/icons.component.html Normal file
View File

@ -0,0 +1,29 @@
<div class="main-content">
<div class="container-fluid">
<div class="card card-plain">
<div class="card-header card-header-danger">
<h4 class="card-title">Material Design Icons</h4>
<p class="card-category">Handcrafted by our friends from
<a target="_blank" href="https://design.google.com/icons/">Google</a>
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="card-body">
<div class="iframe-container d-none d-lg-block">
<iframe src="https://design.google.com/icons/">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
<div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
<h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
<a href="https://design.google.com/icons/" target="_blank">Material Icons</a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

25
src/app/icons/icons.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IconsComponent } from './icons.component';
describe('IconsComponent', () => {
let component: IconsComponent;
let fixture: ComponentFixture<IconsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ IconsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IconsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/icons/icons.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-icons',
templateUrl: './icons.component.html',
styleUrls: ['./icons.component.css']
})
export class IconsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

13
src/app/layouts/admin-layout/admin-layout.component.html Normal file
View File

@ -0,0 +1,13 @@
<div class="wrapper">
<div class="sidebar" data-color="danger" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
<app-sidebar></app-sidebar>
<div class="sidebar-background" style="background-image: url(./assets/img/sidebar-4.jpg)"></div>
</div>
<div class="main-panel">
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<div *ngIf="isMaps('maps')">
<app-footer></app-footer>
</div>
</div>
</div>

0
src/app/layouts/admin-layout/admin-layout.component.scss Normal file
View File

25
src/app/layouts/admin-layout/admin-layout.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AdminLayoutComponent } from './admin-layout.component';
describe('AdminLayoutComponent', () => {
let component: AdminLayoutComponent;
let fixture: ComponentFixture<AdminLayoutComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AdminLayoutComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AdminLayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

86
src/app/layouts/admin-layout/admin-layout.component.ts Normal file
View File

@ -0,0 +1,86 @@
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Location, LocationStrategy, PathLocationStrategy, PopStateEvent } from '@angular/common';
import 'rxjs/add/operator/filter';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import PerfectScrollbar from 'perfect-scrollbar';
@Component({
selector: 'app-admin-layout',
templateUrl: './admin-layout.component.html',
styleUrls: ['./admin-layout.component.scss']
})
export class AdminLayoutComponent implements OnInit {
private _router: Subscription;
private lastPoppedUrl: string;
private yScrollStack: number[] = [];
constructor( public location: Location, private router: Router) {}
ngOnInit() {
const isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows && !document.getElementsByTagName('body')[0].classList.contains('sidebar-mini')) {
// if we are on windows OS we activate the perfectScrollbar function
document.getElementsByTagName('body')[0].classList.add('perfect-scrollbar-on');
} else {
document.getElementsByTagName('body')[0].classList.remove('perfect-scrollbar-off');
}
const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
const elemSidebar = <HTMLElement>document.querySelector('.sidebar .sidebar-wrapper');
this.location.subscribe((ev:PopStateEvent) => {
this.lastPoppedUrl = ev.url;
});
this.router.events.subscribe((event:any) => {
if (event instanceof NavigationStart) {
if (event.url != this.lastPoppedUrl)
this.yScrollStack.push(window.scrollY);
} else if (event instanceof NavigationEnd) {
if (event.url == this.lastPoppedUrl) {
this.lastPoppedUrl = undefined;
window.scrollTo(0, this.yScrollStack.pop());
} else
window.scrollTo(0, 0);
}
});
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
elemMainPanel.scrollTop = 0;
elemSidebar.scrollTop = 0;
});
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
let ps = new PerfectScrollbar(elemMainPanel);
ps = new PerfectScrollbar(elemSidebar);
}
}
ngAfterViewInit() {
this.runOnRouteChange();
}
isMaps(path){
var titlee = this.location.prepareExternalUrl(this.location.path());
titlee = titlee.slice( 1 );
if(path == titlee){
return false;
}
else {
return true;
}
}
runOnRouteChange(): void {
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac()) {
const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
const ps = new PerfectScrollbar(elemMainPanel);
ps.update();
}
}
isMac(): boolean {
let bool = false;
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
bool = true;
}
return bool;
}
}

47
src/app/layouts/admin-layout/admin-layout.module.ts Normal file
View File

@ -0,0 +1,47 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { UserProfileComponent } from '../../user-profile/user-profile.component';
import { TableListComponent } from '../../table-list/table-list.component';
import { TypographyComponent } from '../../typography/typography.component';
import { IconsComponent } from '../../icons/icons.component';
import { MapsComponent } from '../../maps/maps.component';
import { NotificationsComponent } from '../../notifications/notifications.component';
import { UpgradeComponent } from '../../upgrade/upgrade.component';
import {
MatButtonModule,
MatInputModule,
MatRippleModule,
MatFormFieldModule,
MatTooltipModule,
MatSelectModule
} from '@angular/material';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AdminLayoutRoutes),
FormsModule,
MatButtonModule,
MatRippleModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatTooltipModule,
],
declarations: [
DashboardComponent,
UserProfileComponent,
TableListComponent,
TypographyComponent,
IconsComponent,
MapsComponent,
NotificationsComponent,
UpgradeComponent,
]
})
export class AdminLayoutModule {}

63
src/app/layouts/admin-layout/admin-layout.routing.ts Normal file
View File

@ -0,0 +1,63 @@
import { Routes } from '@angular/router';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { UserProfileComponent } from '../../user-profile/user-profile.component';
import { TableListComponent } from '../../table-list/table-list.component';
import { TypographyComponent } from '../../typography/typography.component';
import { IconsComponent } from '../../icons/icons.component';
import { MapsComponent } from '../../maps/maps.component';
import { NotificationsComponent } from '../../notifications/notifications.component';
import { UpgradeComponent } from '../../upgrade/upgrade.component';
export const AdminLayoutRoutes: Routes = [
// {
// path: '',
// children: [ {
// path: 'dashboard',
// component: DashboardComponent
// }]}, {
// path: '',
// children: [ {
// path: 'userprofile',
// component: UserProfileComponent
// }]
// }, {
// path: '',
// children: [ {
// path: 'icons',
// component: IconsComponent
// }]
// }, {
// path: '',
// children: [ {
// path: 'notifications',
// component: NotificationsComponent
// }]
// }, {
// path: '',
// children: [ {
// path: 'maps',
// component: MapsComponent
// }]
// }, {
// path: '',
// children: [ {
// path: 'typography',
// component: TypographyComponent
// }]
// }, {
// path: '',
// children: [ {
// path: 'upgrade',
// component: UpgradeComponent
// }]
// }
{ path: 'dashboard', component: DashboardComponent },
{ path: 'user-profile', component: UserProfileComponent },
{ path: 'table-list', component: TableListComponent },
{ path: 'typography', component: TypographyComponent },
{ path: 'icons', component: IconsComponent },
{ path: 'maps', component: MapsComponent },
{ path: 'notifications', component: NotificationsComponent },
{ path: 'upgrade', component: UpgradeComponent },
];

0
src/app/maps/maps.component.css Normal file
View File

1
src/app/maps/maps.component.html Normal file
View File

@ -0,0 +1 @@
<div id="map"></div>

25
src/app/maps/maps.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MapsComponent } from './maps.component';
describe('MapsComponent', () => {
let component: MapsComponent;
let fixture: ComponentFixture<MapsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MapsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MapsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

125
src/app/maps/maps.component.ts Normal file
View File

@ -0,0 +1,125 @@
import { Component, OnInit } from '@angular/core';
declare const google: any;
interface Marker {
lat: number;
lng: number;
label?: string;
draggable?: boolean;
}
@Component({
selector: 'app-maps',
templateUrl: './maps.component.html',
styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {
constructor() { }
ngOnInit() {
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
zoom: 13,
center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
styles: [{
"featureType": "water",
"stylers": [{
"saturation": 43
}, {
"lightness": -11
}, {
"hue": "#0088ff"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"hue": "#ff0000"
}, {
"saturation": -100
}, {
"lightness": 99
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#808080"
}, {
"lightness": 54
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ece2d9"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ccdca1"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#767676"
}]
}, {
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#b8cb93"
}]
}, {
"featureType": "poi.park",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi.sports_complex",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi.medical",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi.business",
"stylers": [{
"visibility": "simplified"
}]
}]
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
}

0
src/app/notifications/notifications.component.css Normal file
View File

123
src/app/notifications/notifications.component.html Normal file
View File

@ -0,0 +1,123 @@
<div class="main-content">
<div class="container-fluid">
<div class="card">
<div class="card-header card-header-danger">
<h3 class="card-title">Notifications</h3>
<p class="card-category">Handcrafted by our friend
<a target="_blank" href="https://github.com/mouse0270">Robert McIntosh</a>. Please checkout the
<a href="http://bootstrap-notify.remabledesigns.com/" target="_blank">full documentation.</a>
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h4 class="card-title">Notifications Style</h4>
<div class="alert alert-info">
<span>This is a plain notification</span>
</div>
<div class="alert alert-info">
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>This is a notification with close button.</span>
</div>
<div class="alert alert-info alert-with-icon" data-notify="container">
<i class="material-icons" data-notify="icon">add_alert</i>
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span data-notify="message">This is a notification with close button and icon.</span>
</div>
<div class="alert alert-info alert-with-icon" data-notify="container">
<i class="material-icons" data-notify="icon">add_alert</i>
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
</div>
</div>
<div class="col-md-6">
<h4 class="card-title">Notification states</h4>
<div class="alert alert-info">
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
</div>
<div class="alert alert-success">
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
</div>
<div class="alert alert-warning">
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
</div>
<div class="alert alert-danger">
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
</div>
<div class="alert alert-primary">
<button mat-button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="material-icons">close</i>
</button>
<span>
<b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="places-buttons">
<div class="row">
<div class="col-md-6 ml-auto mr-auto text-center">
<h4 class="card-title">
Notifications Places
<p class="category">Click to view notifications</p>
</h4>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="row">
<div class="col-md-4">
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','left')">Top Left</button>
</div>
<div class="col-md-4">
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','center')">Top Center</button>
</div>
<div class="col-md-4">
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('top','right')">Top Right</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-10 ml-auto mr-auto">
<div class="row">
<div class="col-md-4">
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','left')">Bottom Left</button>
</div>
<div class="col-md-4">
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','center')">Bottom Center</button>
</div>
<div class="col-md-4">
<button mat-raised-button class="btn btn-danger btn-block" (click)="showNotification('bottom','right')">Bottom Right</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

25
src/app/notifications/notifications.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NotificationsComponent } from './notifications.component';
describe('NotificationsComponent', () => {
let component: NotificationsComponent;
let fixture: ComponentFixture<NotificationsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NotificationsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NotificationsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

42
src/app/notifications/notifications.component.ts Normal file
View File

@ -0,0 +1,42 @@
import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-notifications',
templateUrl: './notifications.component.html',
styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {
constructor() { }
showNotification(from, align){
const type = ['','info','success','warning','danger'];
const color = Math.floor((Math.random() * 4) + 1);
$.notify({
icon: "notifications",
message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."
},{
type: type[color],
timer: 4000,
placement: {
from: from,
align: align
},
template: '<div data-notify="container" class="col-xl-4 col-lg-4 col-11 col-sm-4 col-md-4 alert alert-{0} alert-with-icon" role="alert">' +
'<button mat-button type="button" aria-hidden="true" class="close mat-button" data-notify="dismiss"> <i class="material-icons">close</i></button>' +
'<i class="material-icons" data-notify="icon">notifications</i> ' +
'<span data-notify="title">{1}</span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'</div>'
});
}
ngOnInit() {
}
}

0
src/app/table-list/table-list.component.css Normal file
View File

276
src/app/table-list/table-list.component.html Normal file
View File

@ -0,0 +1,276 @@
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-danger">
<h4 class="card-title ">Simple Table</h4>
<p class="card-category"> Here is a subtitle for this table</p>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead class=" text-primary">
<th>
ID
</th>
<th>
Name
</th>
<th>
Country
</th>
<th>
City
</th>
<th>
Salary
</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Dakota Rice
</td>
<td>
Niger
</td>
<td>
Oud-Turnhout
</td>
<td class="text-primary">
$36,738
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Minerva Hooper
</td>
<td>
Curaçao
</td>
<td>
Sinaai-Waas
</td>
<td class="text-primary">
$23,789
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Sage Rodriguez
</td>
<td>
Netherlands
</td>
<td>
Baileux
</td>
<td class="text-primary">
$56,142
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Philip Chaney
</td>
<td>
Korea, South
</td>
<td>
Overland Park
</td>
<td class="text-primary">
$38,735
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Doris Greene
</td>
<td>
Malawi
</td>
<td>
Feldkirchen in Kärnten
</td>
<td class="text-primary">
$63,542
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Mason Porter
</td>
<td>
Chile
</td>
<td>
Gloucester
</td>
<td class="text-primary">
$78,615
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card card-plain">
<div class="card-header card-header-danger">
<h4 class="card-title mt-0"> Table on Plain Background</h4>
<p class="card-category"> Here is a subtitle for this table</p>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead class="">
<th>
ID
</th>
<th>
Name
</th>
<th>
Country
</th>
<th>
City
</th>
<th>
Salary
</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Dakota Rice
</td>
<td>
Niger
</td>
<td>
Oud-Turnhout
</td>
<td>
$36,738
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Minerva Hooper
</td>
<td>
Curaçao
</td>
<td>
Sinaai-Waas
</td>
<td>
$23,789
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Sage Rodriguez
</td>
<td>
Netherlands
</td>
<td>
Baileux
</td>
<td>
$56,142
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Philip Chaney
</td>
<td>
Korea, South
</td>
<td>
Overland Park
</td>
<td>
$38,735
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Doris Greene
</td>
<td>
Malawi
</td>
<td>
Feldkirchen in Kärnten
</td>
<td>
$63,542
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Mason Porter
</td>
<td>
Chile
</td>
<td>
Gloucester
</td>
<td>
$78,615
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

25
src/app/table-list/table-list.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TableListComponent } from './table-list.component';
describe('TableListComponent', () => {
let component: TableListComponent;
let fixture: ComponentFixture<TableListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TableListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TableListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/table-list/table-list.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-table-list',
templateUrl: './table-list.component.html',
styleUrls: ['./table-list.component.css']
})
export class TableListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

0
src/app/typography/typography.component.css Normal file
View File

98
src/app/typography/typography.component.html Normal file
View File

@ -0,0 +1,98 @@
<div class="main-content">
<div class="container-fluid">
<div class="card">
<div class="card-header card-header-danger">
<h4 class="card-title">Material Dashboard Heading</h4>
<p class="card-category">Created using Roboto Font Family</p>
</div>
<div class="card-body">
<div id="typography">
<div class="card-title">
<h2>Typography</h2>
</div>
<div class="row">
<div class="tim-typo">
<h1>
<span class="tim-note">Header 1</span>The Life of Material Dashboard </h1>
</div>
<div class="tim-typo">
<h2>
<span class="tim-note">Header 2</span>The Life of Material Dashboard</h2>
</div>
<div class="tim-typo">
<h3>
<span class="tim-note">Header 3</span>The Life of Material Dashboard</h3>
</div>
<div class="tim-typo">
<h4>
<span class="tim-note">Header 4</span>The Life of Material Dashboard</h4>
</div>
<div class="tim-typo">
<h5>
<span class="tim-note">Header 5</span>The Life of Material Dashboard</h5>
</div>
<div class="tim-typo">
<h6>
<span class="tim-note">Header 6</span>The Life of Material Dashboard</h6>
</div>
<div class="tim-typo">
<p>
<span class="tim-note">Paragraph</span>
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
</div>
<div class="tim-typo">
<span class="tim-note">Quote</span>
<blockquote class="blockquote">
<p>
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
</p>
<small>
Kanye West, Musician
</small>
</blockquote>
</div>
<div class="tim-typo">
<span class="tim-note">Muted Text</span>
<p class="text-muted">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Primary Text</span>
<p class="text-primary">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
</div>
<div class="tim-typo">
<span class="tim-note">Info Text</span>
<p class="text-info">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
</div>
<div class="tim-typo">
<span class="tim-note">Success Text</span>
<p class="text-success">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
</div>
<div class="tim-typo">
<span class="tim-note">Warning Text</span>
<p class="text-warning">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
</p>
</div>
<div class="tim-typo">
<span class="tim-note">Danger Text</span>
<p class="text-danger">
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... </p>
</div>
<div class="tim-typo">
<h2>
<span class="tim-note">Small Tag</span>
Header with small subtitle
<br>
<small>Use "small" tag for the headers</small>
</h2>
</div>
</div>
</div>
</div>
</div>
</div>

25
src/app/typography/typography.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TypographyComponent } from './typography.component';
describe('TypographyComponent', () => {
let component: TypographyComponent;
let fixture: ComponentFixture<TypographyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TypographyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TypographyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/typography/typography.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-typography',
templateUrl: './typography.component.html',
styleUrls: ['./typography.component.css']
})
export class TypographyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

0
src/app/upgrade/upgrade.component.css Normal file
View File

78
src/app/upgrade/upgrade.component.html Normal file
View File

@ -0,0 +1,78 @@
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<div class="card">
<div class="card-header card-header-danger">
<h4 class="card-title">Material Dashboard PRO Angular</h4>
<p class="card-category">Are you looking for more components? Please check our Premium Version of Material Dashboard Angular.</p>
</div>
<div class="card-body">
<div class="table-responsive table-upgrade">
<table class="table">
<thead>
<tr>
<th></th>
<th class="text-center">Free</th>
<th class="text-center">PRO</th>
</tr>
</thead>
<tbody>
<tr>
<td>Components</td>
<td class="text-center">60</td>
<td class="text-center">200</td>
</tr>
<tr>
<td>Plugins</td>
<td class="text-center">2</td>
<td class="text-center">15</td>
</tr>
<tr>
<td>Example Pages</td>
<td class="text-center">3</td>
<td class="text-center">27</td>
</tr>
<tr>
<td>Login, Register, Pricing, Lock Pages</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-success"></i></td>
</tr>
<tr>
<td>DataTables, VectorMap, SweetAlert, Wizard, jQueryValidation, FullCalendar etc...</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-success"></i></td>
</tr>
<tr>
<td>Mini Sidebar</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-success"></i></td>
</tr>
<tr>
<td>Premium Support</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-success"></i></td>
</tr>
<tr>
<td></td>
<td class="text-center">Free</td>
<td class="text-center">Just $59</td>
</tr>
<tr>
<td class="text-center"></td>
<td class="text-center">
<a href="#" class="btn btn-round btn-fill btn-default disabled">Current Version</a>
</td>
<td class="text-center">
<a target="_blank" href="https://www.creative-tim.com/product/material-dashboard-pro-angular2?ref=md-free-angular-upgrade-live" class="btn btn-round btn-fill btn-info">Upgrade to PRO</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

25
src/app/upgrade/upgrade.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UpgradeComponent } from './upgrade.component';
describe('UpgradeComponent', () => {
let component: UpgradeComponent;
let fixture: ComponentFixture<UpgradeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UpgradeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UpgradeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/upgrade/upgrade.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-upgrade',
templateUrl: './upgrade.component.html',
styleUrls: ['./upgrade.component.css']
})
export class UpgradeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

0
src/app/user-profile/user-profile.component.css Normal file
View File

105
src/app/user-profile/user-profile.component.html Normal file
View File

@ -0,0 +1,105 @@
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header card-header-danger">
<h4 class="card-title">Edit Profile</h4>
<p class="card-category">Complete your profile</p>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-5">
<mat-form-field class="example-full-width">
<input matInput placeholder="Company (disabled)" disabled>
</mat-form-field>
</div>
<div class="col-md-3">
<mat-form-field class="example-full-width">
<input matInput placeholder="Username">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email address" type="email">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput placeholder="Fist Name" type="text">
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput placeholder="Last Name" type="text">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-12">
<mat-form-field class="example-full-width">
<input matInput placeholder="Adress" type="text">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="City" type="text">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Country" type="text">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field class="example-full-width">
<input matInput placeholder="Postal Code" type="text">
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>About Me</label>
<mat-form-field class="example-full-width">
<textarea matInput placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
</mat-form-field>
<!-- <div class="form-group">
<div class="form-group">
<label class="bmd-label-floating"> Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div> -->
</div>
</div>
<button mat-raised-button type="submit" class="btn btn-danger pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-avatar">
<a href="#pablo">
<img class="img" src="./assets/img/faces/marc.jpg" />
</a>
</div>
<div class="card-body">
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
<h4 class="card-title">Alec Thompson</h4>
<p class="card-description">
Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
</p>
<a href="#pablo" class="btn btn-danger btn-round">Follow</a>
</div>
</div>
</div>
</div>
</div>
</div>

25
src/app/user-profile/user-profile.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserProfileComponent } from './user-profile.component';
describe('UserProfileComponent', () => {
let component: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ UserProfileComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/user-profile/user-profile.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

0
src/assets/.gitkeep Normal file
View File

25
src/assets/css/demo.css Normal file
View File

@ -0,0 +1,25 @@
/*my-app .main-panel .main-content .card{
animation-duration: 750ms;
opacity: 0;
animation-name: fadeIn;
animation-fill-mode: forwards;
}*/
.tim-typo{
padding-left: 25%;
margin-bottom: 40px;
position: relative;
width: 100%;
}
.tim-typo .tim-note{
bottom: 5px;
color: #c0c1c2;
display: block;
font-weight: 400;
font-size: 13px;
line-height: 15px;
left: 0;
margin-left: 20px;
position: absolute;
width: 260px;
}

BIN
src/assets/img/angular2-logo-red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/img/angular2-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/img/apple-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/img/cover.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

BIN
src/assets/img/faces/marc.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
src/assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/img/gears.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/img/mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 756 B

BIN
src/assets/img/new_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/img/sidebar-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
src/assets/img/sidebar-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/img/sidebar-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

BIN
src/assets/img/sidebar-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
src/assets/img/tim_80x80.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

3614
src/assets/scss/colormind-material-dashboard.css Normal file
View File

File diff suppressed because it is too large Load Diff

161
src/assets/scss/core/_alerts.scss Normal file
View File

@ -0,0 +1,161 @@
.alert {
border: 0;
border-radius: 3px;
position: relative;
padding: 20px 15px;
line-height: 20px;
b{
font-weight: $font-weight-bold;
text-transform: uppercase;
font-size: $font-size-small;
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
&-info, &-danger, &-warning, &-success, &-rose {
color: $mdb-text-color-light;
}
&-default {
a, .alert-link {
color: $mdb-text-color-primary;
}
}
span{
display: block;
max-width: 89%;
}
&.alert-danger{
@include shadow-alert-color($brand-danger);
@include alert-icon-color($brand-danger);
}
&.alert-warning{
@include shadow-alert-color($brand-warning);
@include alert-icon-color($brand-warning);
}
&.alert-success{
@include shadow-alert-color($brand-success);
@include alert-icon-color($brand-success);
}
&.alert-info{
@include shadow-alert-color($brand-info);
@include alert-icon-color($brand-info);
}
&.alert-primary{
@include shadow-alert-color($brand-primary);
@include alert-icon-color($brand-primary);
}
&.alert-rose{
@include shadow-alert-color($brand-rose);
@include alert-icon-color($brand-rose);
}
&.alert-with-icon{
padding-left: 66px;
i[data-notify="icon"] {
font-size: 30px;
display: block;
left: 15px;
position: absolute;
top: 50%;
margin-top: -15px;
color: #fff;
}
}
.mat-button.close{
min-width: auto;
line-height: .5;
i{
color: $white-color;
font-size: 11px;
}
}
i[data-notify="icon"]{
display: none;
}
.alert-icon{
display: block;
float: left;
margin-right: $margin-base;
i{
margin-top: -7px;
top: 5px;
position: relative;
}
}
[data-notify="dismiss"]{
margin-right: 5px;
}
}
.places-buttons .btn {
margin-bottom: 30px;
}
//
// .alert {
// border: 0;
// border-radius: 3px;
//
// padding: 20px 15px;
// line-height: 20px;
//
// //@include shadow-z-2();
//
// b{
// font-weight: $font-weight-bold;
// text-transform: uppercase;
// font-size: $font-size-small;
// }
// // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
// @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
//
// &-info, &-danger, &-warning, &-success {
// color: $mdb-text-color-light;
// }
//
// &-default {
// a, .alert-link {
// color: $mdb-text-color-primary;
// }
// }
//
// .alert-icon{
// display: block;
// float: left;
// margin-right: $margin-base;
//
// i{
// margin-top: -7px;
// top: 5px;
// position: relative;
// }
// }
// .mat-button.close,
// .close{
// min-width: auto;
// color: $white-color;
// text-shadow: none;
// opacity: .9;
//
// i{
// font-size: 11px;
// }
//
// &:hover,
// &:focus{
// opacity: 1;
// }
// }
// }
// .alert .close {
// line-height: .5;
// }

257
src/assets/scss/core/_buttons.scss Normal file
View File

@ -0,0 +1,257 @@
.mat-button.btn,.mat-raised-button.btn,.mat-raised-button.btn:not([class*=mat-elevation-z]),
.btn{
position: relative;
padding: 12px 30px;
margin: $bmd-btn-margin-bottom 1px;
min-width: auto;
font-size: .75rem; // 12px
font-weight: 400;
line-height: $bmd-line-height;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
letter-spacing: 0;
cursor: pointer;
background-color: transparent;
border: 0;
border-radius: $border-radius-sm;
outline: 0;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: box-shadow, transform;
@include undo-bs-tab-focus();
//--
// Colors
@include bmd-raised-button-color();
&.btn-white {
&,
&:focus,
&:hover {
background-color: $white-color;
color: $gray-color;
}
&.btn-link {
color: $white-color;
background: transparent;
box-shadow: none;
}
}
&.btn-link:hover,
&.btn-link:focus,
&.btn-link:active {
text-decoration: none !important;
}
@include hover-focus();
//---
// btn-raised
&.btn-raised,
.btn-group-raised & {
// baseline shadow
// @include box-shadow($bmd-shadow-2dp);
// reverse any of the above for links
&.btn-link {
box-shadow: none;
@include bmd-hover-focus-active() {
box-shadow: none;
}
}
@include bmd-disabled() {
box-shadow: none;
}
}
//---
// btn-outline
@include bmd-outline-button-color();
// Size variations
&.btn-lg,
.btn-group-lg & {
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $bmd-btn-font-size, $btn-lg-line-height, $border-radius-sm);
}
&.btn-sm,
.btn-group-sm & {
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $bmd-btn-font-size-sm, $line-height-sm, $border-radius-sm);
}
&.btn-round {
border-radius: $border-radius-extreme;
> .mat-button-focus-overlay, .mat-button-ripple{
border-radius: $border-radius-extreme;
}
}
&.btn-fab,
&.btn-just-icon {
// see above for color variations
font-size: $mdb-btn-fab-font-size;
height: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
width: $mdb-btn-fab-size;
// margin: auto;
padding: 0;
overflow: hidden;
position: relative;
line-height: $mdb-btn-fab-size;
&.btn-round{
border-radius: 50%;
}
.btn-group-sm &,
&.btn-sm,
&.btn-fab-mini{
height: $mdb-btn-fab-size-mini + 1;
min-width: $mdb-btn-fab-size-mini + 1;
width: $mdb-btn-fab-size-mini + 1;
.material-icons,
.fa{
font-size: $mdb-btn-icon-size-mini;
line-height: $mdb-btn-fab-size-mini;
}
}
.btn-group-lg &,
&.btn-lg{
height: $mdb-btn-fab-size-lg + 1;
min-width: $mdb-btn-fab-size-lg + 1;
width: $mdb-btn-fab-size-lg + 1;
line-height: $mdb-btn-fab-size-lg;
.material-icons,
.fa{
font-size: $mdb-btn-icon-size;
line-height: $mdb-btn-fab-size-lg;
}
}
.material-icons,
.fa {
margin-top: 0;
position: absolute;
width: 100%;
transform: none;
left: 0;
top: 0;
height: 100%;
line-height: $mdb-btn-fab-size;
font-size: $mdb-btn-just-icon-font-size;
}
}
}
.btn-just-icon{
&.btn-lg{
font-size: $mdb-btn-fab-font-size;
height: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
width: $mdb-btn-fab-size;
}
}
.input-group-btn > .btn{
border: 0;
}
// Align icons inside buttons with text
.btn .material-icons,
.btn:not(.btn-just-icon):not(.btn-fab) .fa{
position: relative;
display: inline-block;
top: 0;
margin-top: -1em;
margin-bottom: -1em;
font-size: 1.1rem;
vertical-align: middle;
}
// Disabled buttons and button groups
.mat-raised-button.btn,
.input-group-btn .mat-raised-button.btn,
.btn-group,
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
@include bmd-disabled() {
.bg-inverse & {
color: $bmd-inverse-btn-disabled;
}
// flat buttons shouldn't lose transparency on disabled hover/focus
}
}
// btn-group variations
.btn-group,
.btn-group-vertical {
position: relative;
margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
//&.open {
// .dropdown-toggle {
// }
//
// > .dropdown-toggle.btn {
// @include bmd-raised-button-color-bg();
// }
//}
.dropdown-menu {
border-radius: 0 0 $border-radius $border-radius;
}
&.btn-group-raised {
@include box-shadow($bmd-shadow-2dp);
}
.mat-raised-button.btn + .mat-raised-button.btn,
.mat-raised-button.btn,
.mat-raised-button.btn:active,
.btn-group {
margin: 0;
}
// remove margin from nested btn-group(s) to properly align them with the outer buttons
> .btn-group {
margin: 0;
}
}
.btn-group > .mat-raised-button.btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn,
.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-ripple, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-ripple,
.btn-group > .mat-raised-button.btn:not(:first-child) .mat-button-focus-overlay, .btn-group > .btn-group:not(:first-child) > .mat-raised-button.btn .mat-button-focus-overlay{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn,
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-ripple, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-ripple,
.btn-group > .mat-raised-button.btn:not(:last-child):not(.dropdown-toggle) .mat-button-focus-overlay, .btn-group > .btn-group:not(:last-child) > .mat-raised-button.btn .mat-button-focus-overlay {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-no-ripple .mat-button-ripple{
display: none;
}
.mat-button, .mat-icon-button {
background: transparent;
}
.mat-button:hover .mat-button-focus-overlay, .mat-stroked-button:hover .mat-button-focus-overlay{
opacity: 0;
background-color: transparent!important;
}
button:focus {
outline: none;
}
.mat-button .mat-button-ripple{
border-radius: inherit;
}

658
src/assets/scss/core/_cards.scss Normal file
View File

@ -0,0 +1,658 @@
//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
// Card resting elevation: 2dp
.card {
border: 0;
margin-bottom: 30px;
margin-top: 30px;
border-radius: $border-radius-large;
color: $gray-dark;
background: $white-color;
width: 100%;
.card-category:not([class*="text-"]) {
color: $gray-color;
}
.card-category{
margin-top: 10px;
.material-icons{
position: relative;
top: 8px;
line-height: 0;
}
}
.form-check {
margin-top: 15px;
}
.card-title{
margin-top: 0.625rem;
&:last-child{
margin-bottom: 0;
}
}
// Cards have a default elevation of 2dp.
@include box-shadow($bmd-shadow-2dp);
@extend %std-font;
&.no-shadow {
.card-header-image,
.card-header-image img {
box-shadow: none !important;
}
}
.card-body,
.card-footer {
padding: $padding-card-body-y $padding-card-body-x;
}
.card-body {
& + .card-footer{
padding-top: 0rem;
border: 0;
border-radius: $border-radius-large;
}
}
.card-footer {
display: flex;
align-items: center;
background-color: transparent;
border: 0;
.author,
.stats {
display: inline-flex;
}
.stats {
color: $gray-color;
.material-icons {
position: relative;
top: -10px;
margin-right: 3px;
margin-left: 3px;
font-size: 18px;
}
}
}
&.bmd-card-raised {
// Card raised elevation: 8dp
@include box-shadow($bmd-shadow-8dp);
}
@include media-breakpoint-up(lg) {
// On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
&.bmd-card-flat {
box-shadow: none;
}
}
.card-header {
border-bottom: none;
background: transparent;
.title{
color: $white-color;
}
&:not([class*="card-header-"]){
// @include shadow-big();
}
.nav-tabs {
padding: 0;
}
&.card-header-image {
position: relative;
padding: 0;
z-index: 1;
margin-left: 15px;
margin-right: 15px;
margin-top: -30px;
border-radius: $border-radius-large;
img {
width: 100%;
border-radius: $border-radius-large;
pointer-events: none;
@include shadow-big-image();
}
.card-title {
position: absolute;
bottom: 15px;
left: 15px;
color: $white-color;
font-size: $font-size-h4;
text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}
.colored-shadow{
transform: scale(0.94);
top: 12px;
filter: blur(12px);
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
transition: opacity .45s;
opacity: 0;
}
&.no-shadow{
box-shadow: none;
&.shadow-normal{
@include shadow-big();
}
.colored-shadow{
display: none !important;
}
}
}
}
.card-header-primary .card-icon,
.card-header-primary .card-text,
.card-header-primary:not(.card-header-icon):not(.card-header-text),
&.bg-primary,
&.card-rotate.bg-primary .front,
&.card-rotate.bg-primary .back{
background: linear-gradient(60deg, $purple-400, $purple-600);
}
.card-header-info .card-icon,
.card-header-info .card-text,
.card-header-info:not(.card-header-icon):not(.card-header-text),
&.bg-info,
&.card-rotate.bg-info .front,
&.card-rotate.bg-info .back{
background: linear-gradient(60deg, $cyan-400, $cyan-600);
}
.card-header-success .card-icon,
.card-header-success .card-text,
.card-header-success:not(.card-header-icon):not(.card-header-text),
&.bg-success,
&.card-rotate.bg-success .front,
&.card-rotate.bg-success .back{
background: linear-gradient(60deg, $green-400, $green-600);
}
.card-header-warning .card-icon,
.card-header-warning .card-text,
.card-header-warning:not(.card-header-icon):not(.card-header-text),
&.bg-warning,
&.card-rotate.bg-warning .front,
&.card-rotate.bg-warning .back{
background: linear-gradient(60deg, $orange-400, $orange-600);
}
.card-header-danger .card-icon,
.card-header-danger .card-text,
.card-header-danger:not(.card-header-icon):not(.card-header-text),
&.bg-danger,
&.card-rotate.bg-danger .front,
&.card-rotate.bg-danger .back{
background: linear-gradient(60deg, $red-400, $red-600);
}
.card-header-rose .card-icon,
.card-header-rose .card-text,
.card-header-rose:not(.card-header-icon):not(.card-header-text),
&.bg-rose,
&.card-rotate.bg-rose .front,
&.card-rotate.bg-rose .back{
background: linear-gradient(60deg, $pink-400, $pink-600);
}
.card-header-primary .card-icon,
.card-header-primary:not(.card-header-icon):not(.card-header-text),
.card-header-primary .card-text{
@include shadow-big-color($brand-primary);
//@include shadow-8dp-color($brand-primary);
//@include shadow-16dp-color($brand-primary);
}
.card-header-danger .card-icon,
.card-header-danger:not(.card-header-icon):not(.card-header-text),
.card-header-danger .card-text{
@include shadow-big-color($brand-danger);
}
.card-header-rose .card-icon,
.card-header-rose:not(.card-header-icon):not(.card-header-text),
.card-header-rose .card-text{
@include shadow-big-color($brand-rose);
}
.card-header-warning .card-icon,
.card-header-warning:not(.card-header-icon):not(.card-header-text),
.card-header-warning .card-text{
@include shadow-big-color($brand-warning);
}
.card-header-info .card-icon,
.card-header-info:not(.card-header-icon):not(.card-header-text),
.card-header-info .card-text{
@include shadow-big-color($brand-info);
}
.card-header-success .card-icon,
.card-header-success:not(.card-header-icon):not(.card-header-text),
.card-header-success .card-text{
@include shadow-big-color($brand-success);
}
[class*="card-header-"],
&[class*="bg-"]{
color: $white-color;
.card-title a,
.card-title,
.icon i{
color: $white-color;
}
.icon i{
border-color: rgba(255, 255, 255, 0.25);
}
.author a,
.stats,
.card-category,
.card-description{
color: $white-transparent;
}
.author a{
&:hover,
&:focus,
&:active{
color: $white-color;
}
}
}
.author{
.avatar{
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 50%;
margin-right: 5px;
}
a{
color: $black-color;
text-decoration: none;
.ripple-container{
display: none;
}
}
}
.card-category-social{
.fa{
font-size: 24px;
position: relative;
margin-top: -4px;
top: 2px;
margin-right: 5px;
}
.material-icons{
position: relative;
top: 5px;
}
}
&[class*="bg-"],
&[class*="bg-"] .card-body{
border-radius: $border-radius-large;
h1,
h2,
h3{
small{
color: $white-transparent;
}
}
}
.card-stats{
background: transparent;
display: flex;
.author,
.stats{
display: inline-flex;
}
}
}
.card {
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
.table tr:first-child td{
border-top: none;
}
.card-title{
margin-top: 0;
margin-bottom: 15px;
}
.card-body{
padding: $padding-card-body-y 20px;
position: relative;
}
.card-header {
z-index: 3 !important;
.card-title{
margin-bottom: 3px;
}
.card-category{
margin: 0;
}
&.card-header-text {
display: inline-block;
&:after {
content: "";
display: table;
}
}
&.card-header-icon,
&.card-header-text {
i {
width: 33px;
height: 33px;
text-align: center;
line-height: 33px;
}
.card-title{
margin-top: 15px;
color: $black-color;
}
h4{
font-weight: 300;
}
}
&.card-header-tabs {
.nav-tabs {
background: transparent;
padding: 0;
}
.nav-tabs-title {
float: left;
padding: 10px 10px 10px 0;
line-height: 24px;
}
}
}
&.card-plain {
.card-header {
&.card-header-icon + .card-body .card-title,
&.card-header-icon + .card-body .card-category {
margin-top: -20px;
}
}
}
.card-actions {
position: absolute;
z-index: 1;
top: -50px;
width: calc(100% - 30px);
left: 17px;
right: 17px;
text-align: center;
.card-header{
padding: 0;
min-height: 160px;
}
.btn {
padding-left: 12px;
padding-right: 12px;
}
.fix-broken-card {
position: absolute;
top: -65px;
}
}
&.card-chart {
.card-footer i:nth-child(1n+2){
width: 18px;
text-align: center;
}
.card-category{
margin: 0;
}
}
.card-body + .card-footer,
.card-footer{
padding: 0;
padding-top: 10px;
margin: 0 15px 10px;
border-radius: 0;
justify-content: space-between;
align-items: center;
h6 {
width: 100%;
}
.stats{
color: #999999;
font-size: 12px;
line-height: 22px;
.card-category{
padding-top: 7px;
padding-bottom: 7px;
margin: 0;
}
.material-icons{
position: relative;
top: 4px;
font-size: 16px;
}
}
}
[class*="card-header-"] {
margin: 0px 15px 0;
padding: 0;
.card-title + .card-category{
color: rgba(255, 255, 255, 0.62);
a {
color: $white-color;
}
}
&:not(.card-header-icon):not(.card-header-text):not(.card-header-image){
border-radius: $border-radius-base;
margin-top: -20px;
padding: 15px;
}
.card-icon,
.card-text{
border-radius: $border-radius-base;
background-color: $gray-color;
padding: 15px;
margin-top: -20px;
margin-right: 15px;
float: left;
}
.card-text{
float: none;
display: inline-block;
margin-right: 0;
.card-title{
color: $white-color;
margin-top: 0;
}
}
position: relative;
.ct-chart{
.card-title{
color: $white-color;
}
.card-category{
margin-bottom: 0;
color: rgba($white-color, .62);
}
.ct-label{
color: rgba($white-color, .7);
}
.ct-grid{
stroke: rgba(255, 255, 255, 0.2);
}
.ct-series-a .ct-point,
.ct-series-a .ct-line,
.ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut{
stroke: rgba(255,255,255,.8);
}
.ct-series-a .ct-slice-pie,
.ct-series-a .ct-area{
fill: rgba(255,255,255,.4);
}
.ct-series-a .ct-bar{
stroke-width: 10px;
}
.ct-point{
stroke-width: 10px;
stroke-linecap: round;
}
.ct-line{
fill: none;
stroke-width: 4px;
}
}
}
[data-header-animation="true"] {
@include transform-translate-y(0);
-webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}
&:hover {
[data-header-animation="true"]{
@include transform-translate-y(-50px);
}
}
.map {
height: 280px;
border-radius: $border-radius-large;
margin-top: 15px;
&.map-big{
height: 420px;
}
}
.card-body.table-full-width{
padding: 0;
}
.card-plain .card-header-icon {
margin-right: 15px !important;
}
}
.table-sales{
margin-top: 40px;
}
.iframe-container {
width: 100%;
iframe {
width: 100%;
height: 500px;
border: 0;
@include shadow-big();
}
}
.card-wizard {
.nav.nav-pills {
.nav-item {
margin: 0;
.nav-link {
padding: 6px 15px !important;
}
}
}
.nav-pills:not(.flex-column) .nav-item + .nav-item:not(:first-child) {
margin-left: 0;
}
.nav-item .nav-link.active,
.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
background-color: inherit !important;
box-shadow: none !important;
}
.input-group-text {
padding: 6px 15px 0px !important;
}
.card-footer {
border-top: none !important;
}
}
.card-chart,
.card-product {
.card-body + .card-footer {
border-top: 1px solid #eee;
}
}
.card-product{
.price{
color: inherit;
}
}
.card-collapse {
margin-bottom: 15px;
.card .card-header a[aria-expanded="true"]{
color: #e91e63;
}
}

210
src/assets/scss/core/_checkboxes.scss Normal file
View File

@ -0,0 +1,210 @@
.form-check {
margin-bottom: .5rem;
padding-left: 0;
.form-check-label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
// color: $mdb-checkbox-label-color;
@include mdb-label-color-toggle-focus();
}
// Hide native checkbox
.form-check-input {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.form-check-sign {
vertical-align: middle;
position: relative;
top: -2px;
float: left;
padding-right: 10px;
display: inline-block;
&:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: $mdb-checkbox-size;
width: $mdb-checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
top: 0;
@include transform-scale3d(unquote('2.3,2.3,1'));
}
.check {
position: relative;
display: inline-block;
width: $mdb-checkbox-size;
height: $mdb-checkbox-size;
border: 1px solid $mdb-checkbox-border-color;
overflow: hidden;
z-index: 1;
border-radius: $border-radius-base;
&:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -3px;
margin-left: 7px;
width: 0;
color: $white-color;
height: 0;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
@include animation(checkbox-off $mdb-checkbox-animation-check forwards);
}
}
}
.form-check-input{
&:focus + .form-check-sign .check:after {
opacity: 0.2;
}
&:checked {
& + .form-check-sign .check {
background: $mdb-checkbox-checked-color;
}
& + .form-check-sign .check:before {
color: #FFFFFF;
box-shadow: 0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
@include animation(checkbox-on $mdb-checkbox-animation-check forwards);
}
& + .form-check-sign:before {
@include animation(rippleOn $mdb-checkbox-animation-ripple);
}
& + .form-check-sign .check:after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
@include animation(rippleOn $mdb-checkbox-animation-ripple forwards);
}
}
&:not(:checked) {
& + .form-check-sign:before {
@include animation(rippleOff $mdb-checkbox-animation-ripple);
}
& + .form-check-sign .check:after {
@include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck
}
}
}
.rtl {
.form-check {
.form-check-sign {
.check::before{
margin-right: 10px;
}
}
}
}
// Style for disabled inputs
fieldset[disabled] &,
fieldset[disabled] & .form-check-input,
.form-check-input[disabled] ~ .form-check-sign .check,
.form-check-input[disabled] + .circle {
opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-sign .check{
border-color: #000000;
opacity: .26;
}
.form-check-input[disabled] + .form-check-sign .check:after {
background-color: $mdb-text-color-primary;
transform: rotate(-45deg);
}
.form-check-input[disabled][checked] + .form-check-sign .check{
background-color: $black;
}
}
@keyframes checkbox-on {
0% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px;
}
50% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
}
100% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

205
src/assets/scss/core/_dropdown.scss Normal file
View File

@ -0,0 +1,205 @@
// Menus https://www.google.com/design/spec/components/menus.html#menus-specs
// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
.dropdown-menu {
display: none;
padding: $bmd-dropdown-margin-y 0;
border: 0;
opacity: 0;
transform: scale(0);
transform-origin: 0 0;
will-change: transform, opacity;
transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default,
opacity $bmd-menu-fade-duration $bmd-animation-curve-default;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
&.showing {
animation-name: bmd-dropdown-animation;
animation-duration: $bmd-menu-expand-duration;
animation-fill-mode: forwards;
animation-timing-function: $bmd-animation-curve-default;
}
.open > &,
&.show {
display: block;
opacity: 1;
transform: scale(1);
}
&.hiding {
display: block;
opacity: 0;
transform: scale(0);
}
&[x-placement="bottom-start"] {
transform-origin: 0 0;
}
&[x-placement="bottom-end"] {
transform-origin: 100% 0;
}
&[x-placement="top-start"] {
transform-origin: 0 100%;
}
&[x-placement="top-end"] {
transform-origin: 100% 100%;
}
.disabled > a{
color: $bmd-dropdown-header-color;
&:focus,
&:hover{
text-decoration: none;
background-color: transparent;
background-image: none;
color: $bmd-dropdown-header-color;
}
}
&.dropdown-with-icons .dropdown-item{
padding: $dropdown-item-padding-y + 0.125 $dropdown-item-padding-x $dropdown-item-padding-y + 0.125 $dropdown-item-padding-y + 0.125;
& .material-icons{
vertical-align: middle;
font-size: 24px;
position: relative;
margin-top: -4px;
top: 1px;
margin-right: 12px;
opacity: .5;
}
}
// https://www.google.com/design/spec/components/menus.html#menus-specs
.dropdown-item,
li > a{ // used to properly size the ripple container
position: relative;
width: auto;
display: flex;
flex-flow: nowrap;
align-items: center;
color: $bmd-dropdown-link-color;
font-weight: normal;
text-decoration: none;
font-size: .8125rem;
border-radius: $border-radius / 2;
margin: 0 $bmd-dropdown-margin-y;
@include transitions($fast-transition-time, $transition-linear);
min-width: $bmd-menu-item-min-width;
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
overflow: hidden;
line-height: $bmd-line-height;
text-overflow: ellipsis;
word-wrap: break-word;
@include media-breakpoint-up(md) {
padding-right: $bmd-menu-item-padding-right-md;
padding-left: $bmd-menu-item-padding-left-md;
}
}
.dropdown-item:hover,
.dropdown-item:focus,
a:hover,
a:focus,
a:active {
@include shadow-small-color($brand-primary);
background-color: $brand-primary;
color: #FFFFFF;
}
}
// this could be in a .btn-group or .dropdown
.dropdown-toggle {
&.bmd-btn-icon,
&.bmd-btn-fab {
// remove the dropdown icon
&::after {
display: none;
}
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button
}
}
}
&:after{
will-change: transform;
transition: transform $bmd-animation-dropdown-caret linear;
}
.show &:after{
@include rotate-180();
}
&.bmd-btn-fab-sm {
~ .dropdown-menu {
&.dropdown-menu-top-left,
&.dropdown-menu-top-right {
bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button
}
}
}
&.bmd-btn-icon {
~ .dropdown-menu {
// collapse some spacing
margin: 0;
}
}
}
.dropdown-header{
font-size: 0.75rem;
padding-top: $dropdown-header-padding-y;
padding-bottom: $dropdown-header-padding-y;
text-transform: none;
color: $bmd-dropdown-header-color;
line-height: $bmd-line-height;
font-weight: inherit;
}
@keyframes bmd-dropdown-animation {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
.dropdown-menu.bootstrap-datetimepicker-widget{
opacity: 0;
transform: scale(0);
transition-duration: $bmd-menu-expand-duration;
transition-timing-function: $bmd-animation-curve-default;
transform-origin: 0 0;
will-change: transform, opacity;
top: 0;
}
.dropdown-menu.bootstrap-datetimepicker-widget.top{
transform-origin: 0 100%;
}
.dropdown-menu.bootstrap-datetimepicker-widget.open{
opacity: 1;
transform: scale(1);
top: 0;
}

55
src/assets/scss/core/_example-pages.scss Normal file
View File

@ -0,0 +1,55 @@
.card-signup {
.card-header {
.social-line {
.btn {
color: $white-color;
}
}
}
.text-divider {
margin-top: 30px;
margin-bottom: 0px;
text-align: center;
}
}
.signup-page {
.page-header {
min-height: 100vh;
height: auto;
display: inherit;
.container{
padding-top: 20vh;
}
}
.card-signup {
border-radius: $border-radius-base * 2;
@include shadow-16dp();
margin-bottom: 100px;
padding: 40px 0px;
}
.info-horizontal {
padding: 0px 0px 20px;
}
.social {
.btn {
margin: 5px;
}
h4 {
margin-top: 20px;
}
}
.footer {
.container {
padding: 0;
}
.copyright,
a{
color: $white-color;
}
}
}

302
src/assets/scss/core/_fixed-plugin.scss Normal file
View File

@ -0,0 +1,302 @@
.fixed-plugin{
position: fixed;
top: 180px;
right: 0;
width: 64px;
background: rgba(0,0,0,.3);
z-index: 1031;
border-radius: 8px 0 0 8px;
text-align: center;
top: 120px;
li > a,
.badge{
transition: all .34s;
-webkit-transition: all .34s;
-moz-transition: all .34s;
}
.fa-cog{
color: #FFFFFF;
padding: 10px;
border-radius: 0 0 6px 6px;
width: auto;
}
.dropdown-menu{
right: 80px;
left: auto;
width: 290px;
border-radius: 0.1875rem;
padding: 0 10px;
}
.dropdown-menu:after,
.dropdown-menu:before{
right: 10px;
margin-left: auto;
left: auto;
}
.fa-circle-thin{
color: #FFFFFF;
}
.active .fa-circle-thin{
color: #00bbff;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus{
color: #777777;
text-align: center;
}
img{
border-radius: 0;
width: 100%;
height: 100px;
margin: 0 auto;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus{
box-shadow: none;
}
.badge{
border: 3px solid #FFFFFF;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 23px;
margin-right: 5px;
position: relative;
width: 23px;
}
.badge.active,
.badge:hover{
border-color: #00bbff;
}
.badge-blue{
background-color: $brand-info;
}
.badge-green{
background-color: $brand-success;
}
.badge-orange{
background-color: $brand-primary;
}
.badge-yellow{
background-color: $brand-warning;
}
.badge-red{
background-color: $brand-danger;
}
h5{
font-size: 14px;
margin: 10px;
}
.dropdown-menu li{
display: block;
padding: 18px 2px;
width: 25%;
float: left;
}
li.adjustments-line,
li.header-title,
li.button-container{
width: 100%;
height: 50px;
min-height: inherit;
}
li.button-container{
height: auto;
div{
margin-bottom: 5px;
}
}
#sharrreTitle{
text-align: center;
padding: 10px 0;
height: 50px;
}
li.header-title{
height: 30px;
line-height: 25px;
font-size: 12px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.adjustments-line{
p{
float: left;
display: inline-block;
margin-bottom: 0;
font-size: 1em;
color: #3C4858;
}
a{
color: transparent;
.badge-colors{
position: relative;
top: -2px;
}
a:hover,
a:focus{
color: transparent;
}
}
.togglebutton{
float: right;
.toggle{
margin-right: 0;
}
}
.dropdown-menu > li.adjustments-line > a{
padding-right: 0;
padding-left: 0;
border-bottom: 1px solid #ddd;
border-radius: 0;
margin: 0;
}
}
.dropdown-menu{
> li{
& > a.img-holder{
font-size: 16px;
text-align: center;
border-radius: 10px;
background-color: #FFF;
border: 3px solid #FFF;
padding-left: 0;
padding-right: 0;
opacity: 1;
cursor: pointer;
display: block;
max-height: 100px;
overflow: hidden;
padding: 0;
img{
margin-top: auto;
}
}
a.switch-trigger:hover,
& > a.switch-trigger:focus{
background-color: transparent;
}
&:hover,
&:focus{
> a.img-holder{
border-color: rgba(0, 187, 255, 0.53);;
}
}
}
> .active > a.img-holder,
> .active > a.img-holder{
border-color: #00bbff;
background-color: #FFFFFF;
}
}
.btn-social{
width: 50%;
display: block;
width: 48%;
float: left;
font-weight: 600;
}
.btn-social{
i{
margin-right: 5px;
}
&:first-child{
margin-right: 2%;
}
}
.dropdown{
.dropdown-menu{
-webkit-transform: translateY(-15%);
-moz-transform: translateY(-15%);
-o-transform: translateY(-15%);
-ms-transform: translateY(-15%);
transform: translateY(-15%);
top: 27px;
opacity: 0;
transform-origin: 0 0;
&:before{
border-bottom: .4em solid rgba(0, 0, 0, 0);
border-left: .4em solid rgba(0,0,0,0.2);
border-top: .4em solid rgba(0,0,0,0);
right: -16px;
top: 46px;
}
&:after{
border-bottom: .4em solid rgba(0, 0, 0, 0);
border-left: .4em solid #FFFFFF;
border-top: .4em solid rgba(0,0,0,0);
right: -16px;
}
&:before,
&:after{
content: "";
display: inline-block;
position: absolute;
top: 46px;
width: 16px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
}
&.show .dropdown-menu{
opacity: 1;
-webkit-transform: translateY(-13%);
-moz-transform: translateY(-13%);
-o-transform: translateY(-13%);
-ms-transform: translateY(-13%);
transform: translateY(-13%);
transform-origin: 0 0;
}
}
.bootstrap-switch{
margin:0;
}
}

102
src/assets/scss/core/_footers.scss Normal file
View File

@ -0,0 +1,102 @@
.footer{
padding: $padding-general-x 0;
text-align: center;
display: -webkit-flex; /* Safari */ /* Safari 6.1+ */
display: flex;
ul{
margin-bottom: 0;
padding: 0;
list-style: none;
li{
display: inline-block;
a{
color: inherit;
padding: $padding-general-x;
font-weight: $font-weight-bold;
font-size: $mdb-btn-font-size-base;
text-transform: uppercase;
border-radius: $border-radius-base;
text-decoration: none;
position: relative;
display: block;
&:hover{
text-decoration: none;
}
}
.btn{
margin: 0;
}
}
&.links-horizontal{
&:first-child a{
padding-left: 0;
}
&:last-child a{
padding-right: 0;
}
}
&.links-vertical{
li{
display: block;
margin-left: -5px;
margin-right: -5px;
a{
padding: 5px;
}
}
}
}
.social-buttons{
a,
.btn{
margin-top: 5px;
margin-bottom: 5px;
}
}
.footer-brand{
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
margin-left: -15px;
&:hover,
&:focus{
color: $black-color;
}
}
.copyright{
padding: 15px 0;
.material-icons{
font-size: 18px;
position: relative;
top: 3px;
}
}
.pull-center{
display: inline-block;
float: none;
}
}
.off-canvas-sidebar {
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
}

437
src/assets/scss/core/_forms.scss Normal file
View File

@ -0,0 +1,437 @@
form {
// ensure enough room at the bottom of any form to display a one-line bmd-help
margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
.card &{
margin: 0;
}
// reverse the above for navbars (no help expected in a navbar form)
.navbar & {
margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
.bmd-form-group {
display: inline-block;
padding-top: 0;
}
.btn {
margin-bottom: 0;
}
}
}
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control{
background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
background-size: $bmd-form-control-bg-size;
border: 0;
height: 36px;
transition: background 0s ease-out;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: $mdb-input-font-size-base;
// The border bottom should be static in all states, the decorator will be animated over this.
&:focus,
.bmd-form-group.mat-focused & {
background-size: $bmd-form-control-bg-size-active;
//border-bottom: $input-btn-border-width solid $input-border-color;
transition-duration: 0.3s;
}
@include material-placeholder() {
color: $mdb-input-placeholder-color;
font-weight: 400;
font-size: $mdb-input-font-size-base;
}
.has-white &{
@include material-placeholder(){
color: $white-color;
}
}
}
// Help blocks (not in v4)
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
//
.bmd-help {
position: absolute;
display: none;
font-size: .8rem;
font-weight: normal;
@extend .text-muted;
.bmd-form-group.mat-focused & {
display: block;
}
//--------------------------------------
// Multiple help blocks
// - absolute positioning is used above to prevent bouncing
// - when there is more than one, this will bounce but will at least show
&:nth-of-type(2) {
padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
}
+ .bmd-help {
position: relative;
margin-bottom: 0;
}
}
// -----
// State coloring: default, success, info, warning, danger
//
@include bmd-selection-color();
@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color, $input-border-color);
.has-success {
@include bmd-form-color($brand-success, $brand-success, $brand-success, $input-border-color);
}
.has-info {
@include bmd-form-color($brand-info, $brand-info, $brand-info, $input-border-color);
}
.has-white{
@include bmd-form-color($white-color, $white-color, $white-color, $input-border-color-white);
.form-control{
&:focus{
color: $white-color;
}
}
}
.has-warning {
@include bmd-form-color($brand-warning, $brand-warning, $brand-warning, $input-border-color);
}
.has-danger {
@include bmd-form-color($brand-danger, $brand-danger, $brand-danger, $input-border-color);
}
.has-rose {
@include bmd-form-color($brand-rose, $brand-rose, $brand-rose, $input-border-color);
}
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations
// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
.bmd-form-group {
position: relative;
// -----
// Labels
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
&:not(.has-success):not(.has-danger){
[class^='bmd-label'],
[class*=' bmd-label']{
&.bmd-label-floating{
color: $mdb-input-placeholder-color;
}
}
}
[class^='bmd-label'],
[class*=' bmd-label'] {
position: absolute;
pointer-events: none;
transition: 0.3s ease all;
// hint to browser for optimization
&.bmd-label-floating {
will-change: left, top, contents;
margin: 0;
line-height: 1.4;
font-weight: 400;
}
}
// hide label-placeholders when the field is filled
&.is-filled .bmd-label-placeholder {
display: none;
}
// Optional class to make the text field inline collapsible/expandable (collapsed by default)
// This uses the BS collapse js to make the width expand.
// `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
// FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
&.bmd-collapse-inline {
display: flex;
align-items: center;
padding: 0; // get rid of any padding as this is a width transition
min-height: 2.1em;
// Expandable Holder.
.collapse {
flex: 1;
display: none;
&.show {
// This is an unfortunate hack. Animating between widths in percent (%)
// in many browsers (Chrome, Firefox) only animates the inner visual style
// of the input - the outer bounding box still 'jumps'.
// Thus assume a sensible maximum, and animate to/from that value.
max-width: 1200px;
}
}
.collapsing,
.width:not(.collapse),
// collapsing is removed and momentarily only width is present
.collapse.show {
display: block;
}
.collapsing {
@include material-animation-default();
}
}
// default floating size/location with an bmd-form-group
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
// sm floating size/location
&.bmd-form-group-sm {
@include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
}
// lg floating size/location
&.bmd-form-group-lg {
@include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
}
}
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
select {
&,
&.form-control{
// Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
-moz-appearance: none;
-webkit-appearance: none;
}
}
// Input files - hide actual input - requires specific markup in the sample.
//.bmd-form-group input[type=file] {
// opacity: 0;
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// width: 100%;
// height: 100%;
// z-index: 100;
//}
//
//
//.form-horizontal {
//
// // Consistent vertical alignment of radios and checkboxes
// .radio,
// .checkbox,
// .radio-inline,
// .checkbox-inline {
// padding-top: 0;
// }
//
// .radio {
// margin-bottom: 10px;
// }
//
// label {
// text-align: right;
// }
//
// label {
// margin: 0;
// }
//}
.form-inline {
@include media-breakpoint-up(sm) {
.input-group {
display: inline-flex;
align-items: center;
}
}
}
.form-control-feedback{
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
pointer-events: none;
opacity: 0;
.has-success &{
color: $green;
opacity: 1;
}
.has-danger &{
color: $red;
opacity: 1;
}
}
.form-group{
padding-bottom: 10px;
position: relative;
margin: 8px 0 0;
}
textarea{
height: auto !important;
resize: none;
line-height: $bmd-line-height !important;
}
.form-group input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.form-newsletter{
.input-group,
.form-group{
float: left;
width: 78%;
margin-right: 2%;
margin-top: 9px;
padding-top: 5px;
}
.btn{
float: left;
width: 20%;
margin: 9px 0 0;
}
}
.form-file-upload{
.input-group-btn:last-child>.btn-round{
border-radius: 30px;
}
.input-group-btn .btn{
margin: 0;
}
.input-group{
width: 100%;
}
}
.input-group .input-group-btn{
padding: 0 12px;
}
.form-control[disabled],
fieldset[disabled] .form-control,
.form-group .form-control[disabled],
fieldset[disabled] .form-group .form-control{
background-color: transparent;
cursor: not-allowed;
border-bottom: 1px dotted $input-border-color;
background-repeat: no-repeat;
}
.mat-form-field{
display: block !important;
}
.has-success{
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-empty.mat-form-field-label{
color: #4caf50;
}
&.mat-focused{
.mat-input-underline{
.mat-input-ripple{
background-color: #4caf50;
}
}
}
}
.has-danger{
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-empty.mat-form-field-label{
color: #f44336;
}
&.mat-focused{
.mat-input-underline{
.mat-input-ripple{
background-color: #f44336;
}
}
}
}
.ng-invalid{
&.mat-focused .mat-form-field-label{
color: #f44336;
}
}
form .ng-valid{
&.mat-focused .mat-form-field-label,
.mat-focused .mat-form-field-label,
.mat-form-field-label{
// color: #4caf50;
}
.mat-input-underline{
// background-color: #4caf50;
height: 2px;
.mat-input-ripple{
// background-color: #4caf50;
}
}
}
.mat-input-placeholder {
color: rgba(0, 0, 0, 0.38);
}
.mat-input-underline {
background-color: rgba(0, 0, 0, 0.12);
}
.mat-focused .mat-input-placeholder {
color: $brand-primary;
}
.mat-input-ripple {
background-color: $brand-primary;
}

10
src/assets/scss/core/_images.scss Normal file
View File

@ -0,0 +1,10 @@
.img-thumbnail{
border-radius: 16px;
}
.img-raised{
@include shadow-big-image();
}
.rounded{
border-radius: $border-radius-large !important;
}

36
src/assets/scss/core/_input-group.scss Normal file
View File

@ -0,0 +1,36 @@
// -----------------------------------------
// input-group and input-group-addon styles
// note: form-groups are not required
//
@mixin input-group-button-variation($vertical-padding) {
.input-group-btn {
.btn {
//margin: 0 0 $vertical-padding 0;
}
}
}
// default margin - no form-group required
@include input-group-button-variation(input-padding-y);
.bmd-form-group-sm {
@include input-group-button-variation($input-padding-y-sm);
}
.bmd-form-group-lg {
@include input-group-button-variation($input-padding-y-lg);
}
.input-group {
// may be in or outside of form-group
.input-group-text {
display: flex;
justify-content: center;
align-items: center;
padding: 0 15px 0 15px;
background-color: transparent;
border-color: transparent;
}
}

74
src/assets/scss/core/_misc.scss Normal file
View File

@ -0,0 +1,74 @@
body{
background-color: #eee;
color: $black-color;
font-weight: 300;
}
legend {
border-bottom: 0;
}
.serif-font{
font-family: $font-family-serif;
}
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
}
}
a{
color: $link-color;
&:hover,
&:focus{
color: darken($link-color, 5%);
text-decoration: none;
}
&.text-info{
&:hover, &:focus{
color: darken($brand-info, 5%);
}
}
& .material-icons {
vertical-align: middle;
}
}
.form-check,
label{
font-size: 14px;
line-height: 1.42857;
color: $checkboxes-text-color;
font-weight: 400;
}
/* Animations */
.animation-transition-general{
@include transition-all($general-transition-time, $transition-linear);
}
.animation-transition-slow{
@include transition-all($slow-transition-time, $transition-linear);
}
.animation-transition-fast{
@include transition-all($fast-transition-time, $transition-ease);
}
.caret,
.sidebar a{
@include transition-all($fast-transition-time, $transition-ease-in);
}
#map {
position: relative;
z-index: 2;
width: 100%;
height: calc(100vh - 70px);
margin-top: 70px;
}

16
src/assets/scss/core/_mixins.scss Normal file
View File

@ -0,0 +1,16 @@
@import "mixins/utilities";
@import "mixins/breakpoints";
@import "mixins/animations";
@import "mixins/type";
@import "mixins/layout";
@import "mixins/drawer";
@import "mixins/forms";
@import "mixins/buttons";
@import "mixins/hover";
@import "mixins/navs";
@import "mixins/colored-shadows";
@import "mixins/navbar-colors";
@import "mixins/alert";
@import "mixins/sidebar-color";
@import "mixins/variables";
@import "mixins/vendor-prefixes";

252
src/assets/scss/core/_navbar.scss Normal file
View File

@ -0,0 +1,252 @@
.navbar {
border: 0;
border-radius: $border-radius-base;
padding: 0.625rem 0;
margin-bottom: 20px;
@include navbar-colors($white-color, $navbar-color);
&.fixed-top{
border-radius: 0;
}
.navbar-nav{
.nav-item .nav-link{
position: relative;
color: inherit;
padding: $padding-general-x;
font-weight: $font-weight-default;
font-size: $mdb-btn-font-size-base;
text-transform: uppercase;
border-radius: $border-radius-base;
line-height: 20px;
&:not(.btn-just-icon) .fa{
position: relative;
top: 2px;
margin-top: -4px;
margin-right: 4px;
}
& .material-icons,
& .fa{
font-size: $font-size-lg;
max-width: 24px;
margin-top: -1.1em;
}
&:not(.btn) .material-icons{
margin-top: -7px;
top: 3px;
position: relative;
margin-right: 3px;
}
&.profile-photo{
padding: 0;
margin: 0 3px;
&:after{
display: none;
}
& .profile-photo-small{
height: 40px;
width: 40px;
}
.ripple-container{
border-radius: 50%;
}
}
}
.dropdown-menu-right{
transform-origin: 100% 0;
}
.nav-item.active .nav-link{
&,
&:hover,
&:focus {
color: inherit;
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.btn,
.navbar-nav .nav-item .btn{
margin-top: 0;
margin-bottom: 0;
}
.navbar-toggler{
cursor: pointer;
outline: 0;
.navbar-toggler-icon{
width: 22px;
height: 2px;
vertical-align: middle;
outline: 0;
display: block;
border-radius: 1px;
& + .navbar-toggler-icon{
margin-top: 4px;
}
}
}
&.navbar-absolute{
position: absolute;
width: 100%;
padding-top: 10px;
z-index: 1029;
}
.navbar-wrapper{
display: inline-flex;
align-items: center;
}
// give correct size to ripple container
.navbar-brand {
position: relative;
color: inherit;
height: 50px;
font-size: $navbar-brand-font-size - 0.125;
line-height: 30px;
padding: $padding-general-y 0;
font-weight: 300;
margin-left: 1rem;
}
> .container {
flex: 1;
}
&.bg-primary{
@include navbar-colors($bg-primary, $white-color);
}
&.bg-info{
@include navbar-colors($bg-info, $white-color);
}
&.bg-warning{
@include navbar-colors($bg-warning, $white-color);
}
&.bg-rose{
@include navbar-colors($bg-rose, $white-color);
}
&.bg-danger{
@include navbar-colors($bg-danger, $white-color);
}
&.bg-success{
@include navbar-colors($bg-success, $white-color);
}
&.bg-dark{
@include navbar-colors($grey-900, $white-color);
}
&.navbar-transparent{
background-color: transparent !important;
box-shadow: none;
padding-top: 25px;
}
.notification{
position: absolute;
top: 5px;
border: 1px solid #FFF;
right: 10px;
font-size: 9px;
background: #f44336;
color: #FFFFFF;
min-width: 20px;
padding: 0px 5px;
height: 20px;
border-radius: 10px;
text-align: center;
line-height: 19px;
vertical-align: middle;
display: block;
}
}
.navbar{
.navbar-minimize{
padding: 3px 0 0 15px;
}
&.navbar-transparent{
padding-top: 10px;
}
.collapse{
.navbar-nav{
.nav-item .nav-link{
position: relative;
padding: 10px 15px;
font-weight: $font-weight-default;
font-size: $mdb-btn-font-size-base;
text-transform: uppercase;
border-radius: $border-radius-base;
line-height: 20px;
margin-left: 5px;
color: inherit;
&:not(.btn-just-icon) .fa{
position: relative;
top: 2px;
margin-top: -4px;
margin-right: 4px;
}
& .material-icons,
& .fa{
font-size: $font-size-lg;
max-width: 24px;
margin-top: -1.1em;
}
&:not(.btn) .material-icons{
margin-top: -3px;
top: 0px;
position: relative;
margin-right: 3px;
}
.notification{
top: 0px;
}
}
}
}
}
.off-canvas-sidebar{
.navbar{
.navbar-collapse{
.navbar-nav .nav-item{
.nav-link{
padding-top: 15px;
padding-bottom: 15px;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
color: $white-color;
margin: 0 15px;
&:hover{
background: rgba(200, 200, 200, 0.2);
}
}
}
}
}
}

53
src/assets/scss/core/_popover.scss Normal file
View File

@ -0,0 +1,53 @@
.popover, .tooltip-inner {
line-height: 1.5em;
background: $white-color;
border: none;
border-radius: $border-radius-base;
@include shadow-8dp();
color: $popover-color;
}
.popover{
padding: 0;
@include shadow-16dp();
&.left,
&.right,
&.top,
&.bottom{
> .arrow{
border: none;
}
}
&.bs-popover-top,
&.bs-popover-auto[x-placement^="top"],
&.bs-popover-bottom,
&.bs-popover-auto[x-placement^="bottom"],
&.bs-popover-right,
&.bs-popover-auto[x-placement^="right"],
&.bs-popover-left,
&.bs-popover-auto[x-placement^="left"]{
& .arrow::before{
border: 0;
}
}
}
.popover-header{
background-color: $white-color;
border: none;
padding: 15px 15px 5px;
font-size: $font-size-h4;
margin: 0;
color: $popover-color;
}
.popover-body{
padding: 10px 15px 15px;
line-height: 1.4;
color: $popover-color;
}

85
src/assets/scss/core/_popups.scss Normal file
View File

@ -0,0 +1,85 @@
.popover{
font-size: $font-size-base;
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
border: none;
line-height: 1.7;
max-width: 240px;
&.bs-popover-top .arrow:before,
&.bs-popover-left .arrow:before,
&.bs-popover-right .arrow:before,
&.bs-popover-bottom .arrow:before,{
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.popover-header{
color: $default-color-opacity;
font-size: $font-size-base;
text-transform: capitalize;
font-weight: $font-weight-semi;
margin: 0;
margin-top: 5px;
border: none;
background-color: transparent;
}
&:before{
display: none;
}
&.bs-tether-element-attached-top:after{
border-bottom-color:$white-color;
top: -9px;
}
&.popover-primary{
@include popover-color($primary-color, $white-color);
}
&.popover-info{
@include popover-color($info-color, $white-color);
}
&.popover-warning{
@include popover-color($warning-color, $white-color);
}
&.popover-danger{
@include popover-color($danger-color, $white-color);
}
&.popover-success{
@include popover-color($success-color, $white-color);
}
}
.tooltip{
&.bs-tooltip-right .arrow:before{
border-right-color:$white-color;
}
&.bs-tooltip-top .arrow:before{
border-top-color:$white-color;
}
&.bs-tooltip-bottom .arrow:before{
border-bottom-color:$white-color;
}
&.bs-tooltip-left .arrow:before{
border-left-color:$white-color;
}
}
.tooltip-inner{
padding: $padding-base-vertical $padding-base-horizontal;
min-width: 130px;
background-color: $white-color;
font-size: $font-size-base;
color: inherit;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

98
src/assets/scss/core/_radios.scss Normal file
View File

@ -0,0 +1,98 @@
@mixin radio-color($color, $opacity){
& ~ .check,
& ~ .circle {
opacity: $opacity;
}
& ~ .check {
background-color: $color;
}
& ~ .circle {
border-color: $color;
}
}
.form-check{
.form-check-label {
cursor: pointer;
padding-left: 25px;
position: relative;
@include mdb-label-color-toggle-focus();
span {
display: block;
position: absolute;
left: -1px;
top: -1px;
transition-duration: 0.2s;
}
.circle {
border: 1px solid $mdb-radio-color-off;
height: 15px;
width: 15px;
border-radius: 100%;
top: 1px;
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: $mdb-radio-color-on;
@include transform-scale3d(unquote('0,0,0'));
}
}
.form-check-input:not(:checked) ~ .check:after {
@include animation(rippleOff 500ms);
}
.form-check-input:checked ~ .check:after {
@include animation(rippleOff 500ms);
}
}
.form-check-input {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
&:checked {
@include radio-color($mdb-radio-color-on, 1);
}
&:checked ~ .circle .check {
@include transform-scale3d(unquote('0.65, 0.65, 1'));
}
}
.form-check-input[disabled] {
// light theme spec: Disabled: #000000, Opacity 26%
@include radio-color($black, 0.26);
& + .circle .check{
background-color: $black;
}
}
.form-check-sign{
vertical-align: middle;
position: relative;
top: -2px;
float: left;
padding-right: 10px;
display: inline-block;
}
}
.form-check + .form-check {
margin-top: 0;
}

830
src/assets/scss/core/_responsive.scss Normal file
View File

@ -0,0 +1,830 @@
@media all and (max-width: 991px) {
[class*="navbar-expand-"] > .container,
[class*="navbar-expand-"] > .container-fluid{
padding-left: 15px;
padding-right: 15px;
}
.navbar .navbar-collapse .navbar-nav > li.button-container{
padding: 15px;
}
.carousel .card .card-body{
max-width: 340px;
margin: 0 auto;
min-height: 400px;
}
.navbar-collapse{
position: fixed;
display: block;
top: 0px;
height: 100vh;
width: 230px;
right: 0;
margin-right: 0 !important;
z-index: 1032;
visibility: visible;
background-color: #999;
overflow-y: visible;
border-top: none;
text-align: left;
padding-right: 0;
padding-left: 0;
max-height: none !important;
@include transform-translate-x(230px);
@include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
&::after{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: $white-color;
display: block;
content: "";
z-index: 1;
}
.dropdown-toggle:after{
position: absolute;
right: 16px;
margin-top: 8px;
}
.navbar-nav{
position: relative;
z-index: 3;
.nav-item{
.nav-link{
color: $black-color;
margin: 5px 15px;
}
&.button-container .nav-link{
margin: 15px;
}
&:after{
width: calc(100% - 30px);
content: "";
display: block;
height: 1px;
margin-left: 15px;
// background-color: #e5e5e5;
}
&:last-child {
&:after{
display: none;
}
}
}
}
.nav-open &{
@include transform-translate-x(0px);
}
}
.nav-open{
.navbar-translate{
@include transform-translate-x(-230px);
}
}
.navbar{
.navbar-translate{
width: 100%;
position: relative;
display: flex;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
-ms-flex-align: center;
align-items: center;
@include transitions-property (transform, 0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.dropdown.show .dropdown-menu{
display: block;
}
.dropdown .dropdown-menu{
display: none;
}
.dropdown-menu{
.dropdown-item{
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
.dropdown.show .dropdown-menu,
.dropdown .dropdown-menu{
background-color: transparent;
border: 0;
padding-bottom: 15px;
transition: none;
-webkit-box-shadow: none;
box-shadow: none;
transform: none !important;
width: auto;
margin-bottom: 15px;
padding-top: 0;
height: 300px;
animation: none;
opacity: 1;
overflow-y: scroll;
}
}
.navbar.navbar-transparent{
.navbar-toggler{
.navbar-toggler-icon{
background-color: $white-color;
}
}
}
#bodyClick {
height: 100%;
width: 100%;
position: fixed;
opacity: 0;
top: 0;
left: auto;
right: 230px;
content: "";
z-index: 1029;
overflow-x: hidden;
}
// for demo
#navbar .navbar-collapse,
#navigation .navbar-collapse{
display: none !important;
}
}
@media all and (min-width: 991px) {
.navbar .navbar-nav{
align-items: center;
.button-container{
margin-left: 0.1875px;
}
}
}
@media screen and (max-width: 991px) {
.presentation-page {
.section-components {
.components-macbook {
max-width: 850px !important;
max-height: 480px !important;
margin-top: 12vh;
left: -12px;
}
.coloured-card-img,
.table-img {
display: none;
}
.social-img {
left: 47%;
top: 37%;
}
.pin-btn-img {
top: 54%;
}
.share-btn-img {
top: 12%;
}
.coloured-card-btn-img {
top: -2%;
left: 65%;
}
}
.section-content {
.area-img {
max-width: 130px;
max-height: 170px;
}
.info-img {
max-width: 170px;
max-height: 120px;
}
}
}
}
@media screen and (max-width: 767px) {
.presentation-page {
.section-components {
.components-macbook {
max-width: 350px !important;
max-height: 250px !important;
margin-top: 12vh;
left: -12px;
}
.coloured-card-img,
.table-img {
display: none;
}
.social-img {
left: -7%;
top: 37%;
}
.pin-btn-img {
top: 54%;
}
.share-btn-img {
top: 7%;
}
.coloured-card-btn-img {
top: -2%;
}
}
}
.presentation-page,
.index-page,
.section-page{
#cd-vertical-nav{
display: none;
}
}
.index-page{
.cd-section{
.tim-typo .tim-note{
width: 60px;
}
}
}
}
@media screen and (max-width: 400px){
.pro-badge{
top: 90px !important;
right: 30px !important;
}
.cd-vertical-nav{
display: none !important;
}
}
/* Changes for small display */
@media (max-width: 991px){
.form-group{
textarea{
padding-top: 15px;
}
}
.nav-open .menu-on-left .main-panel{
position: initial;
}
html,
body{
overflow-x: hidden;
}
.menu-on-left{
.nav-open &{
.main-panel,
.wrapper-full-page,
.navbar-fixed > div{
@include transform-translate-x(260px);
}
}
.sidebar,
.off-canvas-sidebar{
left: 0;
right: auto;
@include transform-translate-x(-260px);
}
.close-layer{
left: auto;
right: 0;
}
}
.timeline{
&:before{
left: 5%;
}
> li > .timeline-badge{
left: 5%;
}
> li > .timeline-panel{
float: right;
width: 86%;
&:before{
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
&:after{
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
}
.nav-mobile-menu{
.dropdown .dropdown-menu{
display: none;
position: static !important;
background-color: transparent;
width: auto;
float: none;
box-shadow: none;
&.showing{
animation: initial;
animation-duration: 0s;
}
&.hiding{
transform: none;
opacity: 1;
}
}
.dropdown.show .dropdown-menu{
display: block;
}
li.active > a{
background-color: rgba(255, 255, 255, 0.1);
}
}
.navbar-minimize {
display: none;
}
.card .form-horizontal {
.label-on-left,
.label-on-right{
padding-left:15px;
padding-top: 8px;
}
.form-group{
margin-top: 0px;
}
.checkbox-radios{
padding-bottom: 15px;
.checkbox:first-child,
.radio:first-child{
margin-top: 0;
}
}
.checkbox-inline{
margin-top: 0;
}
}
.sidebar{
display: none;
box-shadow: none;
.sidebar-wrapper{
padding-bottom: 60px;
}
.nav-mobile-menu{
margin-top: 0;
.notification{
float: left;
line-height: 30px;
margin-right: 8px;
}
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
}
.main-panel{
width: 100%;
}
.navbar-transparent{
padding-top: 15px;
background-color: rgba(0, 0, 0, 0.45);
}
body {
position: relative;
}
.nav-open{
.main-panel,
.wrapper-full-page,
.navbar .container .navbar-toggler,
.navbar .container .navbar-wrapper,
.navbar .container{
left: 0;
@include transform-translate-x(-260px);
}
.sidebar{
@include shadow-big();
}
.off-canvas-sidebar .navbar-collapse,
.sidebar{
@include transform-translate-x(0);
}
}
.wrapper-full-page,
.navbar .container .navbar-toggler,
.navbar .container .navbar-wrapper,
.navbar .container{
@include transform-translate-x(0px);
@include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
left: 0;
}
.off-canvas-sidebar .navbar .container{
transform: none;
}
.main-panel,
.navbar-collapse{
@include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
}
.navbar .navbar-collapse.collapse,
.navbar .navbar-collapse.collapse.in,
.navbar .navbar-collapse.collapsing{
display: none !important;
}
.off-canvas-sidebar .navbar .navbar-collapse.collapse,
.off-canvas-sidebar .navbar .navbar-collapse.collapse.in,
.off-canvas-sidebar .navbar .navbar-collapse.collapsing{
display: block !important;
}
.navbar-nav > li{
float: none;
position: relative;
display: block;
}
.off-canvas-sidebar nav .navbar-collapse{
margin: 0;
> ul {
margin-top: 19px;
}
}
.sidebar,
.off-canvas-sidebar nav .navbar-collapse{
position: fixed;
display: block;
top: 0;
height: 100vh;
width: 260px;
right: 0;
left: auto;
z-index: 1032;
visibility: visible;
background-color: #9A9A9A;
overflow-y: visible;
border-top: none;
text-align: left;
padding-right: 0px;
padding-left: 0;
@include transform-translate-x(260px);
@include transitions (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
> ul {
position: relative;
z-index: 4;
width: 100%;
}
&::before{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
background-color: #282828;
display: block;
content: "";
z-index: 1;
}
.logo{
position: relative;
z-index: 4;
}
.navbar-form{
margin: 10px 0px;
float: none !important;
padding-top: 1px;
padding-bottom: 1px;
position: relative;
}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
}
.form-group{
&.form-search{
.form-control{
font-size: 1.7em;
height: 37px;
width: 78%;
}
}
}
.navbar-form{
.btn{
position: absolute;
top: -5px;
right: -50px;
}
}
.close-layer{
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
top: 0;
left: auto;
background: rgba(0, 0, 0, 0.35);
content: "";
z-index: 9999;
overflow-x: hidden;
@include transitions($slow-transition-time, $transition-ease-in);
&.visible{
opacity: 1;
}
}
.navbar-toggler .icon-bar {
display: block;
position: relative;
background: #555 !important;
width: 24px;
height: 2px;
border-radius: 1px;
margin: 0 auto;
}
.navbar-header .navbar-toggler {
padding: 15px;
margin-top: 4px;
width: 40px;
height: 40px;
}
.bar1,
.bar2,
.bar3 {
outline: 1px solid transparent;
}
@include topbar-x-rotation();
@include topbar-back-rotation();
@include bottombar-x-rotation();
@include bottombar-back-rotation();
.navbar-toggler{
.icon-bar:nth-child(2){
top: 0px;
@include bar-animation($topbar-back);
}
.icon-bar:nth-child(3){
opacity: 1;
}
.icon-bar:nth-child(4){
bottom: 0px;
@include bar-animation($bottombar-back);
}
&.toggled{
.icon-bar:nth-child(2){
top: 6px;
@include bar-animation($topbar-x);
}
.icon-bar:nth-child(3){
opacity: 0;
}
.icon-bar:nth-child(4){
bottom: 6px;
@include bar-animation($bottombar-x);
}
}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.dropdown-menu .divider{
background-color: rgba(229, 229, 229, 0.15);
}
.navbar-nav {
margin: 1px 0;
.open .dropdown-menu > li {
& > a{
padding: 15px 15px 5px 50px;
}
&:first-child > a{
padding: 5px 15px 5px 50px;
}
&:last-child > a {
padding: 15px 15px 25px 50px;
}
}
}
[class*="navbar-"] .navbar-nav {
& > li > a,
> li > a:hover,
> li > a:focus,
.active > a,
.active > a:hover,
.active > a:focus,
.open .dropdown-menu > li > a,
.open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus,
.navbar-nav .open .dropdown-menu > li > a:active {
color: white;
}
& > li > a,
> li > a:hover,
> li > a:focus,
.open .dropdown-menu > li > a,
.open .dropdown-menu > li > a:hover,
.open .dropdown-menu > li > a:focus{
opacity: .7;
background: transparent;
}
&.navbar-nav .open .dropdown-menu > li > a:active {
opacity: 1;
}
& .dropdown > a{
&:hover .caret {
border-bottom-color: #777;
border-top-color: #777;
}
&:active .caret {
border-bottom-color: white;
border-top-color: white;
}
}
}
.dropdown-menu {
display: none;
}
.navbar-fixed-top {
-webkit-backface-visibility: hidden;
}
#bodyClick {
height: 100%;
width: 100%;
position: fixed;
opacity: 0;
top: 0;
left: auto;
right: 260px;
content: "";
z-index: 9999;
overflow-x: hidden;
}
.social-line .btn{
margin: $margin-bottom;
}
.subscribe-line .form-control{
margin: $margin-bottom;
}
.social-line.pull-right{
float: none;
}
.footer:not(.footer-big) nav > ul li{
float: none;
}
.social-area.pull-right{
float: none !important;
}
.form-control + .form-control-feedback{
margin-top: -8px;
}
.navbar-toggle:hover,.navbar-toggle:focus {
background-color: transparent !important;
}
.media-post .author{
width: 20%;
float: none !important;
display: block;
margin: 0 auto 10px;
}
.media-post .media-body{
width: 100%;
}
.navbar-collapse.collapse{
height: 100% !important;
}
.navbar-collapse.collapse.in {
display: block;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar-collapse{
.nav p{
font-size: $font-size-base;
margin: 0;
}
}
}
@media (min-width: 992px) {
.main-panel {
.navbar .navbar-collapse {
.navbar-nav .nav-item .nav-link p {
display: none;
}
}
}
.nav-mobile-menu,
.sidebar .navbar-form{
display: none !important;
}
}

41
src/assets/scss/core/_ripples.scss Normal file
View File

@ -0,0 +1,41 @@
// marker class (used as a selector for one-off elements to decorate)
.ripple {
position: relative;
}
.ripple-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
.ripple-decorator {
position: absolute;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
pointer-events: none;
background-color: rgba($black, 0.05);
border-radius: 100%;
opacity: 0;
transform: scale(1);
transform-origin: 50%;
&.ripple-on {
opacity: 0.1;
transition: opacity 0.15s ease-in 0s,
transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
&.ripple-out {
opacity: 0;
transition: opacity 0.1s linear 0s !important;
}
}
}

503
src/assets/scss/core/_sidebar-and-main-panel.scss Normal file
View File

@ -0,0 +1,503 @@
.wrapper{
position: relative;
top: 0;
height: 100vh;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 260px;
background: $white-color;
@include shadow-big();
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
&[data-background-color="black"]{
background-color: #191919;
}
.logo-img{
width: 35px;
display: block;
max-height: 30px;
margin-left: 13px;
margin-right: 15px;
img{
width: 35px;
top: 16px;
position: absolute;
}
}
.sidebar-wrapper{
position: relative;
height: calc(100vh - 75px);
overflow: auto;
width: 260px;
z-index: 4;
padding-bottom: 30px;
.dropdown .dropdown-backdrop{
display: none !important;
}
.navbar-form{
border: none;
box-shadow: none;
.input-group {
font-size: 1.7em;
height: 36px;
width: 78%;
padding-left: 17px;
}
}
> .nav,
.user .user-info{
[data-toggle="collapse"] ~ div > ul > li > a{
span{
display: inline-block;
@extend .animation-transition-general;
}
.sidebar-normal{
margin: 0;
position: relative;
transform: translateX(0px);
opacity: 1;
white-space: nowrap;
display: block;
}
.sidebar-mini{
text-transform: uppercase;
width: 30px;
margin-right: 15px;
text-align: center;
letter-spacing: 1px;
position: relative;
float: left;
display: inherit;
}
i{
font-size: 17px;
line-height: 20px;
width: 26px;
}
}
}
}
.logo-tim{
border-radius: 50%;
border: 1px solid #333;
display: block;
height: 61px;
width: 61px;
float: left;
overflow: hidden;
img{
width: 60px;
height: 60px;
}
}
.nav{
margin-top: 20px;
display: block;
.caret{
margin-top: 13px;
position: absolute;
right: 6px;
}
li{
> a{
&:hover,
&:focus{
background-color: transparent;
outline: none;
}
}
&:first-child > a{
margin: 0 15px;
}
&:hover > a,
& .dropdown-menu a:hover,
& .dropdown-menu a:focus,
&.active > [data-toggle="collapse"]{
background-color: rgba(200, 200, 200, 0.2);
color: $black-color;
box-shadow: none;
}
&.active > [data-toggle="collapse"]{
i{
color: #a9afbb;
}
}
&.active > a,
&.active > a i{
color: $white-color;
}
&.separator{
margin: 15px 0;
&:after{
width: calc(100% - 30px);
content: "";
position: absolute;
height: 1px;
left: 15px;
background-color: rgba(180,180,180, .3);
}
& + li {
margin-top: 31px;
}
}
}
p{
margin: 0;
line-height: 30px;
font-size: 14px;
position: relative;
display: block;
height: auto;
white-space: nowrap;
}
i{
font-size: 24px;
float: left;
margin-right: 15px;
line-height: 30px;
width: 30px;
text-align: center;
color: #a9afbb;
}
}
.nav li a,
.nav li .dropdown-menu a{
margin: 10px 15px 0;
border-radius: $border-radius-base;
color: $black-color;
padding-left: 10px;
padding-right: 10px;
text-transform: capitalize;
font-size: $font-paragraph - 1;
padding: 10px 15px;
}
.sidebar-background{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
display: block;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
&:after{
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
content: "";
display: block;
background: #FFFFFF;
opacity: .93;
}
}
.logo{
padding: 15px 0px;
margin: 0;
display: block;
position: relative;
z-index: 4;
&:after{
content: '';
position: absolute;
bottom: 0;
right: 15px;
height: 1px;
width: calc(100% - 30px);
background-color: rgba(180,180,180, .3);
}
p{
float: left;
font-size: 20px;
margin: 10px 10px;
color: $white-color;
line-height: 20px;
}
.simple-text{
text-transform: uppercase;
padding: $padding-small-vertical $padding-zero;
display: inline-block;
font-size: 18px;
color: $black-color;
white-space: nowrap;
font-weight: $font-weight-default;
line-height: 30px;
overflow: hidden;
text-align: center;
display: block;
}
}
.logo-tim{
border-radius: 50%;
border: 1px solid #333;
display: block;
height: 61px;
width: 61px;
float: left;
overflow: hidden;
img{
width: 60px;
height: 60px;
}
}
&[data-background-color="black"]{
@include sidebar-background-color($gray-base, $white-color);
.nav li .dropdown-menu .dropdown-item{
color: $white-color;
}
}
&[data-color="purple"]{
@include set-background-color-button($brand-primary);
}
&[data-color="azure"]{
@include set-background-color-button($brand-info);
}
&[data-color="green"]{
@include set-background-color-button($brand-success);
}
&[data-color="orange"]{
@include set-background-color-button($brand-warning);
}
&[data-color="danger"]{
@include set-background-color-button($brand-danger);
}
&[data-color="rose"]{
@include set-background-color-button($brand-rose);
}
&[data-color="white"]{
@include set-background-color-button($white-color);
@include sidebar-active-color($black-color);
}
&[data-background-color="red"]{
@include sidebar-background-color($brand-danger, $white-color);
.user,
.logo,
.nav li.separator{
&:after{
background-color: rgba(255,255,255, .3);
}
}
.nav{
li:hover:not(.active) > a,
li.active > [data-toggle="collapse"]{
background-color: rgba(255, 255, 255, 0.1);
}
}
}
&[data-image]:after,
&.has-image:after{
opacity: .77;
}
}
.off-canvas-sidebar .navbar-collapse{
.nav {
> li > a,
> li > a:hover{
color: $white-color;
margin: 0 15px;
}
> li > a:focus,
> li > a:hover{
background: rgba(200, 200, 200, 0.2);
}
}
}
.main-panel{
position: relative;
float: right;
width: $sidebar-width;
@include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
.main-content{
margin-top: 70px;
padding: 30px 15px;
min-height: calc(100vh - 123px);
}
.footer{
border-top: 1px solid #e7e7e7;
}
.navbar{
margin-bottom: 0;
}
.header{
margin-bottom: 30px;
.title{
margin-top: 10px;
margin-bottom: 10px;
}
}
}
.perfect-scrollbar-on{
.sidebar,
.main-panel{
height: 100%;
max-height: 100%;
}
}
.sidebar,
.main-panel,
.sidebar-wrapper{
-webkit-transition-property: top,bottom,width;
transition-property: top,bottom, width;
-webkit-transition-duration: .2s,.2s, .35s;
transition-duration: .2s,.2s, .35s;
-webkit-transition-timing-function: linear,linear,ease;
transition-timing-function: linear,linear,ease;
-webkit-overflow-scrolling: touch;
}
.visible-on-sidebar-regular{
display: inline-block !important;
}
.visible-on-sidebar-mini{
display: none !important;
}
@media (min-width: 991px) {
.sidebar-mini{
.visible-on-sidebar-regular{
display: none !important;
}
.visible-on-sidebar-mini{
display: inline-block !important;
}
.sidebar,
.sidebar .sidebar-wrapper{
width: 80px;
}
.main-panel{
width: $sidebar-mini-width;
}
.sidebar{
display: block;
font-weight: 200;
z-index: 9999;
.logo{
a.logo-normal{
opacity: 0;
@include transform-translate-x(-25px);
}
}
.sidebar-wrapper{
> .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info > a > span,
> .nav li > a p{
@include transform-translate-x(-25px);
opacity: 0;
}
}
}
.sidebar:hover{
width: 260px;
.logo{
a.logo-normal{
opacity: 1;
@include transform-translate-x(0px);
}
}
.sidebar-wrapper{
width: 260px;
> .nav li > a p,
> .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
.user .user-info > a > span{
@include transform-translate-x(0px);
opacity: 1;
}
}
}
}
.sidebar {
.nav .nav-item {
&.active-pro {
position: absolute;
width: 100%;
bottom: 13px;
}
}
}
}

185
src/assets/scss/core/_tables.scss Normal file
View File

@ -0,0 +1,185 @@
.table{
> thead > tr > th{
border-bottom-width: 1px;
font-size: $font-size-h5;
font-weight: $font-weight-light;
}
.form-check{
margin-top: 0;
.form-check-sign{
top: -13px;
left: 0;
padding-right: 0;
}
}
.radio,
.checkbox{
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: 15px;
.icons{
position: relative;
}
}
> thead > tr > th,
> tbody > tr > th,
> tfoot > tr > th,
> thead > tr > td,
> tbody > tr > td,
> tfoot > tr > td{
padding: 12px 8px;
vertical-align: middle;
}
thead{
tr{
th{
font-size: 1.063rem;
}
}
}
.th-description{
max-width: 150px;
}
.td-price{
font-size: 26px;
font-weight: $font-weight-light;
margin-top: 5px;
text-align: right;
}
.td-total{
font-weight: $font-weight-bold;
font-size: $font-size-h5;
padding-top: 20px;
text-align: right;
}
.td-actions .btn{
margin: 0px;
padding: 5px;
}
> tbody > tr{
position: relative;
}
}
.table-shopping{
> thead > tr > th{
font-size: $font-size-h6;
text-transform: uppercase;
}
> tbody > tr > td{
font-size: $font-paragraph;
b{
display: block;
margin-bottom: 5px;
}
}
.td-name{
font-weight: $font-weight-default;
font-size: 1.5em;
line-height: 1.42857143;
small{
color: $gray-light;
font-size: 0.75em;
font-weight: $font-weight-light;
}
}
.td-number{
font-weight: $font-weight-light;
font-size: $font-size-h4;
}
.td-name{
min-width: 200px;
}
.td-number{
text-align: right;
min-width: 150px;
small{
margin-right: 3px;
}
}
.img-container{
width: 120px;
max-height: 160px;
overflow: hidden;
display: block;
img{
width: 100%;
}
}
}
// BS4 has not yet converted the following to variables - keep an eye on it and move to variables when possible.
.thead-inverse {
th {
//color: $bmd-inverse; // #fff;
//background-color: $gray-dark;
}
}
.thead-default {
th {
//color: $gray;
//background-color: $bmd-inverse-lighter; //$gray-lighter;
}
}
.table-inverse {
color: $bmd-inverse-light; //$gray-lighter;
//background-color: $gray-dark;
//th,
//td,
//thead th {
// border-color: $gray;
//}
}
.table {
thead th {
font-size: $bmd-table-header-font-size;
font-weight: 500;
border-top-width: 0;
border-bottom-width: $table-border-width;
}
}
thead.thead-inverse,
// needs specificity
.table-inverse thead {
th {
color: $bmd-inverse-lighter;
}
}
.table-inverse {
th,
td,
thead th {
border-color: $bmd-table-border-color-inverse;
}
}
.table-striped>tbody>tr:nth-of-type(odd){
background-color: #f9f9f9;
}
.table.table-hover tbody tr:hover{
background-color: #f5f5f5;
}

83
src/assets/scss/core/_tabs.scss Normal file
View File

@ -0,0 +1,83 @@
.nav-tabs {
border: 0;
border-radius: $border-radius-base;
padding: 0 15px;
.nav-item {
.nav-link {
color: $white-color;
border: 0;
margin: 0;
border-radius: $border-radius-base;
line-height: $mdb-btn-font-size-base * 2;
text-transform: uppercase;
font-size: $mdb-btn-font-size-base;
padding: 10px 15px;
background-color: transparent;
transition: 0.3s background-color 0s;
&:hover {
border: 0;
}
}
.nav-link,
.nav-link:hover,
.nav-link:focus {
border: 0 !important;
color: $white-color !important;
font-weight: $font-weight-bold;
}
&.disabled .nav-link,
&.disabled .nav-link:hover {
color: rgba(255,255,255,0.5);
}
.material-icons{
margin: -1px 5px 0 0;
}
.nav-link.active{
background-color: rgba(255,255,255, .2);
transition: 0.3s background-color 0.2s;
}
}
}
.nav-tabs {
.nav-link {
border-bottom: $bmd-nav-tabs-border-size solid transparent;
}
// colors
@include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover);
&.header-primary {
@include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover);
}
&.bg-inverse {
@include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover);
}
}
.card-nav-tabs{
margin-top: 45px;
.card-header{
margin-top: -30px !important;
}
}
.tab-content .tab-pane .td-actions{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.card .tab-content .form-check{
margin-top: 6px;
}

85
src/assets/scss/core/_togglebutton.scss Normal file
View File

@ -0,0 +1,85 @@
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
}
label {
cursor: pointer;
color: $mdb-toggle-label-color;
@include mdb-label-color-toggle-focus();
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
.toggle {
text-align: left; // Issue #737 horizontal form
margin-left: 5px;
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 15px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #FFFFFF;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2.5px;
border: 1px solid $mdb-checkbox-border-color;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
input[type=checkbox] {
// Handle disabled
&[disabled] {
& + .toggle:after,
&:checked + .toggle:after {
background-color: #BDBDBD;
}
}
& + .toggle:active:after,
&[disabled] + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
// Ripple off and disabled
&:checked + .toggle:after {
left: 15px;
}
}
// set bg when checked
input[type=checkbox]:checked {
+ .toggle {
background-color: rgba($brand-primary, (70/100)); // Switch bg on
}
+ .toggle:after {
border-color: $brand-primary; // Handle on
}
+ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
}
}
}
}

53
src/assets/scss/core/_tooltip.scss Normal file
View File

@ -0,0 +1,53 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.tooltip-inner, .mat-tooltip {
color: $gray !important;
line-height: 1.5em;
background: $white-color;
border: none;
border-radius: $border-radius-base !important;
@include shadow-8dp();
}
.tooltip, .tooltip.in {
//opacity: 1;
}
.tooltip.in{
opacity: 1;
@include transform-translate-y(0px);
}
.tooltip{
opacity: 0;
transition: opacity, transform .2s ease;
@include transform-translate-y(5px);
&.left{
.tooltip-arrow{
border-left-color: $white-color;
}
}
&.right{
.tooltip-arrow{
border-right-color: $white-color;
}
}
&.top{
.tooltip-arrow{
border-top-color: $white-color;
}
}
&.bottom{
.tooltip-arrow{
border-bottom-color: $white-color;
}
}
}
.tooltip-inner, .mat-tooltip{
padding: 10px 15px;
min-width: 130px;
}
.mat-tooltip{
text-align: center;
}

92
src/assets/scss/core/_type.scss Normal file
View File

@ -0,0 +1,92 @@
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: $font-family-sans-serif;
font-weight: 300;
line-height: 1.5em;
}
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15em;
}
h2, .h2{
font-size: $font-size-h2;
}
h3, .h3{
font-size: $font-size-h3;
line-height: 1.4em;
margin: 20px 0 10px;
}
h4, .h4{
font-size: $font-size-h4;
line-height: 1.4em;
font-weight: 300;
}
h5, .h5 {
font-size: $font-size-h5;
line-height: 1.4em;
margin-bottom: 15px;
}
h6, .h6{
font-size: $font-size-h6;
text-transform: uppercase;
font-weight: $font-weight-bold;
}
.title,
.card-title,
.info-title,
.footer-brand,
.footer-big h5,
.footer-big h4,
.media .media-heading{
//font-weight: $font-weight-extra-bold;
// font-family: $font-family-serif;
&,
a{
color: $black-color;
text-decoration: none;
}
}
.card-blog .card-title{
font-weight: $font-weight-extra-bold;
}
h2.title{
margin-bottom: $margin-base * 2;
}
.description,
.card-description,
.footer-big p{
color: $gray-light;
}
.text-warning {
color: $brand-warning !important;
}
.text-primary {
color: $brand-primary !important;
}
.text-danger {
color: $brand-danger !important;
}
.text-success {
color: $brand-success !important;
}
.text-info {
color: $brand-info !important;
}
.text-rose{
color: $brand-rose !important;
}
.text-gray{
color: $gray-color !important;
}

35
src/assets/scss/core/_variables.scss Normal file
View File

@ -0,0 +1,35 @@
@import "variables/colors";
@import "variables/shadow";
@import "variables/bootstrap-material-design-base";
// Customized BS variables
@import "variables/custom-forms";
@import "variables/spacing";
@import "variables/body";
@import "variables/brand";
@import "variables/buttons";
@import "variables/card";
@import "variables/code";
@import "variables/dropdown";
@import "variables/forms";
@import "variables/list-group";
@import "variables/nav";
@import "variables/pagination";
@import "variables/state";
@import "variables/tables";
@import "variables/tooltip";
@import "variables/type";
@import "variables/modals";
// import their vars after customization for use below
$enable-flex: true; // fully adopt flexbox layouts
$enable-shadows: true; // enable shadows, set to false to turn off shadows
@import "variables/layout";
@import "variables/menu";
@import "variables/drawer";
@import "variables/snackbar";
@import "variables/bootstrap-material-design";

Some files were not shown because too many files have changed in this diff Show More