Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 16:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): style temperature modes

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-11 11:50:43 +03:00
parent 84a98837ac
commit 684c884015
2 changed files with 25 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -19,19 +19,19 @@
</ngx-temperature-dragger> </ngx-temperature-dragger>
</div> </div>
<div [(ngModel)]="mode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" <div [(ngModel)]="temperatureMode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
data-toggle="buttons"> data-toggle="buttons">
<label class="btn btn-outline-primary btn-icon"> <label class="btn btn-icon">
<input type="radio" value="cool"/><i class="ion-ios-snowy"></i> <input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
</label> </label>
<label class="btn btn-outline-primary btn-icon"> <label class="btn btn-icon">
<input type="radio" value="warm"/><i class="ion-ios-sunny-outline"></i>
</label>
<label class="btn btn-icon">
<input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i> <input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i>
</label> </label>
<label class="btn btn-outline-primary btn-icon"> <label class="btn btn-icon">
<input type="radio" value="cool2"/><i class="ion-ios-snowy"></i> <input type="radio" value="fan"/><i class="ion-ios-loop"></i>
</label>
<label class="btn btn-outline-primary btn-icon">
<input type="radio" value="heat2"/><i class="ion-flame"></i>
</label> </label>
</div> </div>
</nga-tab> </nga-tab>

17
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -73,4 +73,21 @@
} }
} }
} }
.btn-icon {
display: flex;
align-items: center;
justify-content: center;
border-color: nga-theme(form-control-border-color);
width: 4.5rem;
height: 4.5rem;
font-size: 2rem;
&.active {
border-color: nga-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nga-theme(color-fg-highlight), 0.25);
background-color: rgba(nga-theme(color-fg-highlight), 0.25);
}
}
} }