mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-19 08:50:13 +01:00
Theme styles added and useless files rm
This commit is contained in:
smartapant
parent
27dcebeba2
commit
f87b6ce425
28 changed files with 1210 additions and 231 deletions
|
|
@ -1,55 +0,0 @@
|
||||||
import {Component} from 'angular2/core';
|
|
||||||
|
|
||||||
/*
|
|
||||||
* We're loading this component asynchronously
|
|
||||||
* We are using some magic with es6-promise-loader that will wrap the module with a Promise
|
|
||||||
* see https://github.com/gdi2290/es6-promise-loader for more info
|
|
||||||
*/
|
|
||||||
|
|
||||||
console.log('`About` component loaded asynchronously');
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'about',
|
|
||||||
styles: [`
|
|
||||||
h1 {
|
|
||||||
font-family: Arial, Helvetica, sans-serif
|
|
||||||
}
|
|
||||||
`],
|
|
||||||
template: `
|
|
||||||
<md-card>
|
|
||||||
<h1>
|
|
||||||
patrick@AngularClass.com
|
|
||||||
</h1>
|
|
||||||
</md-card>
|
|
||||||
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class About {
|
|
||||||
constructor() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
console.log('hello `About` component');
|
|
||||||
// static data that is bundled
|
|
||||||
// var mockData = require('assets/mock-data/mock-data.json');
|
|
||||||
// console.log('mockData', mockData);
|
|
||||||
// if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
|
|
||||||
// this.asyncDataWithWebpack();
|
|
||||||
}
|
|
||||||
asyncDataWithWebpack() {
|
|
||||||
// you can also async load mock data with 'es6-promise-loader'
|
|
||||||
// you would do this if you don't want the mock-data bundled
|
|
||||||
// remember that 'es6-promise-loader' is a promise
|
|
||||||
// var asyncMockDataPromiseFactory = require('es6-promise!assets/mock-data/mock-data.json');
|
|
||||||
// setTimeout(() => {
|
|
||||||
//
|
|
||||||
// let asyncDataPromise = asyncMockDataPromiseFactory();
|
|
||||||
// asyncDataPromise.then(json => {
|
|
||||||
// console.log('async mockData', json);
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * from './about.component';
|
|
||||||
|
|
@ -4,9 +4,7 @@
|
||||||
import {Component, ViewEncapsulation} from 'angular2/core';
|
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||||
import {RouteConfig, Router} from 'angular2/router';
|
import {RouteConfig, Router} from 'angular2/router';
|
||||||
|
|
||||||
import {Home} from './home';
|
|
||||||
import {Pages} from './pages';
|
import {Pages} from './pages';
|
||||||
import {AppState} from './app.service';
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* App Component
|
* App Component
|
||||||
|
|
@ -44,10 +42,10 @@ export class App {
|
||||||
name = 'Angular 2 Webpack Starter';
|
name = 'Angular 2 Webpack Starter';
|
||||||
url = 'https://twitter.com/AngularClass';
|
url = 'https://twitter.com/AngularClass';
|
||||||
|
|
||||||
constructor(public appState: AppState) {}
|
constructor() {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
console.log('Initial App State', this.appState.state);
|
console.log('Initial App State');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
@import 'theme/conf/sass/conf';
|
@import "theme/theme";
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import {Injectable} from 'angular2/core';
|
|
||||||
import {HmrState} from 'angular2-hmr';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class AppState {
|
|
||||||
// HmrState uis used by HMR to track the any state during reloading
|
|
||||||
@HmrState() _state = {};
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// already return a clone of the current state
|
|
||||||
get state() {
|
|
||||||
return this._state = this._clone(this._state);
|
|
||||||
}
|
|
||||||
// never allow mutation
|
|
||||||
set state(value) {
|
|
||||||
throw new Error('do not mutate the `.state` directly');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
get(prop?: any) {
|
|
||||||
// use our state getter for the clone
|
|
||||||
const state = this.state;
|
|
||||||
return state[prop] || state;
|
|
||||||
}
|
|
||||||
|
|
||||||
set(prop: string, value: any) {
|
|
||||||
// internally mutate our state
|
|
||||||
return this._state[prop] = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
_clone(object) {
|
|
||||||
// simple object clone
|
|
||||||
return JSON.parse(JSON.stringify( object ));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import {Component} from 'angular2/core';
|
|
||||||
import {AppState} from '../app.service';
|
|
||||||
|
|
||||||
import {Title} from './title';
|
|
||||||
import {XLarge} from './x-large';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
// The selector is what angular internally uses
|
|
||||||
// for `document.querySelectorAll(selector)` in our index.html
|
|
||||||
// where, in this case, selector is the string 'home'
|
|
||||||
selector: 'home', // <home></home>
|
|
||||||
// We need to tell Angular's Dependency Injection which providers are in our app.
|
|
||||||
providers: [
|
|
||||||
Title
|
|
||||||
],
|
|
||||||
// We need to tell Angular's compiler which directives are in our template.
|
|
||||||
// Doing so will allow Angular to attach our behavior to an element
|
|
||||||
directives: [
|
|
||||||
XLarge
|
|
||||||
],
|
|
||||||
// We need to tell Angular's compiler which custom pipes are in our template.
|
|
||||||
pipes: [ ],
|
|
||||||
// Our list of styles in our component. We may add more to compose many styles together
|
|
||||||
styles: [ require('./home.css') ],
|
|
||||||
// Every Angular template is first compiled by the browser before Angular runs it's compiler
|
|
||||||
template: require('./home.html')
|
|
||||||
})
|
|
||||||
export class Home {
|
|
||||||
// Set our default values
|
|
||||||
localState = { value: '' };
|
|
||||||
// TypeScript public modifiers
|
|
||||||
constructor(public appState: AppState, public title: Title) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
console.log('hello `Home` component');
|
|
||||||
// this.title.getData().subscribe(data => this.data = data);
|
|
||||||
}
|
|
||||||
|
|
||||||
submitState(value) {
|
|
||||||
console.log('submitState', value);
|
|
||||||
this.appState.set('value', value);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<md-card>
|
|
||||||
<md-card-content>
|
|
||||||
<span x-large>Your Content Here</span>
|
|
||||||
|
|
||||||
<form (ngSubmit)="submitState(localState.value)" autocomplete="off">
|
|
||||||
|
|
||||||
<md-input
|
|
||||||
placeholder="Submit Local State to App State"
|
|
||||||
[value]="localState.value"
|
|
||||||
(input)="localState.value = $event.target.value"
|
|
||||||
autofocus>
|
|
||||||
</md-input>
|
|
||||||
|
|
||||||
<button md-raised-button color="primary">Submit Value</button>
|
|
||||||
</form>
|
|
||||||
<!--
|
|
||||||
<input type="text" [value]="localState.value" (input)="localState.value = $event.target.value" autofocus>
|
|
||||||
Rather than wiring up two-way data-binding ourselves with [value] and (input)
|
|
||||||
we can use Angular's [(ngModel)] syntax
|
|
||||||
<input type="text" [(ngModel)]="localState.value" autofocus>
|
|
||||||
-->
|
|
||||||
<md-card>
|
|
||||||
For hot module reloading run
|
|
||||||
<pre>npm run start:hmr</pre>
|
|
||||||
</md-card>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
<pre>this.localState = {{ localState | json }}</pre>
|
|
||||||
|
|
||||||
</md-card-content>
|
|
||||||
</md-card>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * from './home.component';
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * from './title.service';
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
import {Injectable} from 'angular2/core';
|
|
||||||
import {Http} from 'angular2/http';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class Title {
|
|
||||||
value = 'Angular 2';
|
|
||||||
constructor(public http: Http) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
getData() {
|
|
||||||
console.log('Title#getData(): Get Data');
|
|
||||||
// return this.http.get('/assets/data.json')
|
|
||||||
// .map(res => res.json());
|
|
||||||
return {
|
|
||||||
value: 'AngularClass'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export * from './x-large.directive';
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import {Directive, Component, ElementRef, Renderer} from 'angular2/core';
|
|
||||||
/*
|
|
||||||
* Directive
|
|
||||||
* XLarge is a simple directive to show how one is made
|
|
||||||
*/
|
|
||||||
@Directive({
|
|
||||||
selector: '[x-large]' // using [ ] means selecting attributes
|
|
||||||
})
|
|
||||||
export class XLarge {
|
|
||||||
constructor(element: ElementRef, renderer: Renderer) {
|
|
||||||
// simple DOM manipulation to set font size to x-large
|
|
||||||
// `nativeElement` is the direct reference to the DOM element
|
|
||||||
// element.nativeElement.style.fontSize = 'x-large';
|
|
||||||
|
|
||||||
// for server/webworker support use the renderer
|
|
||||||
renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
// App
|
// App
|
||||||
export * from './app.component';
|
export * from './app.component';
|
||||||
export * from './app.service';
|
|
||||||
|
|
||||||
import {AppState} from './app.service';
|
|
||||||
|
|
||||||
// Application wide providers
|
// Application wide providers
|
||||||
export const APP_PROVIDERS = [
|
export const APP_PROVIDERS = [
|
||||||
AppState
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -8,16 +8,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="user-profile clearfix">
|
<div class="user-profile clearfix">
|
||||||
<div class="al-user-profile" uib-dropdown>
|
<div class="dropdown al-user-profile">
|
||||||
<a uib-dropdown-toggle class="profile-toggle-link">
|
<a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
|
||||||
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7vR66BWT_HdVJpwxGJoGBJl5HYfiSKDrsYrzw7kqf2yP6sNyJtHdaAQ"/>
|
Dropdown
|
||||||
</a>
|
</a>
|
||||||
<ul class="top-dropdown-menu profile-dropdown" uib-dropdown-menu>
|
<div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
|
||||||
<li><i class="dropdown-arr"></i></li>
|
<li class="dropdown-item"><i class="dropdown-arr"></i></li>
|
||||||
<li><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
|
<li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
|
||||||
<li><a href><i class="fa fa-cog"></i>Settings</a></li>
|
<li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
|
||||||
<li><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
|
<li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<msg-center></msg-center>
|
<msg-center></msg-center>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,174 @@
|
||||||
|
@import '../sass/conf/conf';
|
||||||
|
|
||||||
|
.page-top {
|
||||||
|
@include bg-translucent-dark(0.5);
|
||||||
|
position: fixed;
|
||||||
|
z-index: 904;
|
||||||
|
box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
height: 66px;
|
||||||
|
width: 100%;
|
||||||
|
min-width: $resMin;
|
||||||
|
padding: 0 32px 0 40px;
|
||||||
|
|
||||||
|
&.scrolled {
|
||||||
|
@include bg-translucent-dark(0.85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.al-logo {
|
||||||
|
color: #ffffff;
|
||||||
|
display: block;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: $font-family;
|
||||||
|
white-space: nowrap;
|
||||||
|
float: left;
|
||||||
|
outline: none !important;
|
||||||
|
line-height: 60px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
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;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.refresh-data {
|
||||||
|
color: #ffffff;
|
||||||
|
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: #fff;
|
||||||
|
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;
|
||||||
|
color: #fff;
|
||||||
|
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 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
23
src/app/theme/sass/_blur-admin-theme.scss
Normal file
23
src/app/theme/sass/_blur-admin-theme.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
.label {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-primary {
|
||||||
|
background: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-info {
|
||||||
|
background: $primary-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-success {
|
||||||
|
background: $success;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-warning {
|
||||||
|
background: $warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-danger {
|
||||||
|
background: $danger;
|
||||||
|
}
|
||||||
279
src/app/theme/sass/_buttons.scss
Normal file
279
src/app/theme/sass/_buttons.scss
Normal file
|
|
@ -0,0 +1,279 @@
|
||||||
|
$hover: 24;
|
||||||
|
.btn:focus, .btn:active:focus, .btn.active:focus,
|
||||||
|
.btn.focus, .btn:active.focus, .btn.active.focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin styleButton($color, $borderColor) {
|
||||||
|
background: $color;
|
||||||
|
border-color: $borderColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin buttonColor($color, $borderColor) {
|
||||||
|
@include styleButton($color, $borderColor);
|
||||||
|
|
||||||
|
&.disabled, &[disabled], fieldset[disabled] &, &.disabled:hover, &[disabled]:hover,
|
||||||
|
fieldset[disabled] &:hover, &.disabled:focus, &[disabled]:focus, fieldset[disabled] &:focus,
|
||||||
|
&.disabled.focus, &[disabled].focus, fieldset[disabled] &.focus, &.disabled:active,
|
||||||
|
&[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active,
|
||||||
|
fieldset[disabled] &.active {
|
||||||
|
@include styleButton($color, $borderColor + $hover/2);
|
||||||
|
&:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover, &:focus, &.focus, &:active, &.active {
|
||||||
|
@include styleButton($color, $borderColor - $hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.open > .btn.dropdown-toggle {
|
||||||
|
&.btn.btn-primary {
|
||||||
|
@include styleButton($primary, $primary - $hover);
|
||||||
|
background-color: $primary-dark;
|
||||||
|
border-color: $primary-dark;
|
||||||
|
}
|
||||||
|
&.btn-default {
|
||||||
|
@include styleButton(transparent, $default);
|
||||||
|
&:focus, &:active:hover, &.active:hover, &:hover{
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
color: $default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-success {
|
||||||
|
@include styleButton($success, $success - $hover);
|
||||||
|
}
|
||||||
|
&.btn-info {
|
||||||
|
@include styleButton($info, $info - $hover);
|
||||||
|
}
|
||||||
|
&.btn-warning {
|
||||||
|
@include styleButton($warning, $warning - $hover);
|
||||||
|
}
|
||||||
|
&.btn-danger {
|
||||||
|
@include styleButton($danger, $danger - $hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown button.btn.btn-default.dropdown-toggle {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-select {
|
||||||
|
.dropdown-toggle:focus {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
button.btn-default:focus {
|
||||||
|
color: $default;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.btn.btn-primary {
|
||||||
|
@include buttonColor($primary, $primary);
|
||||||
|
&:active, &:target {
|
||||||
|
background-color: $primary-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.btn.btn-default {
|
||||||
|
border-width: 1px;
|
||||||
|
@include buttonColor(transparent, $default);
|
||||||
|
&:active, &:target {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
color: $default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.btn.btn-success {
|
||||||
|
@include buttonColor($success, $success);
|
||||||
|
&:active, &:target {
|
||||||
|
background-color: $success-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.btn.btn-info {
|
||||||
|
@include buttonColor($info, $info);
|
||||||
|
&:active, &:target {
|
||||||
|
background-color: $info-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.btn.btn-warning {
|
||||||
|
@include buttonColor($warning, $warning);
|
||||||
|
&:active, &:target {
|
||||||
|
background-color: $warning-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.btn.btn-danger {
|
||||||
|
@include buttonColor($danger, $danger);
|
||||||
|
&:active, &:target {
|
||||||
|
background-color: $danger-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
button.btn.btn-inverse {
|
||||||
|
@include buttonColor($help-text, $help-text);
|
||||||
|
color: $default;
|
||||||
|
&:active, &:target, &:hover {
|
||||||
|
background-color: $help-text;
|
||||||
|
color: $default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.btn-with-icon {
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group, .btn-toolbar {
|
||||||
|
:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin buttonGroupColor($color) {
|
||||||
|
border-color: $color - $hover/2;
|
||||||
|
&:hover {
|
||||||
|
border-color: $color - $hover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
button.btn.btn-primary {
|
||||||
|
@include buttonGroupColor($primary);
|
||||||
|
}
|
||||||
|
button.btn.btn-default {
|
||||||
|
@include buttonGroupColor($default);
|
||||||
|
}
|
||||||
|
button.btn.btn-danger {
|
||||||
|
@include buttonGroupColor($danger);
|
||||||
|
}
|
||||||
|
button.btn.btn-info {
|
||||||
|
@include buttonGroupColor($info);
|
||||||
|
}
|
||||||
|
button.btn.btn-success {
|
||||||
|
@include buttonGroupColor($success);
|
||||||
|
}
|
||||||
|
button.btn.btn-warning {
|
||||||
|
@include buttonGroupColor($warning);
|
||||||
|
}
|
||||||
|
.dropdown-menu {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-toolbar {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn .caret {
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin progressButtonColor($btnColor) {
|
||||||
|
border-radius: 0;
|
||||||
|
.content {
|
||||||
|
&:after, &:before {
|
||||||
|
color: darken($btnColor, 40);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.progress-button-style-move-up, &.progress-button-style-slide-down {
|
||||||
|
.content {
|
||||||
|
background-color: darken($btnColor, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.progress-button-style-lateral-lines .progress-inner {
|
||||||
|
border-color: darken($btnColor, 10);
|
||||||
|
background: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
background-color: darken($btnColor, 10);
|
||||||
|
box-shadow: 0 1px 0 darken($btnColor, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-inner {
|
||||||
|
background-color: darken($btnColor, 20);
|
||||||
|
}
|
||||||
|
&.progress-button-perspective {
|
||||||
|
background: none;
|
||||||
|
.content {
|
||||||
|
background-color: $btnColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.progress-button {
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.progress-button-style-shrink.btn.disabled.progress-button-dir-horizontal:hover {
|
||||||
|
transform: scaleY(.3);
|
||||||
|
}
|
||||||
|
&.progress-button-style-shrink.btn.disabled.progress-button-dir-vertical:hover {
|
||||||
|
transform: scaleX(.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn.btn-primary {
|
||||||
|
@include progressButtonColor($primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn.btn-default {
|
||||||
|
@include progressButtonColor($default);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn.btn-success {
|
||||||
|
@include progressButtonColor($success);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn.btn-info {
|
||||||
|
@include progressButtonColor($info);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn.btn-warning {
|
||||||
|
@include progressButtonColor($warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn.btn-danger {
|
||||||
|
@include progressButtonColor($danger);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-raised {
|
||||||
|
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mm {
|
||||||
|
padding: 5px 11px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-xm {
|
||||||
|
padding: 8px 14px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
40
src/app/theme/sass/_icons.scss
Normal file
40
src/app/theme/sass/_icons.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
@mixin svg-icon($url, $width:'', $height:'') {
|
||||||
|
display: inline-block;
|
||||||
|
background: url($url) no-repeat center;
|
||||||
|
background-size: contain;
|
||||||
|
vertical-align: middle;
|
||||||
|
@if ($width != '') {
|
||||||
|
width: $width + px;
|
||||||
|
}
|
||||||
|
@if ($height != '') {
|
||||||
|
height: $height + px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin svg-icon-class($iconName, $width:'', $height:'') {
|
||||||
|
.#{'i-' + $iconName} {
|
||||||
|
@include svg-icon($images-root + $iconName + '.svg', $width, $height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include svg-icon-class('face', 80, 80);
|
||||||
|
@include svg-icon-class('money', 80, 80);
|
||||||
|
@include svg-icon-class('person', 80, 80);
|
||||||
|
@include svg-icon-class('refresh', 80, 80);
|
||||||
|
|
||||||
|
|
||||||
|
@mixin png-icon($url, $width, $height) {
|
||||||
|
display: inline-block;
|
||||||
|
width: $width + px;
|
||||||
|
height: $height + px;
|
||||||
|
background: url($url) no-repeat center center;
|
||||||
|
background-size: $width + px $height + px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin png-icon-class($iconName, $width, $height) {
|
||||||
|
.#{'i-' + $iconName} {
|
||||||
|
@include png-icon($images-root + $iconName + '.png', $width, $height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//@include icon-png-class('arrival-icon', 11, 11);
|
||||||
201
src/app/theme/sass/_layout.scss
Normal file
201
src/app/theme/sass/_layout.scss
Normal file
|
|
@ -0,0 +1,201 @@
|
||||||
|
$left-space: 180px;
|
||||||
|
|
||||||
|
@include scrollbars(.5em, #d9d9d9, rgba(0,0,0,0));
|
||||||
|
|
||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: $resMin;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font: 14px/16px $font-family;
|
||||||
|
color: white;
|
||||||
|
@include main-background();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
|
||||||
|
{
|
||||||
|
html{
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
overflow: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
transition: color 0.5s ease;
|
||||||
|
outline: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-bg{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.al-header {
|
||||||
|
display: block;
|
||||||
|
height: 49px;
|
||||||
|
margin: 0;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
position: relative;
|
||||||
|
z-index: 905;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-main {
|
||||||
|
margin-left: $left-space;
|
||||||
|
padding: 66px 0 34px 0;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-footer {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0px 18px 0 $left-space;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
bottom: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #ffffff;
|
||||||
|
transition: padding-left 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-footer-main {
|
||||||
|
float: left;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-copy {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-footer-right {
|
||||||
|
float: right;
|
||||||
|
margin-right: 12px;
|
||||||
|
i {
|
||||||
|
margin: 0 4px;
|
||||||
|
color: $warning;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
margin-left: 4px;
|
||||||
|
color: #ffffff;
|
||||||
|
&:hover {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-share {
|
||||||
|
margin: -6px 0 0 12px;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
float: left;
|
||||||
|
margin-left: 16px;
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 6px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
font-size: 16px;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i.fa-facebook-square {
|
||||||
|
color: $facebook-color;
|
||||||
|
}
|
||||||
|
i.fa-twitter-square {
|
||||||
|
color: $twitter-color;
|
||||||
|
}
|
||||||
|
i.fa-google-plus-square {
|
||||||
|
color: $google-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-content {
|
||||||
|
padding: 8px 32px 8px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $resXS) {
|
||||||
|
.al-content {
|
||||||
|
padding: 8px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vis-hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: -9999px;
|
||||||
|
left: -9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-up, .icon-down {
|
||||||
|
width: 5px;
|
||||||
|
height: 13px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-up {
|
||||||
|
@include bg-nr('arrow-green-up.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-down {
|
||||||
|
@include bg-nr('arrow-red-down.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.disable-text-selection {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.amcharts-chart-div > a {
|
||||||
|
font-size: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-panel {
|
||||||
|
padding-left: 22px;
|
||||||
|
padding-top: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 590px) {
|
||||||
|
.al-footer-right {
|
||||||
|
float: none;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.al-footer {
|
||||||
|
height: 76px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.al-main {
|
||||||
|
padding-bottom: 76px;
|
||||||
|
}
|
||||||
|
.al-footer-main {
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-invisible {
|
||||||
|
visibility: hidden!important;
|
||||||
|
* {
|
||||||
|
visibility: hidden!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
77
src/app/theme/sass/_preloader.scss
Normal file
77
src/app/theme/sass/_preloader.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-moz-keyframes spin {
|
||||||
|
0% {
|
||||||
|
-moz-transform: rotate(0deg); /* Firefox 16+*/
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg); /* Firefox 16+*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#preloader {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
background: #000000;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
& > div {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
margin: -75px 0 0 -75px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: $danger;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 5px;
|
||||||
|
right: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: $primary;
|
||||||
|
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
|
||||||
|
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
border-top-color: $warning;
|
||||||
|
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
70
src/app/theme/sass/_socicon.scss
Normal file
70
src/app/theme/sass/_socicon.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
@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');
|
||||||
|
font-weight: $font-normal;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon {
|
||||||
|
font-family: 'socicon' !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: 'socicon';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: $font-normal;
|
||||||
|
line-height: 1;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon:empty {
|
||||||
|
width: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin socicon($background, $content) {
|
||||||
|
background-color: $background;
|
||||||
|
&:before {
|
||||||
|
content: $content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-twitter {
|
||||||
|
@include socicon($twitter-color, "a");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-facebook {
|
||||||
|
@include socicon($facebook-color, "b");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-google {
|
||||||
|
@include socicon($google-color, "c");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-linkedin {
|
||||||
|
@include socicon($linkedin-color, "j");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-github {
|
||||||
|
@include socicon($github-color, "Q");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-stackoverflow {
|
||||||
|
@include socicon($stackoverflow-color, "(");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-dribble {
|
||||||
|
@include socicon($dribble-color, "D");
|
||||||
|
}
|
||||||
|
|
||||||
|
.socicon-behace {
|
||||||
|
@include socicon($behace-color, "H");
|
||||||
|
}
|
||||||
324
src/app/theme/sass/_table.scss
Normal file
324
src/app/theme/sass/_table.scss
Normal file
|
|
@ -0,0 +1,324 @@
|
||||||
|
.table {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
& > thead {
|
||||||
|
& > tr {
|
||||||
|
& > th {
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
white-space: nowrap;
|
||||||
|
&:first-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > tbody {
|
||||||
|
& > tr {
|
||||||
|
& > tr:first-child {
|
||||||
|
padding-top: 1px;
|
||||||
|
}
|
||||||
|
& > td {
|
||||||
|
padding: 0px 8px;
|
||||||
|
line-height: 35px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
&:first-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.table-bordered {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||||
|
th, td {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-id {
|
||||||
|
text-align: left !important;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-arr {
|
||||||
|
width: 5px;
|
||||||
|
padding: 10px 8px 8px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-no-borders {
|
||||||
|
border: none;
|
||||||
|
td, th, tr {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-wrap .btn-group.form-control {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-tr-wrap {
|
||||||
|
.editable-wrap {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
.editable-controls input.editable-input {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-table-button {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-row-editable-table {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-row-editable-table + table {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-page-size-wrap {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table .header-row th {
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.editable-row {
|
||||||
|
input.form-control {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-td .editable-select {
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1199px) {
|
||||||
|
.editable-tr-wrap {
|
||||||
|
.editable-wrap {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser-icons {
|
||||||
|
width: 41px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-sort-ascent, .st-sort-descent {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-sort-ascent:after, .st-sort-descent:after {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-bottom: 4px solid $default-text;
|
||||||
|
border-top: 4px solid transparent;
|
||||||
|
border-left: 4px solid transparent;
|
||||||
|
border-right: 4px solid transparent;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.st-sort-descent:after {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
margin-bottom: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sortable {
|
||||||
|
th {
|
||||||
|
cursor: pointer;
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.email-link {
|
||||||
|
color: $default;
|
||||||
|
&:hover {
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input.search-input {
|
||||||
|
margin-left: -8px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table .pagination {
|
||||||
|
margin: 4px 0 -12px 0;
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-scroll {
|
||||||
|
max-height: 214px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > li > a, .pagination > li > span {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > li:first-child > a, .pagination > li:first-child > span {
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > li:last-child > a, .pagination > li:last-child > span {
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-button {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
.editable-wrap .editable-controls, .editable-wrap .editable-error {
|
||||||
|
vertical-align: sub;
|
||||||
|
.btn {
|
||||||
|
&.dropdown-toggle {
|
||||||
|
padding: 3px 20px;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
padding: 3px 8px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
line-height: 1px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline button[type="submit"].editable-table-button {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.badmin-transparent {
|
||||||
|
.table {
|
||||||
|
& > thead {
|
||||||
|
& > tr {
|
||||||
|
& > th {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > tbody {
|
||||||
|
& > tr.no-top-border {
|
||||||
|
&:first-child > td {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.black-muted-bg {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-hover {
|
||||||
|
tr:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.table > tbody > tr.primary > td {
|
||||||
|
background-color: rgba($primary,0.7);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.table > tbody > tr.success > td {
|
||||||
|
background-color: rgba($success,0.7);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.table > tbody > tr.warning > td {
|
||||||
|
background-color: rgba($warning,0.7);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.table > tbody > tr.danger > td {
|
||||||
|
background-color: rgba($danger,0.7);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.table > tbody > tr.info > td {
|
||||||
|
background-color: rgba($info,0.7);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-click, a.editable-click {
|
||||||
|
color: $default;
|
||||||
|
border-bottom: dashed 1px $default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: $font-normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-empty {
|
||||||
|
color: $danger-dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table > tbody > tr > th {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped > tbody > tr > td {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.pagination > li > a,
|
||||||
|
.pagination > li > span{
|
||||||
|
color: $default;
|
||||||
|
border-color: $default;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pagination > li:first-of-type > a,
|
||||||
|
.pagination > li:first-of-type > span{
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > li:last-of-type > a,
|
||||||
|
.pagination > li:last-of-type > span{
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > .active > a,
|
||||||
|
.pagination > .active > span,
|
||||||
|
.pagination > .active > a:hover,
|
||||||
|
.pagination > .active > span:hover,
|
||||||
|
.pagination > .active > a:focus,
|
||||||
|
.pagination > .active > span:focus {
|
||||||
|
background-color: $primary;
|
||||||
|
border-color: $default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination > li > a:hover,
|
||||||
|
.pagination > li > span:hover,
|
||||||
|
.pagination > li > a:focus,
|
||||||
|
.pagination > li > span:focus{
|
||||||
|
background-color: rgba(0,0,0,.2);
|
||||||
|
color: $default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-buttons .btn-with-icon i {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
9
src/app/theme/theme.scss
Normal file
9
src/app/theme/theme.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
@import "sass/conf/conf";
|
||||||
|
|
||||||
|
@import "sass/blur-admin-theme";
|
||||||
|
@import "sass/buttons";
|
||||||
|
@import "sass/icons";
|
||||||
|
@import "sass/layout";
|
||||||
|
@import "sass/preloader";
|
||||||
|
@import "sass/socicon";
|
||||||
|
@import "sass/table";
|
||||||
Loading…
Add table
Add a link
Reference in a new issue