Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-26 09:54:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ripple effects to controls across application

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-05 18:17:17 +03:00
parent 6c81379740
commit 7ac5287e55
34 changed files with 284 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -42,6 +42,6 @@
<ng-content></ng-content>
</div>
<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
</button>

12
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -39,25 +39,27 @@
position: absolute;
width: 5.25rem;
height: 5.25rem;
background-color: nb-theme(card-background-color);
background-color: nb-theme(card-background-color) !important;
border-radius: 50%;
bottom: 2%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&.on {
color: nb-theme(text-hint-color);
color: nb-theme(color-primary-default);
}
}
.power-icon {
position: absolute;
top: 50%;
margin-top: -0.625rem;
left: 50%;
margin-left: -0.625rem;
font-size: 3rem;
}
}