Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(styles): huge styles refactoring

Browse source
This commit is contained in:
nixa 2017-05-06 20:32:00 +03:00
parent f04763cecd
commit e5f3f211f9
17 changed files with 34 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/app/@theme/components/header/_header.component.theme.scss
View file

@ -1,11 +1,4 @@
@mixin base-header-theme($theme-name) {
/deep/ header {
.logo > a {
color: $nga-color-secondary !important;
@include hover-focus-active {
color: $nga-color-inverse !important;
}
}
}
}

8
src/app/@theme/components/header/header.component.ts
View file

@ -18,7 +18,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
<nga-user inverse [menu]="userMenu" name="Han Solo"></nga-user>
</nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions>
@ -49,10 +49,10 @@ export class HeaderComponent {
}
switchTheme() {
if (this.themeService.currentTheme == 'pure') {
this.themeService.changeTheme('gorgeous');
if (this.themeService.currentTheme == 'light') {
this.themeService.changeTheme('cosmic');
} else {
this.themeService.changeTheme('pure');
this.themeService.changeTheme('light');
}
}
}

0
src/app/@theme/styles/cosmic/_variables.scss Normal file
View file

8
src/app/@theme/styles/pure/pure.theme.scss → src/app/@theme/styles/cosmic/cosmic.theme.scss
View file

