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

feat(sidebar): sidebar button styles

Browse source
This commit is contained in:
Dmitry Nehaychik 2017-07-26 20:39:12 +03:00
parent ecd5948e96
commit 6fe593295d
3 changed files with 50 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/app/@theme/layouts/one-column/one-column.layout.scss
View file

@ -6,18 +6,55 @@
margin-top: nga-theme(sidebar-header-gap); margin-top: nga-theme(sidebar-header-gap);
/deep/ .scrollable { /deep/ .main-container {
height: calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)})!important; height: calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)})!important;
border-top-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
} }
/deep/ nga-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent; background: transparent;
.main-btn { .main-btn {
display: block; padding: 0.75rem 2.5rem;
padding: 1rem 3rem; margin-top: -2rem;
margin-left: auto; font-weight: bold;
margin-right: auto; transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
padding-left: 0.25rem;
}
i, span {
vertical-align: middle;
}
}
&.compacted {
/deep/ nga-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
} }
} }
} }

6
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -11,7 +11,11 @@ import { Component } from '@angular/core';
</nga-layout-header> </nga-layout-header>
<nga-sidebar responsive> <nga-sidebar responsive>
<button class="btn btn-hero-success main-btn"><i class="ion ion-social-github-outline"></i> Support Us</button> <nga-sidebar-header>
<button class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</button>
</nga-sidebar-header>
<ng-content select="nga-menu"></ng-content> <ng-content select="nga-menu"></ng-content>
</nga-sidebar> </nga-sidebar>

3
src/app/@theme/styles/variables.scss
View file

@ -9,14 +9,17 @@ $nga-enabled-themes: (default, light, cosmic);
$nga-themes: nga-register-theme(( $nga-themes: nga-register-theme((
// app wise variables for each theme // app wise variables for each theme
sidebar-header-gap: 2rem, sidebar-header-gap: 2rem,
sidebar-header-height: initial,
), default, default); ), default, default);
$nga-themes: nga-register-theme(( $nga-themes: nga-register-theme((
// app wise variables for each theme // app wise variables for each theme
sidebar-header-gap: 2rem, sidebar-header-gap: 2rem,
sidebar-header-height: initial,
), cosmic, cosmic); ), cosmic, cosmic);
$nga-themes: nga-register-theme(( $nga-themes: nga-register-theme((
// app wise variables for each theme // app wise variables for each theme
sidebar-header-gap: 2rem, sidebar-header-gap: 2rem,
sidebar-header-height: initial,
), light, light); ), light, light);