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 {RouteConfig, Router} from 'angular2/router';
|
||||
|
||||
import {Home} from './home';
|
||||
import {Pages} from './pages';
|
||||
import {AppState} from './app.service';
|
||||
|
||||
/*
|
||||
* App Component
|
||||
|
|
@ -44,10 +42,10 @@ export class App {
|
|||
name = 'Angular 2 Webpack Starter';
|
||||
url = 'https://twitter.com/AngularClass';
|
||||
|
||||
constructor(public appState: AppState) {}
|
||||
constructor() {}
|
||||
|
||||
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
|
||||
export * from './app.component';
|
||||
export * from './app.service';
|
||||
|
||||
import {AppState} from './app.service';
|
||||
|
||||
// Application wide providers
|
||||
export const APP_PROVIDERS = [
|
||||
AppState
|
||||
|
||||
];
|
||||
|
|
|
|||
|
|
@ -8,16 +8,16 @@
|
|||
</div>
|
||||
|
||||
<div class="user-profile clearfix">
|
||||
<div class="al-user-profile" uib-dropdown>
|
||||
<a uib-dropdown-toggle class="profile-toggle-link">
|
||||
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7vR66BWT_HdVJpwxGJoGBJl5HYfiSKDrsYrzw7kqf2yP6sNyJtHdaAQ"/>
|
||||
<div class="dropdown al-user-profile">
|
||||
<a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="top-dropdown-menu profile-dropdown" uib-dropdown-menu>
|
||||
<li><i class="dropdown-arr"></i></li>
|
||||
<li><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><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
|
||||
</ul>
|
||||
<div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
|
||||
<li class="dropdown-item"><i class="dropdown-arr"></i></li>
|
||||
<li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
|
||||
<li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
|
||||
<li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
|
||||
</div>
|
||||
</div>
|
||||
<msg-center></msg-center>
|
||||
</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