@ -3,13 +3,13 @@
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import 'variables';
@import '../components';
@import 'variables';
@import '~@nga/theme/styles/themes/nga.theme.cosmic';
@import 'overrides/all';
@import '~@nga/theme/styles/themes/nga.theme.default';
$theme-name: 'pure';
$theme-name: 'cosmic';
// @nga/theme module styles
@include nga-theme($theme-name) {

19
src/app/@theme/styles/gorgeous/overrides/_nga-layout.scss → src/app/@theme/styles/cosmic/overrides/_nga-layout.scss
View file

@ -1,20 +1,9 @@
@mixin nga-layout-override($theme-name) {
$layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
@mixin nga-layout-override($theme-name) {;
// TODO: refactor this
/deep/ .layout {
a {
@include hover-focus-active {
color: $nga-color-secondary !important;
text-decoration: none;
}
}
nga-layout-header > nav {
box-shadow: $layout-shadow;
i:hover {
color: $nga-color-secondary;
}
.left {
color: $nga-color-inverse;
@ -42,19 +31,17 @@
background: transparent;
.scrollable {
box-shadow: $layout-shadow;
//box-shadow: $layout-shadow;
margin-top: $nga-layout-padding;
border-top-right-radius: $nga-radius;
}
}
nga-layout-footer > nav {
$footer-text: #7d85b2;
$footer-link: $nga-color-secondary;
border: none !important;
padding: 1.25rem;
box-shadow: $layout-shadow;
.created-by {
color: #7d85b2;

14
src/app/@theme/styles/cosmic/overrides/_nga-menu.scss Normal file
View file

@ -0,0 +1,14 @@
@mixin nga-menu-override($theme-name) {
/deep/ nga-menu {
> ul > li:first-child {
a {
background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
margin: 1rem;
border-radius: $nga-radius;
height: 3.5rem;
color: $nga-color-inverse;
}
}
}
}

0
src/app/@theme/styles/gorgeous/overrides/all.scss → src/app/@theme/styles/cosmic/overrides/all.scss
View file

21
src/app/@theme/styles/gorgeous/_variables.scss
View file

@ -1,21 +0,0 @@
$nga-color-default: #2f2e66;
$nga-color-secondary: #a1a1e6;
$nga-color-inverse: white;
$nga-foreground: $nga-color-inverse;
$nga-background: #20274f;
$nga-foreground-inverse: $nga-color-secondary;
$nga-layout-padding: 2.5rem;
$nga-header-height: 4.725rem;
$nga-header-padding: 1.25rem;
$nga-footer-height: $nga-header-height;
$nga-sidebar-width: 16.25rem;
$nga-sidebar-width-compact: 3.45rem;
$nga-sidebar-padding: 0;
$nga-card-background: $nga-color-default;

46
src/app/@theme/styles/gorgeous/overrides/_nga-menu.scss
View file

@ -1,46 +0,0 @@
@mixin nga-menu-override($theme-name) {
/deep/ nga-menu {
ul li {
&:first-child {
a {
background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
margin: 1rem;
border-radius: $nga-radius;
height: 3.5rem;
color: $nga-color-inverse;
}
}
a,
& > span.menu-group {
display: flex;
align-items: center;
transition: all 0.2s ease;
padding: 0.375rem 0 0.375rem 1rem;
color: $nga-color-secondary;
&.active {
background: $nga-background;
font-weight: bold;
}
i {
font-size: 2rem;
margin-right: 1.25rem;
&:first-child {
display: flex;
justify-content: center;
}
}
}
& > span.menu-group {
color: $nga-color-inverse;
font-size: 1rem;
}
}
}
}

7
src/app/@theme/styles/gorgeous/gorgeous.theme.scss → src/app/@theme/styles/light/light.theme.scss
View file

@ -4,12 +4,11 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../components';
@import 'variables';
@import '~@nga/theme/styles/themes/nga.theme.default';
@import 'overrides/all';
$theme-name: 'gorgeous';
@import '~@nga/theme/styles/themes/nga.theme.light';
$theme-name: 'light';
// @nga/theme module styles
@include nga-theme($theme-name) {

2
src/app/@theme/styles/light/overrides/all.scss Normal file
View file

@ -0,0 +1,2 @@
@mixin nga-theme-overrides($theme-name) {
}

17
src/app/@theme/styles/pure/_variables.scss
View file

@ -1,17 +0,0 @@
$nga-color-default: white;
$nga-color-secondary: #b5bbd5;
$nga-color-inverse: #7d85b2;
$nga-foreground: $nga-color-inverse;
$nga-background: #edf1f7;
$nga-header-height: 4.725rem;
$nga-header-padding: 1.25rem;
$nga-footer-height: $nga-header-height;
$nga-sidebar-width: 16.25rem;
$nga-sidebar-width-compact: 3.45rem;
$nga-sidebar-padding: 0;
$nga-user-picture-background: $nga-background;

27
src/app/@theme/styles/pure/overrides/_nga-layout.scss
View file

@ -1,27 +0,0 @@
@mixin nga-layout-override($theme-name) {
$layout-border-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
/deep/ .layout {
a, i {
@include hover-focus-active {
color: $nga-color-secondary !important;
text-decoration: none;
}
}
nga-layout-header > nav {
box-shadow: $layout-border-shadow;
}
nga-sidebar {
z-index: 1;
box-shadow: $layout-border-shadow;
}
nga-layout-footer > nav {
box-shadow: $layout-border-shadow;
border: none !important;
padding: 1.25rem;
}
}
}

39
src/app/@theme/styles/pure/overrides/_nga-menu.scss
View file

@ -1,39 +0,0 @@
@mixin nga-menu-override($theme-name) {
/deep/ nga-menu {
ul li {
transition: all 0.2s ease;
&:first-child {
margin-top: 3rem;
}
a, & > span.menu-group {
display: flex;
align-items: center;
padding: 0.375rem 0 0.375rem 1rem;
color: $nga-color-inverse;
&.active {
color: $nga-color-inverse !important;
background: $nga-background;
font-weight: bold;
}
i {
font-size: 2rem;
margin-right: 1.25rem;
&:first-child {
display: flex;
justify-content: center;
}
}
}
& > span.menu-group {
opacity: 0.8;
font-size: 1rem;
}
}
}
}

7
src/app/@theme/styles/pure/overrides/all.scss
View file

@ -1,7 +0,0 @@
@import 'nga-layout';
@import 'nga-menu';
@mixin nga-theme-overrides($theme-name) {
@include nga-layout-override($theme-name);
@include nga-menu-override($theme-name);
}

6
src/app/pages/pages.component.ts
View file

@ -1,13 +1,13 @@
import { Component } from '@angular/core';
import 'style-loader!../@theme/styles/gorgeous/gorgeous.theme.scss';
import 'style-loader!../@theme/styles/pure/pure.theme.scss';
import 'style-loader!../@theme/styles/cosmic/cosmic.theme.scss';
import 'style-loader!../@theme/styles/light/light.theme.scss';
@Component({
selector: 'ngx-pages',
template: `
<ngx-one-column-layout>
<nga-menu></nga-menu>
<nga-menu inverse></nga-menu>
<router-outlet></router-outlet>
</ngx-one-column-layout>
`,

2
src/app/pages/pages.module.ts
View file

@ -22,7 +22,7 @@ const PAGES_COMPONENTS = [
@NgModule({
imports: [
NgaThemeModule.forRoot({ name: 'gorgeous' }),
NgaThemeModule.forRoot({ name: 'cosmic' }),
NgaSidebarModule.forRoot(),
NgaMenuModule.forRoot({ items: menuItems }),
PagesRoutingModule,