Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 00:10:14 +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 '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints'; @import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; @import '~@nebular/theme/styles/global/breakpoints';
@import '~@nebular/bootstrap/styles/hero-buttons';
@include nb-install-component() { @include nb-install-component() {
.toggle-settings { .toggle-settings {
position: fixed; position: fixed;
top: 50%; top: 50%;
height: 8.575rem; height: 3rem;
width: 8.575rem; width: 3rem;
padding: 0;
text-align: center;
border: none; border: none;
transition: transform 0.3s ease, background-image 0.3s ease; transition: transform 0.3s ease, background-image 0.3s ease;
transform: translate(0, -50%); transform: translate(0, -50%);
@ -55,11 +58,7 @@
@include nb-for-theme(cosmic) { @include nb-for-theme(cosmic) {
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72); box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%); @include btn-hero-success-gradient();
&.expanded {
background-image: linear-gradient(to right, #2f296b 0%, #2f296b 100%);
}
} }
@include nb-for-theme(default) { @include nb-for-theme(default) {
@ -76,8 +75,10 @@
} }
i { i {
font-size: 6rem; font-size: 2.75rem;
color: #ffffff; color: #ffffff;
display: block;
@include nb-for-theme(default) { @include nb-for-theme(default) {
color: nb-theme(color-danger); color: nb-theme(color-danger);
@ -87,6 +88,26 @@
color: nb-theme(color-warning); 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) { @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" <button class="toggle-settings"
(click)="toggleSettings()" (click)="toggleSettings()"
[class.expanded]="expanded" [class.expanded]="expanded"
[class.sidebarEnd]="sidebarEnd"> [class.sidebarEnd]="sidebarEnd"
[class.wasExpanded]="wasExpanded"
>
<i class="nb-gear"></i> <i class="nb-gear"></i>
</button> </button>
`, `,
@ -18,6 +20,7 @@ export class ToggleSettingsButtonComponent {
sidebarEnd = false; sidebarEnd = false;
expanded = false; expanded = false;
wasExpanded = false;
constructor(private sidebarService: NbSidebarService, protected stateService: StateService) { constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
this.stateService.onSidebarState() this.stateService.onSidebarState()
@ -29,5 +32,6 @@ export class ToggleSettingsButtonComponent {
toggleSettings() { toggleSettings() {
this.sidebarService.toggle(false, 'settings-sidebar'); this.sidebarService.toggle(false, 'settings-sidebar');
this.expanded = !this.expanded; this.expanded = !this.expanded;
this.wasExpanded = true;
} }
} }