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

refactor(@theme): refactor styles structure

Browse source
This commit is contained in:
tibing 2017-04-26 20:11:54 +03:00
parent c88b6966e4
commit 91c780c256
11 changed files with 211 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/@theme/layouts/base-header/base-header.component.scss
View file

@ -45,9 +45,14 @@
.logo {
font-size: 1.7rem;
font-weight: bold;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
a {
font-weight: normal;
}
}
}

2
src/app/@theme/layouts/base-header/base-header.component.ts
View file

@ -9,7 +9,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
template: `
<div class="left">
<i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
<span class="logo" (click)="goToHome()">NgX &nbsp; <a>Admin</a></span>
<span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span>
<button (click)="switchTheme()">Switch Theme!</button>
</div>
<div class="right">

112
src/app/@theme/styles/gorgeous/gorgeous.theme.scss
View file

@ -1,116 +1,10 @@
@import '../components';
@import 'gorgeous.variables';
@import '~@nga/theme/styles/themes/nga.theme.default';
@import 'nga-redefines/redefines';
@include nga-theme('gorgeous') {
$layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
* {
transition: all 0.1s;
}
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;
a {
color: $nga-color-inverse !important;
&:hover {
color: $nga-color-secondary !important;
}
}
}
.right i {
color: #7d85b2;
&:hover {
color: $nga-color-secondary;
}
}
}
nga-sidebar {
z-index: 1;
background: transparent;
.scrollable {
box-shadow: $layout-shadow;
margin-top: $nga-layout-padding;
border-top-right-radius: $nga-radius;
}
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;
}
}
a {
display: flex;
align-items: center;
transition: all 0.2s ease;
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;
}
}
}
}
}
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;
a {
color: #7d85b2 !important;
&:hover {
color: $nga-color-secondary !important;
}
}
}
}
@include nga-theme-redefines();
@include custom-components-theme();
}

72
src/app/@theme/styles/gorgeous/nga-redefines/_nga-layout.scss Normal file
View file

@ -0,0 +1,72 @@
@mixin nga-layout-redefines {
$layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
/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;
a {
color: $nga-color-inverse !important;
&:hover {
color: $nga-color-secondary !important;
}
}
}
.right i {
color: #7d85b2;
&:hover {
color: $nga-color-secondary;
}
}
}
nga-sidebar {
z-index: 1;
background: transparent;
.scrollable {
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;
a {
color: #7d85b2 !important;
&:hover {
color: $nga-color-secondary !important;
}
}
}
}
}
}

46
src/app/@theme/styles/gorgeous/nga-redefines/_nga-menu.scss Normal file
View file

@ -0,0 +1,46 @@
@mixin nga-menu-redefines {
/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/nga-redefines/redefines.scss Normal file
View file

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

27
src/app/@theme/styles/pure/nga-redefines/_nga-layout.scss Normal file
View file

@ -0,0 +1,27 @@
@mixin nga-layout-redefines {
$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/nga-redefines/_nga-menu.scss Normal file
View file

@ -0,0 +1,39 @@
@mixin nga-menu-redefines {
/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/nga-redefines/redefines.scss Normal file
View file

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

62
src/app/@theme/styles/pure/pure.theme.scss
View file

@ -1,66 +1,10 @@
@import '../components';
@import 'pure.variables';
@import '../components';
@import 'nga-redefines/redefines';
@import '~@nga/theme/styles/themes/nga.theme.default';
@include nga-theme('pure') {
$layout-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
* {
transition: all 0.1s;
}
a, i {
@include hover-focus-active {
color: $nga-color-secondary !important;
text-decoration: none;
}
}
nga-layout-header > nav {
box-shadow: $layout-shadow;
}
nga-sidebar {
z-index: 1;
box-shadow: $layout-shadow;
ul li {
&:first-child {
margin-top: 3rem;
}
a {
display: flex;
align-items: center;
transition: all 0.2s ease;
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;
}
}
}
}
}
nga-layout-footer > nav {
box-shadow: $layout-shadow;
border: none !important;
padding: 1.25rem;
}
@include nga-theme-redefines();
@include custom-components-theme();
}

2
src/app/pages/pages-menu.ts
View file

@ -10,7 +10,7 @@ export const menuItems: List<NgaMenuItem> = List([
home: true,
},
{
title: 'Features',
title: 'FEATURES',
group: true,
},
{