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(theme): style settings sidebar

Browse source
This commit is contained in:
tibing 2017-08-31 14:58:28 +03:00
parent 5b6a81a394
commit 9bfa522da3
4 changed files with 38 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/@core/data/state.service.ts
View file

@ -10,23 +10,18 @@ export class StateService {
protected layouts: any = [ protected layouts: any = [
{ {
name: 'One Column', name: 'One Column',
icon: 'ion ion-grid', icon: 'nb-layout-default',
id: 'one-column', id: 'one-column',
selected: true, selected: true,
}, },
{ {
name: 'Two Column', name: 'Two Column',
icon: 'ion ion-grid', icon: 'nb-layout-two-column',
id: 'two-column', id: 'two-column',
}, },
{
name: 'Three Column',
icon: 'ion ion-grid',
id: 'three-column',
},
{ {
name: 'Center Column', name: 'Center Column',
icon: 'ion ion-grid', icon: 'nb-layout-centre',
id: 'center-column', id: 'center-column',
}, },
]; ];
@ -34,13 +29,13 @@ export class StateService {
protected sidebars: any = [ protected sidebars: any = [
{ {
name: 'Left Sidebar', name: 'Left Sidebar',
icon: 'ion ion-grid', icon: 'nb-layout-sidebar-left',
id: 'left', id: 'left',
selected: true, selected: true,
}, },
{ {
name: 'Right Sidebar', name: 'Right Sidebar',
icon: 'ion ion-grid', icon: 'nb-layout-sidebar-right',
id: 'right', id: 'right',
}, },
]; ];

23
src/app/@theme/components/theme-settings/theme-settings.component.scss
View file

@ -1,21 +1,36 @@
@import '../../styles/themes'; @import '../../styles/themes';
@include nb-install-component() { @include nb-install-component() {
h5 {
margin-bottom: 1.5rem;
}
.settings-row { .settings-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding-bottom: 0.5rem; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
width: 90%;
margin: 0 auto 3rem;
a { a {
font-size: 2rem; text-decoration: none;
margin-right: 1rem; font-size: 1.75rem;
color: nb-theme(color-white); margin-bottom: 0.5rem;
color: nb-theme(color-fg);
&.selected { &.selected {
color: nb-theme(color-success); color: nb-theme(color-success);
} }
@include nb-for-theme(cosmic) {
&.selected {
color: nb-theme(link-color-active);
}
}
} }
} }
} }

4
src/app/@theme/components/theme-settings/theme-settings.component.ts
View file

@ -6,7 +6,7 @@ import { StateService } from '../../../@core/data/state.service';
selector: 'ngx-theme-settings', selector: 'ngx-theme-settings',
styleUrls: ['./theme-settings.component.scss'], styleUrls: ['./theme-settings.component.scss'],
template: ` template: `
<strong class="small">LAYOUTS</strong> <h5>LAYOUTS</h5>
<div class="settings-row"> <div class="settings-row">
<a *ngFor="let layout of layouts" <a *ngFor="let layout of layouts"
href="#" href="#"
@ -16,7 +16,7 @@ import { StateService } from '../../../@core/data/state.service';
<i [attr.class]="layout.icon"></i> <i [attr.class]="layout.icon"></i>
</a> </a>
</div> </div>
<strong class="small">SIDEBAR</strong> <h5>SIDEBAR</h5>
<div class="settings-row"> <div class="settings-row">
<a *ngFor="let sidebar of sidebars" <a *ngFor="let sidebar of sidebars"
href="#" href="#"

20
src/app/@theme/layouts/sample/sample.layout.scss
View file

@ -1,22 +1,26 @@
@import '../../styles/themes'; @import '../../styles/themes';
@include nb-install-component() { @include nb-install-component() {
nb-layout-column.small { nb-layout-column.small {
flex: 0.15 !important; flex: 0.15 !important;
} }
nb-sidebar.settings-sidebar { nb-sidebar.settings-sidebar {
width: 7rem; $sidebar-width: 7.5rem;
/deep/ .main-container {
width: 7rem; transition: width 0.3s ease;
background: #3a3850; width: $sidebar-width;
}
&.collapsed { &.collapsed {
width: 0; width: 0;
/deep/ .main-container { }
width: 0;
/deep/ .main-container {
width: $sidebar-width;
background: nb-theme(color-bg);
@include nb-for-theme(cosmic) {
background: nb-theme(layout-bg);
} }
} }
} }