mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-23 02:40:14 +01:00
feat(angular-cli): integrate angular-cli (#989)
This commit is contained in:
hryb
Alexander Zhukov
parent
7b8a6f4e88
commit
523f44b746
138 changed files with 4507 additions and 7170 deletions
3
src/app/app.component.html
Normal file
3
src/app/app.component.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h1>
|
||||
{{title}}
|
||||
</h1>
|
||||
0
src/app/app.component.scss
Normal file
0
src/app/app.component.scss
Normal file
|
|
@ -1,13 +1,11 @@
|
|||
import { Component, ViewContainerRef } from '@angular/core';
|
||||
import * as $ from 'jquery';
|
||||
|
||||
import { GlobalState } from './global.state';
|
||||
import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
|
||||
import { BaThemeConfig } from './theme/theme.config';
|
||||
import { layoutPaths } from './theme/theme.constants';
|
||||
|
||||
import 'style-loader!./app.scss';
|
||||
import 'style-loader!./theme/initial.scss';
|
||||
|
||||
/*
|
||||
* App Component
|
||||
* Top Level Component
|
||||
|
|
@ -49,7 +47,7 @@ export class App {
|
|||
|
||||
private _loadImages(): void {
|
||||
// register some loaders
|
||||
BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'sky-bg.jpg'));
|
||||
BaThemePreloader.registerLoader(this._imageLoader.load('/assets/img/sky-bg.jpg'));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,9 @@ import { RouterModule } from '@angular/router';
|
|||
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
/*
|
||||
* Platform and Environment providers/directives/pipes
|
||||
*/
|
||||
import { ENV_PROVIDERS } from './environment';
|
||||
import { routing } from './app.routing';
|
||||
|
||||
// App is our top level component
|
||||
|
|
@ -53,48 +51,12 @@ export type StoreType = {
|
|||
routing
|
||||
],
|
||||
providers: [ // expose our Services and Providers into Angular's dependency injection
|
||||
ENV_PROVIDERS,
|
||||
APP_PROVIDERS
|
||||
]
|
||||
})
|
||||
|
||||
export class AppModule {
|
||||
|
||||
constructor(public appRef: ApplicationRef,
|
||||
public appState: AppState) {
|
||||
}
|
||||
|
||||
hmrOnInit(store: StoreType) {
|
||||
if (!store || !store.state) return;
|
||||
console.log('HMR store', JSON.stringify(store, null, 2));
|
||||
// set state
|
||||
this.appState._state = store.state;
|
||||
// set input values
|
||||
if ('restoreInputValues' in store) {
|
||||
let restoreInputValues = store.restoreInputValues;
|
||||
setTimeout(restoreInputValues);
|
||||
}
|
||||
this.appRef.tick();
|
||||
delete store.state;
|
||||
delete store.restoreInputValues;
|
||||
}
|
||||
|
||||
hmrOnDestroy(store: StoreType) {
|
||||
const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
|
||||
// save state
|
||||
const state = this.appState._state;
|
||||
store.state = state;
|
||||
// recreate root elements
|
||||
store.disposeOldHosts = createNewHosts(cmpLocation);
|
||||
// save input values
|
||||
store.restoreInputValues = createInputTransfer();
|
||||
// remove styles
|
||||
removeNgStyles();
|
||||
}
|
||||
|
||||
hmrAfterDestroy(store: StoreType) {
|
||||
// display new elements
|
||||
store.disposeOldHosts();
|
||||
delete store.disposeOldHosts;
|
||||
constructor(public appState: AppState) {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
// Angular 2
|
||||
// rc2 workaround
|
||||
import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
|
||||
import { enableProdMode, ApplicationRef } from '@angular/core';
|
||||
// Environment Providers
|
||||
let PROVIDERS: any[] = [
|
||||
// common env directives
|
||||
];
|
||||
|
||||
// Angular debug tools in the dev console
|
||||
// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
|
||||
let _decorateModuleRef = function identity<T>(value: T): T { return value; };
|
||||
|
||||
if ('production' === ENV || 'renderer' === ENV) {
|
||||
// Production
|
||||
// disableDebugTools();
|
||||
enableProdMode();
|
||||
|
||||
PROVIDERS = [
|
||||
...PROVIDERS,
|
||||
// custom providers in production
|
||||
];
|
||||
|
||||
} else {
|
||||
|
||||
_decorateModuleRef = (modRef: any) => {
|
||||
const appRef = modRef.injector.get(ApplicationRef);
|
||||
const cmpRef = appRef.components[0];
|
||||
|
||||
let _ng = (<any>window).ng;
|
||||
enableDebugTools(cmpRef);
|
||||
(<any>window).ng.probe = _ng.probe;
|
||||
(<any>window).ng.coreTokens = _ng.coreTokens;
|
||||
return modRef;
|
||||
};
|
||||
|
||||
// Development
|
||||
PROVIDERS = [
|
||||
...PROVIDERS,
|
||||
// custom providers in development
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
export const decorateModuleRef = _decorateModuleRef;
|
||||
|
||||
export const ENV_PROVIDERS = [
|
||||
...PROVIDERS
|
||||
];
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './app.module';
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {ChartistJsService} from './chartistJs.service';
|
||||
import 'style-loader!./chartistJs.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'chartist-js',
|
||||
templateUrl: './chartistJs.html',
|
||||
styleUrls: ['./chartistJs.scss']
|
||||
})
|
||||
|
||||
export class ChartistJs {
|
||||
|
|
|
|||
|
|
@ -1,71 +1,73 @@
|
|||
@import "../../../../theme/sass/conf/conf";
|
||||
|
||||
:host /deep/ {
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
|
||||
.ct-label{
|
||||
color: $default-text;
|
||||
opacity: 0.9;
|
||||
fill: $default-text;
|
||||
}
|
||||
|
||||
.ct-chart .ct-label{
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ct-chart svg{
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ct-series-a {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $primary;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-b {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-c {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-d {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $warning;
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ct-series-e {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $info;
|
||||
.ct-label {
|
||||
color: $default-text;
|
||||
opacity: 0.9;
|
||||
fill: $default-text;
|
||||
}
|
||||
.ct-slice-pie, .ct-area{
|
||||
fill: $info;
|
||||
|
||||
.ct-chart .ct-label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.ct-chart svg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ct-series-a {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $primary;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-b {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-c {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-series-d {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $warning;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ct-series-e {
|
||||
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
|
||||
stroke: $info;
|
||||
}
|
||||
.ct-slice-pie, .ct-area {
|
||||
fill: $info;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-bar .ct-bar {
|
||||
stroke-width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.stacked-bar .ct-bar{
|
||||
stroke-width: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import {Component} from '@angular/core';
|
||||
import * as jQuery from 'jquery';
|
||||
|
||||
import {CalendarService} from './calendar.service';
|
||||
import 'style-loader!./calendar.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'calendar',
|
||||
templateUrl: './calendar.html'
|
||||
templateUrl: './calendar.html',
|
||||
styleUrls: ['./calendar.scss']
|
||||
})
|
||||
export class Calendar {
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {FeedService} from './feed.service';
|
||||
|
||||
import 'style-loader!./feed.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'feed',
|
||||
templateUrl: './feed.html'
|
||||
templateUrl: './feed.html',
|
||||
styleUrls: ['./feed.scss']
|
||||
})
|
||||
export class Feed {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,226 +1,217 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
.feed-panel .card-body{
|
||||
padding: 10px 0;
|
||||
}
|
||||
:host /deep/ .feed-messages-container {
|
||||
|
||||
.feed-message {
|
||||
$text-message-color: $content-text;
|
||||
$video-message-color: $danger;
|
||||
$image-message-color: $success;
|
||||
$geo-message-color: $primary;
|
||||
padding: 10px 0 ;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.12);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
> img, .media-icon {
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.feed-message {
|
||||
$text-message-color: $content-text;
|
||||
$video-message-color: $danger;
|
||||
$image-message-color: $success;
|
||||
$geo-message-color: $primary;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sub-photo-icon {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
&:after {
|
||||
content: '';
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
> img, .media-icon {
|
||||
border-radius: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sub-photo-icon {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: contain;
|
||||
}
|
||||
&.video-message {
|
||||
background: $video-message-color;
|
||||
&:after {
|
||||
@include bg-image('theme/icon/feed/feed-video.svg');
|
||||
}
|
||||
}
|
||||
&.image-message {
|
||||
background: $image-message-color;
|
||||
&:after {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-top: 1px;
|
||||
margin-left: 1px;
|
||||
border-radius: 5px;
|
||||
@include bg-image('theme/icon/feed/feed-image.svg');
|
||||
}
|
||||
}
|
||||
&.geo-message {
|
||||
background: $geo-message-color;
|
||||
padding: 4px;
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@include bg-image('theme/icon/feed/feed-location.svg');
|
||||
background-size: contain;
|
||||
}
|
||||
&.video-message {
|
||||
background: $video-message-color;
|
||||
&:after {
|
||||
@include bg-image('theme/icon/feed/feed-video.svg');
|
||||
}
|
||||
}
|
||||
&.image-message {
|
||||
background: $image-message-color;
|
||||
&:after {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-top: 1px;
|
||||
margin-left: 1px;
|
||||
border-radius: 5px;
|
||||
@include bg-image('theme/icon/feed/feed-image.svg');
|
||||
}
|
||||
}
|
||||
&.geo-message {
|
||||
background: $geo-message-color;
|
||||
&:after {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@include bg-image('theme/icon/feed/feed-location.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-photo-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: -2px;
|
||||
bottom: -4px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-block {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
margin: 0 0 0 80px;
|
||||
padding: 5px 20px;
|
||||
color: $text-message-color;
|
||||
width: 280px;
|
||||
height: 70px;
|
||||
|
||||
&.text-message {
|
||||
font-size: 12px;
|
||||
width: inherit;
|
||||
max-width: calc(100% - 80px);
|
||||
height: inherit;
|
||||
min-height: 60px;
|
||||
&:before {
|
||||
display: block;
|
||||
.sub-photo-icon {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: -2px;
|
||||
bottom: -4px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.message-content {
|
||||
}
|
||||
|
||||
.text-block {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
margin: 0 0 0 80px;
|
||||
padding: 5px 20px;
|
||||
color: $text-message-color;
|
||||
width: 280px;
|
||||
height: 70px;
|
||||
|
||||
&.text-message {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
font-weight: $font-light;
|
||||
width: inherit;
|
||||
max-width: calc(100% - 80px);
|
||||
height: inherit;
|
||||
min-height: 60px;
|
||||
&:before {
|
||||
display: block;
|
||||
}
|
||||
.message-content {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
font-weight: $font-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.small-message {
|
||||
width: 155px;
|
||||
height: 145px;
|
||||
.preview {
|
||||
bottom: 0;
|
||||
top: initial;
|
||||
height: 87px;
|
||||
img {
|
||||
width: 155px;
|
||||
&.small-message {
|
||||
width: 155px;
|
||||
height: 145px;
|
||||
.preview {
|
||||
bottom: 0;
|
||||
top: initial;
|
||||
height: 87px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
img {
|
||||
width: 155px;
|
||||
height: 87px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
font-size: 12px;
|
||||
padding-bottom: 5px;
|
||||
.author {
|
||||
font-size: 13px;
|
||||
padding-right: 5px;
|
||||
.message-header {
|
||||
font-size: 12px;
|
||||
padding-bottom: 5px;
|
||||
.author {
|
||||
font-size: 13px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.message-content {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
transition: 0s linear all;
|
||||
display: inline-block;
|
||||
img {
|
||||
padding-top: 10px;
|
||||
.preview {
|
||||
transition: 0s linear all;
|
||||
display: inline-block;
|
||||
img {
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
float: none!important;
|
||||
left: 0;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
color: $help-text;
|
||||
margin-bottom: 5px;
|
||||
.post-time {
|
||||
float: left;
|
||||
}
|
||||
.ago-time {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
font-size: 11px;
|
||||
padding-top: 10px;
|
||||
color: $help-text;
|
||||
margin-bottom: 5px;
|
||||
.post-time {
|
||||
float: left;
|
||||
}
|
||||
.ago-time {
|
||||
float: right;
|
||||
.line-clamp {
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
position: relative;
|
||||
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.line-clamp:after {
|
||||
content: '...';
|
||||
text-align: right;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 25%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: calc(1em * 1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.line-clamp
|
||||
{
|
||||
display : block;
|
||||
display : -webkit-box;
|
||||
-webkit-box-orient : vertical;
|
||||
position : relative;
|
||||
|
||||
line-height : 1.2;
|
||||
overflow : hidden;
|
||||
text-overflow : ellipsis;
|
||||
padding : 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.line-clamp:after
|
||||
{
|
||||
content : '...';
|
||||
text-align : right;
|
||||
bottom : 0;
|
||||
right : 0;
|
||||
width : 25%;
|
||||
display : block;
|
||||
position : absolute;
|
||||
height : calc(1em * 1.2);
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
.line-clamp:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.line-clamp-1 {
|
||||
-webkit-line-clamp: 1;
|
||||
height: calc(1em * 1.2 * 1);
|
||||
}
|
||||
.line-clamp-2 {
|
||||
-webkit-line-clamp: 2;
|
||||
height: calc(1em * 1.2 * 2);
|
||||
}
|
||||
.line-clamp-3 {
|
||||
-webkit-line-clamp: 3;
|
||||
height: calc(1em * 1.2 * 3);
|
||||
}
|
||||
.line-clamp-4 {
|
||||
-webkit-line-clamp: 4;
|
||||
height: calc(1em * 1.2 * 4);
|
||||
}
|
||||
.line-clamp-5 {
|
||||
-webkit-line-clamp: 5;
|
||||
height: calc(1em * 1.2 * 5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@supports (-webkit-line-clamp: 1)
|
||||
{
|
||||
.line-clamp:after
|
||||
{
|
||||
display : none !important;
|
||||
}
|
||||
}
|
||||
.line-clamp-1
|
||||
{
|
||||
-webkit-line-clamp : 1;
|
||||
height : calc(1em * 1.2 * 1);
|
||||
}
|
||||
.line-clamp-2
|
||||
{
|
||||
-webkit-line-clamp : 2;
|
||||
height : calc(1em * 1.2 * 2);
|
||||
}
|
||||
.line-clamp-3
|
||||
{
|
||||
-webkit-line-clamp : 3;
|
||||
height : calc(1em * 1.2 * 3);
|
||||
}
|
||||
.line-clamp-4
|
||||
{
|
||||
-webkit-line-clamp : 4;
|
||||
height : calc(1em * 1.2 * 4);
|
||||
}
|
||||
.line-clamp-5
|
||||
{
|
||||
-webkit-line-clamp : 5;
|
||||
height : calc(1em * 1.2 * 5);
|
||||
/deep/.feed-panel .card-body {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {LineChartService} from './lineChart.service';
|
||||
|
||||
import 'style-loader!./lineChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'line-chart',
|
||||
templateUrl: './lineChart.html'
|
||||
templateUrl: './lineChart.html',
|
||||
styleUrls: ['./lineChart.scss']
|
||||
})
|
||||
export class LineChart {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
.dashboard-line-chart {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
margin-top: -10px;
|
||||
:host {
|
||||
/deep/.dashboard-line-chart {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import {Component} from '@angular/core';
|
|||
import {PieChartService} from './pieChart.service';
|
||||
|
||||
import 'easy-pie-chart/dist/jquery.easypiechart.js';
|
||||
import 'style-loader!./pieChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'pie-chart',
|
||||
templateUrl: './pieChart.html'
|
||||
templateUrl: './pieChart.html',
|
||||
styleUrls: ['./pieChart.scss']
|
||||
})
|
||||
// TODO: move easypiechart to component
|
||||
export class PieChart {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../../theme/sass/conf/conf";
|
||||
|
||||
.pie-charts {
|
||||
:host /deep/.pie-charts {
|
||||
color: $content-text;
|
||||
|
||||
.pie-chart-item-container {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
import 'style-loader!./popularApp.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'popular-app',
|
||||
templateUrl: './popularApp.html'
|
||||
templateUrl: './popularApp.html',
|
||||
styleUrls: ['./popularApp.scss']
|
||||
})
|
||||
export class PopularApp {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../../theme/sass/conf/conf";
|
||||
|
||||
.card.popular-app {
|
||||
/deep/.card.popular-app {
|
||||
&>.card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -50,6 +50,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.blur .card.popular-app .popular-app-img-container {
|
||||
/deep/.blur .card.popular-app .popular-app-img-container {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import {BaThemeConfigProvider} from '../../../theme';
|
|||
|
||||
import {TodoService} from './todo.service';
|
||||
|
||||
import 'style-loader!./todo.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'todo',
|
||||
templateUrl: './todo.html'
|
||||
templateUrl: './todo.html',
|
||||
styleUrls: ['./todo.scss']
|
||||
})
|
||||
export class Todo {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,105 +1,108 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
input.task-todo {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
:host /deep/.task-todo-container {
|
||||
|
||||
ul.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.placeholder, .ui-sortable-placeholder {
|
||||
input.task-todo {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
li {
|
||||
margin: 0 0 -1px 0;
|
||||
padding: 12px;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
border: 1px solid $input-border;
|
||||
cursor: grab;
|
||||
height: 42px;
|
||||
i.remove-todo {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
right: 12px;
|
||||
font-size: 32px;
|
||||
transition: color 0.2s;
|
||||
color: rgba($input-border, 0.5);
|
||||
visibility: hidden;
|
||||
line-height: 42px;
|
||||
&:hover {
|
||||
color: $input-border;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
i.remove-todo {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.todo-text {
|
||||
color: $content-text;
|
||||
}
|
||||
&:before {
|
||||
background: $input-border !important;
|
||||
}
|
||||
ul.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.placeholder, .ui-sortable-placeholder {
|
||||
}
|
||||
|
||||
i.mark {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
li {
|
||||
margin: 0 0 -1px 0;
|
||||
padding: 12px;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
border: 1px solid $input-border;
|
||||
cursor: grab;
|
||||
height: 42px;
|
||||
min-width: 4px;
|
||||
background: $input-border;
|
||||
cursor: pointer;
|
||||
transition: min-width 0.3s ease-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
i.mark {
|
||||
min-width: 40px;
|
||||
}
|
||||
label.todo-checkbox > span {
|
||||
&:before {
|
||||
color: white;
|
||||
content: '\f10c';
|
||||
margin-right: 20px;
|
||||
transition: margin-right 0.1s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
float: none;
|
||||
i.remove-todo {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0px;
|
||||
right: 12px;
|
||||
font-size: 32px;
|
||||
transition: color 0.2s;
|
||||
color: rgba($input-border, 0.5);
|
||||
visibility: hidden;
|
||||
line-height: 42px;
|
||||
&:hover {
|
||||
color: $input-border;
|
||||
}
|
||||
}
|
||||
label.todo-checkbox > input:checked + span:before {
|
||||
content: '\f00c';
|
||||
&:hover {
|
||||
i.remove-todo {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.todo-text {
|
||||
color: $content-text;
|
||||
}
|
||||
&:before {
|
||||
background: $input-border !important;
|
||||
}
|
||||
}
|
||||
|
||||
i.mark {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
height: 42px;
|
||||
min-width: 4px;
|
||||
background: $input-border;
|
||||
cursor: pointer;
|
||||
transition: min-width 0.3s ease-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
i.mark {
|
||||
min-width: 40px;
|
||||
}
|
||||
label.todo-checkbox > span {
|
||||
&:before {
|
||||
color: white;
|
||||
content: '\f10c';
|
||||
margin-right: 20px;
|
||||
transition: margin-right 0.1s ease-out;
|
||||
transition-delay: 0.2s;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
label.todo-checkbox > input:checked + span:before {
|
||||
content: '\f00c';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.todo-checkbox {
|
||||
width: 100%;
|
||||
padding-right: 25px;
|
||||
min-height: 16px;
|
||||
cursor: pointer;
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
height: 16px;
|
||||
&:before {
|
||||
border: none;
|
||||
color: $help-text;
|
||||
transition: all 0.15s ease-out;
|
||||
label.todo-checkbox {
|
||||
width: 100%;
|
||||
padding-right: 25px;
|
||||
min-height: 16px;
|
||||
cursor: pointer;
|
||||
> span {
|
||||
white-space: nowrap;
|
||||
height: 16px;
|
||||
&:before {
|
||||
border: none;
|
||||
color: $help-text;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-item-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.add-item-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ng2, .blur {
|
||||
/deep/.ng2, .blur {
|
||||
|
||||
.task-todo-container {
|
||||
.todo-panel.panel {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import {Component} from '@angular/core';
|
|||
import {TrafficChartService} from './trafficChart.service';
|
||||
import * as Chart from 'chart.js';
|
||||
|
||||
import 'style-loader!./trafficChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'traffic-chart',
|
||||
templateUrl: './trafficChart.html'
|
||||
templateUrl: './trafficChart.html',
|
||||
styleUrls: ['./trafficChart.scss']
|
||||
})
|
||||
|
||||
// TODO: move chart.js to it's own component
|
||||
|
|
|
|||
|
|
@ -1,205 +1,202 @@
|
|||
@import '../../../theme/sass/conf/conf';
|
||||
|
||||
.channels-block {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.chart-bg {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
background-color: transparent;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.ng2, .blur {
|
||||
/deep/ .ng2, /deep/ .blur {
|
||||
.traffic-chart .canvas-holder {
|
||||
border: 15px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.channels-info {
|
||||
display: inline-block;
|
||||
width: calc(100% - 370px);
|
||||
margin-left: 70px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.small-container {
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.channels-info-item {
|
||||
p {
|
||||
margin-bottom: 9px;
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.channel-number {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-chart {
|
||||
width: 300px;
|
||||
:host /deep/ .channels-block {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-legend {
|
||||
display: inline-block;
|
||||
padding: 70px 0 0 0;
|
||||
width: 160px;
|
||||
}
|
||||
.chart-bg {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.traffic-legend ul.doughnut-legend {
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 16px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 120px;
|
||||
span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
.channels-info {
|
||||
display: inline-block;
|
||||
width: calc(100% - 370px);
|
||||
margin-left: 70px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.small-container {
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-text {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
//color: $danger;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: $content-text;
|
||||
.channels-info-item {
|
||||
p {
|
||||
margin-bottom: 9px;
|
||||
font-size: 18px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.channel-number {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-change {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.channel-progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background-color: $progress-background;
|
||||
box-shadow: none;
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: $progress-default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
top: 27px;
|
||||
border-radius: 15px;
|
||||
left: -45px;
|
||||
}
|
||||
|
||||
@media (max-width: $resM) {
|
||||
|
||||
.card.medium-card.traffic-panel {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.channels-info {
|
||||
display: block;
|
||||
width: calc(100% - 88px);
|
||||
margin-top: -65px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1465px) and (min-width: 1199px) {
|
||||
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
|
||||
.traffic-chart {
|
||||
width: 240px;
|
||||
width: 300px;
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.traffic-legend {
|
||||
display: inline-block;
|
||||
padding: 70px 0 0 0;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.traffic-legend ul.doughnut-legend {
|
||||
li {
|
||||
list-style: none;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 16px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 120px;
|
||||
span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
top: 30px;
|
||||
.traffic-text {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
//color: $danger;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: $content-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.chart-bg {
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
.channel-change {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.channel-progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
background-color: $progress-background;
|
||||
box-shadow: none;
|
||||
.progress-bar {
|
||||
height: 4px;
|
||||
background-color: $progress-default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
|
||||
position: relative;
|
||||
top: 27px;
|
||||
border-radius: 15px;
|
||||
left: -45px;
|
||||
}
|
||||
|
||||
@media (max-width: $resM) {
|
||||
|
||||
.card.medium-card.traffic-panel {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.channels-info {
|
||||
display: block;
|
||||
width: calc(100% - 88px);
|
||||
margin-top: -65px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1465px) and (min-width: 1199px) {
|
||||
|
||||
.channels-info {
|
||||
display: none;
|
||||
}
|
||||
.traffic-chart {
|
||||
position: inherit;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
|
||||
.traffic-chart {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.canvas-holder {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.chart-bg {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.chart-bg {
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {UsersMapService} from './usersMap.service';
|
||||
import 'style-loader!./usersMap.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'users-map',
|
||||
templateUrl: './usersMap.html'
|
||||
templateUrl: './usersMap.html',
|
||||
styleUrls: ['./usersMap.scss']
|
||||
})
|
||||
export class UsersMap {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.dashboard-users-map {
|
||||
:host /deep/.dashboard-users-map {
|
||||
width: 100%;
|
||||
height: 315px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import { Component } from '@angular/core';
|
|||
|
||||
import './ckeditor.loader';
|
||||
import 'ckeditor';
|
||||
import 'style-loader!./ckeditor.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ckeditor-component',
|
||||
templateUrl: './ckeditor.html',
|
||||
styleUrls: ['./ckeditor.scss']
|
||||
})
|
||||
|
||||
export class Ckeditor {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
.cke_source {
|
||||
/deep/.cke_source {
|
||||
color: $dropdown-text!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
|
||||
|
||||
import 'style-loader!./login.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'login',
|
||||
templateUrl: './login.html',
|
||||
styleUrls: ['./login.scss']
|
||||
})
|
||||
export class Login {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {BubbleMapsService} from './bubbleMaps.service';
|
||||
import 'style-loader!./bubbleMaps.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'bubble-maps',
|
||||
templateUrl: './bubbleMaps.html',
|
||||
styleUrls: ['./bubbleMaps.scss']
|
||||
})
|
||||
export class BubbleMaps {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bubble-maps {
|
||||
:host /deep/.bubble-maps {
|
||||
width: 100%;
|
||||
height: calc(100vh - 283px);
|
||||
font-size : 11px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component, ElementRef} from '@angular/core';
|
||||
|
||||
import 'leaflet-map';
|
||||
import 'style-loader!./leafletMaps.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'leaflet-maps',
|
||||
templateUrl: './leafletMaps.html'
|
||||
templateUrl: './leafletMaps.html',
|
||||
styleUrls: ['./leafletMaps.scss']
|
||||
})
|
||||
export class LeafletMaps {
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,11 +1,11 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import {LineMapsService} from './lineMaps.service';
|
||||
import 'style-loader!./lineMaps.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'line-maps',
|
||||
templateUrl: './lineMaps.html'
|
||||
templateUrl: './lineMaps.html',
|
||||
styleUrls: ['./lineMaps.scss']
|
||||
})
|
||||
export class LineMaps {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.line-maps {
|
||||
:host /deep/.line-maps {
|
||||
width: 100%;
|
||||
height: calc(100vh - 283px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/forms';
|
||||
import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
|
||||
|
||||
import 'style-loader!./register.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'register',
|
||||
templateUrl: './register.html',
|
||||
styleUrls: ['./register.scss']
|
||||
})
|
||||
export class Register {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import 'style-loader!./basicTables.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'basic-tables',
|
||||
templateUrl: './basicTables.html'
|
||||
templateUrl: './basicTables.html',
|
||||
styleUrls: ['./basicTables.scss']
|
||||
|
||||
})
|
||||
export class BasicTables {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.status-button {
|
||||
:host /deep/.status-button {
|
||||
width: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import { Component } from '@angular/core';
|
|||
import { SmartTablesService } from './smartTables.service';
|
||||
import { LocalDataSource } from 'ng2-smart-table';
|
||||
|
||||
import 'style-loader!./smartTables.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'smart-tables',
|
||||
templateUrl: './smartTables.html',
|
||||
styleUrls: ['./smartTables.scss']
|
||||
})
|
||||
export class SmartTables {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="widgets">
|
||||
|
||||
<div class="row">
|
||||
<ba-card title="Basic Example" baCardClass="with-scroll">
|
||||
<ba-card title="Basic Example" baCardClass="with-scroll" class="smart-table-container">
|
||||
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,84 +1,85 @@
|
|||
@import "../../../../theme/sass/conf/conf";
|
||||
|
||||
.widgets {
|
||||
ba-card {
|
||||
:host /deep/ .widgets {
|
||||
.smart-table-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ng2-smart-table {
|
||||
th, td {
|
||||
border: 1px solid $border-light !important;
|
||||
line-height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
:host /deep/ {
|
||||
ng2-smart-table {
|
||||
th, td {
|
||||
border: 1px solid $border-light !important;
|
||||
line-height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
padding: 0 8px!important;
|
||||
}
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
color: $default-text;
|
||||
|
||||
input {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
ng2-smart-table-cell {
|
||||
color: $default-text;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
input {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
ng2-smart-table-cell {
|
||||
color: $default-text;
|
||||
line-height: 35px;
|
||||
}
|
||||
tr:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
a.ng2-smart-sort-link {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
font-weight: $font-bolder;
|
||||
&.sort {
|
||||
font-weight: $font-bolder !important;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $default-text !important;
|
||||
tbody {
|
||||
tr {
|
||||
color: $default-text;
|
||||
}
|
||||
tr:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
.actions {
|
||||
float: none;
|
||||
a.ng2-smart-sort-link {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
font-weight: $font-bolder;
|
||||
&.sort {
|
||||
font-weight: $font-bolder !important;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $default-text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
.actions {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions-title-add {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ng2-smart-actions-title-add {
|
||||
text-align: center;
|
||||
}
|
||||
a.ng2-smart-action, .ng2-smart-title {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
a.ng2-smart-action, .ng2-smart-title {
|
||||
font-size: 14px !important;
|
||||
color: $default-text;
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
&.ng2-smart-action-add-add {
|
||||
font-size: 25px !important;
|
||||
&.ng2-smart-action-add-add {
|
||||
font-size: 25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav.ng2-smart-pagination-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
nav.ng2-smart-pagination-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import 'style-loader!./buttons.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'buttons',
|
||||
templateUrl: './buttons.html',
|
||||
styleUrls: ['./buttons.scss']
|
||||
})
|
||||
export class Buttons {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,134 +1,136 @@
|
|||
.basic-btns {
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
h5 {
|
||||
line-height: 35px;
|
||||
font-size: 12px;
|
||||
&.row-sm {
|
||||
line-height: 30px;
|
||||
:host /deep/ .widgets {
|
||||
.basic-btns {
|
||||
padding-top: 8px;
|
||||
margin-bottom: -8px;
|
||||
h5 {
|
||||
line-height: 35px;
|
||||
font-size: 12px;
|
||||
&.row-sm {
|
||||
line-height: 30px;
|
||||
}
|
||||
&.row-xs {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
&.row-xs {
|
||||
line-height: 22px;
|
||||
& > .row {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
& > .row {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-row {
|
||||
& > div {
|
||||
.btns-row {
|
||||
& > div {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-sm {
|
||||
.btn {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-md {
|
||||
.btn {
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-lg {
|
||||
.btn {
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.btn-list {
|
||||
margin: 0 0 0 -18px;
|
||||
padding: 0;
|
||||
padding-top: 6px;
|
||||
clear: both;
|
||||
li {
|
||||
margin: 0px 0 12px 18px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-wrapper {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-sm {
|
||||
.btn {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-md {
|
||||
.btn {
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-same-width-lg {
|
||||
.btn {
|
||||
width: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.btn-list {
|
||||
margin: 0 0 0 -18px;
|
||||
padding: 0;
|
||||
padding-top: 6px;
|
||||
clear: both;
|
||||
li {
|
||||
margin: 0px 0 12px 18px;
|
||||
$btn-icon-size: 34px;
|
||||
.btn-icon {
|
||||
width: $btn-icon-size;
|
||||
height: $btn-icon-size;
|
||||
line-height: $btn-icon-size;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group-example {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-toolbar-example {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-wrapper {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
$btn-icon-size: 34px;
|
||||
.btn-icon {
|
||||
width: $btn-icon-size;
|
||||
height: $btn-icon-size;
|
||||
line-height: $btn-icon-size;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-group-example {
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-toolbar-example {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.progress-buttons-container {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
span.button-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
.progress-buttons-container {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
span.button-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.row + .row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.row + .row {
|
||||
margin-top: 30px;
|
||||
|
||||
.button-panel {
|
||||
height: 315px;
|
||||
.btn {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.large-buttons-panel {
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
.button-panel.df-size-button-panel {
|
||||
.btn-xs {
|
||||
width: 60px;
|
||||
}
|
||||
.btn-sm {
|
||||
width: 90px;
|
||||
}
|
||||
.btn-mm {
|
||||
width: 120px;
|
||||
}
|
||||
.btn-md {
|
||||
width: 150px;
|
||||
}
|
||||
.btn-xm {
|
||||
width: 175px;
|
||||
}
|
||||
.btn-lg {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.btn-group.flex-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.button-panel {
|
||||
height: 315px;
|
||||
.btn {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.large-buttons-panel {
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
.button-panel.df-size-button-panel {
|
||||
.btn-xs {
|
||||
width: 60px;
|
||||
}
|
||||
.btn-sm {
|
||||
width: 90px;
|
||||
}
|
||||
.btn-mm {
|
||||
width: 120px;
|
||||
}
|
||||
.btn-md {
|
||||
width: 150px;
|
||||
}
|
||||
.btn-xm {
|
||||
width: 175px;
|
||||
}
|
||||
.btn-lg {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.btn-group.flex-dropdown {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
import 'style-loader!./grid.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'grid',
|
||||
templateUrl: './grid.html',
|
||||
styleUrls: ['./grid.scss']
|
||||
})
|
||||
export class Grid {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
.show-grid div[class^=col-]{
|
||||
:host /deep/.show-grid div[class^=col-]{
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid-h{
|
||||
:host /deep/.grid-h{
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
&:first-child{
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {IconsService} from './icons.service';
|
||||
|
||||
import 'style-loader!./icons.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'icons',
|
||||
templateUrl: './icons.html',
|
||||
styleUrls: ['./icons.scss']
|
||||
})
|
||||
export class Icons {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,123 +1,126 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
@mixin icon-hover($color) {
|
||||
i:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
:host /deep/ .widgets {
|
||||
|
||||
.icons-list {
|
||||
& > div {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
i {
|
||||
font-weight: $font-normal;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
@mixin icon-hover($color) {
|
||||
i:hover {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
@include icon-hover($primary);
|
||||
}
|
||||
&.success {
|
||||
@include icon-hover($success);
|
||||
}
|
||||
&.warning {
|
||||
@include icon-hover($warning);
|
||||
}
|
||||
&.danger {
|
||||
@include icon-hover($danger);
|
||||
}
|
||||
}
|
||||
.icons-list {
|
||||
& > div {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
i {
|
||||
font-weight: $font-normal;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.see-all-icons {
|
||||
float: right;
|
||||
}
|
||||
&.primary {
|
||||
@include icon-hover($primary);
|
||||
}
|
||||
&.success {
|
||||
@include icon-hover($success);
|
||||
}
|
||||
&.warning {
|
||||
@include icon-hover($warning);
|
||||
}
|
||||
&.danger {
|
||||
@include icon-hover($danger);
|
||||
}
|
||||
}
|
||||
|
||||
.awesomeIcons {
|
||||
height: 308px;
|
||||
}
|
||||
a.see-all-icons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.kameleon-row {
|
||||
display: inline-block;
|
||||
min-width: 102px;
|
||||
width: 20%;
|
||||
.kameleon-icon {
|
||||
padding: 0 10px;
|
||||
.awesomeIcons {
|
||||
height: 308px;
|
||||
}
|
||||
|
||||
.kameleon-row {
|
||||
display: inline-block;
|
||||
min-width: 102px;
|
||||
width: 20%;
|
||||
.kameleon-icon {
|
||||
padding: 0 10px;
|
||||
img {
|
||||
width: 81px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.kameleon-row {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.kameleon-row {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.kameleon-row {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon-tabs {
|
||||
max-width: 84px;
|
||||
img {
|
||||
width: 81px;
|
||||
width: 100%;
|
||||
min-width: 81px;
|
||||
min-height: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setImgBg($color) {
|
||||
img {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.with-round-bg {
|
||||
margin-bottom: 6px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@include setImgBg($default);
|
||||
|
||||
&.success {
|
||||
@include setImgBg($success);
|
||||
}
|
||||
&.danger {
|
||||
@include setImgBg($danger);
|
||||
}
|
||||
&.warning {
|
||||
@include setImgBg($warning);
|
||||
}
|
||||
&.info {
|
||||
@include setImgBg($info);
|
||||
}
|
||||
&.primary {
|
||||
@include setImgBg($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.kameleon-row {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.kameleon-row {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.kameleon-row {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon-tabs {
|
||||
max-width: 84px;
|
||||
img {
|
||||
width: 100%;
|
||||
min-width: 81px;
|
||||
min-height: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
.kameleon-icon {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setImgBg($color) {
|
||||
img {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.with-round-bg {
|
||||
margin-bottom: 6px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@include setImgBg($default);
|
||||
|
||||
&.success {
|
||||
@include setImgBg($success);
|
||||
}
|
||||
&.danger {
|
||||
@include setImgBg($danger);
|
||||
}
|
||||
&.warning {
|
||||
@include setImgBg($warning);
|
||||
}
|
||||
&.info {
|
||||
@include setImgBg($info);
|
||||
}
|
||||
&.primary {
|
||||
@include setImgBg($primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@ import 'ammap3/ammap/maps/js/worldLow';
|
|||
|
||||
import {BaAmChartThemeService} from './baAmChartTheme.service';
|
||||
|
||||
import 'style-loader!./baAmChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-am-chart',
|
||||
templateUrl: './baAmChart.html',
|
||||
styleUrls: ['./baAmChart.scss'],
|
||||
providers: [BaAmChartThemeService],
|
||||
})
|
||||
export class BaAmChart {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
} from '@angular/core';
|
||||
|
||||
import * as Chartist from 'chartist';
|
||||
import 'style-loader!./baChartistChart.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-chartist-chart',
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import "~chartist/dist/chartist";
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
import {Component, ViewChild, Input, Output, ElementRef, EventEmitter} from '@angular/core';
|
||||
|
||||
import 'fullcalendar/dist/fullcalendar.js';
|
||||
|
||||
import 'style-loader!./baFullCalendar.scss';
|
||||
import * as jQuery from 'jquery';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-full-calendar',
|
||||
templateUrl: './baFullCalendar.html',
|
||||
templateUrl: './baFullCalendar.html'
|
||||
})
|
||||
export class BaFullCalendar {
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import "~fullcalendar/dist/fullcalendar";
|
||||
|
|
@ -5,11 +5,10 @@ import { Subscription } from 'rxjs/Rx';
|
|||
import { BaMenuService } from '../../services';
|
||||
import { GlobalState } from '../../../global.state';
|
||||
|
||||
import 'style-loader!./baMenu.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-menu',
|
||||
templateUrl: './baMenu.html'
|
||||
templateUrl: './baMenu.html',
|
||||
styleUrls: ['./baMenu.scss']
|
||||
})
|
||||
export class BaMenu {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
||||
|
||||
import 'style-loader!./baMenuItem.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-menu-item',
|
||||
templateUrl: './baMenuItem.html'
|
||||
templateUrl: './baMenuItem.html',
|
||||
styleUrls: ['./baMenuItem.scss']
|
||||
})
|
||||
export class BaMenuItem {
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component} from '@angular/core';
|
|||
|
||||
import {GlobalState} from '../../../global.state';
|
||||
|
||||
import 'style-loader!./baPageTop.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-page-top',
|
||||
templateUrl: './baPageTop.html',
|
||||
styleUrls: ['./baPageTop.scss']
|
||||
})
|
||||
export class BaPageTop {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,200 +1,202 @@
|
|||
@import '../../sass/conf/conf';
|
||||
@import '../../components/baMsgCenter/baMsgCenter';
|
||||
|
||||
.page-top {
|
||||
background-color: $sidebar;
|
||||
position: fixed;
|
||||
z-index: 904;
|
||||
box-shadow: 2px 0 3px rgba(0, 0, 0, 0.5);
|
||||
height: 66px;
|
||||
width: 100%;
|
||||
min-width: $resMin;
|
||||
padding: 0 32px 0 40px;
|
||||
:host /deep/ {
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
.page-top {
|
||||
background-color: $sidebar;
|
||||
position: fixed;
|
||||
z-index: 904;
|
||||
box-shadow: 2px 0 3px rgba(0, 0, 0, 0.5);
|
||||
height: 66px;
|
||||
width: 100%;
|
||||
min-width: $resMin;
|
||||
padding: 0 32px 0 40px;
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blur {
|
||||
.page-top.scrolled {
|
||||
background-color: rgba(black, 0.85)
|
||||
.blur {
|
||||
.page-top.scrolled {
|
||||
background-color: rgba(black, 0.85)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.al-logo {
|
||||
color: $sidebar-text;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-family: $font-family;
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
outline: none !important;
|
||||
line-height: 60px;
|
||||
a.al-logo {
|
||||
color: $sidebar-text;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-family: $font-family;
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
outline: none !important;
|
||||
line-height: 60px;
|
||||
|
||||
span {
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
a.al-logo:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
a.al-logo:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
float: right;
|
||||
min-width: 230px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.al-user-profile {
|
||||
float: right;
|
||||
margin-right: 12px;
|
||||
transition: all .15s ease-in-out;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
ul.profile-dropdown:after {
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: #fff;
|
||||
border-width: 10px;
|
||||
margin-right: 28px;
|
||||
.user-profile {
|
||||
float: right;
|
||||
min-width: 230px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
a.refresh-data {
|
||||
color: $sidebar-text;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
font-weight: $font-normal;
|
||||
float: right;
|
||||
margin-top: 13px;
|
||||
margin-right: 26px;
|
||||
|
||||
&:hover {
|
||||
color: $warning !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.collapse-menu-link {
|
||||
font-size: 31px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
line-height: 42px;
|
||||
color: $sidebar-text;
|
||||
padding: 0;
|
||||
float: left;
|
||||
margin: 11px 0 0 25px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.al-skin-dropdown {
|
||||
float: right;
|
||||
margin-top: 14px;
|
||||
margin-right: 26px;
|
||||
|
||||
.tpl-skin-panel {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-palette {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
@include bg('theme/palette.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.search {
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
line-height: 25px;
|
||||
transition: all 0.5s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 162px;
|
||||
float: left;
|
||||
margin: 20px 0 0 30px;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
i {
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding-left: 1px;
|
||||
font-size: 16px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
input {
|
||||
color: $sidebar-text;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 120px;
|
||||
.al-user-profile {
|
||||
float: right;
|
||||
margin-right: 12px;
|
||||
transition: all .15s ease-in-out;
|
||||
padding: 0;
|
||||
margin: 0 0 0 -3px;
|
||||
height: 27px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
ul.profile-dropdown:after {
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: #fff;
|
||||
border-width: 10px;
|
||||
margin-right: 28px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $resS) {
|
||||
.search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $resXS) {
|
||||
.page-top {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $resXXS) {
|
||||
.user-profile{
|
||||
min-width: 136px;
|
||||
}
|
||||
a.refresh-data {
|
||||
margin-right: 10px;
|
||||
color: $sidebar-text;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
font-weight: $font-normal;
|
||||
float: right;
|
||||
margin-top: 13px;
|
||||
margin-right: 26px;
|
||||
|
||||
&:hover {
|
||||
color: $warning !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.collapse-menu-link {
|
||||
margin-left: 10px;
|
||||
font-size: 31px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
line-height: 42px;
|
||||
color: $sidebar-text;
|
||||
padding: 0;
|
||||
float: left;
|
||||
margin: 11px 0 0 25px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.al-skin-dropdown {
|
||||
display: none;
|
||||
float: right;
|
||||
margin-top: 14px;
|
||||
margin-right: 26px;
|
||||
|
||||
.tpl-skin-panel {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-palette {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 13px;
|
||||
@include bg('theme/palette.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.search {
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
line-height: 25px;
|
||||
transition: all 0.5s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 162px;
|
||||
float: left;
|
||||
margin: 20px 0 0 30px;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
i {
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding-left: 1px;
|
||||
font-size: 16px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
input {
|
||||
color: $sidebar-text;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 120px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 -3px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $resS) {
|
||||
.search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $resXS) {
|
||||
.page-top {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $resXXS) {
|
||||
.user-profile {
|
||||
min-width: 136px;
|
||||
}
|
||||
a.refresh-data {
|
||||
margin-right: 10px;
|
||||
}
|
||||
a.collapse-menu-link {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.al-skin-dropdown {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-toggle-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-toggle-link{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {Component, ElementRef, HostListener} from '@angular/core';
|
|||
import {GlobalState} from '../../../global.state';
|
||||
import {layoutSizes} from '../../../theme';
|
||||
|
||||
import 'style-loader!./baSidebar.scss';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-sidebar',
|
||||
templateUrl: './baSidebar.html'
|
||||
templateUrl: './baSidebar.html',
|
||||
styleUrls: ['./baSidebar.scss']
|
||||
})
|
||||
export class BaSidebar {
|
||||
public menuHeight:number;
|
||||
|
|
|
|||
|
|
@ -4,300 +4,303 @@ $sidebar-scroll-width: 4px;
|
|||
$angle-left: "\f100";
|
||||
$angle-right: "\f101";
|
||||
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
top: $top-height;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
display: block;
|
||||
min-height: 100%;
|
||||
background-color: $sidebar;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
:host /deep/{
|
||||
|
||||
.al-sidebar-list {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 18px 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist .subitem-submenu-list {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.subitem-submenu-link {
|
||||
.fa {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-list-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: none;
|
||||
padding: 0;
|
||||
&.selected:not(.with-sub-menu) {
|
||||
background-color: $primary;
|
||||
a.al-sidebar-list-link {
|
||||
color: $sidebar-text;
|
||||
b {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ba-sidebar-item-expanded {
|
||||
> ul.al-sidebar-sublist {
|
||||
display: block!important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.al-sidebar-list-item, .ba-sidebar-sublist-item {
|
||||
&.ba-sidebar-item-expanded {
|
||||
> .al-sidebar-list-link {
|
||||
b {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .al-sidebar-sublist {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.al-sidebar-list-link {
|
||||
display: block;
|
||||
height: 42px;
|
||||
padding-left: 18px;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
line-height: 42px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
b {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
i {
|
||||
margin-right: 18px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
b {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
top: $top-height;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-shadow: none;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: $sidebar-text;
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
border-radius: 0px !important;
|
||||
width: $sidebar-scroll-width !important;
|
||||
left: $sidebar-width - $sidebar-scroll-width;
|
||||
}
|
||||
|
||||
@mixin layout-collapsed() {
|
||||
.al-main {
|
||||
margin-left: 50px;
|
||||
min-height: 100%;
|
||||
background-color: $sidebar;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.al-footer {
|
||||
padding-left: 83px
|
||||
.al-sidebar-list {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 18px 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin default-sublist() {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> ba-menu-item > li {
|
||||
.al-sidebar-sublist .subitem-submenu-list {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.subitem-submenu-link {
|
||||
.fa {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-list-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: none;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
a {
|
||||
display: block;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
padding-left: 52px;
|
||||
height: auto;
|
||||
line-height: 29px;
|
||||
&:hover {
|
||||
&.selected:not(.with-sub-menu) {
|
||||
background-color: $primary;
|
||||
a.al-sidebar-list-link {
|
||||
color: $sidebar-text;
|
||||
b {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ba-sidebar-item-expanded {
|
||||
> ul.al-sidebar-sublist {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.al-sidebar-list-item, .ba-sidebar-sublist-item {
|
||||
&.ba-sidebar-item-expanded {
|
||||
> .al-sidebar-list-link {
|
||||
b {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
> .al-sidebar-sublist {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.al-sidebar-list-link {
|
||||
display: block;
|
||||
height: 42px;
|
||||
padding-left: 18px;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
line-height: 42px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
b {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&.selected:not(.with-sub-menu) > a {
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
i {
|
||||
margin-right: 18px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
}
|
||||
|
||||
.sidebar-hover-elem{
|
||||
width: $sidebar-scroll-width;
|
||||
background: $primary;
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: $sidebar-width - $sidebar-scroll-width;
|
||||
transition: all 0.5s ease;
|
||||
transition-property: top, height;
|
||||
height: 42px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-select-elem {
|
||||
display: block;
|
||||
top: 94px;
|
||||
}
|
||||
|
||||
@mixin sidebar-collapsed() {
|
||||
.al-sidebar {
|
||||
width: 52px;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 52px;
|
||||
@include bg-translucent-dark(0.8);
|
||||
width: 0;
|
||||
b {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: width 0.5s ease;
|
||||
&.slide-right {
|
||||
width: 135px;
|
||||
opacity: 1;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-shadow: none;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 12px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: $sidebar-text;
|
||||
transition: transform 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
border-radius: 0px !important;
|
||||
width: $sidebar-scroll-width !important;
|
||||
left: $sidebar-width - $sidebar-scroll-width;
|
||||
}
|
||||
|
||||
@mixin layout-collapsed() {
|
||||
.al-main {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.al-footer {
|
||||
padding-left: 83px
|
||||
}
|
||||
}
|
||||
|
||||
@mixin default-sublist() {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> ba-menu-item > li {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
a {
|
||||
display: block;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
padding-left: 52px;
|
||||
height: auto;
|
||||
line-height: 29px;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
&.selected:not(.with-sub-menu) > a {
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
li {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
}
|
||||
|
||||
.sidebar-hover-elem {
|
||||
width: $sidebar-scroll-width;
|
||||
background: $primary;
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: $sidebar-width - $sidebar-scroll-width;
|
||||
transition: all 0.5s ease;
|
||||
transition-property: top, height;
|
||||
height: 42px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-select-elem {
|
||||
display: block;
|
||||
top: 94px;
|
||||
}
|
||||
|
||||
@mixin sidebar-collapsed() {
|
||||
.al-sidebar {
|
||||
width: 52px;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 52px;
|
||||
@include bg-translucent-dark(0.8);
|
||||
width: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: width 0.5s ease;
|
||||
&.slide-right {
|
||||
width: 135px;
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
min-width: 130px;
|
||||
white-space: nowrap;
|
||||
li {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
min-width: 130px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-hidden() {
|
||||
.al-sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: 48px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-hidden() {
|
||||
.al-sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@mixin sidebar-overlap() {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
@include bg-translucent-dark(0.75);
|
||||
transition: width 0.5s ease;
|
||||
|
||||
@mixin sidebar-overlap() {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
@include bg-translucent-dark(0.75);
|
||||
transition: width 0.5s ease;
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 1;
|
||||
}
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
top: auto;
|
||||
left: auto;
|
||||
background: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
top: auto;
|
||||
left: auto;
|
||||
background: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: $sidebar-width - 4;
|
||||
transition: left 0.5s ease;
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: $sidebar-width - 4;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-collapsed {
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.menu-collapsed {
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.menu-collapsed {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $resXS + 1) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (min-width: $resXS) {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $resXS + 1) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (min-width: $resXS) {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@include sidebar-overlap();
|
||||
}
|
||||
|
||||
@media (max-width: $resXS) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-hidden();
|
||||
}
|
||||
.al-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
.al-footer {
|
||||
padding-left: 0;
|
||||
@media (max-width: 1200px) {
|
||||
@include sidebar-overlap();
|
||||
}
|
||||
|
||||
@media (max-width: $resXS) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-hidden();
|
||||
}
|
||||
.al-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
.al-footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
@mixin svg-icon-class($iconName, $width:'', $height:'') {
|
||||
.#{'i-' + $iconName} {
|
||||
@include svg-icon($images-root + $iconName + '.svg', $width, $height);
|
||||
@include svg-icon('/assets/img/' + $iconName + '.svg', $width, $height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -160,11 +160,12 @@ a {
|
|||
}
|
||||
|
||||
.icon-up {
|
||||
@include bg-nr('arrow-green-up.svg');
|
||||
//@include bg-nr('arrow-green-up.svg');
|
||||
background: url('/assets/img/arrow-green-up.svg') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
@include bg-nr('arrow-red-down.svg');
|
||||
background: url('/assets/img/arrow-red-down.svg') no-repeat 0 0;
|
||||
}
|
||||
|
||||
.disable-text-selection {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@font-face {
|
||||
font-family: 'socicon';
|
||||
src: url('#{$fonts-root}socicon.eot');
|
||||
src: url('#{$fonts-root}socicon.eot?#iefix') format('embedded-opentype'),
|
||||
url('#{$fonts-root}socicon.woff') format('woff'),
|
||||
url('#{$fonts-root}socicon.woff2') format('woff2'),
|
||||
url('#{$fonts-root}socicon.ttf') format('truetype'),
|
||||
url('#{$fonts-root}socicon.svg#sociconregular') format('svg');
|
||||
src: url('/assets#{$fonts-root}socicon.eot');
|
||||
src: url('/assets#{$fonts-root}socicon.eot?#iefix') format('embedded-opentype'),
|
||||
url('/assets#{$fonts-root}socicon.woff') format('woff'),
|
||||
url('/assets#{$fonts-root}socicon.woff2') format('woff2'),
|
||||
url('/assets#{$fonts-root}socicon.ttf') format('truetype'),
|
||||
url('/assets#{$fonts-root}socicon.svg#sociconregular') format('svg');
|
||||
font-weight: $font-normal;
|
||||
font-style: normal;
|
||||
text-transform: initial;
|
||||
|
|
@ -67,4 +67,4 @@
|
|||
|
||||
.socicon-behace {
|
||||
@include socicon($behace-color, "H");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ $card-title-height: 44px;
|
|||
$card-header-font-size: 16px;
|
||||
|
||||
.card.card-blur {
|
||||
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
|
||||
$blurredBgUrl: '/img/blur-bg-blurred.jpg';
|
||||
background: url($blurredBgUrl);
|
||||
transition: none;
|
||||
background-attachment: fixed;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
@mixin bg-image($relativeUrl) {
|
||||
background-image: url($images-root + $relativeUrl);
|
||||
background-image: url($assets-root + $images-root + $relativeUrl);
|
||||
}
|
||||
|
||||
@mixin bg-translucent-dark($opacity) {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ $large-card-height: 974px;
|
|||
$default-animation-duration: 0.2s;
|
||||
$default-animation-style: ease-out;
|
||||
|
||||
$assets-root: 'assets/';
|
||||
$images-root: $assets-root + 'img/';
|
||||
$fonts-root: $assets-root + 'fonts/';
|
||||
$assets-root: '/assets';
|
||||
$images-root: '/img/';
|
||||
$fonts-root: '/fonts/';
|
||||
$font-thin: 100;
|
||||
$font-light: 300;
|
||||
$font-normal: 400;
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ $hoverlink: darken($activelink, 20%);
|
|||
@mixin body-bg() {
|
||||
background-color: $body-bg;
|
||||
|
||||
$mainBgUrl: $images-root + 'sky-bg.jpg';
|
||||
$mainBgUrl: $assets-root + $images-root + 'sky-bg.jpg';
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue