From f87b6ce4258ac70e2212a2a05860c19acb16d161 Mon Sep 17 00:00:00 2001 From: smartapant Date: Fri, 22 Apr 2016 13:15:25 +0300 Subject: [PATCH] Theme styles added and useless files rm --- src/app/about/about.component.ts | 55 --- src/app/about/index.ts | 1 - src/app/app.component.ts | 6 +- src/app/app.scss | 2 +- src/app/app.service.ts | 39 --- src/app/home/home.component.ts | 46 --- src/app/home/home.css | 0 src/app/home/home.html | 31 -- src/app/home/index.ts | 1 - src/app/home/title/index.ts | 1 - src/app/home/title/title.service.ts | 20 -- src/app/home/x-large/index.ts | 1 - src/app/home/x-large/x-large.directive.ts | 18 - src/app/index.ts | 5 +- src/app/theme/pageTop/pageTop.html | 18 +- src/app/theme/pageTop/pageTop.scss | 174 ++++++++++ src/app/theme/sass/_blur-admin-theme.scss | 23 ++ src/app/theme/sass/_buttons.scss | 279 +++++++++++++++ src/app/theme/sass/_icons.scss | 40 +++ src/app/theme/sass/_layout.scss | 201 +++++++++++ src/app/theme/sass/_preloader.scss | 77 +++++ src/app/theme/sass/_socicon.scss | 70 ++++ src/app/theme/sass/_table.scss | 324 ++++++++++++++++++ .../sass => sass/conf}/_colorScheme.scss | 0 .../{conf/sass => sass/conf}/_mixins.scss | 0 .../{conf/sass => sass/conf}/_variables.scss | 0 .../theme/{conf/sass => sass/conf}/conf.scss | 0 src/app/theme/theme.scss | 9 + 28 files changed, 1210 insertions(+), 231 deletions(-) delete mode 100644 src/app/about/about.component.ts delete mode 100644 src/app/about/index.ts delete mode 100644 src/app/app.service.ts delete mode 100644 src/app/home/home.component.ts delete mode 100644 src/app/home/home.css delete mode 100644 src/app/home/home.html delete mode 100644 src/app/home/index.ts delete mode 100644 src/app/home/title/index.ts delete mode 100644 src/app/home/title/title.service.ts delete mode 100644 src/app/home/x-large/index.ts delete mode 100644 src/app/home/x-large/x-large.directive.ts create mode 100644 src/app/theme/sass/_blur-admin-theme.scss create mode 100644 src/app/theme/sass/_buttons.scss create mode 100644 src/app/theme/sass/_icons.scss create mode 100644 src/app/theme/sass/_layout.scss create mode 100644 src/app/theme/sass/_preloader.scss create mode 100644 src/app/theme/sass/_socicon.scss create mode 100644 src/app/theme/sass/_table.scss rename src/app/theme/{conf/sass => sass/conf}/_colorScheme.scss (100%) rename src/app/theme/{conf/sass => sass/conf}/_mixins.scss (100%) rename src/app/theme/{conf/sass => sass/conf}/_variables.scss (100%) rename src/app/theme/{conf/sass => sass/conf}/conf.scss (100%) create mode 100644 src/app/theme/theme.scss diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts deleted file mode 100644 index 0aec2739..00000000 --- a/src/app/about/about.component.ts +++ /dev/null @@ -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: ` - -

- patrick@AngularClass.com -

- - - ` -}) -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); - // }); - // - // }); - } - -} diff --git a/src/app/about/index.ts b/src/app/about/index.ts deleted file mode 100644 index b7cb92ae..00000000 --- a/src/app/about/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './about.component'; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 78d8832d..2d524944 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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'); } } diff --git a/src/app/app.scss b/src/app/app.scss index b472a70c..86020591 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -1 +1 @@ -@import 'theme/conf/sass/conf'; \ No newline at end of file +@import "theme/theme"; \ No newline at end of file diff --git a/src/app/app.service.ts b/src/app/app.service.ts deleted file mode 100644 index aba563a7..00000000 --- a/src/app/app.service.ts +++ /dev/null @@ -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 )); - } -} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts deleted file mode 100644 index b456bd84..00000000 --- a/src/app/home/home.component.ts +++ /dev/null @@ -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', // - // 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); - } - -} diff --git a/src/app/home/home.css b/src/app/home/home.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/home/home.html b/src/app/home/home.html deleted file mode 100644 index 58ac812c..00000000 --- a/src/app/home/home.html +++ /dev/null @@ -1,31 +0,0 @@ - - - Your Content Here - -
- - - - - -
- - - For hot module reloading run - 
npm run start:hmr
- - -
- 
this.localState = {{ localState | json }}
- - - diff --git a/src/app/home/index.ts b/src/app/home/index.ts deleted file mode 100644 index ab5a522c..00000000 --- a/src/app/home/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './home.component'; diff --git a/src/app/home/title/index.ts b/src/app/home/title/index.ts deleted file mode 100644 index 14105599..00000000 --- a/src/app/home/title/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './title.service'; diff --git a/src/app/home/title/title.service.ts b/src/app/home/title/title.service.ts deleted file mode 100644 index 8a1b9e7c..00000000 --- a/src/app/home/title/title.service.ts +++ /dev/null @@ -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' - }; - } - -} diff --git a/src/app/home/x-large/index.ts b/src/app/home/x-large/index.ts deleted file mode 100644 index 7038da25..00000000 --- a/src/app/home/x-large/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './x-large.directive'; diff --git a/src/app/home/x-large/x-large.directive.ts b/src/app/home/x-large/x-large.directive.ts deleted file mode 100644 index eaa250c8..00000000 --- a/src/app/home/x-large/x-large.directive.ts +++ /dev/null @@ -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'); - } -} diff --git a/src/app/index.ts b/src/app/index.ts index 99356000..9f3f7b13 100644 --- a/src/app/index.ts +++ b/src/app/index.ts @@ -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 + ]; diff --git a/src/app/theme/pageTop/pageTop.html b/src/app/theme/pageTop/pageTop.html index 8e4014f5..00e84443 100644 --- a/src/app/theme/pageTop/pageTop.html +++ b/src/app/theme/pageTop/pageTop.html @@ -8,16 +8,16 @@
- diff --git a/src/app/theme/pageTop/pageTop.scss b/src/app/theme/pageTop/pageTop.scss index e69de29b..9c24a53e 100644 --- a/src/app/theme/pageTop/pageTop.scss +++ b/src/app/theme/pageTop/pageTop.scss @@ -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; +} diff --git a/src/app/theme/sass/_blur-admin-theme.scss b/src/app/theme/sass/_blur-admin-theme.scss new file mode 100644 index 00000000..5324b35d --- /dev/null +++ b/src/app/theme/sass/_blur-admin-theme.scss @@ -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; +} \ No newline at end of file diff --git a/src/app/theme/sass/_buttons.scss b/src/app/theme/sass/_buttons.scss new file mode 100644 index 00000000..af24a34e --- /dev/null +++ b/src/app/theme/sass/_buttons.scss @@ -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; +} diff --git a/src/app/theme/sass/_icons.scss b/src/app/theme/sass/_icons.scss new file mode 100644 index 00000000..bb92753a --- /dev/null +++ b/src/app/theme/sass/_icons.scss @@ -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); \ No newline at end of file diff --git a/src/app/theme/sass/_layout.scss b/src/app/theme/sass/_layout.scss new file mode 100644 index 00000000..c026f502 --- /dev/null +++ b/src/app/theme/sass/_layout.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/app/theme/sass/_preloader.scss b/src/app/theme/sass/_preloader.scss new file mode 100644 index 00000000..3d0df0ef --- /dev/null +++ b/src/app/theme/sass/_preloader.scss @@ -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 */ + } + } +} \ No newline at end of file diff --git a/src/app/theme/sass/_socicon.scss b/src/app/theme/sass/_socicon.scss new file mode 100644 index 00000000..927bed8f --- /dev/null +++ b/src/app/theme/sass/_socicon.scss @@ -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"); +} \ No newline at end of file diff --git a/src/app/theme/sass/_table.scss b/src/app/theme/sass/_table.scss new file mode 100644 index 00000000..6501b72d --- /dev/null +++ b/src/app/theme/sass/_table.scss @@ -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; +} \ No newline at end of file diff --git a/src/app/theme/conf/sass/_colorScheme.scss b/src/app/theme/sass/conf/_colorScheme.scss similarity index 100% rename from src/app/theme/conf/sass/_colorScheme.scss rename to src/app/theme/sass/conf/_colorScheme.scss diff --git a/src/app/theme/conf/sass/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss similarity index 100% rename from src/app/theme/conf/sass/_mixins.scss rename to src/app/theme/sass/conf/_mixins.scss diff --git a/src/app/theme/conf/sass/_variables.scss b/src/app/theme/sass/conf/_variables.scss similarity index 100% rename from src/app/theme/conf/sass/_variables.scss rename to src/app/theme/sass/conf/_variables.scss diff --git a/src/app/theme/conf/sass/conf.scss b/src/app/theme/sass/conf/conf.scss similarity index 100% rename from src/app/theme/conf/sass/conf.scss rename to src/app/theme/sass/conf/conf.scss diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss new file mode 100644 index 00000000..1f70db07 --- /dev/null +++ b/src/app/theme/theme.scss @@ -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"; \ No newline at end of file