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

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

@ -1,21 +1,36 @@
@import '../../styles/themes';
@include nb-install-component() {
h5 {
margin-bottom: 1.5rem;
}
.settings-row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: 0.5rem;
align-items: center;
flex-wrap: wrap;
width: 90%;
margin: 0 auto 3rem;
a {
font-size: 2rem;
margin-right: 1rem;
color: nb-theme(color-white);
text-decoration: none;
font-size: 1.75rem;
margin-bottom: 0.5rem;
color: nb-theme(color-fg);
&.selected {
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',
styleUrls: ['./theme-settings.component.scss'],
template: `
<strong class="small">LAYOUTS</strong>
<h5>LAYOUTS</h5>
<div class="settings-row">
<a *ngFor="let layout of layouts"
href="#"
@ -16,7 +16,7 @@ import { StateService } from '../../../@core/data/state.service';
<i [attr.class]="layout.icon"></i>
</a>
</div>
<strong class="small">SIDEBAR</strong>
<h5>SIDEBAR</h5>
<div class="settings-row">
<a *ngFor="let sidebar of sidebars"
href="#"

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

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