Commit eb652b32 by Ajit Thakor

initial commit

1 parent d2ffb55c
Showing with 8732 additions and 0 deletions
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "primer"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/quill/dist/quill.snow.css",
"../node_modules/quill/dist/quill.bubble.css",
"../node_modules/dragula/dist/dragula.css",
"../node_modules/leaflet/dist/leaflet.css",
"../node_modules/angular-calendar/scss/angular-calendar.scss",
"../node_modules/@swimlane/ngx-datatable/release/index.css",
"../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
"assets/fonts/pe/css/pe-icon-set-weather.css",
"assets/fonts/data-table/icons.css",
"assets/styles/app.scss"
],
"scripts": [
"../node_modules/hammerjs/hammer.min.js",
"../node_modules/chart.js/dist/Chart.bundle.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage/*
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
#System Files
.DS_Store
Thumbs.db
# Primer
Primer is a creative material design admin template built with Angular 2. It comes out of the box with AoT and lazy loading support, Language translation , RTL support and light and dark colour schemes. With this, you get all you need to start working on your SAAS, CRM, CMS or dashboard based project.
Once you've purchased Primer please consider giving a `5 star rating`, it helps in pushing out more updates and adding a lot more features.
####Key Features Include:
* LTR/RTL Support
* Angular 2
* Material design
* AoT compilation
* Fully responsive (Mobile, Tablet, Desktop)
* Well documented (Both online and offline)
* Easy to customise
* Language translation
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.32.3.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
import { AppPage } from './app.po';
describe('primer App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should expect true to be true', () => {
expect(true).toBe(true);
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
This diff could not be displayed because it is too large.
{
"name": "primer",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.2.9",
"@angular/cdk": "5.2.4",
"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/core": "5.2.9",
"@angular/flex-layout": "5.0.0-beta.13",
"@angular/forms": "5.2.9",
"@angular/http": "5.2.9",
"@angular/material": "5.2.4",
"@angular/platform-browser": "5.2.9",
"@angular/platform-browser-dynamic": "5.2.9",
"@angular/router": "5.2.9",
"@asymmetrik/ngx-leaflet": "3.0.2",
"@ngx-loading-bar/router": "1.3.1",
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",
"@swimlane/ngx-datatable": "11.2.0",
"angular-calendar": "0.23.7",
"angular-tree-component": "7.0.1",
"chart.js": "2.7.2",
"core-js": "2.5.3",
"d3": "4.13.0",
"dragula": "3.7.2",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"leaflet": "1.3.1",
"moment": "2.21.0",
"ng2-charts": "1.6.0",
"ng2-dragula": "1.5.0",
"ng2-file-upload": "1.3.0",
"ng2-validation": "4.2.0",
"ngx-perfect-scrollbar": "5.3.5",
"ngx-quill": "2.2.0",
"rxjs": "5.5.7",
"screenfull": "3.3.2",
"zone.js": "0.8.20"
},
"devDependencies": {
"@angular/cli": "1.7.3",
"@angular/compiler-cli": "5.2.9",
"@angular/language-service": "5.2.9",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.12.0",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
<h1>
{{title}}
</h1>
describe('App: Primer', () => {
it('should expect true to be true', () => {
expect(true).toBe(true);
});
});
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { RoutePartsService } from './services/route-parts/route-parts.service';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit{
private appTitle: string;
private pageTitle: string;
constructor(translate: TranslateService,private routePartsService: RoutePartsService,
private router: Router,
public title: Title,
private activeRoute: ActivatedRoute) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
ngOnInit() {
this.appTitle = 'BO-LIVEBILIANBET';
this.pageTitle = '';
this.changePageTitle();
}
changePageTitle() {
this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {debugger
var routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
if (!routeParts.length)
return this.title.setTitle(this.appTitle);
this.pageTitle = routeParts
.reverse()
.map((part) => part.title)
.reduce((partA, partI) => { return `${partA} > ${partI}` });
this.pageTitle += ` | ${this.appTitle}`;
this.title.setTitle(this.pageTitle);
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { AgmCoreModule } from '@agm/core';
import {
MatSidenavModule,
MatCardModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatSlideToggleModule,
MatSelectModule,
MatProgressBarModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import {BidiModule} from '@angular/cdk/bidi';
import {
MenuComponent,
HeaderComponent,
SidebarComponent,
AdminLayoutComponent,
AuthLayoutComponent,
AccordionAnchorDirective,
AccordionLinkDirective,
AccordionDirective} from './core';
import { AppRoutes } from './app.routing';
import { AppComponent } from './app.component';
import { BreadcrumbComponent } from './core/breadcrumb/breadcrumb.component';
import { RoutePartsService } from './services/route-parts/route-parts.service';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true,
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
};
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SidebarComponent,
MenuComponent,
AdminLayoutComponent,
AuthLayoutComponent,
AccordionAnchorDirective,
AccordionLinkDirective,
AccordionDirective,
BreadcrumbComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(AppRoutes),
FormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
LoadingBarRouterModule,
MatSidenavModule,
MatCardModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatListModule,
MatSlideToggleModule,
MatSelectModule,
MatProgressBarModule,
FlexLayoutModule,
BidiModule,
AgmCoreModule.forRoot({apiKey: 'AIzaSyB3HQ_Gk_XRt6KitPdiHQNGpVn0NDwQGMI'}),
PerfectScrollbarModule
],
providers: [
{
provide: PERFECT_SCROLLBAR_CONFIG,
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
},
RoutePartsService
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Routes } from '@angular/router';
import { AdminLayoutComponent, AuthLayoutComponent } from './core';
export const AppRoutes: Routes = [{
path: '',
component: AdminLayoutComponent,
children: [{
path: '',
loadChildren: './components/dashboard/dashboard.module#DashboardModule',
data: { title: '', breadcrumb: 'DASHBOARD'}
}, {
path: 'search',
loadChildren: './components/search/search.module#SearchModule',
data: { title: 'SEARCH', breadcrumb: 'SEARCH'}
}, {
path: 'manage-players',
loadChildren: './components/players/players.module#PlayersModule',
data: { title: 'MANAGE-PLAYERS', breadcrumb: 'MANAGE-PLAYERS'}
}, {
path: 'manage-affiliates',
loadChildren: './components/affiliates/affiliates.module#AffiliatesModule',
data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'MANAGE-AFFILIATES'}
}, {
path: 'manage-operators',
loadChildren: './components/operators/operators.module#OperatorsModule',
data: { title: 'MANAGE-OPERATORS', breadcrumb: 'MANAGE-OPERATORS'}
}, {
path: 'manage-payments',
loadChildren: './components/payments/payments.module#PaymentsModule',
data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'MANAGE-PAYMENTS'}
}]
}, {
path: '',
component: AuthLayoutComponent,
children: [{
path: 'session',
loadChildren: './components/session/session.module#SessionModule',
}]
}, {
path: '**',
redirectTo: 'session/404'
}];
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatInputModule, MatExpansionModule,MatDatepickerModule,MatNativeDateModule,MatSelectModule,MatButtonModule,MatButtonToggleModule } from '@angular/material';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { AffiliateRoutes } from './affiliates.routing';
import { ViewAffiliateComponent } from './view-affiliates/view-affiliate.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(AffiliateRoutes),
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule
],
declarations: [
ViewAffiliateComponent,
]
})
export class AffiliatesModule { }
import { Routes } from '@angular/router';
import { ViewAffiliateComponent } from './view-affiliates/view-affiliate.component';
export const AffiliateRoutes: Routes = [
{
path: 'view-affiliates',
component: ViewAffiliateComponent,
data: { title: 'MANAGE-AFFILIATES', breadcrumb: 'VIEW-AFFILIATES'}
}
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Search Filters</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field class="pr-1">
<mat-select placeholder="Status">
<mat-option>--</mat-option>
<mat-option value="start">Enable</mat-option>
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<button mat-raised-button color="primary">Manual Balance Adjustment </button><br>
<ngx-datatable
class="material"
[rows]="rows"
[columns]="[{name:'Username'},
{name:'Wallet'},
{name:'Rate'},
{name:'Affiliate Level'},
{name:'CreateTime'},
{name:'UpdateTime'},
{name:'Last Login Time'},
{name:'Last Login Ip'},
{name:'Register IP'},
{name:'Withdraw Status'},
{name:'Withdraw Review'},
{name:'Status'},
{name:'Action'}]"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10">
</ngx-datatable>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
templateUrl: './view-affiliate.component.html',
styleUrls: ['./view-affiliate.component.scss']
})
export class ViewAffiliateComponent {
}
<div fxLayout="row wrap">
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-teal">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>money</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>103</h2>
<p>Deposits</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-purple">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>money</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>230</h2>
<p>Withdrawals</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-indigo">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>person</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>870</h2>
<p>Players</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-red">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>person</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>323</h2>
<p>Affiliates</p>
</div>
</div>
</mat-card>
</div>
<div fxFlex.gt-sm="25" fxFlex.gt-xs="50" fxFlex="100">
<mat-card class="card-widget mat-indigo">
<div mat-card-widget>
<div mat-card-float-icon>
<mat-icon>person</mat-icon>
</div>
<div class="pl-0">
<h2 mat-card-widget-title>870</h2>
<p>Operators</p>
</div>
</div>
</mat-card>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
}
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutes } from './dashboard.routing';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(DashboardRoutes),
MatIconModule,
MatCardModule,
MatButtonModule,
MatListModule,
MatProgressBarModule,
MatMenuModule,
FlexLayoutModule
],
declarations: [ DashboardComponent ]
})
export class DashboardModule {}
import { Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
export const DashboardRoutes: Routes = [{
path: '',
component: DashboardComponent
}];
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DialogRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DialogRoutingModule } from './dialog-routing.module';
import { ManualBalanceAdjustmentComponent } from './manual-balance-adjustment/manual-balance-adjustment.component';
@NgModule({
imports: [
CommonModule,
DialogRoutingModule
],
declarations: [ManualBalanceAdjustmentComponent]
})
export class DialogModule { }
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-manual-balance-adjustment',
templateUrl: './manual-balance-adjustment.component.html',
styleUrls: ['./manual-balance-adjustment.component.scss']
})
export class ManualBalanceAdjustmentComponent implements OnInit {
ngOnInit() {
}
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<ManualBalanceAdjustmentComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
}
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatInputModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatSelectModule, MatButtonModule, MatButtonToggleModule, MatTabsModule,MatIconModule, MatCardModule } from '@angular/material';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { OperatorsRoutes } from './operators.routing';
import { ViewOperatorsComponent } from './view-operators/view-operator.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(OperatorsRoutes),
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule,
MatTabsModule,
MatIconModule,
MatCardModule
],
declarations: [
ViewOperatorsComponent,
]
})
export class OperatorsModule { }
import { Routes } from '@angular/router';
import { ViewOperatorsComponent } from './view-operators/view-operator.component';
export const OperatorsRoutes: Routes = [
{
path: 'view-operators',
component: ViewOperatorsComponent,
data: { title: 'MANAGE-PAYMENTS', breadcrumb: 'VIEW-OPERATORS'}
}
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Search Filters</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field class="pr-1">
<mat-select placeholder="Status">
<mat-option value="start">Enable</mat-option>
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div fxFlex.gt-xs="50" fxFlex="100" class="text-sm-right text-xs-left">
<span fxFlex></span>
<button mat-raised-button color="primary" class="mr-1">Add Operator </button>
</div>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="CreateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="UpdateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.updateTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Time">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Ip">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginIp}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Operator Role">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.operatorRole}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Modify" class="mibutton24" mat-icon-button mat-button-sm
(click)="edit(row.userId,row.userName,row.role,row.email,row.assignedNode)" [attr.aria-label]="edit"
color="primary">
<mat-icon class="mi16">edit</mat-icon>
</button>
<button id="lockedButton" matTooltip="Delete" class="mibutton24" mat-icon-button mat-button-sm
(click)="delete(row?.userId,row?.userName)" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">close</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
templateUrl: './view-operator.component.html',
styleUrls: ['./view-operator.component.scss']
})
export class ViewOperatorsComponent {
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-deposits',
templateUrl: './deposits.component.html',
styleUrls: ['./deposits.component.scss']
})
export class DepositsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepositsComponent } from './deposits/deposits.component';
import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
const routes: Routes = [
{
path: 'deposits',
component: DepositsComponent
}, {
path: 'withdrawals',
component: WithdrawalsComponent
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PaymentsRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaymentsRoutingModule } from './payments-routing.module';
import { DepositsComponent } from './deposits/deposits.component';
import { WithdrawalsComponent } from './withdrawals/withdrawals.component';
@NgModule({
imports: [
CommonModule,
PaymentsRoutingModule
],
declarations: [DepositsComponent, WithdrawalsComponent]
})
export class PaymentsModule { }
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-withdrawals',
templateUrl: './withdrawals.component.html',
styleUrls: ['./withdrawals.component.scss']
})
export class WithdrawalsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<h1 matDialogTitle>Delete Dailog</h1>
<div mat-dialog-content>
<!-- <p>Delete: <b>{{ data.userName }}</b> ?</p> -->
<p>Delete: <b>Test User</b> ?</p>
</div>
<div mat-dialog-actions>
<button type="button" mat-raised-button color="primary" (click)="dialogRef.close(true)"
(click)="confirmDelete()">Delete</button>
&nbsp;
<span fxFlex></span>
<button mat-raised-button color="accent" (click)="dialogRef.close(false)">No Thanks!</button>
</div>
\ No newline at end of file
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-delete-dialog',
templateUrl: './delete-dialog.component.html',
styleUrls: ['./delete-dialog.component.scss']
})
export class DeleteDialogComponent implements OnInit {
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<DeleteDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
ngOnInit() {
}
}
<mat-toolbar color="primary">
User Details
</mat-toolbar>
<div fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex.gt-sm="55" fxFlex="100">
<mat-card class="mat-card-top">
<mat-tab-group>
<mat-tab>
<ng-template matTabLabel>User Info</ng-template>
<mat-card-content>
<form fxLayout="column">
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="">
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Last name">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="user name">
</mat-form-field>
</div>
</div>
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-sm="50" class="pr-1">
<div class="pb-1">
<mat-form-field class="mb-1">
<input matInput placeholder="Email address">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Email address">
</mat-form-field>
<mat-form-field class="mb-1">
<mat-select placeholder="Timezone">
<mat-option value="Hawaii">(GMT-10:00) Hawaii</mat-option>
<mat-option value="Alaska">(GMT-09:00) Alaska</mat-option>
<mat-option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</mat-option>
<mat-option value="Arizona">(GMT-07:00) Arizona</mat-option>
<mat-option value="Mountain Time (US & Canada)">(GMT-07:00) Mountain Time (US & Canada)
</mat-option>
<mat-option value="Central Time (US & Canada)" selected="selected">(GMT-06:00) Central Time (US &
Canada)</mat-option>
<mat-option value="Eastern Time (US & Canada)">(GMT-05:00) Eastern Time (US & Canada)</mat-option>
<mat-option value="Indiana (East)">(GMT-05:00) Indiana (East)</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Username">
</mat-form-field>
</div>
</div>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button class="shadow-none">Cancel</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Reset Password</ng-template>
<mat-card-content>
<form fxLayout="column">
<mat-form-field class="mb-1">
<input matInput placeholder="New password" type="password">
</mat-form-field>
<mat-form-field class="mb-1">
<input matInput placeholder="Confirm new password" type="password">
</mat-form-field>
<hr>
<mat-card-actions>
<button mat-raised-button color="primary">Update</button>
<button mat-raised-button class="shadow-none">Cancel</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Balances</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Payment Summary</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Bank A/C Summary</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Notes</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Level</ng-template>
</mat-tab>
<mat-tab>
<ng-template matTabLabel>Document</ng-template>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>
</div>
\ No newline at end of file
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-edit-dialog',
templateUrl: './edit-dialog.component.html',
styleUrls: ['./edit-dialog.component.scss']
})
export class EditDialogComponent implements OnInit {
private _dimesionToggle = false;
constructor(
public dialogRef: MatDialogRef<EditDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
togglePosition(): void {
this._dimesionToggle = !this._dimesionToggle;
if (this._dimesionToggle) {
this.dialogRef
.updateSize('500px', '500px')
.updatePosition({ top: '25px', left: '25px' });
} else {
this.dialogRef
.updateSize()
.updatePosition();
}
}
ngOnInit() {
}
}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatTabsModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatIconModule, MatInputModule, MatNativeDateModule, MatProgressBarModule, MatRadioModule, MatSelectModule, MatToolbarModule, MatFormFieldModule } from '@angular/material';
import { RouterModule } from '@angular/router';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { DeleteDialogComponent } from './delete-dialog/delete-dialog.component';
import { EditDialogComponent } from './edit-dialog/edit-dialog.component';
import { PlayersRoutes } from './players.routing';
import { ViewPlayersComponent } from './view-players/view-player.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(PlayersRoutes),
MatCardModule,
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule,
MatProgressBarModule,
MatIconModule,
MatRadioModule,
MatToolbarModule,
MatDialogModule,
FormsModule,
MatFormFieldModule,
MatTabsModule,
MatCardModule,
MatIconModule,
MatButtonModule,
MatToolbarModule,
MatTabsModule,
MatSelectModule,
MatProgressBarModule,
],
declarations: [
ViewPlayersComponent,
DeleteDialogComponent,
EditDialogComponent
],
entryComponents: [
DeleteDialogComponent,
EditDialogComponent
],
})
export class PlayersModule { }
import { Routes } from '@angular/router';
import { ViewPlayersComponent } from './view-players/view-player.component';
export const PlayersRoutes: Routes = [
{
path: 'view-players',
component: ViewPlayersComponent,
data: { title: 'MANAGE-PLAYERS', breadcrumb: 'VIEW-PLAYERS'}
},
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Search Filters</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Affiliate Username">
</mat-form-field>
<mat-form-field class="pr-1">
<mat-select placeholder="Status">
<mat-option>--</mat-option>
<mat-option value="start">Enable</mat-option>
<mat-option value="end">Disable</mat-option>
</mat-select>
</mat-form-field>
<br>
<button mat-raised-button color="primary">Search</button>
<button mat-button>Clean</button>
</mat-expansion-panel>
<br>
<div fxLayout="row" fxLayoutWrap="wrap">
<div fxFlex="100" fxFlex.gt-sm="100" fxFlex.sm="100">
<div class="pb-1">
<span fxFlex></span><button mat-raised-button color="primary" (click)="openManualDepositPopUp()">Manual Balance
Adjustment </button>
</div>
<div class="mat-box-shadow">
<ngx-datatable class="material bg-white" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
[rowHeight]="50" [limit]="10" [rows]="dataSource" [columns]="columns">
<ngx-datatable-column name="Username">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.userName }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Wallet">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.wallet }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Level">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.level }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="CreateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.createTime }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="UpdateTime">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.updateTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Time">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginTime}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Last Login Ip">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.lastLoginIp}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Register IP">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.registerIP}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Withdraw Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.withdrawStatus }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Withdraw Review">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.withdrawReview}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Status">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row?.status }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="Action">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<button id="modifyButton" matTooltip="Modify" class="mibutton24" mat-icon-button mat-button-sm
(click)="openEditDialog()" [attr.aria-label]="edit" color="primary">
<mat-icon class="mi16">edit</mat-icon>
</button>
<button id="lockedButton" matTooltip="Delete" class="mibutton24" mat-icon-button mat-button-sm
(click)="openDeleteDialog()" [attr.aria-label]="delete" color="warn">
<mat-icon class="mi16">close</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
</div>
\ No newline at end of file
import { DOCUMENT } from '@angular/common';
import { Component, Inject, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';
import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
import { EditDialogComponent } from '../edit-dialog/edit-dialog.component';
const defaultDialogConfig = new MatDialogConfig();
@Component({
templateUrl: './view-player.component.html',
styleUrls: ['./view-player.component.scss'],
})
export class ViewPlayersComponent {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
dialogRef: MatDialogRef<any> | null;
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
config = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '',
height: '',
minWidth: '',
minHeight: '',
maxWidth: defaultDialogConfig.maxWidth,
maxHeight: '',
position: {
top: '',
bottom: '',
left: '',
right: ''
},
};
numTemplateOpens = 0;
@ViewChild(TemplateRef) template: TemplateRef<any>;
constructor(public dialog: MatDialog, @Inject(DOCUMENT) doc: any) {
dialog.afterOpen.subscribe(() => {
if (!doc.body.classList.contains('no-scroll')) {
doc.body.classList.add('no-scroll');
}
});
dialog.afterAllClosed.subscribe(() => {
doc.body.classList.remove('no-scroll');
});
}
openEditDialog() {
this.dialogRef = this.dialog.open(EditDialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
openDeleteDialog() {
this.dialogRef = this.dialog.open(DeleteDialogComponent, this.config);
this.dialogRef.beforeClose().subscribe((result: string) => {
this.lastBeforeCloseResult = result;
});
this.dialogRef.afterClosed().subscribe((result: string) => {
this.lastAfterClosedResult = result;
this.dialogRef = null;
});
}
}
export interface DataElement {
userName: string;
wallet: number
level: number
createTime: string
updateTime: string
lastLoginTime: string
lastLoginIp: string
registerIP: string
withdrawStatus: number
withdrawReview: number
status: number
}
const ELEMENT_DATA: DataElement[] = [
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
{
userName: 'test',
wallet: 10.00,
level: 1,
createTime: '10-12-1992',
updateTime: '10-12-1992',
lastLoginTime: '10-12-1992',
lastLoginIp: '10-12-1992',
registerIP: "192.168.0.1",
withdrawStatus: 0,
withdrawReview: 0,
status: 0,
},
];
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title> Operator Activity</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field class="pr-1">
<mat-select placeholder="Action Type">
<mat-option value="Login">Login</mat-option>
<mat-option value="Change-Password">Change-Password</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Remark">
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<ngx-datatable class="material" [rows]="rows" [columns]="[
{name:'Username'},
{name:'Action Type'},
{name:'Remote Ip'},
{name:'CreateTime'},
{name:'Remark'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-operation-log',
templateUrl: './operation-log.component.html',
styleUrls: ['./operation-log.component.scss']
})
export class OperationLogComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {OperationLogComponent} from './operation-log/operation-log.component';
import {TransferHistoryComponent} from './transfer-history/transfer-history.component';
const routes: Routes = [
{
path:'operation-log',
component:OperationLogComponent,
data: { title: 'SEARCH', breadcrumb: 'OPERATION-LOG'}
},{
path:'transfer-history',
component:TransferHistoryComponent,
data: { title: 'SEARCH', breadcrumb: 'TRANSFER-HISTORY'}
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SearchRoutingModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { MatInputModule, MatExpansionModule,MatDatepickerModule,MatNativeDateModule,MatSelectModule,MatButtonModule,MatButtonToggleModule } from '@angular/material';
import { SearchRoutingModule } from './search-routing.module';
import { TransferHistoryComponent } from './transfer-history/transfer-history.component';
import { OperationLogComponent } from './operation-log/operation-log.component';
@NgModule({
imports: [
CommonModule,
SearchRoutingModule,
MatInputModule,
MatExpansionModule,
MatDatepickerModule,
NgxDatatableModule,
MatNativeDateModule,
MatSelectModule,
MatButtonModule,
MatButtonToggleModule
],
declarations: [TransferHistoryComponent, OperationLogComponent]
})
export class SearchModule { }
<mat-expansion-panel>
<mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
<mat-panel-title>Transfer History</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
</ng-template>
<mat-form-field class="pr-1">
<mat-select placeholder="Transaction Type">
<mat-option value="MW > PT">MW > PT</mat-option>
<mat-option value="PT > MW">PT > MW</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
<mat-datepicker #startDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date" [disabled]="inputDisabled">
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
<mat-datepicker #endDate [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Username">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Remark">
</mat-form-field>
<button mat-raised-button color="primary">Search</button>
</mat-expansion-panel>
<ngx-datatable class="material" [rows]="rows" [columns]="[
{name:'Transfer ID'},
{name:'Username'},
{name:'Transaction Type'},
{name:'Amount'},
{name:'Before'},
{name:'After'},
{name:'CreateTime'},
{name:'Remark'}]" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]="10">
</ngx-datatable>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-transfer-history',
templateUrl: './transfer-history.component.html',
styleUrls: ['./transfer-history.component.scss']
})
export class TransferHistoryComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="session">
<div class="session-content text-xs-center">
<div>
<div class="error-title">500</div>
<div class="error-subtitle">We have an internal server error!</div>
<p class="mat-text-muted">Sorry, but the page you were trying to view does not exist. <a href="javascript:;">Report this error?</a></p>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-error',
templateUrl: './error.component.html',
styleUrls: ['./error.component.scss']
})
export class ErrorComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div class="session mat-indigo">
<div class="session-content">
<div class="session-wrapper">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Enter your email and we'll send you instructions on how to reset your password.</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
</mat-form-field>
<small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched" class="mat-text-warn">You must include an email address.</small>
<small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</small>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Login</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/signin']">Access your account</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signup']">Sign up for a new account</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
@Component({
selector: 'app-forgot',
templateUrl: './forgot.component.html',
styleUrls: ['./forgot.component.scss']
})
export class ForgotComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group ( {
email: [ null, Validators.compose( [ Validators.required, CustomValidators.email ] ) ]
} );
}
onSubmit() {
this.router.navigate ( ['/session/signin'] );
}
}
<div class="session mat-indigo">
<div class="session-content">
<div class="lockscreen-wrapper text-xs-center">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="lockscreen-avatar">
<img src="assets/images/avatar.jpg" class="radius-round" alt="user" title="user"/>
</div>
<p class="center-block mt-1">David Miller</p>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Username" [formControl]="form.controls['uname']">
</mat-form-field>
<small *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched" class="mat-text-warn">Username is required.</small>
</div>
<div> <button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Unlock</button></div>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-lockscreen',
templateUrl: './lockscreen.component.html',
styleUrls: ['./lockscreen.component.scss']
})
export class LockscreenComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group ( {
uname: [ null, Validators.compose( [ Validators.required ] ) ]
} );
}
onSubmit() {
this.router.navigate ( ['/dashboard'] );
}
}
<div class="session">
<div class="session-content text-xs-center">
<div>
<div class="error-title">404</div>
<div class="error-subtitle">Page not found!</div>
<p class="mat-text-muted">Sorry, but the page you were trying to view does not exist. <a href="javascript:;">Report this error?</a></p>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-not-found',
templateUrl: './not-found.component.html',
styleUrls: ['./not-found.component.scss']
})
export class NotFoundComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatCardModule, MatInputModule, MatCheckboxModule, MatButtonModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { SessionRoutes } from './session.routing';
import { NotFoundComponent } from './not-found/not-found.component';
import { ErrorComponent } from './error/error.component';
import { ForgotComponent } from './forgot/forgot.component';
import { LockscreenComponent } from './lockscreen/lockscreen.component';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(SessionRoutes),
MatIconModule,
MatCardModule,
MatInputModule,
MatCheckboxModule,
MatButtonModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
NotFoundComponent,
ErrorComponent,
ForgotComponent,
LockscreenComponent,
SigninComponent,
SignupComponent
]
})
export class SessionModule {}
import { Routes } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';
import { ErrorComponent } from './error/error.component';
import { ForgotComponent } from './forgot/forgot.component';
import { LockscreenComponent } from './lockscreen/lockscreen.component';
import { SigninComponent } from './signin/signin.component';
import { SignupComponent } from './signup/signup.component';
export const SessionRoutes: Routes = [
{
path: '',
children: [{
path: '404',
component: NotFoundComponent
}, {
path: 'error',
component: ErrorComponent
}, {
path: 'forgot',
component: ForgotComponent
}, {
path: 'lockscreen',
component: LockscreenComponent
}, {
path: 'signin',
component: SigninComponent
}, {
path: 'signup',
component: SignupComponent
}]
}
];
<div class="session mat-indigo">
<div class="session-content">
<div class="session-wrapper">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Sign in with your app id to continue.</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Username" [formControl]="form.controls['uname']">
</mat-form-field>
<small *ngIf="form.controls['uname'].hasError('required') && form.controls['uname'].touched" class="mat-text-warn">Username is required.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput type="password" placeholder="Password" [formControl]="form.controls['password']">
</mat-form-field>
<small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">Password is required.</small>
</div>
<div class="pb-1">
<mat-checkbox>Stay logged in</mat-checkbox>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!form.valid">Login</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/forgot']">Forgot password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signup']">Sign up for a new account.</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-signin',
templateUrl: './signin.component.html',
styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group ( {
uname: [null , Validators.compose ( [ Validators.required ] )] , password: [null , Validators.compose ( [ Validators.required ] )]
} );
}
onSubmit() {
this.router.navigate ( [ '/dashboard' ] );
}
}
<div class="session mat-indigo">
<div class="session-content">
<div class="session-wrapper">
<mat-card>
<mat-card-content>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="text-xs-center pb-1">
<img src="assets/images/logo-dark.svg" alt=""/>
<p class="mat-text-muted">Create an app id to continue.</p>
</div>
<div fxLayout="column" fxLayoutAlign="space-around">
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Email address" type="email" [formControl]="form.controls['email']">
</mat-form-field>
<small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched" class="mat-text-warn">You must include an email address.</small>
<small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched" class="mat-text-warn">You must include a valid email address.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput type="password" placeholder="Password" [formControl]="form.controls['password']">
</mat-form-field>
<small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched" class="mat-text-warn">You must include password.</small>
</div>
<div class="pb-1">
<mat-form-field style="width: 100%">
<input matInput placeholder="Confirm Password" [formControl]="form.controls['confirmPassword']" type="password">
</mat-form-field>
<small *ngIf="form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched" class="mat-text-warn">You must include confirm password.</small>
<small *ngIf="form.controls['confirmPassword'].errors?.equalTo" class="mat-text-warn">Passwords do not math.</small>
</div>
<div class="pb-1">
<mat-checkbox>I have read and agree to the terms of service.</mat-checkbox>
</div>
<button mat-raised-button color="primary" class="btn-block" type="submit" [disabled]="!form.valid">Create your account</button>
</div>
<div class="pt-1 pb-1 text-xs-center">
<a [routerLink]="['/session/forgot']">Forgot password?</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a [routerLink]="['/session/signin']">Access your account.</a>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
const password = new FormControl('', Validators.required);
const confirmPassword = new FormControl('', CustomValidators.equalTo(password));
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
public form: FormGroup;
constructor(private fb: FormBuilder, private router: Router) {}
ngOnInit() {
this.form = this.fb.group( {
email: [null, Validators.compose([Validators.required, CustomValidators.email])],
password: password,
confirmPassword: confirmPassword
} );
}
onSubmit() {
this.router.navigate( ['/dashboard'] );
}
}
<div class="app mat-typography" [dir]="options.dir"
[ngClass]="{'app-dark': options.dark, 'boxed': options.boxed, 'collapsed-sidebar': options.collapsed, 'compact-sidebar': options.compact, 'side-panel-opened': sidePanelOpened, 'side-panel-closed': !sidePanelOpened }">
<ngx-loading-bar color="#009688"></ngx-loading-bar>
<app-header (toggleSidenav)="sidemenu.toggle()" (toggleNotificationSidenav)="notifications.toggle()"></app-header>
<mat-sidenav-container class="app-inner">
<mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'"
[opened]="!isOver()" (open)="sidePanelOpened = true" (close)="sidePanelOpened = false"
(mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()" [perfectScrollbar]="config"
[disabled]="mediaMatcher.matches">
<app-sidebar (click)="updatePS()"></app-sidebar>
</mat-sidenav>
<div [perfectScrollbar]="config" [disabled]="mediaMatcher.matches">
<app-breadcrumb #breadcrumb></app-breadcrumb><br>
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
</div>
\ No newline at end of file
import { Component, ElementRef, NgZone, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
import { TranslateService } from '@ngx-translate/core';
import { PerfectScrollbarConfigInterface, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
const SMALL_WIDTH_BREAKPOINT = 960;
@Component({
selector: 'app-layout',
templateUrl: './admin-layout.component.html'
})
export class AdminLayoutComponent implements OnInit, OnDestroy {
private _router: Subscription;
mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
url: string;
sidePanelOpened;
options = {
collapsed: false,
compact: false,
boxed: false,
dark: false,
dir: 'ltr'
};
@ViewChild('sidemenu') sidemenu;
@ViewChild(PerfectScrollbarDirective) directiveScroll: PerfectScrollbarDirective;
public config: PerfectScrollbarConfigInterface = {};
constructor(
private _element: ElementRef,
private router: Router,
zone: NgZone) {
this.mediaMatcher.addListener(mql => zone.run(() => {
this.mediaMatcher = mql;
}));
}
ngOnInit(): void {
this.url = this.router.url;
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
document.querySelector('.app-inner > .mat-drawer-content > div').scrollTop = 0;
this.url = event.url;
this.runOnRouteChange();
});
}
ngOnDestroy(): void {
this._router.unsubscribe();
}
runOnRouteChange(): void {
if (this.isOver()) {
this.sidemenu.close();
}
this.updatePS();
}
receiveOptions($event): void {
this.options = $event;
}
isOver(): boolean {
if (this.url === '/apps/messages' ||
this.url === '/apps/calendar' ||
this.url === '/apps/media' ||
this.url === '/maps/leaflet' ||
this.url === '/taskboard') {
return true;
} else {
return this.mediaMatcher.matches;
}
}
menuMouseOver(): void {
if (this.mediaMatcher.matches && this.options.collapsed) {
this.sidemenu.mode = 'over';
}
}
menuMouseOut(): void {
if (this.mediaMatcher.matches && this.options.collapsed) {
this.sidemenu.mode = 'side';
}
}
updatePS(): void {
if (!this.mediaMatcher.matches && !this.options.compact) {
setTimeout(() => {
this.directiveScroll.update();
}, 350);
}
}
}
<mat-sidenav-container>
<router-outlet></router-outlet>
</mat-sidenav-container>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-layout',
styles: [':host .mat-drawer-content {padding: 0;} .mat-drawer-container {z-index: 1000}'],
templateUrl: './auth-layout.component.html'
})
export class AuthLayoutComponent {}
.breadcrumb-bar {
position: relative;
width: 100%;
height: 40px !important;
min-height: 40px !important;
padding: 0 .666rem;
float: left;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.08), 0 2px 2px 0 rgba(0,0,0,.05), 0 1px 5px 0 rgba(0,0,0,.05);
z-index: 9999;
}
.breadcrumb {
margin: 0;
padding: 0;
}
.breadcrumb li {
list-style: none;
float: left;
line-height: 40px;
}
.breadcrumb li:not(:first-child):before {
content: "/\A0";
padding: 0 8px;
}
.breadcrumb li a {
font-weight: 400;
font-size: 1rem;
}
\ No newline at end of file
<div class="breadcrumb-bar" *ngIf="isEnabled">
<ul class="breadcrumb">
<li *ngFor="let part of routeParts">{{part.breadcrumb}}</li>
</ul>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
import { RoutePartsService } from '../../services/route-parts/route-parts.service';
@Component({
selector: 'app-breadcrumb',
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.css']
})
export class BreadcrumbComponent implements OnInit {
routeParts:any[];
public isEnabled: boolean = true;
constructor(
private router: Router,
private routePartsService: RoutePartsService,
private activeRoute: ActivatedRoute
) {
debugger
this.router.events.filter(event => event instanceof NavigationEnd).subscribe((routeChange) => {
this.routeParts = this.routePartsService.generateRouteParts(this.activeRoute.snapshot);
// generate url from parts
this.routeParts.reverse().map((item, i) => {
item.breadcrumb = this.parseText(item);
item.urlSegments.forEach((urlSegment, j) => {
if(j === 0)
return item.url = `${urlSegment.path}`;
item.url += `/${urlSegment.path}`
});
if(i === 0) {
debugger
return item;
}
// prepend previous part to current part
item.url = `${this.routeParts[i - 1].url}/${item.url}`;
return item;
});
});
}
ngOnInit() {}
parseText(part) {
part.breadcrumb = part.breadcrumb.replace(/{{([^{}]*)}}/g, function (a, b) {
var r = part.params[b];
return typeof r === 'string' ? r : a;
});
return part.breadcrumb;
}
}
<mat-toolbar class="main-header" color="primary">
<button (click)="toggleSidenav.emit()" mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<div class="branding">
<div class="logo"></div>
</div>
<div class="search-bar" fxFlex>
</div>
<button [matMenuTriggerFor]="user" mat-icon-button class="ml-xs">
<mat-icon>person</mat-icon>
</button>
<mat-menu #user="matMenu" x-position="before">
<button mat-menu-item>
<mat-icon>account_box</mat-icon>
Profile
</button>
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>
Sign Out
</button>
</mat-menu>
</mat-toolbar>
\ No newline at end of file
import { Component, EventEmitter, Output } from '@angular/core';
import * as screenfull from 'screenfull';
@Component({
selector: 'app-header',
templateUrl: './header.component.html'
})
export class HeaderComponent {
@Output() toggleSidenav = new EventEmitter<void>();
@Output() toggleNotificationSidenav = new EventEmitter<void>();
constructor() {
}
fullScreenToggle(): void {
if (screenfull.enabled) {
screenfull.toggle();
}
}
}
export * from './admin-layout/admin-layout.component';
export * from './auth-layout/auth-layout.component';
export * from './header/header.component';
export * from './sidebar/sidebar.component';
export * from './menu/menu.component';
export * from './menu-accordion';
import { Directive, OnInit, AfterViewInit, AfterContentChecked } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
import { AccordionLinkDirective } from './accordionlink.directive';
@Directive({
selector: '[appAccordion]',
})
export class AccordionDirective implements AfterContentChecked {
protected navlinks: Array<AccordionLinkDirective> = [];
closeOtherLinks(openLink: AccordionLinkDirective): void {
this.navlinks.forEach((link: AccordionLinkDirective) => {
if (link !== openLink) {
link.open = false;
}
});
}
addLink(link: AccordionLinkDirective): void {
this.navlinks.push(link);
}
removeGroup(link: AccordionLinkDirective): void {
const index = this.navlinks.indexOf(link);
if (index !== -1) {
this.navlinks.splice(index, 1);
}
}
checkOpenLinks() {
this.navlinks.forEach((link: AccordionLinkDirective) => {
if (link.group) {
const routeUrl = this.router.url;
const currentUrl = routeUrl.split('/');
if (currentUrl.indexOf( link.group ) > 0) {
link.open = true;
this.closeOtherLinks(link);
}
}
});
}
ngAfterContentChecked(): void {
this.router.events.filter(event => event instanceof NavigationEnd).subscribe(e => this.checkOpenLinks());
}
constructor( private router: Router) {
setTimeout(() => this.checkOpenLinks());
}
}
import { Directive, HostListener, Inject } from '@angular/core';
import { AccordionLinkDirective } from './accordionlink.directive';
@Directive({
selector: '[appAccordionToggle]'
})
export class AccordionAnchorDirective {
protected navlink: AccordionLinkDirective;
constructor( @Inject(AccordionLinkDirective) navlink: AccordionLinkDirective) {
this.navlink = navlink;
}
@HostListener('click', ['$event'])
onClick(e: any) {
this.navlink.toggle();
}
}
import {
Directive, HostBinding, Inject, Input, OnInit, OnDestroy
} from '@angular/core';
import { AccordionDirective } from './accordion.directive';
@Directive({
selector: '[appAccordionLink]'
})
export class AccordionLinkDirective implements OnInit, OnDestroy {
@Input() public group: any;
@HostBinding('class.open')
@Input()
get open(): boolean {
return this._open;
}
set open(value: boolean) {
this._open = value;
if (value) {
this.nav.closeOtherLinks(this);
}
}
protected _open: boolean;
protected nav: AccordionDirective;
constructor(@Inject(AccordionDirective) nav: AccordionDirective) {
this.nav = nav;
}
ngOnInit(): any {
this.nav.addLink(this);
}
ngOnDestroy(): any {
this.nav.removeGroup(this);
}
toggle(): any {
this.open = !this.open;
}
}
export * from './accordionanchor.directive';
export * from './accordionlink.directive';
export * from './accordion.directive';
import { Component, NgZone, ViewChild, Output, EventEmitter } from '@angular/core';
import { MenuService } from './menu.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-menu',
template: `
<mat-nav-list appAccordion class="navigation">
<mat-list-item appAccordionLink *ngFor="let menuitem of menuService.getAll()" group="{{menuitem.state}}">
<a appAccordionToggle class="relative" [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="javascript:;" *ngIf="menuitem.type === 'sub'">
<mat-icon>{{ menuitem.icon }}</mat-icon>
<span>{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
</a>
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative">{{ childitem.name | translate }}</a>
</mat-list-item>
</mat-nav-list>
</mat-list-item>
</mat-nav-list>`,
providers: [MenuService]
})
export class MenuComponent {
currentLang = 'en';
constructor(
public menuService: MenuService,
public translate: TranslateService) {
}
addMenuItem(): void {
this.menuService.add({
state: 'menu',
name: 'MENU',
type: 'sub',
icon: 'trending_flat',
children: [
{state: 'menu', name: 'MENU'},
{state: 'timeline', name: 'MENU'}
]
});
}
}
import { Injectable } from '@angular/core';
export interface BadgeItem {
type: string;
value: string;
}
export interface ChildrenItems {
state: string;
name: string;
type?: string;
}
export interface Menu {
state: string;
name: string;
type: string;
icon: string;
badge?: BadgeItem[];
children?: ChildrenItems[];
}
const MENUITEMS = [
{
state: '/',
name: 'Dashboard',
type: 'link',
icon: 'explore'
},
{
state: 'search',
name: 'Search',
type: 'sub',
icon: 'search',
children: [{ state: 'transfer-history', name: 'Transfer History' },
{ state: 'operation-log', name: 'Operation Logs' }]
},
{
state: 'manage-players',
name: 'Manage Players',
type: 'sub',
icon: 'perm_identity',
children: [{ state: 'view-players', name: 'View Players' },
]
},
{
state: 'manage-affiliates',
name: 'Manage Affiliates',
type: 'sub',
icon: 'perm_identity',
children: [{ state: 'view-affiliates', name: 'View Affiliates' }]
},
{
state: 'manage-operators',
name: 'Manage Operators',
type: 'sub',
icon: 'perm_identity',
children: [{ state: 'view-operators', name: 'View Operators' }]
},
{
state: 'manage-payments',
name: 'Manage Payments',
type: 'sub',
icon: 'payment',
children: [{ state: 'deposits', name: 'Deposits' },
{ state: 'withdrawals', name: 'Withdrawals' }]
},
];
@Injectable()
export class MenuService {
getAll(): Menu[] {
return MENUITEMS;
}
add(menu: Menu) {
MENUITEMS.push(menu);
}
}
<app-menu></app-menu>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})
export class SidebarComponent {
constructor() {}
}
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Params, Router } from "@angular/router";
interface IRoutePart {
title: string,
breadcrumb: string,
params?: Params,
url: string,
urlSegments: any[]
}
@Injectable()
export class RoutePartsService {
public routeParts: IRoutePart[];
constructor(private router: Router) {}
ngOnInit() {
}
generateRouteParts(snapshot: ActivatedRouteSnapshot): IRoutePart[] {debugger
var routeParts = <IRoutePart[]>[];
if (snapshot) {
if (snapshot.firstChild) {
routeParts = routeParts.concat(this.generateRouteParts(snapshot.firstChild));
}
if (snapshot.data['title'] && snapshot.url.length) {
routeParts.push({
title: snapshot.data['title'],
breadcrumb: snapshot.data['breadcrumb'],
url: snapshot.url[0].path,
urlSegments: snapshot.url,
params: snapshot.params
});
}
}
return routeParts;
}
}
\ No newline at end of file
File mode changed
This diff could not be displayed because it is too large.
[
{
"project": "UI Prototyping",
"date": 1427207139000,
"progress": 5
},
{
"project": "Design",
"date": 1427412725000,
"progress": 46
},
{
"project": "Development",
"date": 1427546580000,
"progress": 23
},
{
"project": "Testing and Delivery",
"date": 1427891640000,
"progress": 67
},
{
"project": "Ongoing Maintanance",
"date": 1428830580000,
"progress": 12
}
]
This diff could not be displayed because it is too large.
No preview for this file type
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="data-table" horiz-adv-x="512">
<font-face font-family="data-table" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph glyph-name="filter" unicode="&#98;" d="M213 128l86 0 0 43-86 0z m-149 256l0-43 384 0 0 43z m64-149l256 0 0 42-256 0z"/>
<glyph glyph-name="collapse" unicode="&#97;" d="M158 115l30-30 68 68 68-68 30 30-98 98z m196 282l-30 30-68-68-68 68-30-30 98-98z"/>
<glyph glyph-name="expand" unicode="&#99;" d="M256 388l68-68 30 30-98 98-98-98 30-30z m0-264l-68 68-30-30 98-98 98 98-30 30z"/>
<glyph glyph-name="close" unicode="&#100;" d="M405 375l-30 30-119-119-119 119-30-30 119-119-119-119 30-30 119 119 119-119 30 30-119 119z"/>
<glyph glyph-name="up" unicode="&#101;" d="M256 341l-128-128 30-30 98 98 98-98 30 30z"/>
<glyph glyph-name="down" unicode="&#102;" d="M354 329l-98-98-98 98-30-30 128-128 128 128z"/>
<glyph glyph-name="sort" unicode="&#103;" d="M64 128l128 0 0 43-128 0z m0 256l0-43 384 0 0 43z m0-149l256 0 0 42-256 0z"/>
<glyph glyph-name="done" unicode="&#104;" d="M192 166l-90 90-29-30 119-119 256 256-30 30z"/>
<glyph glyph-name="done-all" unicode="&#105;" d="M384 363l-30 30-135-136 30-30z m90 30l-225-226-89 89-31-30 120-119 256 256z m-483-167l137-119 30 30-119 119-30-30z"/>
<glyph glyph-name="search" unicode="&#106;" d="M192 128c46 0 87 16 120 42 0 0 164-164 164-164 4-4 9-6 15-6 5 0 11 2 15 6 8 9 8 22 0 30 0 0-164 165-164 165 26 33 42 74 42 119 0 106-86 192-192 192-106 0-192-86-192-192 0-106 86-192 192-192z m0 341c82 0 149-67 149-149 0-82-67-149-149-149-82 0-149 67-149 149 0 82 67 149 149 149z"/>
<glyph glyph-name="pin" unicode="&#107;" d="M224 160l32-160 32 160c-10-1-21-2-32-2-10 0-22 1-32 2z m127 149c-16 9-31 30-31 43l0 32c0 11 6 19 12 26 7 6 12 14 12 22 0 27-31 48-88 48-57 0-87-21-87-48 0-8 4-16 12-22 5-7 11-15 11-26l0-32c0-13-14-34-31-43-19-9-35-27-35-44 0-37 51-74 130-74 80 0 130 37 130 74 0 17-15 34-35 44z"/>
<glyph glyph-name="add" unicode="&#109;" d="M405 235l-128 0 0-128-42 0 0 128-128 0 0 42 128 0 0 128 42 0 0-128 128 0z"/>
<glyph glyph-name="left" unicode="&#111;" d="M329 169l-98 98 98 98-30 30-128-128 128-128z"/>
<glyph glyph-name="right" unicode="&#112;" d="M183 163l98 98-98 98 30 30 128-128-128-128z"/>
<glyph glyph-name="skip" unicode="&#113;" d="M128 128l181 128-181 128z m213 256l0-256 43 0 0 256z"/>
<glyph glyph-name="prev" unicode="&#114;" d="M128 384l43 0 0-256-43 0z m75-128l181-128 0 256z"/>
</font></defs></svg>
No preview for this file type
No preview for this file type
@charset "UTF-8";
@font-face {
font-family: "data-table";
src:url("data-table.eot");
src:url("data-table.eot?#iefix") format("embedded-opentype"),
url("data-table.woff") format("woff"),
url("data-table.ttf") format("truetype"),
url("data-table.svg#data-table") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "data-table" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="datatable-icon-"]:before,
[class*=" datatable-icon-"]:before {
font-family: "data-table" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.datatable-icon-filter:before {
content: "\62";
}
.datatable-icon-collapse:before {
content: "\61";
}
.datatable-icon-expand:before {
content: "\63";
}
.datatable-icon-close:before {
content: "\64";
}
.datatable-icon-up:before {
content: "\65";
}
.datatable-icon-down:before {
content: "\66";
}
.datatable-icon-sort:before {
content: "\67";
}
.datatable-icon-done:before {
content: "\68";
}
.datatable-icon-done-all:before {
content: "\69";
}
.datatable-icon-search:before {
content: "\6a";
}
.datatable-icon-pin:before {
content: "\6b";
}
.datatable-icon-add:before {
content: "\6d";
}
.datatable-icon-left:before {
content: "\6f";
}
.datatable-icon-right:before {
content: "\70";
}
.datatable-icon-skip:before {
content: "\71";
}
.datatable-icon-prev:before {
content: "\72";
}
/* HELPER CLASS
* -------------------------- */
/* FA based classes */
/*! Modified from font-awesome helper CSS classes - PIXEDEN
* Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (CSS: MIT License)
*/
/* makes the font 33% larger relative to the icon container */
.pe-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.pe-2x {
font-size: 2em;
}
.pe-3x {
font-size: 3em;
}
.pe-4x {
font-size: 4em;
}
.pe-5x {
font-size: 5em;
}
.pe-fw {
width: 1.2857142857142858em;
text-align: center;
}
.pe-ul {
padding-left: 0;
margin-left: 2.142857142857143em;
list-style-type: none;
}
.pe-ul > li {
position: relative;
}
.pe-li {
position: absolute;
left: -2.142857142857143em;
width: 2.142857142857143em;
top: 0.14285714285714285em;
text-align: center;
}
.pe-li.pe-lg {
left: -1.8571428571428572em;
}
.pe-border {
padding: .2em .25em .15em;
border: solid 0.08em #eeeeee;
border-radius: .1em;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.pe.pull-left {
margin-right: .3em;
}
.pe.pull-right {
margin-left: .3em;
}
.pe-spin {
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.pe-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.pe-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.pe-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.pe-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.pe-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.pe-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.pe-stack-1x,
.pe-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.pe-stack-1x {
line-height: inherit;
}
.pe-stack-2x {
font-size: 2em;
}
.pe-inverse {
color: #ffffff;
}
/* Custom classes / mods - PIXEDEN */
.pe-va {
vertical-align: middle;
}
.pe-border {
border: solid 0.08em #eaeaea;
}
.pe-fw-h {
width: 1.2857142857142858em;
text-align: center;
display: inline-block;
}
/*! Modified from font-awesome helper CSS classes - PIXEDEN
* Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (CSS: MIT License)
*/.pe-fw,.pe-fw-h,.pe-li{text-align:center}.pe-fw-h,.pe-stack{display:inline-block}.pe-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}.pe-stack,.pe-va{vertical-align:middle}.pe-2x{font-size:2em}.pe-3x{font-size:3em}.pe-4x{font-size:4em}.pe-5x{font-size:5em}.pe-fw{width:1.2857142857142858em}.pe-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none}.pe-ul>li{position:relative}.pe-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:.14285714285714285em}.pe-li.pe-lg{left:-1.8571428571428572em}.pe-border{padding:.2em .25em .15em;border-radius:.1em;border:.08em solid #eaeaea}.pull-right{float:right}.pull-left{float:left}.pe.pull-left{margin-right:.3em}.pe.pull-right{margin-left:.3em}.pe-spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.pe-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.pe-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pe-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.pe-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.pe-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}.pe-stack{position:relative;width:2em;height:2em;line-height:2em}.pe-stack-1x,.pe-stack-2x{position:absolute;left:0;width:100%;text-align:center}.pe-stack-1x{line-height:inherit}.pe-stack-2x{font-size:2em}.pe-inverse{color:#fff}.pe-fw-h{width:1.2857142857142858em}
\ No newline at end of file
@font-face {
font-family: 'pe-icon-set-weather';
src: url("../fonts/pe-icon-set-weather.eot?nlruav");
src: url("../fonts/pe-icon-set-weather.eot?nlruav#iefix") format("embedded-opentype"), url("../fonts/pe-icon-set-weather.ttf?nlruav") format("truetype"), url("../fonts/pe-icon-set-weather.woff?nlruav") format("woff"), url("../fonts/pe-icon-set-weather.svg?nlruav#pe-icon-set-weather") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="pe-is-w-"], [class*=" pe-is-w-"] {
display: inline-block;
font-family: 'pe-icon-set-weather';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pe-is-w-blizzard-f:before {
content: "\e900";
}
.pe-is-w-blizzard:before {
content: "\e901";
}
.pe-is-w-cloud-down-f:before {
content: "\e902";
}
.pe-is-w-cloud-down:before {
content: "\e903";
}
.pe-is-w-cloud-refresh-f:before {
content: "\e904";
}
.pe-is-w-cloud-refresh:before {
content: "\e905";
}
.pe-is-w-cloud-up-f:before {
content: "\e906";
}
.pe-is-w-cloud-up:before {
content: "\e907";
}
.pe-is-w-compass-e-f:before {
content: "\e908";
}
.pe-is-w-compass-e:before {
content: "\e909";
}
.pe-is-w-compass-f:before {
content: "\e90a";
}
.pe-is-w-compass-n-f:before {
content: "\e90b";
}
.pe-is-w-compass-n:before {
content: "\e90c";
}
.pe-is-w-compass-s-f:before {
content: "\e90d";
}
.pe-is-w-compass-s:before {
content: "\e90e";
}
.pe-is-w-compass-w-f:before {
content: "\e90f";
}
.pe-is-w-compass-w:before {
content: "\e910";
}
.pe-is-w-compass:before {
content: "\e911";
}
.pe-is-w-degree-celsius:before {
content: "\e912";
}
.pe-is-w-degree-fahrenheit:before {
content: "\e913";
}
.pe-is-w-drizzle-f:before {
content: "\e914";
}
.pe-is-w-drizzle:before {
content: "\e915";
}
.pe-is-w-drop-cloud-f:before {
content: "\e916";
}
.pe-is-w-drop-cloud:before {
content: "\e917";
}
.pe-is-w-drop-f:before {
content: "\e918";
}
.pe-is-w-drop-percentage-f:before {
content: "\e919";
}
.pe-is-w-drop-percentage:before {
content: "\e91a";
}
.pe-is-w-drop:before {
content: "\e91b";
}
.pe-is-w-drops-f:before {
content: "\e91c";
}
.pe-is-w-drops:before {
content: "\e91d";
}
.pe-is-w-eclipse-1-f:before {
content: "\e91e";
}
.pe-is-w-eclipse-1:before {
content: "\e91f";
}
.pe-is-w-eclipse-2-f:before {
content: "\e920";
}
.pe-is-w-eclipse-2:before {
content: "\e921";
}
.pe-is-w-eclipse-3-f:before {
content: "\e922";
}
.pe-is-w-eclipse-3:before {
content: "\e923";
}
.pe-is-w-eclipse-4-f:before {
content: "\e924";
}
.pe-is-w-eclipse-4:before {
content: "\e925";
}
.pe-is-w-fog-1-f:before {
content: "\e926";
}
.pe-is-w-fog-1:before {
content: "\e927";
}
.pe-is-w-fog-2-f:before {
content: "\e928";
}
.pe-is-w-fog-2:before {
content: "\e929";
}
.pe-is-w-fog-3-f:before {
content: "\e92a";
}
.pe-is-w-fog-3:before {
content: "\e92b";
}
.pe-is-w-fog-4-f:before {
content: "\e92c";
}
.pe-is-w-fog-4:before {
content: "\e92d";
}
.pe-is-w-full-moon-1-f:before {
content: "\e92e";
}
.pe-is-w-full-moon-1:before {
content: "\e92f";
}
.pe-is-w-full-moon-2-f:before {
content: "\e930";
}
.pe-is-w-full-moon-2:before {
content: "\e931";
}
.pe-is-w-full-moon-3-f:before {
content: "\e932";
}
.pe-is-w-full-moon-3:before {
content: "\e933";
}
.pe-is-w-hail-1-f:before {
content: "\e934";
}
.pe-is-w-hail-1:before {
content: "\e935";
}
.pe-is-w-hail-2-f:before {
content: "\e936";
}
.pe-is-w-hail-2:before {
content: "\e937";
}
.pe-is-w-hail-day-1-f:before {
content: "\e938";
}
.pe-is-w-hail-day-1:before {
content: "\e939";
}
.pe-is-w-hail-day-2-f:before {
content: "\e93a";
}
.pe-is-w-hail-day-2:before {
content: "\e93b";
}
.pe-is-w-hail-full-moon-1-f:before {
content: "\e93c";
}
.pe-is-w-hail-full-moon-1:before {
content: "\e93d";
}
.pe-is-w-hail-full-moon-2-f:before {
content: "\e93e";
}
.pe-is-w-hail-full-moon-2:before {
content: "\e93f";
}
.pe-is-w-hail-night-1-f:before {
content: "\e940";
}
.pe-is-w-hail-night-1:before {
content: "\e941";
}
.pe-is-w-hail-night-2-f:before {
content: "\e942";
}
.pe-is-w-hail-night-2:before {
content: "\e943";
}
.pe-is-w-heavy-hail-day-f:before {
content: "\e944";
}
.pe-is-w-heavy-hail-day:before {
content: "\e945";
}
.pe-is-w-heavy-hail-f:before {
content: "\e946";
}
.pe-is-w-heavy-hail-full-moon-f:before {
content: "\e947";
}
.pe-is-w-heavy-hail-full-moon:before {
content: "\e948";
}
.pe-is-w-heavy-hail-night-f:before {
content: "\e949";
}
.pe-is-w-heavy-hail-night:before {
content: "\e94a";
}
.pe-is-w-heavy-hail:before {
content: "\e94b";
}
.pe-is-w-heavy-rain-1-f:before {
content: "\e94c";
}
.pe-is-w-heavy-rain-1:before {
content: "\e94d";
}
.pe-is-w-heavy-rain-2-f:before {
content: "\e94e";
}
.pe-is-w-heavy-rain-2:before {
content: "\e94f";
}
.pe-is-w-heavy-rain-day-f:before {
content: "\e950";
}
.pe-is-w-heavy-rain-day:before {
content: "\e951";
}
.pe-is-w-heavy-rain-full-moon-f:before {
content: "\e952";
}
.pe-is-w-heavy-rain-full-moon:before {
content: "\e953";
}
.pe-is-w-heavy-rain-night-f:before {
content: "\e954";
}
.pe-is-w-heavy-rain-night:before {
content: "\e955";
}
.pe-is-w-mist:before {
content: "\e956";
}
.pe-is-w-mix-rainfall-1-f:before {
content: "\e957";
}
.pe-is-w-mix-rainfall-1:before {
content: "\e958";
}
.pe-is-w-mix-rainfall-2-f:before {
content: "\e959";
}
.pe-is-w-mix-rainfall-2:before {
content: "\e95a";
}
.pe-is-w-moon-1-f:before {
content: "\e95b";
}
.pe-is-w-moon-1:before {
content: "\e95c";
}
.pe-is-w-moon-2-f:before {
content: "\e95d";
}
.pe-is-w-moon-2:before {
content: "\e95e";
}
.pe-is-w-moon-3-f:before {
content: "\e95f";
}
.pe-is-w-moon-3:before {
content: "\e960";
}
.pe-is-w-moon-4-f:before {
content: "\e961";
}
.pe-is-w-moon-4:before {
content: "\e962";
}
.pe-is-w-moon-first-quarter-f:before {
content: "\e963";
}
.pe-is-w-moon-horizon-f:before {
content: "\e964";
}
.pe-is-w-moon-horizon:before {
content: "\e965";
}
.pe-is-w-moon-last-quarter-f:before {
content: "\e966";
}
.pe-is-w-moon-sea-f:before {
content: "\e967";
}
.pe-is-w-moon-sea:before {
content: "\e968";
}
.pe-is-w-moon-waning-crescent-f:before {
content: "\e969";
}
.pe-is-w-moon-waning-gibbous-f:before {
content: "\e96a";
}
.pe-is-w-moon-waxing-crescent-f:before {
content: "\e96b";
}
.pe-is-w-moon-waxing-gibbous-f:before {
content: "\e96c";
}
.pe-is-w-mostly-cloudy-1-f:before {
content: "\e96d";
}
.pe-is-w-mostly-cloudy-1:before {
content: "\e96e";
}
.pe-is-w-mostly-cloudy-2-f:before {
content: "\e96f";
}
.pe-is-w-mostly-cloudy-2:before {
content: "\e970";
}
.pe-is-w-partly-cloudy-1-f:before {
content: "\e971";
}
.pe-is-w-partly-cloudy-1:before {
content: "\e972";
}
.pe-is-w-partly-cloudy-2-f:before {
content: "\e973";
}
.pe-is-w-partly-cloudy-2:before {
content: "\e974";
}
.pe-is-w-partly-cloudy-3-f:before {
content: "\e975";
}
.pe-is-w-partly-cloudy-3:before {
content: "\e976";
}
.pe-is-w-rain-1-f:before {
content: "\e977";
}
.pe-is-w-rain-1:before {
content: "\e978";
}
.pe-is-w-rain-and-snow-f:before {
content: "\e979";
}
.pe-is-w-rain-and-snow:before {
content: "\e97a";
}
.pe-is-w-rain-day-f:before {
content: "\e97b";
}
.pe-is-w-rain-day:before {
content: "\e97c";
}
.pe-is-w-rain-full-moon-f:before {
content: "\e97d";
}
.pe-is-w-rain-full-moon:before {
content: "\e97e";
}
.pe-is-w-rain-night-f:before {
content: "\e97f";
}
.pe-is-w-rain-night:before {
content: "\e980";
}
.pe-is-w-severe-thunderstorm-f:before {
content: "\e981";
}
.pe-is-w-severe-thunderstorm:before {
content: "\e982";
}
.pe-is-w-snow-day-1-f:before {
content: "\e983";
}
.pe-is-w-snow-day-1:before {
content: "\e984";
}
.pe-is-w-snow-day-2-f:before {
content: "\e985";
}
.pe-is-w-snow-day-2:before {
content: "\e986";
}
.pe-is-w-snow-day-3-f:before {
content: "\e987";
}
.pe-is-w-snow-day-3:before {
content: "\e988";
}
.pe-is-w-snow-f:before {
content: "\e989";
}
.pe-is-w-snow-full-moon-1-f:before {
content: "\e98a";
}
.pe-is-w-snow-full-moon-1:before {
content: "\e98b";
}
.pe-is-w-snow-full-moon-2-f:before {
content: "\e98c";
}
.pe-is-w-snow-full-moon-2:before {
content: "\e98d";
}
.pe-is-w-snow-full-moon-3-f:before {
content: "\e98e";
}
.pe-is-w-snow-full-moon-3:before {
content: "\e98f";
}
.pe-is-w-snow-night-1-f:before {
content: "\e990";
}
.pe-is-w-snow-night-1:before {
content: "\e991";
}
.pe-is-w-snow-night-2-f:before {
content: "\e992";
}
.pe-is-w-snow-night-2:before {
content: "\e993";
}
.pe-is-w-snow-night-3-f:before {
content: "\e994";
}
.pe-is-w-snow-night-3:before {
content: "\e995";
}
.pe-is-w-snow:before {
content: "\e996";
}
.pe-is-w-snowflake:before {
content: "\e997";
}
.pe-is-w-sun-1-f:before {
content: "\e998";
}
.pe-is-w-sun-1:before {
content: "\e999";
}
.pe-is-w-sun-2-f:before {
content: "\e99a";
}
.pe-is-w-sun-2:before {
content: "\e99b";
}
.pe-is-w-sun-horizon-1-f:before {
content: "\e99c";
}
.pe-is-w-sun-horizon-1:before {
content: "\e99d";
}
.pe-is-w-sun-horizon-2-f:before {
content: "\e99e";
}
.pe-is-w-sun-horizon-2:before {
content: "\e99f";
}
.pe-is-w-sunrise-f:before {
content: "\e9a0";
}
.pe-is-w-sunrise:before {
content: "\e9a1";
}
.pe-is-w-sunset-f:before {
content: "\e9a2";
}
.pe-is-w-sunset:before {
content: "\e9a3";
}
.pe-is-w-thermometer-1-f:before {
content: "\e9a4";
}
.pe-is-w-thermometer-1:before {
content: "\e9a5";
}
.pe-is-w-thermometer-2-f:before {
content: "\e9a6";
}
.pe-is-w-thermometer-2:before {
content: "\e9a7";
}
.pe-is-w-thermometer-3-f:before {
content: "\e9a8";
}
.pe-is-w-thermometer-3:before {
content: "\e9a9";
}
.pe-is-w-thermometer-4-f:before {
content: "\e9aa";
}
.pe-is-w-thermometer-4:before {
content: "\e9ab";
}
.pe-is-w-thermometer-5-f:before {
content: "\e9ac";
}
.pe-is-w-thermometer-5:before {
content: "\e9ad";
}
.pe-is-w-thunderbolt-1-f:before {
content: "\e9ae";
}
.pe-is-w-thunderbolt-1:before {
content: "\e9af";
}
.pe-is-w-thunderbolt-2-f:before {
content: "\e9b0";
}
.pe-is-w-thunderbolt-2:before {
content: "\e9b1";
}
.pe-is-w-thunderstorm-day-1-f:before {
content: "\e9b2";
}
.pe-is-w-thunderstorm-day-1:before {
content: "\e9b3";
}
.pe-is-w-thunderstorm-day-2-f:before {
content: "\e9b4";
}
.pe-is-w-thunderstorm-day-2:before {
content: "\e9b5";
}
.pe-is-w-thunderstorm-f:before {
content: "\e9b6";
}
.pe-is-w-thunderstorm-full-moon-1-f:before {
content: "\e9b7";
}
.pe-is-w-thunderstorm-full-moon-1:before {
content: "\e9b8";
}
.pe-is-w-thunderstorm-full-moon-2-f:before {
content: "\e9b9";
}
.pe-is-w-thunderstorm-full-moon-2:before {
content: "\e9ba";
}
.pe-is-w-thunderstorm-night-1-f:before {
content: "\e9bb";
}
.pe-is-w-thunderstorm-night-1:before {
content: "\e9bc";
}
.pe-is-w-thunderstorm-night-2-f:before {
content: "\e9bd";
}
.pe-is-w-thunderstorm-night-2:before {
content: "\e9be";
}
.pe-is-w-thunderstorm:before {
content: "\e9bf";
}
.pe-is-w-tornado-1:before {
content: "\e9c0";
}
.pe-is-w-tornado-2:before {
content: "\e9c1";
}
.pe-is-w-umbrella-f:before {
content: "\e9c2";
}
.pe-is-w-umbrella:before {
content: "\e9c3";
}
.pe-is-w-wind-2:before {
content: "\e9c4";
}
.pe-is-w-wind-cloud:before {
content: "\e9c5";
}
.pe-is-w-wind-cone-f:before {
content: "\e9c6";
}
.pe-is-w-wind-cone:before {
content: "\e9c7";
}
.pe-is-w-wind-day:before {
content: "\e9c8";
}
.pe-is-w-wind-full-moon:before {
content: "\e9c9";
}
.pe-is-w-wind-moon:before {
content: "\e9ca";
}
.pe-is-w-wind-night:before {
content: "\e9cb";
}
.pe-is-w-wind-sun:before {
content: "\e9cc";
}
.pe-is-w-wind-turbine-f:before {
content: "\e9cd";
}
.pe-is-w-wind-turbine:before {
content: "\e9ce";
}
.pe-is-w-wind:before {
content: "\e9cf";
}
@font-face{font-family:pe-icon-set-weather;src:url(../fonts/pe-icon-set-weather.eot?nlruav);src:url(../fonts/pe-icon-set-weather.eot?nlruav#iefix) format("embedded-opentype"),url(../fonts/pe-icon-set-weather.ttf?nlruav) format("truetype"),url(../fonts/pe-icon-set-weather.woff?nlruav) format("woff"),url(../fonts/pe-icon-set-weather.svg?nlruav#pe-icon-set-weather) format("svg");font-weight:400;font-style:normal}[class*=" pe-is-w-"],[class^=pe-is-w-]{display:inline-block;font-family:pe-icon-set-weather;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pe-is-w-blizzard-f:before{content:"\e900"}.pe-is-w-blizzard:before{content:"\e901"}.pe-is-w-cloud-down-f:before{content:"\e902"}.pe-is-w-cloud-down:before{content:"\e903"}.pe-is-w-cloud-refresh-f:before{content:"\e904"}.pe-is-w-cloud-refresh:before{content:"\e905"}.pe-is-w-cloud-up-f:before{content:"\e906"}.pe-is-w-cloud-up:before{content:"\e907"}.pe-is-w-compass-e-f:before{content:"\e908"}.pe-is-w-compass-e:before{content:"\e909"}.pe-is-w-compass-f:before{content:"\e90a"}.pe-is-w-compass-n-f:before{content:"\e90b"}.pe-is-w-compass-n:before{content:"\e90c"}.pe-is-w-compass-s-f:before{content:"\e90d"}.pe-is-w-compass-s:before{content:"\e90e"}.pe-is-w-compass-w-f:before{content:"\e90f"}.pe-is-w-compass-w:before{content:"\e910"}.pe-is-w-compass:before{content:"\e911"}.pe-is-w-degree-celsius:before{content:"\e912"}.pe-is-w-degree-fahrenheit:before{content:"\e913"}.pe-is-w-drizzle-f:before{content:"\e914"}.pe-is-w-drizzle:before{content:"\e915"}.pe-is-w-drop-cloud-f:before{content:"\e916"}.pe-is-w-drop-cloud:before{content:"\e917"}.pe-is-w-drop-f:before{content:"\e918"}.pe-is-w-drop-percentage-f:before{content:"\e919"}.pe-is-w-drop-percentage:before{content:"\e91a"}.pe-is-w-drop:before{content:"\e91b"}.pe-is-w-drops-f:before{content:"\e91c"}.pe-is-w-drops:before{content:"\e91d"}.pe-is-w-eclipse-1-f:before{content:"\e91e"}.pe-is-w-eclipse-1:before{content:"\e91f"}.pe-is-w-eclipse-2-f:before{content:"\e920"}.pe-is-w-eclipse-2:before{content:"\e921"}.pe-is-w-eclipse-3-f:before{content:"\e922"}.pe-is-w-eclipse-3:before{content:"\e923"}.pe-is-w-eclipse-4-f:before{content:"\e924"}.pe-is-w-eclipse-4:before{content:"\e925"}.pe-is-w-fog-1-f:before{content:"\e926"}.pe-is-w-fog-1:before{content:"\e927"}.pe-is-w-fog-2-f:before{content:"\e928"}.pe-is-w-fog-2:before{content:"\e929"}.pe-is-w-fog-3-f:before{content:"\e92a"}.pe-is-w-fog-3:before{content:"\e92b"}.pe-is-w-fog-4-f:before{content:"\e92c"}.pe-is-w-fog-4:before{content:"\e92d"}.pe-is-w-full-moon-1-f:before{content:"\e92e"}.pe-is-w-full-moon-1:before{content:"\e92f"}.pe-is-w-full-moon-2-f:before{content:"\e930"}.pe-is-w-full-moon-2:before{content:"\e931"}.pe-is-w-full-moon-3-f:before{content:"\e932"}.pe-is-w-full-moon-3:before{content:"\e933"}.pe-is-w-hail-1-f:before{content:"\e934"}.pe-is-w-hail-1:before{content:"\e935"}.pe-is-w-hail-2-f:before{content:"\e936"}.pe-is-w-hail-2:before{content:"\e937"}.pe-is-w-hail-day-1-f:before{content:"\e938"}.pe-is-w-hail-day-1:before{content:"\e939"}.pe-is-w-hail-day-2-f:before{content:"\e93a"}.pe-is-w-hail-day-2:before{content:"\e93b"}.pe-is-w-hail-full-moon-1-f:before{content:"\e93c"}.pe-is-w-hail-full-moon-1:before{content:"\e93d"}.pe-is-w-hail-full-moon-2-f:before{content:"\e93e"}.pe-is-w-hail-full-moon-2:before{content:"\e93f"}.pe-is-w-hail-night-1-f:before{content:"\e940"}.pe-is-w-hail-night-1:before{content:"\e941"}.pe-is-w-hail-night-2-f:before{content:"\e942"}.pe-is-w-hail-night-2:before{content:"\e943"}.pe-is-w-heavy-hail-day-f:before{content:"\e944"}.pe-is-w-heavy-hail-day:before{content:"\e945"}.pe-is-w-heavy-hail-f:before{content:"\e946"}.pe-is-w-heavy-hail-full-moon-f:before{content:"\e947"}.pe-is-w-heavy-hail-full-moon:before{content:"\e948"}.pe-is-w-heavy-hail-night-f:before{content:"\e949"}.pe-is-w-heavy-hail-night:before{content:"\e94a"}.pe-is-w-heavy-hail:before{content:"\e94b"}.pe-is-w-heavy-rain-1-f:before{content:"\e94c"}.pe-is-w-heavy-rain-1:before{content:"\e94d"}.pe-is-w-heavy-rain-2-f:before{content:"\e94e"}.pe-is-w-heavy-rain-2:before{content:"\e94f"}.pe-is-w-heavy-rain-day-f:before{content:"\e950"}.pe-is-w-heavy-rain-day:before{content:"\e951"}.pe-is-w-heavy-rain-full-moon-f:before{content:"\e952"}.pe-is-w-heavy-rain-full-moon:before{content:"\e953"}.pe-is-w-heavy-rain-night-f:before{content:"\e954"}.pe-is-w-heavy-rain-night:before{content:"\e955"}.pe-is-w-mist:before{content:"\e956"}.pe-is-w-mix-rainfall-1-f:before{content:"\e957"}.pe-is-w-mix-rainfall-1:before{content:"\e958"}.pe-is-w-mix-rainfall-2-f:before{content:"\e959"}.pe-is-w-mix-rainfall-2:before{content:"\e95a"}.pe-is-w-moon-1-f:before{content:"\e95b"}.pe-is-w-moon-1:before{content:"\e95c"}.pe-is-w-moon-2-f:before{content:"\e95d"}.pe-is-w-moon-2:before{content:"\e95e"}.pe-is-w-moon-3-f:before{content:"\e95f"}.pe-is-w-moon-3:before{content:"\e960"}.pe-is-w-moon-4-f:before{content:"\e961"}.pe-is-w-moon-4:before{content:"\e962"}.pe-is-w-moon-first-quarter-f:before{content:"\e963"}.pe-is-w-moon-horizon-f:before{content:"\e964"}.pe-is-w-moon-horizon:before{content:"\e965"}.pe-is-w-moon-last-quarter-f:before{content:"\e966"}.pe-is-w-moon-sea-f:before{content:"\e967"}.pe-is-w-moon-sea:before{content:"\e968"}.pe-is-w-moon-waning-crescent-f:before{content:"\e969"}.pe-is-w-moon-waning-gibbous-f:before{content:"\e96a"}.pe-is-w-moon-waxing-crescent-f:before{content:"\e96b"}.pe-is-w-moon-waxing-gibbous-f:before{content:"\e96c"}.pe-is-w-mostly-cloudy-1-f:before{content:"\e96d"}.pe-is-w-mostly-cloudy-1:before{content:"\e96e"}.pe-is-w-mostly-cloudy-2-f:before{content:"\e96f"}.pe-is-w-mostly-cloudy-2:before{content:"\e970"}.pe-is-w-partly-cloudy-1-f:before{content:"\e971"}.pe-is-w-partly-cloudy-1:before{content:"\e972"}.pe-is-w-partly-cloudy-2-f:before{content:"\e973"}.pe-is-w-partly-cloudy-2:before{content:"\e974"}.pe-is-w-partly-cloudy-3-f:before{content:"\e975"}.pe-is-w-partly-cloudy-3:before{content:"\e976"}.pe-is-w-rain-1-f:before{content:"\e977"}.pe-is-w-rain-1:before{content:"\e978"}.pe-is-w-rain-and-snow-f:before{content:"\e979"}.pe-is-w-rain-and-snow:before{content:"\e97a"}.pe-is-w-rain-day-f:before{content:"\e97b"}.pe-is-w-rain-day:before{content:"\e97c"}.pe-is-w-rain-full-moon-f:before{content:"\e97d"}.pe-is-w-rain-full-moon:before{content:"\e97e"}.pe-is-w-rain-night-f:before{content:"\e97f"}.pe-is-w-rain-night:before{content:"\e980"}.pe-is-w-severe-thunderstorm-f:before{content:"\e981"}.pe-is-w-severe-thunderstorm:before{content:"\e982"}.pe-is-w-snow-day-1-f:before{content:"\e983"}.pe-is-w-snow-day-1:before{content:"\e984"}.pe-is-w-snow-day-2-f:before{content:"\e985"}.pe-is-w-snow-day-2:before{content:"\e986"}.pe-is-w-snow-day-3-f:before{content:"\e987"}.pe-is-w-snow-day-3:before{content:"\e988"}.pe-is-w-snow-f:before{content:"\e989"}.pe-is-w-snow-full-moon-1-f:before{content:"\e98a"}.pe-is-w-snow-full-moon-1:before{content:"\e98b"}.pe-is-w-snow-full-moon-2-f:before{content:"\e98c"}.pe-is-w-snow-full-moon-2:before{content:"\e98d"}.pe-is-w-snow-full-moon-3-f:before{content:"\e98e"}.pe-is-w-snow-full-moon-3:before{content:"\e98f"}.pe-is-w-snow-night-1-f:before{content:"\e990"}.pe-is-w-snow-night-1:before{content:"\e991"}.pe-is-w-snow-night-2-f:before{content:"\e992"}.pe-is-w-snow-night-2:before{content:"\e993"}.pe-is-w-snow-night-3-f:before{content:"\e994"}.pe-is-w-snow-night-3:before{content:"\e995"}.pe-is-w-snow:before{content:"\e996"}.pe-is-w-snowflake:before{content:"\e997"}.pe-is-w-sun-1-f:before{content:"\e998"}.pe-is-w-sun-1:before{content:"\e999"}.pe-is-w-sun-2-f:before{content:"\e99a"}.pe-is-w-sun-2:before{content:"\e99b"}.pe-is-w-sun-horizon-1-f:before{content:"\e99c"}.pe-is-w-sun-horizon-1:before{content:"\e99d"}.pe-is-w-sun-horizon-2-f:before{content:"\e99e"}.pe-is-w-sun-horizon-2:before{content:"\e99f"}.pe-is-w-sunrise-f:before{content:"\e9a0"}.pe-is-w-sunrise:before{content:"\e9a1"}.pe-is-w-sunset-f:before{content:"\e9a2"}.pe-is-w-sunset:before{content:"\e9a3"}.pe-is-w-thermometer-1-f:before{content:"\e9a4"}.pe-is-w-thermometer-1:before{content:"\e9a5"}.pe-is-w-thermometer-2-f:before{content:"\e9a6"}.pe-is-w-thermometer-2:before{content:"\e9a7"}.pe-is-w-thermometer-3-f:before{content:"\e9a8"}.pe-is-w-thermometer-3:before{content:"\e9a9"}.pe-is-w-thermometer-4-f:before{content:"\e9aa"}.pe-is-w-thermometer-4:before{content:"\e9ab"}.pe-is-w-thermometer-5-f:before{content:"\e9ac"}.pe-is-w-thermometer-5:before{content:"\e9ad"}.pe-is-w-thunderbolt-1-f:before{content:"\e9ae"}.pe-is-w-thunderbolt-1:before{content:"\e9af"}.pe-is-w-thunderbolt-2-f:before{content:"\e9b0"}.pe-is-w-thunderbolt-2:before{content:"\e9b1"}.pe-is-w-thunderstorm-day-1-f:before{content:"\e9b2"}.pe-is-w-thunderstorm-day-1:before{content:"\e9b3"}.pe-is-w-thunderstorm-day-2-f:before{content:"\e9b4"}.pe-is-w-thunderstorm-day-2:before{content:"\e9b5"}.pe-is-w-thunderstorm-f:before{content:"\e9b6"}.pe-is-w-thunderstorm-full-moon-1-f:before{content:"\e9b7"}.pe-is-w-thunderstorm-full-moon-1:before{content:"\e9b8"}.pe-is-w-thunderstorm-full-moon-2-f:before{content:"\e9b9"}.pe-is-w-thunderstorm-full-moon-2:before{content:"\e9ba"}.pe-is-w-thunderstorm-night-1-f:before{content:"\e9bb"}.pe-is-w-thunderstorm-night-1:before{content:"\e9bc"}.pe-is-w-thunderstorm-night-2-f:before{content:"\e9bd"}.pe-is-w-thunderstorm-night-2:before{content:"\e9be"}.pe-is-w-thunderstorm:before{content:"\e9bf"}.pe-is-w-tornado-1:before{content:"\e9c0"}.pe-is-w-tornado-2:before{content:"\e9c1"}.pe-is-w-umbrella-f:before{content:"\e9c2"}.pe-is-w-umbrella:before{content:"\e9c3"}.pe-is-w-wind-2:before{content:"\e9c4"}.pe-is-w-wind-cloud:before{content:"\e9c5"}.pe-is-w-wind-cone-f:before{content:"\e9c6"}.pe-is-w-wind-cone:before{content:"\e9c7"}.pe-is-w-wind-day:before{content:"\e9c8"}.pe-is-w-wind-full-moon:before{content:"\e9c9"}.pe-is-w-wind-moon:before{content:"\e9ca"}.pe-is-w-wind-night:before{content:"\e9cb"}.pe-is-w-wind-sun:before{content:"\e9cc"}.pe-is-w-wind-turbine-f:before{content:"\e9cd"}.pe-is-w-wind-turbine:before{content:"\e9ce"}.pe-is-w-wind:before{content:"\e9cf"}
\ No newline at end of file
This diff could not be displayed because it is too large.
{
"HOME": "Home",
"APPS": "Apps",
"CALENDAR": "Calendar",
"MEDIA": "Media",
"MESSAGES": "Messages",
"SOCIAL": "Social",
"CHAT": "Chat",
"WIDGETS": "Widgets",
"MATERIAL": "Material",
"BUTTON": "Button",
"CARDS": "Cards",
"SELECT": "Select",
"AUTOCOMPLETE": "Autocomplete",
"CHIPS": "Chips",
"INPUT": "Input",
"CHECKBOX": "Checkbox",
"DATEPICKER": "Datepicker",
"EXPANSION": "Expansion",
"RADIO": "Radio",
"TOOLBAR": "Toolbar",
"LISTS": "Lists",
"GRID": "Grid",
"PROGRESS": "Progress",
"TABS": "Tabs",
"SWITCH": "Switch",
"TOOLTIP": "Tooltip",
"MENU": "Menu",
"SLIDER": "Slider",
"SNACKBAR": "Snackbar",
"DIALOG": "Dialog",
"TABLE": "Table",
"BUTTONTOGGLE": "Button toggle",
"DRAWER": "Drawer",
"PROGRESSBAR": "Progress bar",
"PROGRESSSPINNER": "Progress spinner",
"RIPPLE": "Ripple",
"SLIDETOGGLE": "Slide toggle",
"STEPPER": "Stepper",
"TYPOGRAPHY": "Typography",
"FORMS": "Forms",
"EDITOR": "Editor",
"VALIDATION": "Validation",
"UPLOAD": "Upload",
"TREE": "Tree",
"DATATABLE": "Datatable",
"FULLSCREEN": "Fullscreen",
"EDITING": "Editing",
"FILTER": "Filter",
"SELECTION": "Selection",
"PAGING": "Paging",
"SORTING": "Sorting",
"PINNING": "Pinning",
"ECOMMERCE": "Ecommerce",
"PRODUCTS": "Products",
"COMPACT": "Compact",
"DETAIL": "Detail View",
"TASKBOARD": "Taskboard",
"CHARTS": "Charts",
"MAPS": "Maps",
"GOOGLE": "Google",
"LEAFLET": "Leaflet",
"DND": "Drag and Drop",
"PAGES": "Pages",
"INVOICE": "Invoice",
"TIMELINE": "Timeline",
"USER": "User",
"BLANK": "Blank",
"PRICING": "Pricing",
"SESSION": "Session",
"404": "404",
"SIGNIN": "Signin",
"SIGNUP": "Signup",
"FORGOT": "Forgot",
"LOCKSCREEN": "Lockscreen",
"ERROR": "Error",
"DOCS": "Docs"
}
{
"HOME": "Tableau de bord",
"APPS": "Apps",
"CALENDAR": "Calendrier",
"MEDIA": "Médias",
"MESSAGES": "Messages",
"SOCIAL": "Social",
"CHAT": "Bavarder",
"WIDGETS": "Widgets",
"MATERIAL": "Matériel",
"BUTTON": "Bouton",
"CARDS": "Cartes",
"SELECT": "Sélectionner",
"AUTOCOMPLETE": "Autocomplete",
"CHIPS": "Chips",
"INPUT": "Données",
"CHECKBOX": "Case à cocher",
"DATEPICKER": "cueilleur",
"EXPANSION": "Expansion",
"RADIO": "Radio",
"TOOLBAR": "Barre d'outils",
"LISTS": "Listes",
"GRID": "La grille",
"PROGRESS": "La progression",
"TABS": "Onglets",
"SWITCH": "Le changement",
"TOOLTIP": "Info-bulle",
"MENU": "Le menu",
"SLIDER": "Curseur",
"SNACKBAR": "Snackbar",
"DIALOG": "Dialogue",
"TABLE": "Table",
"BUTTONTOGGLE": "Bouton bascule",
"DRAWER": "Tiroir",
"PROGRESSBAR": "Barre de progression",
"PROGRESSSPINNER": "Spinner de progrès",
"RIPPLE": "Ondulation",
"SLIDETOGGLE": "Slide toggle",
"STEPPER": "Stepper",
"TYPOGRAPHY": "Typographie",
"FORMS": "Formes",
"EDITOR": "Editeur",
"VALIDATION": "Validation",
"UPLOAD": "Télécharger",
"TREE": "Arbre",
"DATATABLE": "Datatable",
"FULLSCREEN": "Plein écran",
"EDITING": "Édition",
"FILTER": "Filtre",
"SELECTION": "Sélection",
"PAGING": "Pagination",
"SORTING": "Tri",
"PINNING": "Épingler",
"ECOMMERCE": "Commerce électronique",
"PRODUCTS": "Des produits",
"COMPACT": "Compact",
"DETAIL": "vue détaillée",
"TASKBOARD": "Taskboard",
"CHARTS": "Graphiques",
"MAPS": "Cartes",
"GOOGLE": "Google",
"LEAFLET": "Leaflet",
"DND": "Glisser déposer",
"PAGES": "Pages",
"INVOICE": "Facture d'achat",
"TIMELINE": "Chronologie",
"USER": "Utilisateur",
"BLANK": "Blanc",
"PRICING": "Pricing",
"SESSION": "Session",
"404": "404",
"SIGNIN": "Signin",
"SIGNUP": "Signup",
"FORGOT": "Forgot",
"LOCKSCREEN": "Lockscreen",
"ERROR": "Error",
"DOCS": "Docs"
}
<?xml version="1.0" encoding="UTF-8"?>
<svg width="101px" height="18px" viewBox="0 0 101 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo-dark" transform="translate(-1.000000, -6.000000)">
<path d="M6.4,23 L1.35,23 L1.35,6.325 L10.25,6.325 C14.15,6.325 16.25,8.925 16.25,12.05 C16.25,15.15 14.15,17.75 10.25,17.75 L6.4,17.75 L6.4,23 Z M9.6,13.35 C10.45,13.35 11.125,12.925 11.125,12.05 C11.125,11.15 10.45,10.725 9.6,10.725 L6.4,10.725 L6.4,13.35 L9.6,13.35 Z M32.825,23 L27.075,23 L24.775,17.75 L22.95,17.75 L22.95,23 L17.9,23 L17.9,6.325 L26.8,6.325 C30.7,6.325 32.8,8.925 32.8,12.05 C32.8,14.925 31.125,16.45 29.8,17.1 L32.825,23 Z M26.025,13.35 C26.875,13.35 27.675,12.95 27.675,12.025 C27.675,11.125 26.875,10.725 26.025,10.725 L22.95,10.725 L22.95,13.35 L26.025,13.35 Z M39.9,23 L39.9,6.325 L34.85,6.325 L34.85,23 L39.9,23 Z M62.4,23 L62.4,6.325 L55.425,6.325 L52.5,14.325 L49.575,6.325 L42.6,6.325 L42.6,23 L47.65,23 L47.65,12.975 L51.375,23 L53.625,23 L57.35,12.975 L57.35,23 L62.4,23 Z M77.75,23 L77.75,18.6 L70.15,18.6 L70.15,16.775 L77.575,16.775 L77.575,12.375 L70.15,12.375 L70.15,10.725 L77.75,10.725 L77.75,6.325 L65.1,6.325 L65.1,23 L77.75,23 Z M94.925,23 L89.175,23 L86.875,17.75 L85.05,17.75 L85.05,23 L80,23 L80,6.325 L88.9,6.325 C92.8,6.325 94.9,8.925 94.9,12.05 C94.9,14.925 93.225,16.45 91.9,17.1 L94.925,23 Z M88.125,13.35 C88.975,13.35 89.775,12.95 89.775,12.025 C89.775,11.125 88.975,10.725 88.125,10.725 L85.05,10.725 L85.05,13.35 L88.125,13.35 Z" id="PRIMER" fill="#000000"></path>
<path d="M99.125,23.3 C100.575,23.3 101.8,22.075 101.8,20.625 C101.8,19.175 100.575,17.95 99.125,17.95 C97.675,17.95 96.45,19.175 96.45,20.625 C96.45,22.075 97.675,23.3 99.125,23.3 Z" id="." fill="#063EF0"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="101px" height="18px" viewBox="0 0 101 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="#ffffff" fill-rule="evenodd">
<g id="logo" transform="translate(-1.000000, -6.000000)" fill="#ffffff">
<path d="M6.4,23 L1.35,23 L1.35,6.325 L10.25,6.325 C14.15,6.325 16.25,8.925 16.25,12.05 C16.25,15.15 14.15,17.75 10.25,17.75 L6.4,17.75 L6.4,23 Z M9.6,13.35 C10.45,13.35 11.125,12.925 11.125,12.05 C11.125,11.15 10.45,10.725 9.6,10.725 L6.4,10.725 L6.4,13.35 L9.6,13.35 Z M32.825,23 L27.075,23 L24.775,17.75 L22.95,17.75 L22.95,23 L17.9,23 L17.9,6.325 L26.8,6.325 C30.7,6.325 32.8,8.925 32.8,12.05 C32.8,14.925 31.125,16.45 29.8,17.1 L32.825,23 Z M26.025,13.35 C26.875,13.35 27.675,12.95 27.675,12.025 C27.675,11.125 26.875,10.725 26.025,10.725 L22.95,10.725 L22.95,13.35 L26.025,13.35 Z M39.9,23 L39.9,6.325 L34.85,6.325 L34.85,23 L39.9,23 Z M62.4,23 L62.4,6.325 L55.425,6.325 L52.5,14.325 L49.575,6.325 L42.6,6.325 L42.6,23 L47.65,23 L47.65,12.975 L51.375,23 L53.625,23 L57.35,12.975 L57.35,23 L62.4,23 Z M77.75,23 L77.75,18.6 L70.15,18.6 L70.15,16.775 L77.575,16.775 L77.575,12.375 L70.15,12.375 L70.15,10.725 L77.75,10.725 L77.75,6.325 L65.1,6.325 L65.1,23 L77.75,23 Z M94.925,23 L89.175,23 L86.875,17.75 L85.05,17.75 L85.05,23 L80,23 L80,6.325 L88.9,6.325 C92.8,6.325 94.9,8.925 94.9,12.05 C94.9,14.925 93.225,16.45 91.9,17.1 L94.925,23 Z M88.125,13.35 C88.975,13.35 89.775,12.95 89.775,12.025 C89.775,11.125 88.975,10.725 88.125,10.725 L85.05,10.725 L85.05,13.35 L88.125,13.35 Z M99.125,23.3 C100.575,23.3 101.8,22.075 101.8,20.625 C101.8,19.175 100.575,17.95 99.125,17.95 C97.675,17.95 96.45,19.175 96.45,20.625 C96.45,22.075 97.675,23.3 99.125,23.3 Z" id="PRIMER."></path>
</g>
</g>
</svg>
\ No newline at end of file
@import "scss/material.variables";
@import "scss/material.themes";
@import "scss/mixins/bi-app/bi-app-ltr";
// Core Variables and Mixins
@import "scss/app.variables";
@import "scss/mixins";
// Core Styles
@import "scss/core";
@import "scss/material";
@import "scss/utilities/utilities";
//
// General
//
$transition-duration: 300ms !default;
$gutter: 1rem !default;
//
// Widths
//
$sidebar-width: 15rem !default;
$compact-sidebar-width: 100px !default;
$collapsed-sidebar-width: 80px !default;
$sidebar-width-mobile: 18rem !default;
//
// Typography
//
$font-size-base: 0.875rem !default;
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$headings-margin-bottom: (1rem / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
//
// Radius
//
$border-radius-base: 2px !default;
$border-radius-large: 2px !default;
$border-radius-small: 1px !default;
//
// Spacing
//
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (
x: 0,
y: 0
),
xs: (
x: ($spacer-x / 1.8),
y: ($spacer-y / 1.8)
),
1: (
x: $spacer-x,
y: $spacer-y
),
2: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
3: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
$border-width: 1px !default;
// Media queries breakpoints
// --------------------------------------------------
// Grid breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 600px,
// Medium screen / tablet
md: 960px,
// Large screen / desktop
lg: 1280px,
// Extra large screen / wide desktop
xl: 1920px
) !default;
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
) !default;
@import "components/perfect-scrollbar";
@import "core/scaffolding";
@import "core/typography";
@import "core/main-sidebar";
@import "core/main-header";
@import "core/main-panel";
@import "core/notification-sidebar";
@import "components/table";
@import "core/sessions";
@import "core/media";
\ No newline at end of file
@import "material/buttons";
@import "material/cards";
@import "material/dialog";
@import "material/lists";
@import "material/select";
@import "material/menus";
@import "material/tabs";
// Default Theme
@include angular-material-theme($theme);
// Dark Theme
.app-dark {
@include angular-material-theme($dark-theme);
}
@import '~@angular/material/theming';
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-amber, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
@include mat-core();
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
$dark-background: map-get($dark-theme, background);
$dark-foreground: map-get($dark-theme, foreground);
$config: mat-typography-config();
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/text-emphasis";
@import "mixins/clearfix";
@import "mixins/flex";
@import "mixins/misc";
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
:host ::ng-deep {
.cal-day-view {
.cal-hour-rows {
border-top: 0;
border-bottom: 0;
border-color: mat-color($foreground, divider);
}
.cal-hour:nth-child(odd) {
background-color: mat-color($background, 'hover');
}
.cal-hour:not(:last-child) .cal-hour-segment,
.cal-hour:last-child :not(:last-child) .cal-hour-segment {
border-color: mat-color($foreground, divider);
}
.cal-hour-segment:hover {
background-color: mat-color($background, 'hover');
}
}
.cal-month-view {
.cal-cell-row:hover {
background-color: mat-color($background, 'hover');
}
.cal-cell-row .cal-cell:hover,
.cal-cell.cal-has-events.cal-open {
background-color: mat-color($background, 'hover');
}
.cal-days {
border-color: mat-color($foreground, divider);
}
.cal-day-cell:not(:last-child) {
border-color: mat-color($foreground, divider);
}
.cal-days .cal-cell-row {
border-color: mat-color($foreground, divider);
}
.cal-open-day-events {
box-shadow: none;
}
}
.cal-week-view {
.cal-day-headers {
border-color: mat-color($foreground, divider);
}
.cal-day-headers .cal-header:not(:last-child) {
border-color: mat-color($foreground, divider);
}
.cal-day-headers .cal-header:hover {
background-color: mat-color($background, 'hover');
}
.cal-event.cal-starts-within-week {
border-top-left-radius: $border-radius-base;
border-bottom-left-radius: $border-radius-base;;
}
.cal-event.cal-ends-within-week {
border-top-right-radius: $border-radius-base;;
border-bottom-right-radius: $border-radius-base;;
}
}
.cal-month-view .cal-days,
.cal-day-view .cal-hour-rows,
.cal-week-view .cal-day-headers {
border-left: 0;
border-right: 0;
}
.editButton, .deleteButton {
background-size: cover;
width: 13px;
height: 13px;
display: inline-block;
margin: 0 5px;
}
.editButton {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUyOC44OTkgNTI4Ljg5OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTI4Ljg5OSA1MjguODk5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC44ODMsODkuMTI1bDEwNy41OSwxMDcuNTg5bC0yNzIuMzQsMjcyLjM0TDU2LjYwNCwzNjEuNDY1TDMyOC44ODMsODkuMTI1eiBNNTE4LjExMyw2My4xNzdsLTQ3Ljk4MS00Ny45ODEgICBjLTE4LjU0My0xOC41NDMtNDguNjUzLTE4LjU0My02Ny4yNTksMGwtNDUuOTYxLDQ1Ljk2MWwxMDcuNTksMTA3LjU5bDUzLjYxMS01My42MTEgICBDNTMyLjQ5NSwxMDAuNzUzLDUzMi40OTUsNzcuNTU5LDUxOC4xMTMsNjMuMTc3eiBNMC4zLDUxMi42OWMtMS45NTgsOC44MTIsNS45OTgsMTYuNzA4LDE0LjgxMSwxNC41NjVsMTE5Ljg5MS0yOS4wNjkgICBMMjcuNDczLDM5MC41OTdMMC4zLDUxMi42OXoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}
.deleteButton {
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDM1NyAzNTciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM1NyAzNTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY2xlYXIiPgoJCTxwb2x5Z29uIHBvaW50cz0iMzU3LDM1LjcgMzIxLjMsMCAxNzguNSwxNDIuOCAzNS43LDAgMCwzNS43IDE0Mi44LDE3OC41IDAsMzIxLjMgMzUuNywzNTcgMTc4LjUsMjE0LjIgMzIxLjMsMzU3IDM1NywzMjEuMyAgICAgMjE0LjIsMTc4LjUgICAiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}
}
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
.mat-drawer {
width: 15rem;
}
.chat-conversation-user {
overflow: hidden;
box-sizing: border-box;
width: 100%;
margin-bottom: $gutter;
padding: 0 2rem;
@include flexbox;
}
.me {
@include justify-content(flex-end);
}
.me .chat-conversation-avatar {
@include margin-left($gutter);
@include order(2);
}
.chat-conversation-message {
position: relative;
padding: .625rem $gutter;
background-color: white;
@include rounded(4px);
p {
margin: 0;
}
.chat-date {
display: block;
font-size: 11px;
padding-top: 2px;
}
}
.me .chat-conversation-message {
@include order(1);
.chat-date {
text-align: right;
}
}
.me .chat-conversation-message::after {
position: absolute;
bottom: 0;
width: 0;
height: 0;
content: '';
border: 5px solid mat-color($accent);
border-top-color: transparent;
border-right-color: transparent;
@include right(-7px);
}
.them .chat-conversation-avatar {
@include margin-right($gutter);
}
.them .chat-conversation-message::after {
position: absolute;
top: 0;
width: 0;
height: 0;
content: '';
border: 5px solid mat-color($background, card);
border-bottom-color: transparent;
@include left(-7px);
@include border-left-color(transparent);
}
.chat-conversation-avatar {
position: relative;
width: 36px;
@include flex-shrink(0);
@include flex-grow(0);
img {
max-width: 100%;
border-radius: 50%;
}
}
.chat-conversation-user.me .chat-conversation-message {
position: relative;
background-color: mat-color($accent);
@include float(right);
p {
color: white;
}
}
.app-dark :host {
.them .chat-conversation-message {
background: mat-color($dark-background, card);
}
.them .chat-conversation-message::after {
border: 5px solid mat-color($dark-background, card);
border-bottom-color: transparent;
@include left(-7px);
@include border-left-color(transparent);
}
}
[dir="rtl"] :host {
.me .chat-conversation-avatar {
@include margin-left(0);
@include margin-right($gutter);
}
.me .chat-conversation-message {
.chat-date {
text-align: left;
}
}
.me .chat-conversation-message::after {
border: 5px solid mat-color($accent);
border-top-color: transparent;
border-right-color: mat-color($accent);
border-left-color: transparent;
@include right(auto);
@include left(-7px);
}
.them .chat-conversation-avatar {
@include margin-right(0);
@include margin-left($gutter);
}
.them .chat-conversation-message::after {
border: 5px solid mat-color($background, card);
border-bottom-color: transparent;
border-right-color: transparent;
@include left(auto);
@include right(-7px);
}
.chat-conversation-user.me .chat-conversation-message {
@include float(left);
}
}
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
.app-dark :host ::ng-deep {
.ql-snow .ql-picker .ql-picker-label {
color: mat-color($dark-foreground, base);
}
.ql-snow .ql-stroke {
stroke: mat-color($dark-foreground, base);
}
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
fill: mat-color($dark-foreground, base);
}
}
[dir=rtl] :host ::ng-deep {
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
right: auto;
left: 0;
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
:host {
.mat-sidenav {
position: absolute!important;
width: 200px;
}
.mat-drawer-content {
padding: 0;
}
@media (min-width: 959px) {
.mat-drawer-side {
background-color: transparent;
box-shadow: none!important;
}
}
.message-icon {
width: 24px;
height: 24px;
border-radius: 12px;
}
mat-expansion-panel:not(.mat-expanded) {
.show-on-open {
display: none;
}
}
.mat-expanded .hide-on-open {
display: none;
}
.mat-expansion-panel {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}
.mat-expansion-panel-header {
height: auto!important;
min-height: 65px!important;
}
.messages-nav {
mat-icon {
margin-right: 16px;
}
}
}
[dir="rtl"] :host ::ng-deep {
.side-panel-opened > .mat-drawer-content {
margin-left: 0!important;
margin-right: 200px!important;
}
.messages-nav mat-icon {
margin-right: 0;
margin-left: 16px;
}
}
$ps-bar-container-hover-bg: rgba(0, 0, 0, 0.582) !default;
/*
* Container style
*/
.ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
}
/*
* Scrollbar rail styles
*/
.ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px;
/* there must be 'bottom' or 'top' for ps__rail-x */
bottom: 0px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px;
/* there must be 'right' or 'left' for ps__rail-y */
right: 0;
/* please don't change 'position' */
position: absolute;
}
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
display: block;
background-color: transparent;
}
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
opacity: 0.6;
}
.ps__rail-x:hover,
.ps__rail-y:hover,
.ps__rail-x:focus,
.ps__rail-y:focus {
background-color: #eee;
opacity: 0.9;
}
/*
* Scrollbar thumb styles
*/
.ps__thumb-x {
background-color: $ps-bar-container-hover-bg;
border-radius: 6px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
/* there must be 'bottom' for ps__thumb-x */
bottom: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__thumb-y {
background-color: $ps-bar-container-hover-bg;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
/* there must be 'right' for ps__thumb-y */
right: 2px;
/* please don't change 'position' */
position: absolute;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x {
background-color: #999;
height: 11px;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y {
background-color: #999;
width: 11px;
}
/* MS supports */
/*@supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important;
}
}*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
}
.ps__rail-y {
right: 0;
left: auto!important;
}
.ps__thumb-y {
right: 2px;
left: auto!important;
}
[dir="rtl"] {
.ps__rail-y {
right: auto!important;
left: 0!important;
}
.ps__thumb-y {
right: auto!important;
left: 2px!important;
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
:host ::ng-deep {
.pricing-plan {
text-align: center;
cursor: default;
margin-bottom: 22px;
.mat-list[dense] .mat-list-item .mat-list-item-content, .mat-nav-list[dense] .mat-list-item .mat-list-item-content {
display: inline-flex;
}
}
.plan-price {
font-size: 2.5rem;
font-weight: 900;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.plan-price-symbol {
font-size: 1rem;
vertical-align: super;
}
.plan-price-period {
font-size: 0.8125rem;
display: inline-block;
padding: 0;
opacity: .7;
}
.plan-title {
font-size: 0.8125rem;
font-weight: 500;
overflow: hidden;
margin-bottom: $gutter;
white-space: nowrap;
letter-spacing: .01rem;
text-transform: uppercase;
text-overflow: ellipsis;
}
.plan-features {
line-height: 2.5;
margin: 0;
padding: $gutter;
list-style: none;
li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.switch-center {
margin: 0 auto;
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
:host {
.product-image-header {
position: relative;
top: -5px;
left: -5px;
border-radius: $border-radius-base;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
height: 100%;
@include media-breakpoint-down(sm) {
top: 0;
left: 0;
border-radius: $border-radius-base $border-radius-base 0 0;
box-shadow: none;
height: 400px;
}
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
:host {
mat-list.profile-list mat-list-item .mat-list-item-content {
padding: 0!important;
font-size: 13px!important;
}
.profile-post {
textarea {
border: 0;
width: 100%;
padding: 8px;
outline: 0;
border-radius: $border-radius-base $border-radius-base 0 0 ;
font-size: $font-size-base;
}
}
.activity-stream {
position: relative;
&::before {
content: '';
position: absolute;
top: 42px;
bottom: 0;
left: 42px;
width: 1px;
background-color: mat-color($foreground, divider);
}
.mat-card {
background-color: transparent;
}
.mat-card-content {
padding-top: 0;
padding-left: 78px;
}
}
}
[dir="rtl"] :host {
.activity-stream {
&::before {
left: auto;
right: 42px;
}
.mat-card-content {
padding-left: o;
padding-right: 78px;
}
}
}
\ No newline at end of file
/* $Widget
------------------------------------------*/
.ngx-datatable.material {
padding: 0;
margin: ($gutter/3);
@include mat-elevation(2);
@include mat-elevation-transition;
display: block;
position: relative;
border-radius: $border-radius-base;
&.fullscreen {
position: absolute !important;
height: auto !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&.striped {
.datatable-row-odd {
background: mat-color($background, 'hover');
}
}
&.scroll-vertical {
height: 70vh;
}
&.single-selection,
&.multi-selection {
.datatable-body-row {
&.active,
&.active .datatable-row-group {
@include _mat-toolbar-color($primary);
}
&.active:hover,
&.active:hover .datatable-row-group {
background-color: darken(mat-color($primary), 2%);
color: #FFF;
}
&.active:focus,
&.active:focus .datatable-row-group {
background-color: darken(mat-color($primary), 4%);
color: #FFF;
}
}
}
&:not(.cell-selection) {
.datatable-body-row {
&:hover,
&:hover .datatable-row-group {
background: mat-color($background, 'hover');
}
&:focus,
&:focus .datatable-row-group {
background-color: darken(mat-color($background, 'hover'), 2%);;
}
}
}
&.cell-selection {
.datatable-body-cell {
&:hover,
&:hover .datatable-row-group {
background: mat-color($background, 'hover');
}
&:focus,
&:focus .datatable-row-group {
background-color: darken(mat-color($background, 'hover'), 2%);;
}
&.active,
&.active .datatable-row-group {
@include _mat-toolbar-color($primary);
}
&.active:hover,
&.active:hover .datatable-row-group {
background-color: darken(mat-color($primary), 2%);
color: #FFF;
}
&.active:focus,
&.active:focus .datatable-row-group {
background-color: darken(mat-color($primary), 4%);
color: #FFF;
}
}
}
/**
* Shared Styles
*/
.empty-row{
padding: .85rem 1.2rem;
}
.loading-row{
padding: .85rem 1.2rem;
}
/**
* Header Styles
*/
.datatable-header {
border-bottom: 1px solid mat-color($foreground, divider);
.datatable-header-cell {
padding: .85rem 1.2rem;
color: rgba(mat-color($foreground, base), 0.87);
vertical-align: middle;
&.longpress {
color:#00E676;
}
&.dragging {
.resize-handle {
border-right: none;
}
}
}
.resize-handle {
border-right:solid 1px mat-color($foreground, divider);
}
}
/**
* Body Styles
*/
.datatable-body {
.datatable-row-detail {
background: #f5f5f5;
padding: 10px;
}
.datatable-body-row {
.datatable-body-cell {
padding: .85rem 1.2rem;
box-sizing: border-box;
max-height: 100%;
display: flex;
flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
justify-content: flex-start;
align-items: center;
align-content: center;
-webkit-box-pack: start;
-webkit-box-align: center;
.datatable-body-cell-label {
width: 100%;
}
}
}
.progress-linear {
.container {
background-color: rgb(170,209,249);
.bar {
background-color: rgb(16,108,200);
}
}
}
}
/**
* Footer Styles
*/
.datatable-footer {
border-top: 1px solid mat-color($foreground, divider);
.datatable-pager {
li {
vertical-align: middle;
&.disabled a{
color: rgba(0, 0, 0, 0.26) !important;
background-color: transparent !important;
}
&.active a{
background: mat-color($primary);
color: white;
font-weight: $font-weight-base;
}
}
}
}
}
.app-dark .ngx-datatable.material {
background: mat-color($dark-background, card);
color: mat-color($dark-foreground, base);
&.striped {
.datatable-row-odd {
background: mat-color($dark-background, 'hover');
}
}
&.single-selection,
&.multi-selection {
.datatable-body-row {
&.active,
&.active .datatable-row-group {
@include _mat-toolbar-color($dark-primary);
}
&.active:hover,
&.active:hover .datatable-row-group {
background-color: darken(mat-color($dark-primary), 2%);
}
&.active:focus,
&.active:focus .datatable-row-group {
background-color: darken(mat-color($dark-primary), 4%);
}
}
}
&:not(.cell-selection) {
.datatable-body-row {
&:hover,
&:hover .datatable-row-group {
background: mat-color($dark-background, 'hover');
}
&:focus,
&:focus .datatable-row-group {
background-color: darken(mat-color($dark-background, 'hover'), 2%);;
}
}
}
&.cell-selection {
.datatable-body-cell {
&:hover,
&:hover .datatable-row-group {
background: mat-color($dark-background, 'hover');
}
&:focus,
&:focus .datatable-row-group {
background-color: darken(mat-color($dark-background, 'hover'), 2%);;
}
&.active,
&.active .datatable-row-group {
@include _mat-toolbar-color($dark-primary);
}
&.active:hover,
&.active:hover .datatable-row-group {
background-color: darken(mat-color($dark-primary), 2%);
}
&.active:focus,
&.active:focus .datatable-row-group {
background-color: darken(mat-color($dark-primary), 4%);
}
}
}
.datatable-header .datatable-row-left, .datatable-body .datatable-row-left,
.datatable-header .datatable-row-right, .datatable-body .datatable-row-right {
background-color: rgba(73, 73, 73, 1);
}
/**
* Header Styles
*/
.datatable-header {
border-bottom: 1px solid mat-color($dark-foreground, divider);
.datatable-header-cell {
color: mat-color($dark-foreground, base);
}
.resize-handle {
border-right:solid 1px mat-color($dark-foreground, divider);
}
}
/**
* Footer Styles
*/
.datatable-footer {
border-top: 1px solid mat-color($dark-foreground, divider);
.datatable-pager {
li {
&.disabled a{
color: rgba(255, 255, 255, 0.26) !important;
}
a {
color: mat-color($dark-foreground, base);
}
&.active a{
background: mat-color($dark-primary);
}
}
}
}
}
[dir=rtl] {
.ngx-datatable.material .datatable-header .datatable-header-cell {
text-align: right;
}
.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell {
text-align: right;
}
.ngx-datatable.material .empty-row{
text-align: right;
}
.ngx-datatable.material .loading-row{
text-align: right;
}
.ngx-datatable .datatable-footer .datatable-pager {
text-align: left;
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
.taskboard {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: $spacer;
.taskboard-wrapper {
width: 280px;
padding-right: ($spacer / 2);
padding-left: ($spacer / 2);
box-sizing: border-box;
display: inline-block;
vertical-align: top;
height: 100%;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
.taskboard-list {
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100%;
white-space: normal;
background-color: rgba(0, 0, 0, 0.05);
border-radius: $border-radius-base;
}
.taskboard-header {
position: relative;
flex-direction: row;
align-items: center;
letter-spacing: 0.02rem;
padding: ($spacer/2);
margin: 0;
}
.taskboard-task {
position: relative;
display: flex;
flex-direction: column;
@include mat-elevation(1);
color: rgba(mat-color($foreground, base), 0.87);
background: mat-color($background, card);
border-radius: $border-radius-base;
padding: $gutter;
margin-bottom: ($spacer/2);
&:last-child {
margin-bottom: 0;
}
&:hover {
cursor: grab;
}
}
.taskboard-task::after {
content: "";
position: absolute;
border: 4px solid transparent;
top: 0;
border-top-width: 12px;
border-bottom-color: transparent;
right: 6px;
}
.taskboard-task.task-status-success::after {
border-top-color: map-get($mat-green, A700);
border-right-color: map-get($mat-green, A700);
border-left-color: map-get($mat-green, A700);
}
.taskboard-task.task-status-info::after {
border-top-color: map-get($mat-light-blue, A700);
border-right-color: map-get($mat-light-blue, A700);
border-left-color: map-get($mat-light-blue, A700);
}
.taskboard-task.task-status-warning::after {
border-top-color: map-get($mat-yellow, A700);
border-right-color: map-get($mat-yellow, A700);
border-left-color: map-get($mat-yellow, A700);
}
.taskboard-task.task-status-danger::after {
border-top-color: map-get($mat-red, A700);
border-right-color: map-get($mat-red, A700);
border-left-color: map-get($mat-red, A700);
}
.taskboard-cards {
padding: 0 ($spacer/2) ($spacer/2);
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
.taskboard-task-title {
margin-bottom: ($spacer/2);
}
}
[dir=rtl] :host .taskboard .taskboard-task::after {
right: auto;
left: 6px;
}
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
.timeline {
position: relative;
margin: ($gutter/3);
&::before {
position: absolute;
top: 6px;
width: 4px;
height: 100%;
content: '';
background: mat-color($background, card);
@include left(4px);
}
.timeline-icon {
position: absolute;
top: 15px;
width: 12px;
height: 12px;
text-align: center;
@include left(0);
@include rounded(50%);
&::after {
content: '';
position: absolute;
top: 2px;
@include left(2px);
width: 8px;
height: 8px;
@include rounded(50%);
background: white;
}
}
.timeline-card {
position: relative;
margin: 40px 0;
@include clearfix();
&:first-child .timeline-icon {
top: 0;
}
&:last-child .timeline-icon {
top: 0;
}
}
.timeline-card:first-child {
margin-top: 0;
}
.timeline-content {
position: relative;
@include margin-left(30px);
@include clearfix();
> .mat-card {
@include float(left);
display: inline-block;
margin: 0;
}
}
.timeline-content .timeline-date {
display: inline-block;
padding: 4px 0 10px;
}
.timeline-content > .mat-card::before {
position: absolute;
top: 11px;
width: 0;
height: 0;
content: ' ';
pointer-events: none;
border-width: 10px;
border-style: solid;
@include right(100%);
@include border-color(transparent, rgba(150, 150, 150, .2), transparent, transparent);
}
.timeline-content > .mat-card::after {
position: absolute;
top: 12px;
width: 0;
height: 0;
content: ' ';
pointer-events: none;
border-width: 9px;
border-style: solid;
@include right(100%);
@include border-color(transparent, mat-color($background, card), transparent, transparent);
}
}
@include media-breakpoint-up(lg) {
.timeline:not(.stacked) {
&::before {
@include left(50%);
@include margin-left(-2px);
}
.timeline-card:nth-child(odd) .timeline-content {
@include float(right);
}
.timeline-card:nth-child(even) .timeline-content {
@include float(left);
}
.timeline-card:nth-child(even) .timeline-content > .mat-card {
@include float(right);
}
.timeline-card:nth-child(even) .timeline-content > .mat-card::before {
position: absolute;
@include right(auto);
@include left(100%);
@include border-color(transparent, transparent, transparent, rgba(150, 150, 150, .2));
}
.timeline-card:nth-child(even) .timeline-content > .mat-card::after {
position: absolute;
@include right(auto);
@include left(100%);
@include border-color(transparent, transparent, transparent, mat-color($background, card));
}
.timeline-card:nth-child(odd) .timeline-content .timeline-date {
@include right(112%);
@include left(auto);
@include text-align(right);
}
.timeline-card:first-child {
margin-top: 0;
}
.timeline-icon {
@include left(50%);
@include margin-left(-6px);
}
.timeline-content {
width: 47%;
@include margin-left(0);
}
}
.timeline .timeline-date {
position: absolute;
top: 7px;
width: 100%;
@include left(112%);
}
.timeline.stacked {
.timeline-content > .mat-card {
margin-bottom: 0;
}
.timeline-date {
position: relative;
top: 0;
width: 100%;
@include left(auto);
}
}
}
@include media-breakpoint-down(md) {
.timeline {
.timeline-content {
margin-left: 30px;
}
.timeline-content > .mat-card {
@include float(left);
}
.timeline-content > .mat-card {
margin-bottom: 0;
}
.timeline-date {
position: relative;
top: 0;
width: 100%;
@include left(auto);
}
}
}
[dir="rtl"] :host {
.timeline {
&::before {
@include left(auto);
@include right(4px);
}
.timeline-icon {
@include left(auto);
@include right(0);
}
.timeline-content {
> .mat-card {
@include float(right!important);
}
}
&.stacked {
.timeline-content {
margin-left: 0;
margin-right: 30px;
}
.timeline-content .timeline-date {
text-align: right;
}
.timeline-content > .mat-card::before {
@include right(auto);
@include left(100%);
@include border-color(transparent, transparent, transparent, rgba(150, 150, 150, .2));
}
.timeline-content > .mat-card::after {
@include right(auto);
@include left(100%);
@include border-color(transparent, transparent, transparent, mat-color($background, card));
}
}
}
@include media-breakpoint-up(lg) {
.timeline:not(.stacked) {
&::before {
@include left(auto);
@include right(50%);
@include margin-left(0);
@include margin-right(-2px);
}
.timeline-icon {
@include left(auto);
@include right(50%);
@include margin-left(0);
@include margin-right(-6px);
}
}
.timeline .timeline-date {
text-align: left;
}
.timeline.stacked {
.timeline-date {
position: relative;
top: 0;
width: 100%;
@include left(auto);
text-align: right;
}
}
}
@include media-breakpoint-down(md) {
.timeline {
.timeline-content {
margin-left: 0;
margin-right: 30px;
}
.timeline-content .timeline-date {
text-align: right;
}
.timeline-content > .mat-card::before {
@include right(auto!important);
@include left(100%!important);
@include border-color(transparent, transparent, transparent, rgba(150, 150, 150, .2)!important);
}
.timeline-content > .mat-card::after {
@include right(auto!important);
@include left(100%!important);
@include border-color(transparent, transparent, transparent, mat-color($background, card)!important);
}
}
}
}
.app-dark :host {
.timeline {
&::before {
background: mat-color($dark-background, card);
}
.timeline-icon {
&::after {
background: mat-color($dark-background, card);
}
}
.timeline-content > .mat-card::before {
@include border-color(transparent, mat-color($dark-background, card), transparent, transparent!important);
}
.timeline-content > .mat-card::after {
@include border-color(transparent, mat-color($dark-background, card), transparent, transparent!important);
}
}
@include media-breakpoint-up(lg) {
.timeline:not(.stacked) {
.timeline-card:nth-child(even) .timeline-content > .mat-card::before {
@include border-color(transparent, transparent, transparent, mat-color($dark-background, card)!important);
}
.timeline-card:nth-child(even) .timeline-content > .mat-card::after {
@include border-color(transparent, transparent, transparent, mat-color($dark-background, card)!important);
}
}
}
}
.app-dark[dir="rtl"] :host {
.timeline {
&.stacked {
.timeline-content > .mat-card::before {
@include border-color(transparent, transparent, transparent, rgba(150, 150, 150, .2)!important);
}
.timeline-content > .mat-card::after {
@include border-color(transparent, transparent, transparent, mat-color($dark-background, card)!important);
}
}
}
@include media-breakpoint-down(md) {
.timeline {
.timeline-content > .mat-card::before {
@include border-color(transparent, transparent, transparent, rgba(150, 150, 150, .2)!important);
}
.timeline-content > .mat-card::after {
@include border-color(transparent, transparent, transparent, mat-color($dark-background, card)!important);
}
}
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
:host ::ng-deep {
.node-wrapper {
display: flex;
align-items: center;
}
.toggle-children-wrapper {
padding: 0;
}
.toggle-children {
background-image: none;
height: 24px;
width: 24px;
&::after{
content: 'arrow_drop_down';
font-family: 'Material Icons';
font-size: 24px;
width: 24px;
font-weight: normal;
font-style: normal;
line-height: 1;
/* Preferred icon size */
display: inline-block;
vertical-align: bottom;
white-space: nowrap;
letter-spacing: normal;
text-transform: none;
word-wrap: normal;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
}
.tree-node-collapsed > .node-wrapper > .toggle-children-wrapper > .toggle-children {
transform: rotate(-90deg);
}
.tree-node-expanded > .node-wrapper > .toggle-children-wrapper > .toggle-children {
transform: rotate(0);
}
.node-content-wrapper:hover {
background: mat-color($background, 'hover');
border-radius: $border-radius-large;
}
.tree-node-active.tree-node-focused > .node-wrapper > .node-content-wrapper {
background: mat-color($background, 'hover');
border-radius: $border-radius-large;
}
.tree-node-focused > .node-wrapper > .node-content-wrapper {
background: mat-color($background, 'hover');
}
}
[dir=rtl] :host ::ng-deep {
.tree-children {
padding-left: 0;
padding-right: 20px;
}
}
\ No newline at end of file
@import "../material.variables";
@import "../mixins/bi-app/bi-app-ltr";
@import "../app.variables";
@import "../mixins";
.my-drop-zone {
min-height: 32px;
margin-bottom: $gutter;
padding: ($gutter/2);
border: dashed 1px mat-color($foreground, divider);
background-color: white;
@include rounded($border-radius-base);
}
.app-dark :host {
.my-drop-zone {
background: mat-color($dark-background, card);
}
}
/* $header
------------------------------------------*/
mat-toolbar {
.toolbar-avatar {
width: 40px;
height: 40px;
line-height: 24px;
}
.toolbar-avatar img{
width: 40px;
border-radius: 50%;
}
.notification-label {
position: absolute;
top: 0;
left: 50%;
font-size: 12px;
font-weight: 700;
line-height: 13px;
border-radius: 50%;
width: 13px;
height: 13px;
background-color: mat-color($warn);
border: 4px solid mat-color($warn);
color: white;
text-align: center;
}
&.main-header {
padding: 0 8px;
position: relative;
box-shadow: 0 1px 8px rgba(0,0,0,.3);
z-index: 9;
.branding {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: auto 0;
line-height: 50px;
padding: 0 64px 0 16px;
}
.logo {
background-image: url(/assets/images/logo.svg);
width: 109px;
height: 25px;
-webkit-background-size: 109px 25px;
background-size: 109px 25px;
margin: auto;
}
.search-bar {
.search-form {
background: rgba(255,255,255,1);
position: relative;
border-radius: $border-radius-large;
margin-right: $gutter;
display: block;
max-width: 800px;
input {
font-size: 1rem;
padding: .95rem .75rem;
z-index: 2;
cursor: text;
text-indent: 30px;
border: none;
background: transparent;
width: 100%;
outline: 0;
}
.material-icons {
position: absolute;
top: 50%;
left: 10px;
margin-top: -12px;
color: rgba(mat-color($foreground, base), 0.87);
}
}
}
}
}
// Specific height for mobile devices in portrait mode.
@media ($mat-xsmall) and (orientation: portrait) {
mat-toolbar {
&.main-header {
.branding {
padding: 0 16px 0 16px;
}
.logo {
width: 87px;
height: 20px;
-webkit-background-size: 87px 20px;
background-size: 87px 20px;
}
}
}
}
[dir="rtl"] {
.main-header {
.branding {
padding: 0 16px 0 64px;
}
.search-bar {
.search-form {
.material-icons {
left: auto;
right: 10px;
}
}
}
}
}
/* $main-panel
------------------------------------------*/
$mat-toolbar-height-desktop: 64px !default;
$mat-toolbar-height-mobile-portrait: 56px !default;
$mat-toolbar-height-mobile-landscape: 48px !default;
.app-inner {
position: relative;
width: 100%;
max-width: 100%;
height: calc(100vh - #{$mat-toolbar-height-desktop});
@include flexbox;
@include flex-direction(row);
}
// As per specs, mobile devices will use a different height for toolbars than for desktop.
// The height for mobile landscape devices has been ignored since relying on `@media orientation`
// is causing issues on devices with a soft-keyboard.
// See: https://material.io/guidelines/layout/structure.html#structure-app-bar
@media ($mat-xsmall) {
.app-inner {
height: calc(100vh - #{$mat-toolbar-height-mobile-portrait});
}
}
/* Boxed layout*/
.app.boxed {
overflow: hidden;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 48em) {
.app.boxed {
max-width: 46.88rem;
}
}
@media (min-width: 62rem) {
.app.boxed {
max-width: 60.63rem;
}
}
@media (min-width: 75rem) {
.app.boxed {
max-width: 73.13rem;
}
}
.mat-drawer-content {
height: 100%;
> .ps {
position: relative;
height: 100%;
min-height: 100%;
box-sizing: border-box;
@include flex-direction(column);
@include flexbox;
@include flex(1);
overflow-y: auto;
overflow-x: hidden;
padding: ($gutter/3);
}
> .main-content {
box-sizing: border-box;
@include flex-direction(column);
@include flexbox;
@include flex(1);
> .content-view {
position: relative;
box-sizing: border-box;
padding: $gutter;
@include flex(1 0 auto);
}
}
}
.app-dark .mat-drawer-content {
background-color: rgba(53, 53, 53, 1.00);
}
@include media-breakpoint-up(md) {
.side-panel-opened[dir="rtl"] .mat-drawer-content {
margin-left: 0!important;
margin-right: $sidebar-width!important;
}
}
\ No newline at end of file
/* $sidebar-panel
------------------------------------------*/
$mat-toolbar-height-desktop: 64px !default;
$mat-toolbar-height-mobile-portrait: 56px !default;
$mat-toolbar-height-mobile-landscape: 48px !default;
mat-sidenav.sidebar-panel {
position: absolute!important;
overflow-x: hidden;
width: $sidebar-width;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)!important;
.mat-drawer-focus-trap>.cdk-focus-trap-content {
position: relative;
}
> nav {
min-width: $sidebar-width;
}
.mat-list-item .mat-list-item-content {
display: block;
height: auto;
max-height: 48px;
overflow: hidden;
padding: 0;
-webkit-transition: max-height .3s cubic-bezier(.35, 0, .25, 1);
-moz-transition: max-height .3s cubic-bezier(.35, 0, .25, 1);
transition: max-height .3s cubic-bezier(.35, 0, .25, 1);
}
.mat-list-item {
height: auto;
background-color: transparent;
-webkit-transition: background-color .3s cubic-bezier(.35, 0, .25, 1);
-moz-transition: background-color .3s cubic-bezier(.35, 0, .25, 1);
transition: background-color .3s cubic-bezier(.35, 0, .25, 1);
}
.mat-list-item.open > .mat-list-item-content {
max-height: 2000px;
background: mat-color($background, 'hover');
}
.mat-nav-list a {
display: flex;
flex-direction: row;
align-items: center;
height: 48px;
padding: 0 16px;
}
.sub-menu {
padding-top: 0;
overflow: hidden;
transition: .5s max-height cubic-bezier(.35, 0, .25, 1);
max-height: 0;
transform: translateZ(0)!important;
}
.sub-menu a{
@include padding-left(64px);
}
.sub-menu .sub-menu a{
@include padding-left(64px + 16px);
}
.sub-menu .sub-menu .sub-menu a{
@include padding-left(64px + 32px);
}
.sub-menu .sub-menu .sub-menu .sub-menu a{
@include padding-left(64px + 48px);
}
.navigation {
mat-icon:not(.menu-caret) {
@include margin-right(24px);
}
.menu-caret {
display: inline-block;
transition: transform $transition-duration cubic-bezier(.7, 0, .3, 1);
@include float(right);
@include margin-left(.3125rem);
text-align: center;
}
.open > .mat-list-item-content > [appAccordionToggle] > .menu-caret {
@include rotate(-180deg);
}
.menu-badge {
display: inline-block;
height: 16px;
min-width: 10px;
line-height: 18px;
text-align: center;
border-radius: 16px;
font-size: 10px;
font-weight: 700;
padding: 0 4px;
}
.open > .mat-list-item-content > .sub-menu {
max-height: 2000px;
}
}
}
@include media-breakpoint-up(md) {
/* Collapsed sidebar */
.collapsed-sidebar {
.mat-drawer-backdrop {
display: none;
}
&.side-panel-opened mat-sidenav.sidebar-panel ~ .mat-drawer-content {
margin-left: $collapsed-sidebar-width!important;
}
mat-sidenav.sidebar-panel {
transition: width .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1)!important;
}
mat-sidenav.sidebar-panel:not(:hover) {
width: $collapsed-sidebar-width;
.sub-menu {
display: none!important;
visibility: hidden;
}
.mat-list-item > .mat-list-item-content > a {
padding-right: 0;
padding-left: 0;
text-align: center;
}
.mat-list-item > .mat-list-item-content > a > span:not(.menu-badge),
.mat-list-item > .mat-list-item-content > a > .menu-caret {
display: none;
}
.mat-list-item > .mat-list-item-content > a > span.menu-badge {
position: absolute;
top: 10px;
right: 16px;
}
.mat-list-item > .mat-list-item-content > a > .material-icons {
width: $collapsed-sidebar-width!important;
padding: 0;
margin: 0;
}
}
}
/* Compact sidebar */
.compact-sidebar {
overflow-x: hidden;
> .mat-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
> .app-inner {
display: table;
border-collapse: separate;
min-height: calc(100vh - #{$mat-toolbar-height-desktop});
height: auto;
@media ($mat-xsmall) {
min-height: calc(100vh - #{$mat-toolbar-height-mobile-portrait});
}
.mat-drawer-content > .ps.ps--theme_default {
overflow: visible!important;
}
}
mat-sidenav.sidebar-panel ~ .mat-drawer-content {
display: table-cell!important;
vertical-align: top;
height: auto;
overflow: visible;
}
&.side-panel-closed mat-sidenav.sidebar-panel {
position: absolute!important;
}
&.side-panel-opened mat-sidenav.sidebar-panel {
position: relative!important;
}
mat-sidenav.sidebar-panel {
transition: width .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1)!important;
> .ps__scrollbar-x-rail,
> .ps__scrollbar-y-rail {
display: none;
}
}
mat-sidenav.sidebar-panel {
width: $compact-sidebar-width;
overflow: visible!important;
display: table-cell;
vertical-align: top;
.navigation > .mat-list-item > .mat-list-item-content {
height: 60px;
max-height: 60px;
align-items: center;
justify-content: center;
}
.navigation > .mat-list-item {
position: relative;
}
.navigation > .mat-list-item > .mat-list-item-content {
overflow: visible;
}
.navigation > .mat-list-item > .mat-list-item-content > a {
padding-right: 0;
padding-left: 0;
padding-top: 9px;
padding-bottom: 9px;
text-align: center;
box-sizing: content-box!important;
flex-direction: column!important;
height: 42px;
}
.navigation > .mat-list-item > .mat-list-item-content > a > span:not(.menu-badge):not(.menu-caret) {
font-size: 12px;
}
.navigation > .mat-list-item > .mat-list-item-content > a > span.menu-badge {
position: absolute;
top: 10px;
right: 16px;
}
.navigation > .mat-list-item > .mat-list-item-content > a > .material-icons {
width: $compact-sidebar-width!important;
padding: 0;
margin: 0;
}
.navigation > .mat-list-item:hover > .mat-list-item-content > .sub-menu {
display: block!important;
visibility: visible;
}
.mat-list-item > .mat-list-item-content > a > .menu-caret,
.mat-list-item > .mat-list-item-content > a > [fxflex], {
display: none;
}
.sub-menu {
display: none!important;
visibility: hidden;
background: mat-color($background, 'card');
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
position: absolute;
top: 0;
left: 100%;
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
a {
padding-left: 16px;
height: 36px;
}
}
}
}
}
[dir="rtl"] {
mat-sidenav.sidebar-panel {
.sub-menu a{
@include padding-right(64px);
@include padding-left(16px);
}
.sub-menu .sub-menu a{
@include padding-right(64px + 16px);
@include padding-left(16px);
}
.sub-menu .sub-menu .sub-menu a{
@include padding-right(64px + 32px);
@include padding-left(16px);
}
.sub-menu .sub-menu .sub-menu .sub-menu a{
@include padding-right(64px + 48px);
@include padding-left(16px);
}
.navigation {
mat-icon:not(.menu-caret) {
@include margin-left(24px);
@include margin-right(0);
}
.menu-caret {
@include float(left);
@include margin-right(.3125rem);
@include margin-left(0);
}
}
}
}
@include media-breakpoint-up(md) {
[dir="rtl"] {
&.collapsed-sidebar, .collapsed-sidebar {
&.side-panel-opened mat-sidenav.sidebar-panel ~ .mat-drawer-content {
margin-left: 0!important;
margin-right: $collapsed-sidebar-width!important;
}
mat-sidenav.sidebar-panel:not(:hover) {
.mat-list-item > .mat-list-item-content > a > span.menu-badge {
right: auto;
left: 16px;
}
}
}
&.compact-sidebar, .compact-sidebar {
mat-sidenav.sidebar-panel {
.navigation > .mat-list-item > .mat-list-item-content > a > span.menu-badge {
right: auto;
left: 16px;
}
.sub-menu {
left: auto;
right: 100%;
a {
padding-left: 16px;
padding-right: 16px;
}
}
}
}
}
.app-dark {
&.compact-sidebar, .compact-sidebar {
mat-sidenav.sidebar-panel .sub-menu {
background: mat-color($dark-background, card);
}
}
}
}
.media-grid {
text-align: center;
overflow: hidden;
figure {
position: relative;
text-align: center;
cursor: pointer;
background: rgba(0,0,0,.38);
text-align: left;
border-radius: $border-radius-base $border-radius-base 0 0;
text-align: center;
}
figure img {
position: relative;
display: block;
max-width: 100%;
border-radius: $border-radius-base $border-radius-base 0 0;
}
&.compact {
border-radius: $border-radius-base 0 0 $border-radius-base;
figure {
border-radius: $border-radius-base 0 0 $border-radius-base;
}
figure img {
border-radius: $border-radius-base 0 0 $border-radius-base;
}
}
.product-badge {
color: #fff;
text-align: center;
position: absolute;
border-top: 30px solid mat-color($warn);
border-bottom: 30px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid mat-color($warn);
top: 0;
left: 0;
z-index: 100;
span {
position: absolute;
transform: rotate(-45deg);
top: -18px;
left: -25px;
white-space: nowrap;
}
}
figure figcaption {
color: #fff;
text-transform: uppercase;
backface-visibility: hidden;
}
figure figcaption::before {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-style: solid;
border-color: rgba(0,0,0,.38);
content: '';
transition: transform $transition-duration;
}
figure figcaption::before {
right: 0;
bottom: 0;
border-width: 0 45px 0 0;
transform: translate3d(45px,0,0);
}
figure figcaption,
figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
figure p {
margin: 0;
}
figure p {
float: right;
clear: both;
text-align: center;
text-transform: none;
font-size: 1rem;
width: 45px;
padding-top: 1rem;
}
figure img,
figure p a {
transition: opacity $transition-duration, transform $transition-duration;
}
figure img {
opacity: 0.85;
}
figure p a {
display: block;
margin-bottom: $spacer;
color: #fff;
opacity: 0;
transform: translate3d(90px,0,0);
}
figure:hover figcaption::before {
transform: translate3d(0,0,0);
}
figure:hover p a {
transform: translate3d(0,0,0);
}
figure:hover p a {
opacity: 1;
}
figure:hover p a:first-child {
transition-delay: 0.025s;
}
figure:hover p a:nth-child(2) {
transition-delay: 0.05s;
}
figure:hover p a:nth-child(3) {
transition-delay: 0.075s;
}
figure:hover p a:nth-child(4) {
transition-delay: 0.1s;
}
}
\ No newline at end of file
/* $chat-panel
------------------------------------------*/
.chat-panel {
max-width: 320px;
width: 100%;
overflow: hidden;
mat-tab-group, .mat-tab-body-wrapper, mat-tab-body, .mat-tab-body-content {
height: 100%;
}
.scroll {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
width: 100%;
-webkit-overflow-scrolling: touch;
}
}
/* $scaffolding
------------------------------------------*/
html {
font-size: 16px;
}
html, body {
width: 100%;
height: 100%;
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
min-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
font-weight: $font-weight-base;
@include mat-typography-level-to-styles($config, body-1);
color: rgba(mat-color($foreground, base), 0.87);
line-height: 1.5;
font-family: $mat-font-family;
&.pace-done {
background: #6b6b6b;
}
}
[tabindex='-1']:focus {
outline: none;
}
select,
button,
textarea,
input {
vertical-align: baseline;
}
html, body {
&[dir=rtl], &[dir=ltr] {
unicode-bidi: embed
}
}
bdo[dir=rtl] {
direction: rtl;
unicode-bidi: bidi-override;
}
bdo[dir=ltr] {
direction: ltr;
unicode-bidi: bidi-override;
}
.mat-card.settings-panel {
position: fixed;
bottom: 6px;
right: 6px;
width: 250px;
z-index: 9;
}
.demo-checkbox {
.mat-checkbox, .mat-checkbox-layout {
width: 100%;
}
.mat-checkbox-layout .mat-checkbox-label {
flex: 1;
box-sizing: border-box;
-webkit-box-flex: 1;
}
}
/* $error-pages
------------------------------------------*/
.session {
position: relative;
z-index: 4000;
min-height: 100vh;
@include flexbox;
@include flex-direction(column);
}
.session-content {
padding: 40px $gutter;
@include flexbox;
@include align-items(center);
@include justify-content(center);
@include flex(1 0 auto);
@include flex-direction(column);
min-height: 100%;
}
.session-wrapper {
@include flex(none);
max-width: 400px;
width: 100%;
margin: 0 auto;
}
.lockscreen-avatar {
position: relative;
display: block;
margin: -75px auto 0!important;
}
.lockscreen-wrapper {
@include flex(none);
max-width: 280px;
width: 100%;
margin: 0 auto;
}
.error-title {
font-size: 150px;
line-height: 1.2;
font-weight: 900;
display: inline-table;
position: relative;
background: mat-color($primary);
color: #fff;
padding: 0 $gutter;
border-radius: 8px;
cursor: pointer;
margin: 0 0 $gutter;
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: mat-color($primary);
border-width: 8px;
margin-left: -8px;
}
}
.error-subtitle {
font-size: 32px;
font-weight: 300;
}
/* $typography
------------------------------------------*/
a {
text-decoration: none;
color: inherit;
@include hover-focus {
cursor: pointer;
text-decoration: none;
outline: 0;
}
}
button {
outline: 0;
}
figure {
margin: 0;
}
hr {
margin-top: 0;
margin-bottom: 0;
border: 0;
border-top: 1px solid mat-color($foreground, divider);
}
strong, b {
font-weight: 700;
}
.strikethrough {
text-decoration: line-through;
}
$mat-fab-size: 56px !default;
$mat-fab-padding: 16px !default;
[mat-raised-button], [mat-fab], [mat-mini-fab], [mat-button], [mat-icon-button] {
border-radius: $border-radius-base;
font-weight: $font-weight-base;
&[mat-button-sm] {
font-size: 13px;
line-height: 30px;
padding: 0 8px;
}
}
[mat-icon-button] {
&[mat-button-sm] {
padding: 0;
width: 30px;
height: 30px;
mat-icon {
font-size: 20px;
line-height: 20px;
}
}
}
@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
[mat-fab].mat-fab-#{$spot} {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
position: fixed;
}
}
$mat-fab-pos-offset: ($mat-fab-size - $mat-fab-padding) / 2;
@include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, 1rem, auto);
@include mat-fab-position(bottom-left, auto, auto, -25px, $mat-fab-pos-offset);
@include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);
@include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);
/* $cards
------------------------------------------*/
$mat-card-header-size: 40px !default;
body {
.mat-card {
padding: 0;
margin: ($gutter/3);
border-radius: $border-radius-base;
@include mat-elevation(1);
color: rgba(mat-color($foreground, base), 0.87);
.mat-card-header {
height: auto;
}
> :first-child {
border-radius: $border-radius-base $border-radius-base 0 0;
}
> :last-child {
border-radius: 0 0 $border-radius-base $border-radius-base;
}
[matCardAvatar] {
height: $mat-card-header-size;
width: $mat-card-header-size;
border-radius: 50%;
}
[matCardAvatar] {
font-size: 40px;
line-height: 40px;
margin: $gutter 0 0 $gutter;
}
.mat-card-image {
width: 100%;
margin: 0;
}
.mat-card-image:first-child {
margin-top: 0;
border-radius: $border-radius-base $border-radius-base 0 0;
}
.mat-card-title {
padding-top: $gutter;
padding-left: $gutter;
padding-right: $gutter;
line-height: 1;
font-size: 16px;
font-weight: 400;
}
.mat-card-subtitle {
padding-left: $gutter;
padding-right: $gutter;
line-height: 1;
font-size: 13px;
}
.mat-card-subtitle:first-child {
padding-top: $gutter;
}
.mat-card-title:nth-child(2) {
margin-top: -24px;
}
.mat-card-content {
padding: $gutter;
margin-bottom: 0;
position: relative;
}
[mat-fab-card-float] {
top: -36px;
position: absolute;
right: 8px;
}
.mat-card-actions,
.mat-card-actions:last-child {
padding: $gutter / 2;
margin: 0;
}
&.mat-card {
padding: 0;
}
[mat-card-float-icon] {
position: absolute;
right: 15px;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
.material-icons {
font-size: 40px;
opacity: .2;
transform: rotate(-5deg);
}
}
[mat-card-widget] {
height: auto;
display: flex;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
max-width: 100%;
padding: $gutter;
[mat-card-widget-title], p {
margin: 0;
padding: 0;
line-height: $headings-line-height!important;
}
}
.card-image-header {
position: relative;
background-size: cover;
background-position: center bottom;
background-repeat: no-repat;
width: 100%;
img {
border-radius: $border-radius-base $border-radius-base 0 0;
display: block;
max-width: 100%;
}
}
&.card-widget {
.card-widget-content {
display: flex;
flex-direction: row;
height: 40px;
margin: -($gutter/2) 0 $gutter 0;
}
}
}
}
body [dir="rtl"] {
.mat-card {
[matCardAvatar] {
margin: $gutter $gutter 0 0;
}
[mat-fab-card-float] {
right: auto;
left: 8px;
}
[mat-card-float-icon] {
right: auto;
left: 15px;
}
}
}
.mat-dialog-container {
background: mat-color($background, card);
border-radius: $border-radius-base;
}
\ No newline at end of file
/* $listgroup
------------------------------------------*/
mat-list, mat-nav-list {
mat-list-item, a[mat-list-item] {
color: rgba(mat-color($foreground, base), 0.87);
}
}
mat-list-item, .mat-list-item {
mat-icon {
&[mat-list-avatar] {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
display: flex;
}
}
}
mat-divider {
border-top: 1px solid mat-color($foreground, divider)!important;
}
mat-list mat-list-item [mat-list-avatar], mat-list a[mat-list-item] [mat-list-avatar], mat-nav-list mat-list-item [mat-list-avatar], mat-nav-list a[mat-list-item] [mat-list-avatar] {
min-width: 40px;
}
mat-list-item.active > .mat-list-item-content {
background: mat-color($background, 'hover');
}
mat-list mat-list-item .mat-list-item-content,
mat-list a[mat-list-item] .mat-list-item-content,
mat-nav-list mat-list-item .mat-list-item-content,
mat-nav-list a[mat-list-item] .mat-list-item-content{
font-size: $font-size-base!important;
}
\ No newline at end of file
.mat-menu {
border-radius: $border-radius-base;
}
[mat-menu-item] {
font-size: $font-size-base!important;
}
\ No newline at end of file
body {
.mat-select-panel {
background-color: mat-color($background, card);
}
.mat-select-trigger, .mat-option {
font-size: $font-size-base;
}
.app-dark .mat-select-panel {
background-color: mat-color($dark-background, card);
}
}
\ No newline at end of file
.mat-tab-label {
color: rgba(mat-color($foreground, base), 0.87);
align-items: center;
display: flex;
justify-content: center;
}
.app-dark .mat-tab-label {
color: mat-color($dark-foreground, base);
}
\ No newline at end of file
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 544px, md: 768px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
// 544px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
// 767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-up($name, $breakpoints) {
@include media-breakpoint-down($name, $breakpoints) {
@content;
}
}
}
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@include media-breakpoint-up($lower, $breakpoints) {
@include media-breakpoint-down($upper, $breakpoints) {
@content;
}
}
}
@mixin clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
}
// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
//
// Copyright (c) 2013 Brian Franco
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// This is a set of mixins for those who want to mess around with flexbox
// using the native support of current browsers. For full support table
// check: http://caniuse.com/flexbox
//
// Basically this will use:
//
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
//
// This was inspired by:
//
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
//
// With help from:
//
// * http://w3.org/tr/css3-flexbox/
// * http://the-echoplex.net/flexyboxes/
// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
// * http://css-tricks.com/using-flexbox/
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
//----------------------------------------------------------------------
// Flexbox Containers
//
// The 'flex' value causes an element to generate a block-level flex
// container box.
//
// The 'inline-flex' value causes an element to generate a inline-level
// flex container box.
//
// display: flex | inline-flex
//
// http://w3.org/tr/css3-flexbox/#flex-containers
//
// (Placeholder selectors for each type, for those who rather @extend)
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
%flexbox { @include flexbox; }
//----------------------------------
@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
%inline-flex { @include inline-flex; }
//----------------------------------------------------------------------
// Flexbox Direction
//
// The 'flex-direction' property specifies how flex items are placed in
// the flex container, by setting the direction of the flex container's
// main axis. This determines the direction that flex items are laid out in.
//
// Values: row | row-reverse | column | column-reverse
// Default: row
//
// http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
// Shorter version:
@mixin flex-dir($args...) { @include flex-direction($args...); }
//----------------------------------------------------------------------
// Flexbox Wrap
//
// The 'flex-wrap' property controls whether the flex container is single-line
// or multi-line, and the direction of the cross-axis, which determines
// the direction new lines are stacked in.
//
// Values: nowrap | wrap | wrap-reverse
// Default: nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
//----------------------------------------------------------------------
// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
//----------------------------------------------------------------------
// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property
@mixin order($int: 0) {
-webkit-box-ordinal-group: $int + 1;
-webkit-order: $int;
-moz-order: $int;
-ms-flex-order: $int;
order: $int;
}
//----------------------------------------------------------------------
// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property
@mixin flex-grow($int: 0) {
-webkit-box-flex: $int;
-webkit-flex-grow: $int;
-moz-flex-grow: $int;
-ms-flex-positive: $int;
flex-grow: $int;
}
//----------------------------------------------------------------------
// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
@mixin flex-shrink($int: 1) {
-webkit-flex-shrink: $int;
-moz-flex-shrink: $int;
-ms-flex-negative: $int;
flex-shrink: $int;
}
//----------------------------------------------------------------------
// Flexbox Basis
//
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
//
// Values: Like "width"
// Default: auto
//
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
@mixin flex-basis($value: auto) {
-webkit-flex-basis: $value;
-moz-flex-basis: $value;
-ms-flex-preferred-size: $value;
flex-basis: $value;
}
//----------------------------------------------------------------------
// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property
@mixin flex($fg: 1, $fs: null, $fb: null) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so let's grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
-webkit-box-flex: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg-boxflex;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
//----------------------------------------------------------------------
// Flexbox Justify Content
//
// The 'justify-content' property aligns flex items along the main axis
// of the current line of the flex container. This is done after any flexible
// lengths and any auto margins have been resolved. Typically it helps distribute
// extra free space leftover when either all the flex items on a line are
// inflexible, or are flexible but have reached their maximum size. It also
// exerts some control over the alignment of items when they overflow the line.
//
// Note: 'space-*' values not supported in older syntaxes.
//
// Values: flex-start | flex-end | center | space-between | space-around
// Default: flex-start
//
// http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: distribute;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
// Shorter version:
@mixin flex-just($args...) { @include justify-content($args...); }
//----------------------------------------------------------------------
// Flexbox Align Items
//
// Flex items can be aligned in the cross axis of the current line of the
// flex container, similar to 'justify-content' but in the perpendicular
// direction. 'align-items' sets the default alignment for all of the flex
// container's items, including anonymous flex items. 'align-self' allows
// this default alignment to be overridden for individual flex items. (For
// anonymous flex items, 'align-self' always matches the value of 'align-items'
// on their associated flex container.)
//
// Values: flex-start | flex-end | center | baseline | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
//----------------------------------
// Flexbox Align Self
//
// Values: auto | flex-start | flex-end | center | baseline | stretch
// Default: auto
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
//----------------------------------------------------------------------
// Flexbox Align Content
//
// The 'align-content' property aligns a flex container's lines within the
// flex container when there is extra space in the cross-axis, similar to
// how 'justify-content' aligns individual items within the main-axis. Note,
// this property has no effect when the flexbox has only a single line.
//
// Values: flex-start | flex-end | center | space-between | space-around | stretch
// Default: stretch
//
// http://w3.org/tr/css3-flexbox/#align-content-property
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
\ No newline at end of file
@mixin hover {
&:hover { @content }
}
@mixin hover-focus {
&:focus,
&:hover {
@content
}
}
@mixin plain-hover-focus {
&,
&:focus,
&:hover {
@content
}
}
@mixin hover-focus-active {
&:focus,
&:active,
&:hover {
@content
}
}
//
@mixin vertical-align($parent-height, $element-height) {
margin-top: (($parent-height - $element-height) / 2);
margin-bottom: (($parent-height - $element-height) / 2);
}
@mixin vertical-align-padding($parent-height, $element-height) {
padding-top: (($parent-height - $element-height) / 2);
padding-bottom: (($parent-height - $element-height) / 2);
}
@mixin rounded($radius: 2px) {
border-radius: $radius;
}
@mixin box-shadow($arguments...) {
box-shadow: $arguments;
}
@mixin transform($arguments...) {
-webkit-transform: $arguments;
-moz-transform: $arguments;
-ms-transform: $arguments;
-o-transform: $arguments;
transform: $arguments;
}
@mixin rotate($deg: 5deg) {
@include transform(rotate($deg));
}
@mixin translate($x: 0, $y:0) {
@include transform(translate($x, $y));
}
@mixin translate3d($x: 0, $y:0, $z:0) {
@include transform(translate3d($x, $y, $z));
}
@mixin scale($x: 0, $y:0) {
@include transform(scale($x, $y));
}
@mixin scale3d($x: 0, $y:0, $z:0) {
@include transform(scale3d($x, $y, $z));
}
@mixin transition($value...) {
-webkit-transition: $value;
transition: $value;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-timing-function($timing) {
-webkit-animation-timing-function: $timing;
animation-timing-function: $timing;
}
@mixin animation-fill-mode($mode) {
-webkit-animation-fill-mode: $mode;
animation-fill-mode: $mode;
}
@mixin animation-name($name) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin transition-delay($delay) {
-webkit-transition-delay: $delay;
transition-delay: $delay;
}
@mixin transition-duration($duration: .2s) {
-moz-transition-duration: $duration;
transition-duration: $duration;
}
@mixin transform-origin($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-ms-transform-origin: $origin;
-o-transform-origin: $origin;
transform-origin: $origin;
}
@mixin user-select($argument: none) {
-webkit-user-select: $argument;
-moz-user-select: $argument;
-ms-user-select: $argument;
user-select: $argument;
}
@mixin opacity($opacity: .5) {
opacity: $opacity;
}
// Typography
@mixin text-emphasis-variant($parent, $color) {
#{$parent} {
color: $color !important;
}
a#{$parent} {
@include hover-focus {
color: darken($color, 10%);
}
}
}
// ------------------------------------------
// left to right module
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
@import 'variables-ltr';
@import 'mixins';
\ No newline at end of file
// ------------------------------------------
// right to left module
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
@import 'variables-rtl';
@import 'mixins';
\ No newline at end of file
// ------------------------------------------
// bi app mixins
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
// ------------------------------------------
// Table of contents
// ------------------------------------------
// padding
// margin
// float
// text align
// clear
// left / right
// border
// - width
// - style
// - color
// - generic
// - radius
// ltr / rtl contents
// ------------------------------------------
// generic mixin for properties with values
// (top right bottom left)
// ------------------------------------------
@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
@if $bi-app-direction == ltr {
#{$property}: $top $right $bottom $left;
} @else {
#{$property}: $top $left $bottom $right;
}
}
// padding
// ------------------------------------------
@mixin padding-left($distance) {
padding-#{$bi-app-left}: $distance;
}
@mixin padding-right($distance) {
padding-#{$bi-app-right}: $distance;
}
@mixin padding($top, $right, $bottom, $left) {
@include bi-app-compact(padding, $top, $right, $bottom, $left);
}
// margin
// ------------------------------------------
@mixin margin-left($distance) {
margin-#{$bi-app-left}: $distance;
}
@mixin margin-right($distance) {
margin-#{$bi-app-right}: $distance;
}
@mixin margin($top, $right, $bottom, $left) {
@include bi-app-compact(margin, $top, $right, $bottom, $left);
}
// float
// ------------------------------------------
@mixin bi-app-float-left($important: '') {
float: $bi-app-left unquote($important);
}
@mixin bi-app-float-right($important: '') {
float: $bi-app-right unquote($important);
}
@mixin float($direction, $important: '') {
@if $direction == left {
@include bi-app-float-left($important);
} @else if $direction == right {
@include bi-app-float-right($important);
} @else {
float: $direction;
}
}
// text align
// ------------------------------------------
@mixin bi-app-text-align-left {
text-align: $bi-app-left;
}
@mixin bi-app-text-align-right {
text-align: $bi-app-right;
}
@mixin text-align($direction) {
@if $direction == left {
@include bi-app-text-align-left;
} @else if $direction == right {
@include bi-app-text-align-right;
} @else {
text-align: $direction;
}
}
// clear
// ------------------------------------------
@mixin bi-app-clear-left {
clear: $bi-app-left;
}
@mixin bi-app-clear-right {
clear: $bi-app-right;
}
@mixin clear($direction) {
@if $direction == left {
@include bi-app-clear-left;
} @else if $direction == right {
@include bi-app-clear-right;
} @else {
clear: $direction;
}
}
// left / right
// ------------------------------------------
@mixin left($distance) {
@if $bi-app-direction == ltr {
left: $distance;
} @else if $bi-app-direction == rtl {
right: $distance;
}
}
@mixin right($distance) {
@if $bi-app-direction == ltr {
right: $distance;
} @else if $bi-app-direction == rtl {
left: $distance;
}
}
// border
// ------------------------------------------
// width
@mixin border-left-width($width) {
border-#{$bi-app-left}-width: $width;
}
@mixin border-right-width($width) {
border-#{$bi-app-right}-width: $width;
}
@mixin border-width($top, $right, $bottom, $left) {
@include bi-app-compact(border-width, $top, $right, $bottom, $left);
}
// style
@mixin border-left-style($style) {
border-#{$bi-app-left}-style: $style;
}
@mixin border-right-style($style) {
border-#{$bi-app-right}-style: $style;
}
@mixin border-style($top, $right, $bottom, $left) {
@include bi-app-compact(border-style, $top, $right, $bottom, $left);
}
// color
@mixin border-left-color($color) {
border-#{$bi-app-left}-color: $color;
}
@mixin border-right-color($color) {
border-#{$bi-app-right}-color: $color;
}
@mixin border-color($top, $right, $bottom, $left) {
@include bi-app-compact(border-color, $top, $right, $bottom, $left);
}
// generic
@mixin border-left($border-style) {
border-#{$bi-app-left}: $border-style;
}
@mixin border-right($border-style) {
border-#{$bi-app-right}: $border-style;
}
// radius
@mixin border-top-left-radius($radius) {
-webkit-border-top-#{$bi-app-left}-radius: $radius;
-moz-border-top#{$bi-app-left}-radius: $radius;
border-top-#{$bi-app-left}-radius: $radius;
}
@mixin border-top-right-radius($radius) {
-webkit-border-top-#{$bi-app-right}-radius: $radius;
-moz-border-top#{$bi-app-right}-radius: $radius;
border-top-#{$bi-app-right}-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
-webkit-border-bottom-#{$bi-app-left}-radius: $radius;
-moz-border-bottom#{$bi-app-left}-radius: $radius;
border-bottom-#{$bi-app-left}-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
-webkit-border-bottom-#{$bi-app-right}-radius: $radius;
-moz-border-bottom#{$bi-app-right}-radius: $radius;
border-bottom-#{$bi-app-right}-radius: $radius;
}
@mixin border-right-radius($radius) {
@include border-top-right-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-left-radius($radius) {
@include border-top-left-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin border-top-radius($radius) {
@include border-top-left-radius($radius);
@include border-top-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
@include border-bottom-left-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
@if $topRight != null {
@include border-top-left-radius($topLeft);
@include border-top-right-radius($topRight);
@include border-bottom-right-radius($bottomRight);
@include border-bottom-left-radius($bottomLeft);
} @else {
-webkit-border-radius: $topLeft;
-moz-border-radius: $topLeft;
-ms-border-radius: $topLeft;
-o-border-radius: $topLeft;
border-radius: $topLeft;
}
}
// Returns "en" or "ar", useful for image suffixes.
// Usage: background-image: url(/img/header-#{lang()}.png);
@function lang() {
@if $bi-app-direction == ltr {
@return 'en';
} @else {
@return 'ar';
}
}
// Support for "direction" declaration (renders ltr/rtl).
// Useful for form elements as they swap the text-indent property and align the text accordingly.
@mixin direction {
direction: $bi-app-direction;
}
// Inverts a percentage value. Example: 97% becames 3%.
// Useful for background-position.
@function bi-app-invert-percentage($percentage) {
@if $bi-app-direction == rtl {
@return 100% - $percentage;
} @else {
@return $percentage;
}
}
// ltr / rtl contents
// ------------------------------------------
@mixin ltr {
@if $bi-app-direction == ltr {
@content;
}
}
@mixin rtl {
@if $bi-app-direction == rtl {
@content;
}
}
// ------------------------------------------
// left to right variables to be used by bi-app mixins
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
// namespacing variables with bi-app to
// avoid conflicting with other global variables
$bi-app-left : left;
$bi-app-right : right;
$bi-app-direction : ltr;
$bi-app-invert-direction : rtl;
$imp : !important;
\ No newline at end of file
// ------------------------------------------
// right to left variables to be used by bi-app mixins
// authors:
// twitter.com/anasnakawa
// twitter.com/victorzamfir
// licensed under the MIT license
// http://www.opensource.org/licenses/mit-license.php
// ------------------------------------------
// namespacing variables with bi-app to
// avoid conflicting with other global variables
$bi-app-left : right;
$bi-app-right : left;
$bi-app-direction : rtl;
$bi-app-invert-direction : ltr;
$imp : !important;
\ No newline at end of file
.mat-red { background-color: mat-color($mat-red, 500)!important; color: mat-contrast($mat-red, 500)!important;}
.mat-red-50 { background-color: mat-color($mat-red, 50)!important; color: mat-contrast($mat-red, 50)!important;}
.mat-red-100 { background-color: mat-color($mat-red, 100)!important; color: mat-contrast($mat-red, 100)!important;}
.mat-red-200 { background-color: mat-color($mat-red, 200)!important; color: mat-contrast($mat-red, 200)!important;}
.mat-red-300 { background-color: mat-color($mat-red, 300)!important; color: mat-contrast($mat-red, 300)!important;}
.mat-red-400 { background-color: mat-color($mat-red, 400)!important; color: mat-contrast($mat-red, 400)!important;}
.mat-red-500 { background-color: mat-color($mat-red, 500)!important; color: mat-contrast($mat-red, 500)!important;}
.mat-red-600 { background-color: mat-color($mat-red, 600)!important; color: mat-contrast($mat-red, 600)!important;}
.mat-red-700 { background-color: mat-color($mat-red, 700)!important; color: mat-contrast($mat-red, 700)!important;}
.mat-red-800 { background-color: mat-color($mat-red, 800)!important; color: mat-contrast($mat-red, 800)!important;}
.mat-red-900 { background-color: mat-color($mat-red, 900)!important; color: mat-contrast($mat-red, 900)!important;}
.mat-red-A100 { background-color: mat-color($mat-red, A100)!important; color: mat-contrast($mat-red, A100)!important;}
.mat-red-A200 { background-color: mat-color($mat-red, A200)!important; color: mat-contrast($mat-red, A200)!important;}
.mat-red-A400 { background-color: mat-color($mat-red, A400)!important; color: mat-contrast($mat-red, A400)!important;}
.mat-red-A700 { background-color: mat-color($mat-red, A700)!important; color: mat-contrast($mat-red, A700)!important;}
.mat-pink { background-color: mat-color($mat-pink, 500)!important; color: mat-contrast($mat-pink, 500)!important;}
.mat-pink-50 { background-color: mat-color($mat-pink, 50)!important; color: mat-contrast($mat-pink, 50)!important;}
.mat-pink-100 { background-color: mat-color($mat-pink, 100)!important; color: mat-contrast($mat-pink, 100)!important;}
.mat-pink-200 { background-color: mat-color($mat-pink, 200)!important; color: mat-contrast($mat-pink, 200)!important;}
.mat-pink-300 { background-color: mat-color($mat-pink, 300)!important; color: mat-contrast($mat-pink, 300)!important;}
.mat-pink-400 { background-color: mat-color($mat-pink, 400)!important; color: mat-contrast($mat-pink, 400)!important;}
.mat-pink-500 { background-color: mat-color($mat-pink, 500)!important; color: mat-contrast($mat-pink, 500)!important;}
.mat-pink-600 { background-color: mat-color($mat-pink, 600)!important; color: mat-contrast($mat-pink, 600)!important;}
.mat-pink-700 { background-color: mat-color($mat-pink, 700)!important; color: mat-contrast($mat-pink, 700)!important;}
.mat-pink-800 { background-color: mat-color($mat-pink, 800)!important; color: mat-contrast($mat-pink, 800)!important;}
.mat-pink-900 { background-color: mat-color($mat-pink, 900)!important; color: mat-contrast($mat-pink, 900)!important;}
.mat-pink-A100 { background-color: mat-color($mat-pink, A100)!important; color: mat-contrast($mat-pink, A100)!important;}
.mat-pink-A200 { background-color: mat-color($mat-pink, A200)!important; color: mat-contrast($mat-pink, A200)!important;}
.mat-pink-A400 { background-color: mat-color($mat-pink, A400)!important; color: mat-contrast($mat-pink, A400)!important;}
.mat-pink-A700 { background-color: mat-color($mat-pink, A700)!important; color: mat-contrast($mat-pink, A700)!important;}
.mat-purple { background-color: mat-color($mat-purple, 500)!important; color: mat-contrast($mat-purple, 500)!important;}
.mat-purple-50 { background-color: mat-color($mat-purple, 50)!important; color: mat-contrast($mat-purple, 50)!important;}
.mat-purple-100 { background-color: mat-color($mat-purple, 100)!important; color: mat-contrast($mat-purple, 100)!important;}
.mat-purple-200 { background-color: mat-color($mat-purple, 200)!important; color: mat-contrast($mat-purple, 200)!important;}
.mat-purple-300 { background-color: mat-color($mat-purple, 300)!important; color: mat-contrast($mat-purple, 300)!important;}
.mat-purple-400 { background-color: mat-color($mat-purple, 400)!important; color: mat-contrast($mat-purple, 400)!important;}
.mat-purple-500 { background-color: mat-color($mat-purple, 500)!important; color: mat-contrast($mat-purple, 500)!important;}
.mat-purple-600 { background-color: mat-color($mat-purple, 600)!important; color: mat-contrast($mat-purple, 600)!important;}
.mat-purple-700 { background-color: mat-color($mat-purple, 700)!important; color: mat-contrast($mat-purple, 700)!important;}
.mat-purple-800 { background-color: mat-color($mat-purple, 800)!important; color: mat-contrast($mat-purple, 800)!important;}
.mat-purple-900 { background-color: mat-color($mat-purple, 900)!important; color: mat-contrast($mat-purple, 900)!important;}
.mat-purple-A100 { background-color: mat-color($mat-purple, A100)!important; color: mat-contrast($mat-purple, A100)!important;}
.mat-purple-A200 { background-color: mat-color($mat-purple, A200)!important; color: mat-contrast($mat-purple, A200)!important;}
.mat-purple-A400 { background-color: mat-color($mat-purple, A400)!important; color: mat-contrast($mat-purple, A400)!important;}
.mat-purple-A700 { background-color: mat-color($mat-purple, A700)!important; color: mat-contrast($mat-purple, A700)!important;}
.mat-deep-purple { background-color: mat-color($mat-deep-purple, 500)!important; color: mat-contrast($mat-deep-purple, 500)!important;}
.mat-deep-purple-50 { background-color: mat-color($mat-deep-purple, 50)!important; color: mat-contrast($mat-deep-purple, 50)!important;}
.mat-deep-purple-100 { background-color: mat-color($mat-deep-purple, 100)!important; color: mat-contrast($mat-deep-purple, 100)!important;}
.mat-deep-purple-200 { background-color: mat-color($mat-deep-purple, 200)!important; color: mat-contrast($mat-deep-purple, 200)!important;}
.mat-deep-purple-300 { background-color: mat-color($mat-deep-purple, 300)!important; color: mat-contrast($mat-deep-purple, 300)!important;}
.mat-deep-purple-400 { background-color: mat-color($mat-deep-purple, 400)!important; color: mat-contrast($mat-deep-purple, 400)!important;}
.mat-deep-purple-500 { background-color: mat-color($mat-deep-purple, 500)!important; color: mat-contrast($mat-deep-purple, 500)!important;}
.mat-deep-purple-600 { background-color: mat-color($mat-deep-purple, 600)!important; color: mat-contrast($mat-deep-purple, 600)!important;}
.mat-deep-purple-700 { background-color: mat-color($mat-deep-purple, 700)!important; color: mat-contrast($mat-deep-purple, 700)!important;}
.mat-deep-purple-800 { background-color: mat-color($mat-deep-purple, 800)!important; color: mat-contrast($mat-deep-purple, 800)!important;}
.mat-deep-purple-900 { background-color: mat-color($mat-deep-purple, 900)!important; color: mat-contrast($mat-deep-purple, 900)!important;}
.mat-deep-purple-A100 { background-color: mat-color($mat-deep-purple, A100)!important; color: mat-contrast($mat-deep-purple, A100)!important;}
.mat-deep-purple-A200 { background-color: mat-color($mat-deep-purple, A200)!important; color: mat-contrast($mat-deep-purple, A200)!important;}
.mat-deep-purple-A400 { background-color: mat-color($mat-deep-purple, A400)!important; color: mat-contrast($mat-deep-purple, A400)!important;}
.mat-deep-purple-A700 { background-color: mat-color($mat-deep-purple, A700)!important; color: mat-contrast($mat-deep-purple, A700)!important;}
.mat-indigo { background-color: mat-color($mat-indigo, 500)!important; color: mat-contrast($mat-indigo, 500)!important;}
.mat-indigo-50 { background-color: mat-color($mat-indigo, 50)!important; color: mat-contrast($mat-indigo, 50)!important;}
.mat-indigo-100 { background-color: mat-color($mat-indigo, 100)!important; color: mat-contrast($mat-indigo, 100)!important;}
.mat-indigo-200 { background-color: mat-color($mat-indigo, 200)!important; color: mat-contrast($mat-indigo, 200)!important;}
.mat-indigo-300 { background-color: mat-color($mat-indigo, 300)!important; color: mat-contrast($mat-indigo, 300)!important;}
.mat-indigo-400 { background-color: mat-color($mat-indigo, 400)!important; color: mat-contrast($mat-indigo, 400)!important;}
.mat-indigo-500 { background-color: mat-color($mat-indigo, 500)!important; color: mat-contrast($mat-indigo, 500)!important;}
.mat-indigo-600 { background-color: mat-color($mat-indigo, 600)!important; color: mat-contrast($mat-indigo, 600)!important;}
.mat-indigo-700 { background-color: mat-color($mat-indigo, 700)!important; color: mat-contrast($mat-indigo, 700)!important;}
.mat-indigo-800 { background-color: mat-color($mat-indigo, 800)!important; color: mat-contrast($mat-indigo, 800)!important;}
.mat-indigo-900 { background-color: mat-color($mat-indigo, 900)!important; color: mat-contrast($mat-indigo, 900)!important;}
.mat-indigo-A100 { background-color: mat-color($mat-indigo, A100)!important; color: mat-contrast($mat-indigo, A100)!important;}
.mat-indigo-A200 { background-color: mat-color($mat-indigo, A200)!important; color: mat-contrast($mat-indigo, A200)!important;}
.mat-indigo-A400 { background-color: mat-color($mat-indigo, A400)!important; color: mat-contrast($mat-indigo, A400)!important;}
.mat-indigo-A700 { background-color: mat-color($mat-indigo, A700)!important; color: mat-contrast($mat-indigo, A700)!important;}
.mat-blue { background-color: mat-color($mat-blue, 500)!important; color: mat-contrast($mat-blue, 500)!important;}
.mat-blue-50 { background-color: mat-color($mat-blue, 50)!important; color: mat-contrast($mat-blue, 50)!important;}
.mat-blue-100 { background-color: mat-color($mat-blue, 100)!important; color: mat-contrast($mat-blue, 100)!important;}
.mat-blue-200 { background-color: mat-color($mat-blue, 200)!important; color: mat-contrast($mat-blue, 200)!important;}
.mat-blue-300 { background-color: mat-color($mat-blue, 300)!important; color: mat-contrast($mat-blue, 300)!important;}
.mat-blue-400 { background-color: mat-color($mat-blue, 400)!important; color: mat-contrast($mat-blue, 400)!important;}
.mat-blue-500 { background-color: mat-color($mat-blue, 500)!important; color: mat-contrast($mat-blue, 500)!important;}
.mat-blue-600 { background-color: mat-color($mat-blue, 600)!important; color: mat-contrast($mat-blue, 600)!important;}
.mat-blue-700 { background-color: mat-color($mat-blue, 700)!important; color: mat-contrast($mat-blue, 700)!important;}
.mat-blue-800 { background-color: mat-color($mat-blue, 800)!important; color: mat-contrast($mat-blue, 800)!important;}
.mat-blue-900 { background-color: mat-color($mat-blue, 900)!important; color: mat-contrast($mat-blue, 900)!important;}
.mat-blue-A100 { background-color: mat-color($mat-blue, A100)!important; color: mat-contrast($mat-blue, A100)!important;}
.mat-blue-A200 { background-color: mat-color($mat-blue, A200)!important; color: mat-contrast($mat-blue, A200)!important;}
.mat-blue-A400 { background-color: mat-color($mat-blue, A400)!important; color: mat-contrast($mat-blue, A400)!important;}
.mat-blue-A700 { background-color: mat-color($mat-blue, A700)!important; color: mat-contrast($mat-blue, A700)!important;}
.mat-light-blue { background-color: mat-color($mat-light-blue, 500)!important; color: mat-contrast($mat-light-blue, 500)!important;}
.mat-light-blue-50 { background-color: mat-color($mat-light-blue, 50)!important; color: mat-contrast($mat-light-blue, 50)!important;}
.mat-light-blue-100 { background-color: mat-color($mat-light-blue, 100)!important; color: mat-contrast($mat-light-blue, 100)!important;}
.mat-light-blue-200 { background-color: mat-color($mat-light-blue, 200)!important; color: mat-contrast($mat-light-blue, 200)!important;}
.mat-light-blue-300 { background-color: mat-color($mat-light-blue, 300)!important; color: mat-contrast($mat-light-blue, 300)!important;}
.mat-light-blue-400 { background-color: mat-color($mat-light-blue, 400)!important; color: mat-contrast($mat-light-blue, 400)!important;}
.mat-light-blue-500 { background-color: mat-color($mat-light-blue, 500)!important; color: mat-contrast($mat-light-blue, 500)!important;}
.mat-light-blue-600 { background-color: mat-color($mat-light-blue, 600)!important; color: mat-contrast($mat-light-blue, 600)!important;}
.mat-light-blue-700 { background-color: mat-color($mat-light-blue, 700)!important; color: mat-contrast($mat-light-blue, 700)!important;}
.mat-light-blue-800 { background-color: mat-color($mat-light-blue, 800)!important; color: mat-contrast($mat-light-blue, 800)!important;}
.mat-light-blue-900 { background-color: mat-color($mat-light-blue, 900)!important; color: mat-contrast($mat-light-blue, 900)!important;}
.mat-light-blue-A100 { background-color: mat-color($mat-light-blue, A100)!important; color: mat-contrast($mat-light-blue, A100)!important;}
.mat-light-blue-A200 { background-color: mat-color($mat-light-blue, A200)!important; color: mat-contrast($mat-light-blue, A200)!important;}
.mat-light-blue-A400 { background-color: mat-color($mat-light-blue, A400)!important; color: mat-contrast($mat-light-blue, A400)!important;}
.mat-light-blue-A700 { background-color: mat-color($mat-light-blue, A700)!important; color: mat-contrast($mat-light-blue, A700)!important;}
.mat-cyan { background-color: mat-color($mat-cyan, 500)!important; color: mat-contrast($mat-cyan, 500)!important;}
.mat-cyan-50 { background-color: mat-color($mat-cyan, 50)!important; color: mat-contrast($mat-cyan, 50)!important;}
.mat-cyan-100 { background-color: mat-color($mat-cyan, 100)!important; color: mat-contrast($mat-cyan, 100)!important;}
.mat-cyan-200 { background-color: mat-color($mat-cyan, 200)!important; color: mat-contrast($mat-cyan, 200)!important;}
.mat-cyan-300 { background-color: mat-color($mat-cyan, 300)!important; color: mat-contrast($mat-cyan, 300)!important;}
.mat-cyan-400 { background-color: mat-color($mat-cyan, 400)!important; color: mat-contrast($mat-cyan, 400)!important;}
.mat-cyan-500 { background-color: mat-color($mat-cyan, 500)!important; color: mat-contrast($mat-cyan, 500)!important;}
.mat-cyan-600 { background-color: mat-color($mat-cyan, 600)!important; color: mat-contrast($mat-cyan, 600)!important;}
.mat-cyan-700 { background-color: mat-color($mat-cyan, 700)!important; color: mat-contrast($mat-cyan, 700)!important;}
.mat-cyan-800 { background-color: mat-color($mat-cyan, 800)!important; color: mat-contrast($mat-cyan, 800)!important;}
.mat-cyan-900 { background-color: mat-color($mat-cyan, 900)!important; color: mat-contrast($mat-cyan, 900)!important;}
.mat-cyan-A100 { background-color: mat-color($mat-cyan, A100)!important; color: mat-contrast($mat-cyan, A100)!important;}
.mat-cyan-A200 { background-color: mat-color($mat-cyan, A200)!important; color: mat-contrast($mat-cyan, A200)!important;}
.mat-cyan-A400 { background-color: mat-color($mat-cyan, A400)!important; color: mat-contrast($mat-cyan, A400)!important;}
.mat-cyan-A700 { background-color: mat-color($mat-cyan, A700)!important; color: mat-contrast($mat-cyan, A700)!important;}
.mat-teal { background-color: mat-color($mat-teal, 500)!important; color: mat-contrast($mat-teal, 500)!important;}
.mat-teal-50 { background-color: mat-color($mat-teal, 50)!important; color: mat-contrast($mat-teal, 50)!important;}
.mat-teal-100 { background-color: mat-color($mat-teal, 100)!important; color: mat-contrast($mat-teal, 100)!important;}
.mat-teal-200 { background-color: mat-color($mat-teal, 200)!important; color: mat-contrast($mat-teal, 200)!important;}
.mat-teal-300 { background-color: mat-color($mat-teal, 300)!important; color: mat-contrast($mat-teal, 300)!important;}
.mat-teal-400 { background-color: mat-color($mat-teal, 400)!important; color: mat-contrast($mat-teal, 400)!important;}
.mat-teal-500 { background-color: mat-color($mat-teal, 500)!important; color: mat-contrast($mat-teal, 500)!important;}
.mat-teal-600 { background-color: mat-color($mat-teal, 600)!important; color: mat-contrast($mat-teal, 600)!important;}
.mat-teal-700 { background-color: mat-color($mat-teal, 700)!important; color: mat-contrast($mat-teal, 700)!important;}
.mat-teal-800 { background-color: mat-color($mat-teal, 800)!important; color: mat-contrast($mat-teal, 800)!important;}
.mat-teal-900 { background-color: mat-color($mat-teal, 900)!important; color: mat-contrast($mat-teal, 900)!important;}
.mat-teal-A100 { background-color: mat-color($mat-teal, A100)!important; color: mat-contrast($mat-teal, A100)!important;}
.mat-teal-A200 { background-color: mat-color($mat-teal, A200)!important; color: mat-contrast($mat-teal, A200)!important;}
.mat-teal-A400 { background-color: mat-color($mat-teal, A400)!important; color: mat-contrast($mat-teal, A400)!important;}
.mat-teal-A700 { background-color: mat-color($mat-teal, A700)!important; color: mat-contrast($mat-teal, A700)!important;}
.mat-green { background-color: mat-color($mat-green, 500)!important; color: mat-contrast($mat-green, 500)!important;}
.mat-green-50 { background-color: mat-color($mat-green, 50)!important; color: mat-contrast($mat-green, 50)!important;}
.mat-green-100 { background-color: mat-color($mat-green, 100)!important; color: mat-contrast($mat-green, 100)!important;}
.mat-green-200 { background-color: mat-color($mat-green, 200)!important; color: mat-contrast($mat-green, 200)!important;}
.mat-green-300 { background-color: mat-color($mat-green, 300)!important; color: mat-contrast($mat-green, 300)!important;}
.mat-green-400 { background-color: mat-color($mat-green, 400)!important; color: mat-contrast($mat-green, 400)!important;}
.mat-green-500 { background-color: mat-color($mat-green, 500)!important; color: mat-contrast($mat-green, 500)!important;}
.mat-green-600 { background-color: mat-color($mat-green, 600)!important; color: mat-contrast($mat-green, 600)!important;}
.mat-green-700 { background-color: mat-color($mat-green, 700)!important; color: mat-contrast($mat-green, 700)!important;}
.mat-green-800 { background-color: mat-color($mat-green, 800)!important; color: mat-contrast($mat-green, 800)!important;}
.mat-green-900 { background-color: mat-color($mat-green, 900)!important; color: mat-contrast($mat-green, 900)!important;}
.mat-green-A100 { background-color: mat-color($mat-green, A100)!important; color: mat-contrast($mat-green, A100)!important;}
.mat-green-A200 { background-color: mat-color($mat-green, A200)!important; color: mat-contrast($mat-green, A200)!important;}
.mat-green-A400 { background-color: mat-color($mat-green, A400)!important; color: mat-contrast($mat-green, A400)!important;}
.mat-green-A700 { background-color: mat-color($mat-green, A700)!important; color: mat-contrast($mat-green, A700)!important;}
.mat-light-green { background-color: mat-color($mat-light-green, 500)!important; color: mat-contrast($mat-light-green, 500)!important;}
.mat-light-green-50 { background-color: mat-color($mat-light-green, 50)!important; color: mat-contrast($mat-light-green, 50)!important;}
.mat-light-green-100 { background-color: mat-color($mat-light-green, 100)!important; color: mat-contrast($mat-light-green, 100)!important;}
.mat-light-green-200 { background-color: mat-color($mat-light-green, 200)!important; color: mat-contrast($mat-light-green, 200)!important;}
.mat-light-green-300 { background-color: mat-color($mat-light-green, 300)!important; color: mat-contrast($mat-light-green, 300)!important;}
.mat-light-green-400 { background-color: mat-color($mat-light-green, 400)!important; color: mat-contrast($mat-light-green, 400)!important;}
.mat-light-green-500 { background-color: mat-color($mat-light-green, 500)!important; color: mat-contrast($mat-light-green, 500)!important;}
.mat-light-green-600 { background-color: mat-color($mat-light-green, 600)!important; color: mat-contrast($mat-light-green, 600)!important;}
.mat-light-green-700 { background-color: mat-color($mat-light-green, 700)!important; color: mat-contrast($mat-light-green, 700)!important;}
.mat-light-green-800 { background-color: mat-color($mat-light-green, 800)!important; color: mat-contrast($mat-light-green, 800)!important;}
.mat-light-green-900 { background-color: mat-color($mat-light-green, 900)!important; color: mat-contrast($mat-light-green, 900)!important;}
.mat-light-green-A100 { background-color: mat-color($mat-light-green, A100)!important; color: mat-contrast($mat-light-green, A100)!important;}
.mat-light-green-A200 { background-color: mat-color($mat-light-green, A200)!important; color: mat-contrast($mat-light-green, A200)!important;}
.mat-light-green-A400 { background-color: mat-color($mat-light-green, A400)!important; color: mat-contrast($mat-light-green, A400)!important;}
.mat-light-green-A700 { background-color: mat-color($mat-light-green, A700)!important; color: mat-contrast($mat-light-green, A700)!important;}
.mat-lime { background-color: mat-color($mat-lime, 500)!important; color: mat-contrast($mat-lime, 500)!important;}
.mat-lime-50 { background-color: mat-color($mat-lime, 50)!important; color: mat-contrast($mat-lime, 50)!important;}
.mat-lime-100 { background-color: mat-color($mat-lime, 100)!important; color: mat-contrast($mat-lime, 100)!important;}
.mat-lime-200 { background-color: mat-color($mat-lime, 200)!important; color: mat-contrast($mat-lime, 200)!important;}
.mat-lime-300 { background-color: mat-color($mat-lime, 300)!important; color: mat-contrast($mat-lime, 300)!important;}
.mat-lime-400 { background-color: mat-color($mat-lime, 400)!important; color: mat-contrast($mat-lime, 400)!important;}
.mat-lime-500 { background-color: mat-color($mat-lime, 500)!important; color: mat-contrast($mat-lime, 500)!important;}
.mat-lime-600 { background-color: mat-color($mat-lime, 600)!important; color: mat-contrast($mat-lime, 600)!important;}
.mat-lime-700 { background-color: mat-color($mat-lime, 700)!important; color: mat-contrast($mat-lime, 700)!important;}
.mat-lime-800 { background-color: mat-color($mat-lime, 800)!important; color: mat-contrast($mat-lime, 800)!important;}
.mat-lime-900 { background-color: mat-color($mat-lime, 900)!important; color: mat-contrast($mat-lime, 900)!important;}
.mat-lime-A100 { background-color: mat-color($mat-lime, A100)!important; color: mat-contrast($mat-lime, A100)!important;}
.mat-lime-A200 { background-color: mat-color($mat-lime, A200)!important; color: mat-contrast($mat-lime, A200)!important;}
.mat-lime-A400 { background-color: mat-color($mat-lime, A400)!important; color: mat-contrast($mat-lime, A400)!important;}
.mat-lime-A700 { background-color: mat-color($mat-lime, A700)!important; color: mat-contrast($mat-lime, A700)!important;}
.mat-yellow { background-color: mat-color($mat-yellow, 500)!important; color: mat-contrast($mat-yellow, 500)!important;}
.mat-yellow-50 { background-color: mat-color($mat-yellow, 50)!important; color: mat-contrast($mat-yellow, 50)!important;}
.mat-yellow-100 { background-color: mat-color($mat-yellow, 100)!important; color: mat-contrast($mat-yellow, 100)!important;}
.mat-yellow-200 { background-color: mat-color($mat-yellow, 200)!important; color: mat-contrast($mat-yellow, 200)!important;}
.mat-yellow-300 { background-color: mat-color($mat-yellow, 300)!important; color: mat-contrast($mat-yellow, 300)!important;}
.mat-yellow-400 { background-color: mat-color($mat-yellow, 400)!important; color: mat-contrast($mat-yellow, 400)!important;}
.mat-yellow-500 { background-color: mat-color($mat-yellow, 500)!important; color: mat-contrast($mat-yellow, 500)!important;}
.mat-yellow-600 { background-color: mat-color($mat-yellow, 600)!important; color: mat-contrast($mat-yellow, 600)!important;}
.mat-yellow-700 { background-color: mat-color($mat-yellow, 700)!important; color: mat-contrast($mat-yellow, 700)!important;}
.mat-yellow-800 { background-color: mat-color($mat-yellow, 800)!important; color: mat-contrast($mat-yellow, 800)!important;}
.mat-yellow-900 { background-color: mat-color($mat-yellow, 900)!important; color: mat-contrast($mat-yellow, 900)!important;}
.mat-yellow-A100 { background-color: mat-color($mat-yellow, A100)!important; color: mat-contrast($mat-yellow, A100)!important;}
.mat-yellow-A200 { background-color: mat-color($mat-yellow, A200)!important; color: mat-contrast($mat-yellow, A200)!important;}
.mat-yellow-A400 { background-color: mat-color($mat-yellow, A400)!important; color: mat-contrast($mat-yellow, A400)!important;}
.mat-yellow-A700 { background-color: mat-color($mat-yellow, A700)!important; color: mat-contrast($mat-yellow, A700)!important;}
.mat-amber { background-color: mat-color($mat-amber, 500)!important; color: mat-contrast($mat-amber, 500)!important;}
.mat-amber-50 { background-color: mat-color($mat-amber, 50)!important; color: mat-contrast($mat-amber, 50)!important;}
.mat-amber-100 { background-color: mat-color($mat-amber, 100)!important; color: mat-contrast($mat-amber, 100)!important;}
.mat-amber-200 { background-color: mat-color($mat-amber, 200)!important; color: mat-contrast($mat-amber, 200)!important;}
.mat-amber-300 { background-color: mat-color($mat-amber, 300)!important; color: mat-contrast($mat-amber, 300)!important;}
.mat-amber-400 { background-color: mat-color($mat-amber, 400)!important; color: mat-contrast($mat-amber, 400)!important;}
.mat-amber-500 { background-color: mat-color($mat-amber, 500)!important; color: mat-contrast($mat-amber, 500)!important;}
.mat-amber-600 { background-color: mat-color($mat-amber, 600)!important; color: mat-contrast($mat-amber, 600)!important;}
.mat-amber-700 { background-color: mat-color($mat-amber, 700)!important; color: mat-contrast($mat-amber, 700)!important;}
.mat-amber-800 { background-color: mat-color($mat-amber, 800)!important; color: mat-contrast($mat-amber, 800)!important;}
.mat-amber-900 { background-color: mat-color($mat-amber, 900)!important; color: mat-contrast($mat-amber, 900)!important;}
.mat-amber-A100 { background-color: mat-color($mat-amber, A100)!important; color: mat-contrast($mat-amber, A100)!important;}
.mat-amber-A200 { background-color: mat-color($mat-amber, A200)!important; color: mat-contrast($mat-amber, A200)!important;}
.mat-amber-A400 { background-color: mat-color($mat-amber, A400)!important; color: mat-contrast($mat-amber, A400)!important;}
.mat-amber-A700 { background-color: mat-color($mat-amber, A700)!important; color: mat-contrast($mat-amber, A700)!important;}
.mat-orange { background-color: mat-color($mat-orange, 500)!important; color: mat-contrast($mat-orange, 500)!important;}
.mat-orange-50 { background-color: mat-color($mat-orange, 50)!important; color: mat-contrast($mat-orange, 50)!important;}
.mat-orange-100 { background-color: mat-color($mat-orange, 100)!important; color: mat-contrast($mat-orange, 100)!important;}
.mat-orange-200 { background-color: mat-color($mat-orange, 200)!important; color: mat-contrast($mat-orange, 200)!important;}
.mat-orange-300 { background-color: mat-color($mat-orange, 300)!important; color: mat-contrast($mat-orange, 300)!important;}
.mat-orange-400 { background-color: mat-color($mat-orange, 400)!important; color: mat-contrast($mat-orange, 400)!important;}
.mat-orange-500 { background-color: mat-color($mat-orange, 500)!important; color: mat-contrast($mat-orange, 500)!important;}
.mat-orange-600 { background-color: mat-color($mat-orange, 600)!important; color: mat-contrast($mat-orange, 600)!important;}
.mat-orange-700 { background-color: mat-color($mat-orange, 700)!important; color: mat-contrast($mat-orange, 700)!important;}
.mat-orange-800 { background-color: mat-color($mat-orange, 800)!important; color: mat-contrast($mat-orange, 800)!important;}
.mat-orange-900 { background-color: mat-color($mat-orange, 900)!important; color: mat-contrast($mat-orange, 900)!important;}
.mat-orange-A100 { background-color: mat-color($mat-orange, A100)!important; color: mat-contrast($mat-orange, A100)!important;}
.mat-orange-A200 { background-color: mat-color($mat-orange, A200)!important; color: mat-contrast($mat-orange, A200)!important;}
.mat-orange-A400 { background-color: mat-color($mat-orange, A400)!important; color: mat-contrast($mat-orange, A400)!important;}
.mat-orange-A700 { background-color: mat-color($mat-orange, A700)!important; color: mat-contrast($mat-orange, A700)!important;}
.mat-deep-orange { background-color: mat-color($mat-deep-orange, 500)!important; color: mat-contrast($mat-deep-orange, 500)!important;}
.mat-deep-orange-50 { background-color: mat-color($mat-deep-orange, 50)!important; color: mat-contrast($mat-deep-orange, 50)!important;}
.mat-deep-orange-100 { background-color: mat-color($mat-deep-orange, 100)!important; color: mat-contrast($mat-deep-orange, 100)!important;}
.mat-deep-orange-200 { background-color: mat-color($mat-deep-orange, 200)!important; color: mat-contrast($mat-deep-orange, 200)!important;}
.mat-deep-orange-300 { background-color: mat-color($mat-deep-orange, 300)!important; color: mat-contrast($mat-deep-orange, 300)!important;}
.mat-deep-orange-400 { background-color: mat-color($mat-deep-orange, 400)!important; color: mat-contrast($mat-deep-orange, 400)!important;}
.mat-deep-orange-500 { background-color: mat-color($mat-deep-orange, 500)!important; color: mat-contrast($mat-deep-orange, 500)!important;}
.mat-deep-orange-600 { background-color: mat-color($mat-deep-orange, 600)!important; color: mat-contrast($mat-deep-orange, 600)!important;}
.mat-deep-orange-700 { background-color: mat-color($mat-deep-orange, 700)!important; color: mat-contrast($mat-deep-orange, 700)!important;}
.mat-deep-orange-800 { background-color: mat-color($mat-deep-orange, 800)!important; color: mat-contrast($mat-deep-orange, 800)!important;}
.mat-deep-orange-900 { background-color: mat-color($mat-deep-orange, 900)!important; color: mat-contrast($mat-deep-orange, 900)!important;}
.mat-deep-orange-A100 { background-color: mat-color($mat-deep-orange, A100)!important; color: mat-contrast($mat-deep-orange, A100)!important;}
.mat-deep-orange-A200 { background-color: mat-color($mat-deep-orange, A200)!important; color: mat-contrast($mat-deep-orange, A200)!important;}
.mat-deep-orange-A400 { background-color: mat-color($mat-deep-orange, A400)!important; color: mat-contrast($mat-deep-orange, A400)!important;}
.mat-deep-orange-A700 { background-color: mat-color($mat-deep-orange, A700)!important; color: mat-contrast($mat-deep-orange, A700)!important;}
.mat-brown { background-color: mat-color($mat-brown, 500)!important; color: mat-contrast($mat-brown, 500)!important;}
.mat-brown-50 { background-color: mat-color($mat-brown, 50)!important; color: mat-contrast($mat-brown, 50)!important;}
.mat-brown-100 { background-color: mat-color($mat-brown, 100)!important; color: mat-contrast($mat-brown, 100)!important;}
.mat-brown-200 { background-color: mat-color($mat-brown, 200)!important; color: mat-contrast($mat-brown, 200)!important;}
.mat-brown-300 { background-color: mat-color($mat-brown, 300)!important; color: mat-contrast($mat-brown, 300)!important;}
.mat-brown-400 { background-color: mat-color($mat-brown, 400)!important; color: mat-contrast($mat-brown, 400)!important;}
.mat-brown-500 { background-color: mat-color($mat-brown, 500)!important; color: mat-contrast($mat-brown, 500)!important;}
.mat-brown-600 { background-color: mat-color($mat-brown, 600)!important; color: mat-contrast($mat-brown, 600)!important;}
.mat-brown-700 { background-color: mat-color($mat-brown, 700)!important; color: mat-contrast($mat-brown, 700)!important;}
.mat-brown-800 { background-color: mat-color($mat-brown, 800)!important; color: mat-contrast($mat-brown, 800)!important;}
.mat-brown-900 { background-color: mat-color($mat-brown, 900)!important; color: mat-contrast($mat-brown, 900)!important;}
.mat-brown-A100 { background-color: mat-color($mat-brown, A100)!important; color: mat-contrast($mat-brown, A100)!important;}
.mat-brown-A200 { background-color: mat-color($mat-brown, A200)!important; color: mat-contrast($mat-brown, A200)!important;}
.mat-brown-A400 { background-color: mat-color($mat-brown, A400)!important; color: mat-contrast($mat-brown, A400)!important;}
.mat-brown-A700 { background-color: mat-color($mat-brown, A700)!important; color: mat-contrast($mat-brown, A700)!important;}
.mat-grey { background-color: mat-color($mat-grey, 500)!important; color: mat-contrast($mat-grey, 500)!important;}
.mat-grey-50 { background-color: mat-color($mat-grey, 50)!important; color: mat-contrast($mat-grey, 50)!important;}
.mat-grey-100 { background-color: mat-color($mat-grey, 100)!important; color: mat-contrast($mat-grey, 100)!important;}
.mat-grey-200 { background-color: mat-color($mat-grey, 200)!important; color: mat-contrast($mat-grey, 200)!important;}
.mat-grey-300 { background-color: mat-color($mat-grey, 300)!important; color: mat-contrast($mat-grey, 300)!important;}
.mat-grey-400 { background-color: mat-color($mat-grey, 400)!important; color: mat-contrast($mat-grey, 400)!important;}
.mat-grey-500 { background-color: mat-color($mat-grey, 500)!important; color: mat-contrast($mat-grey, 500)!important;}
.mat-grey-600 { background-color: mat-color($mat-grey, 600)!important; color: mat-contrast($mat-grey, 600)!important;}
.mat-grey-700 { background-color: mat-color($mat-grey, 700)!important; color: mat-contrast($mat-grey, 700)!important;}
.mat-grey-800 { background-color: mat-color($mat-grey, 800)!important; color: mat-contrast($mat-grey, 800)!important;}
.mat-grey-900 { background-color: mat-color($mat-grey, 900)!important; color: mat-contrast($mat-grey, 900)!important;}
.mat-grey-A100 { background-color: mat-color($mat-grey, A100)!important; color: mat-contrast($mat-grey, A100)!important;}
.mat-grey-A200 { background-color: mat-color($mat-grey, A200)!important; color: mat-contrast($mat-grey, A200)!important;}
.mat-grey-A400 { background-color: mat-color($mat-grey, A400)!important; color: mat-contrast($mat-grey, A400)!important;}
.mat-grey-A700 { background-color: mat-color($mat-grey, A700)!important; color: mat-contrast($mat-grey, A700)!important;}
.mat-blue-grey { background-color: mat-color($mat-blue-grey, 500)!important; color: mat-contrast($mat-blue-grey, 500)!important;}
.mat-blue-grey-50 { background-color: mat-color($mat-blue-grey, 50)!important; color: mat-contrast($mat-blue-grey, 50)!important;}
.mat-blue-grey-100 { background-color: mat-color($mat-blue-grey, 100)!important; color: mat-contrast($mat-blue-grey, 100)!important;}
.mat-blue-grey-200 { background-color: mat-color($mat-blue-grey, 200)!important; color: mat-contrast($mat-blue-grey, 200)!important;}
.mat-blue-grey-300 { background-color: mat-color($mat-blue-grey, 300)!important; color: mat-contrast($mat-blue-grey, 300)!important;}
.mat-blue-grey-400 { background-color: mat-color($mat-blue-grey, 400)!important; color: mat-contrast($mat-blue-grey, 400)!important;}
.mat-blue-grey-500 { background-color: mat-color($mat-blue-grey, 500)!important; color: mat-contrast($mat-blue-grey, 500)!important;}
.mat-blue-grey-600 { background-color: mat-color($mat-blue-grey, 600)!important; color: mat-contrast($mat-blue-grey, 600)!important;}
.mat-blue-grey-700 { background-color: mat-color($mat-blue-grey, 700)!important; color: mat-contrast($mat-blue-grey, 700)!important;}
.mat-blue-grey-800 { background-color: mat-color($mat-blue-grey, 800)!important; color: mat-contrast($mat-blue-grey, 800)!important;}
.mat-blue-grey-900 { background-color: mat-color($mat-blue-grey, 900)!important; color: mat-contrast($mat-blue-grey, 900)!important;}
.mat-blue-grey-A100 { background-color: mat-color($mat-blue-grey, A100)!important; color: mat-contrast($mat-blue-grey, A100)!important;}
.mat-blue-grey-A200 { background-color: mat-color($mat-blue-grey, A200)!important; color: mat-contrast($mat-blue-grey, A200)!important;}
.mat-blue-grey-A400 { background-color: mat-color($mat-blue-grey, A400)!important; color: mat-contrast($mat-blue-grey, A400)!important;}
.mat-blue-grey-A700 { background-color: mat-color($mat-blue-grey, A700)!important; color: mat-contrast($mat-blue-grey, A700)!important;}
\ No newline at end of file
.radius-none {
border-radius: 0;
}
.radius-round {
border-radius: $border-radius-base;
}
.radius-circle {
border-radius: 50%;
}
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.block {
display: block;
}
.button-block {
display: block;
width: 100%;
}
.inline-block {
display: inline-block;
}
.center-block {
display: block;
margin: 0 auto;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.shadow-none {
box-shadow: none!important;
}
.border-none {
border: 0!important;
}
.background-none {
background-color: transparent!important;
}
.bg-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$size} { #{$prop}-left: $length-x !important; }
// Axes
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
\ No newline at end of file
//
// Text
//
// Alignment
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
// Responsive alignment
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.text-#{$breakpoint}-left { text-align: left !important; }
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-center { text-align: center !important; }
}
}
// Transformation
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
// Size
.text-xs { font-size: 50% !important; }
.text-sm { font-size: 70% !important; }
.text-md { font-size: 80% !important; }
.text-df { font-size: 13px !important; }
.text-lg { font-size: 110% !important; }
.text-xl { font-size: 120% !important; }
.text-xxl { font-size: 60px !important; }
// Weight and italics
.font-weight-normal { font-weight: normal!important; }
.font-weight-bold { font-weight: 700!important; }
.font-italic { font-style: italic!important; }
// Contextual colors
@include text-emphasis-variant('.mat-text-muted', mat-color($foreground, secondary-text));
@include text-emphasis-variant('.mat-text-default', mat-color($foreground, base));
@include text-emphasis-variant('.mat-text-primary', mat-color($primary));
@include text-emphasis-variant('.mat-text-warn', mat-color($warn));
@include text-emphasis-variant('.mat-text-accent', mat-color($accent));
.app-dark {
@include text-emphasis-variant('.mat-text-muted', mat-color($dark-foreground, secondary-text));
@include text-emphasis-variant('.mat-text-default', mat-color($dark-foreground, base));
}
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@import "background";
@import "general";
@import "spacing";
@import "text";
\ No newline at end of file
export const environment = {
production: true
};
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false
};
No preview for this file type
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Back Office LiveBillionBet</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700|Material+Icons" rel="stylesheet">
<!-- -->
</head>
<body>
<app-root>
</app-root>
</body>
</html>
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
import 'intl';
import 'intl/locale-data/jsonp/en.js';
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
declare module 'screenfull';
\ No newline at end of file
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
},
"include": [
"src/**/*",
"node_modules/ngx-quill/src/quill.module.ts",
"node_modules/ngx-quill/src/quill-editor.component.ts"
]
}
\ No newline at end of file
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"deprecation": {
"severity": "warn"
},
"eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs",
"rxjs/Rx"
],
"import-spacing": true,
"indent": [
true,
"spaces"
],
"interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-empty": false,
"no-empty-interface": true,
"no-eval": true,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-misused-new": true,
"no-non-null-assertion": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"prefer-const": true,
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"typeof-compare": true,
"unified-signatures": true,
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!