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(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);
/deep/ .scrollable {
/deep/ .main-container {
height: calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)})!important;
border-top-right-radius: 0.75rem;
}
/deep/ nga-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
display: block;
padding: 1rem 3rem;
margin-left: auto;
margin-right: auto;
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
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-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>
</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((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
), default, default);
$nga-themes: nga-register-theme((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
), cosmic, cosmic);
$nga-themes: nga-register-theme((
// app wise variables for each theme
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
), light, light);