mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-06-29 04:55:11 +00:00
Code Issues Releases Wiki Activity

Sidebar icons are now highlighted and focus works

Browse Source
This commit is contained in:
Gabor PEK
2018-04-20 09:27:32 +02:00
committed by Kristóf Tóth
parent f0717eb235
commit 3e249e8582
5 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/sidebar/sidebar.component.html
View File

@ -1,4 +1,7 @@
<div class="tfw-ide-pin" *ngFor="let layoutIter of enabledLayouts">
<div *ngIf="layout === layoutIter"><img class="active" src="images/{{layoutIter}}_active.svg"></div>
<div *ngIf="layout !== layoutIter"><img src="images/{{layoutIter}}.svg"></div>
<div>
<button [class.focus]="layout === layoutIter" class="btn"><img src="images/{{layoutIter}}.svg"></button>
</div>
</div>

28
src/app/sidebar/sidebar.component.scss
View File

@ -1,16 +1,28 @@
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";
img {
width: 50px;
height: auto;
padding-top: 75px;
}
.tfw-ide-pin {
cursor: pointer;
& .active {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.1), 0 4px 10px 0 rgba($tao-blue-500, 0.09);
button {
width: 50px;
height: auto;
padding: 0;
margin-bottom: 50px;
cursor: pointer;
border: 1px solid $tao-gray-200;
transition: all 0.18s ease;
box-shadow: 0 4px 8px 0 rgba($tao-gray-500, 0.2), 0 4px 10px 0 rgba($tao-gray-500, 0.09);
&:hover,
&:focus {
box-shadow: 0 4px 8px 0 rgba($tao-blue-500, 0.2), 0 8px 20px 0 rgba($tao-blue-500, 0.29);
border: 1px solid $tao-blue-200;
}
&:focus {
width: 48px;
}
}
}