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(layout config): reduce gear button size (#2002)

Browse source
This commit is contained in:
Vladimir Lugovsky 2019-01-21 19:21:06 +03:00 • committed by Sergey Andrievskiy
parent cac36f0717
commit 1f56f2aeb2
2 changed files with 34 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
View file

@ -1,13 +1,16 @@
@import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() {
.toggle-settings {
position: fixed;
top: 50%;
height: 8.575rem;
width: 8.575rem;
height: 3rem;
width: 3rem;
padding: 0;
text-align: center;
border: none;
transition: transform 0.3s ease, background-image 0.3s ease;
transform: translate(0, -50%);
@ -55,11 +58,7 @@
@include nb-for-theme(cosmic) {
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%);
&.expanded {
background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
}
@include btn-hero-success-gradient();
}
@include nb-for-theme(default) {
@ -76,8 +75,10 @@
}
i {
font-size: 6rem;
font-size: 2.75rem;
color: #ffffff;
display: block;
@include nb-for-theme(default) {
color: nb-theme(color-danger);
@ -87,6 +88,26 @@
color: nb-theme(color-warning);
}
}
&:not(.wasExpanded) i {
animation-name: gear-pulse;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes gear-pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.2, 1.2, 1.2);
}
to {
transform: scale3d(1, 1, 1);
}
}
}
@include media-breakpoint-down(sm) {

6
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
View file

@ -9,7 +9,9 @@ import { StateService } from '../../../@core/utils';
<button class="toggle-settings"
(click)="toggleSettings()"
[class.expanded]="expanded"
[class.sidebarEnd]="sidebarEnd">
[class.sidebarEnd]="sidebarEnd"
[class.wasExpanded]="wasExpanded"
>
<i class="nb-gear"></i>
</button>
`,
@ -18,6 +20,7 @@ export class ToggleSettingsButtonComponent {
sidebarEnd = false;
expanded = false;
wasExpanded = false;
constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
this.stateService.onSidebarState()
@ -29,5 +32,6 @@ export class ToggleSettingsButtonComponent {
toggleSettings() {
this.sidebarService.toggle(false, 'settings-sidebar');
this.expanded = !this.expanded;
this.wasExpanded = true;
}
}