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

feat(@theme): add base gorgeous styles

Browse source
This commit is contained in:
tibing 2017-04-26 12:25:54 +03:00
parent a126301343
commit c88b6966e4
11 changed files with 234 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
selector: 'base-footer',
styleUrls: ['./base-footer.component.scss'],
template: `
<span>Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
<div class="socials">
<a href="https://github.com/akveo" target="_blank" class="ion ion-social-github"></a>
<a href="https://www.facebook.com/akveo" target="_blank" class="ion ion-social-facebook"></a>

3
src/app/@theme/search-input/_search-input.component.theme.scss
View file

@ -1,4 +1,7 @@
@mixin search-input-theme() {
/deep/ search-input {
input {
background: transparent;
}
}
}

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

@ -0,0 +1,21 @@
$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;

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

@ -1,7 +1,116 @@
@import '~@nga/theme/styles/themes/nga.theme.default';
@import '../components';
@import 'gorgeous.variables';
@import '~@nga/theme/styles/themes/nga.theme.default';
@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 custom-components-theme();
}

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

@ -4,6 +4,12 @@
@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;
@ -12,12 +18,12 @@
}
nga-layout-header > nav {
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
box-shadow: $layout-shadow;
}
nga-sidebar {
z-index: 1;
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
box-shadow: $layout-shadow;
ul li {
&:first-child {
@ -52,7 +58,7 @@
}
nga-layout-footer > nav {
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
box-shadow: $layout-shadow;
border: none !important;
padding: 1.25rem;
}

2
src/app/@theme/styles/styles.scss
View file

@ -1,2 +0,0 @@
@import 'pure/pure.theme';
@import 'gorgeous/gorgeous.theme';

1
src/app/app.component.scss
View file

@ -1 +0,0 @@
@import '@theme/styles/styles';

1
src/app/app.component.ts
View file

@ -8,7 +8,6 @@ import { Component } from '@angular/core';
@Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
}

88
src/app/pages/dashboard/dashboard.component.ts
View file

@ -3,9 +3,91 @@ import { Component } from '@angular/core';
@Component({
selector: 'dashboard',
template: `
<p>
dashboard works!
</p>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
<nga-card>
<nga-card-header>Test card</nga-card-header>
<nga-card-body>Some Body</nga-card-body>
<nga-card-footer>Super Footer</nga-card-footer>
</nga-card>
`,
})
export class DashboardComponent {

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

@ -2,6 +2,10 @@ import { Component } from '@angular/core';
@Component({
selector: 'pages',
styleUrls: [
'../@theme/styles/gorgeous/gorgeous.theme.scss',
'../@theme/styles/pure/pure.theme.scss',
],
template: `
<one-coll-layout>
<nga-menu></nga-menu>

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

@ -14,7 +14,7 @@ import { ComponentsComponent } from './components/components.component';
@NgModule({
imports: [
NgaThemeModule.forRoot({ name: 'pure' }),
NgaThemeModule.forRoot({ name: 'gorgeous' }),
NgaSidebarModule.forRoot(),
NgaMenuModule.forRoot({ items: menuItems }),
PagesRoutingModule,