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

fix(buttons): change icons to nebular

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-18 18:07:03 +03:00
parent a897bb191e
commit 85afc1d47f
6 changed files with 35 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html
View file

@ -5,7 +5,7 @@
<div class="col-md-12">
<div class="btn-group btn-group-full-width" role="group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
<i class="ion-ios-home-outline"></i>
<i class="nb-home"></i>
</button>
<button type="button" class="btn btn-primary">Icon Block Button</button>
</div>

12
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
View file

@ -80,25 +80,25 @@
data-toggle="buttons">
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
class="ion-ios-americanfootball-outline"></i>
class="nb-arrow-thin-down"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
class="ion-ios-baseball-outline"></i>
class="nb-arrow-thin-up"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="ion-ios-football"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
class="ion-ios-tennisball-outline"></i>
class="nb-arrow-thin-right"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="ion-ios-football-outline"></i>
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
</label>
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
class="ion-ios-basketball-outline"></i>
class="nb-arrow-right"></i>
</label>
</div>
</div>

4
src/app/pages/ui-features/buttons/buttons.component.html
View file

@ -1,9 +1,9 @@
<div class="row">
<div class="col-lg-12">
<!--<ngx-hero-buttons></ngx-hero-buttons>-->
<ngx-hero-buttons></ngx-hero-buttons>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-6">
<!--<ngx-shape-buttons></ngx-shape-buttons>-->
<ngx-shape-buttons></ngx-shape-buttons>
<ngx-action-groups></ngx-action-groups>
<ngx-labeled-actions-group></ngx-labeled-actions-group>

18
src/app/pages/ui-features/buttons/buttons.component.scss
View file

@ -61,24 +61,6 @@
.block-level-buttons .btn-group {
margin-bottom: 1rem;
}
.icon-buttons .btn-group:not(:last-child) {
margin-bottom: 1rem;
}
.icon-buttons .icon-button-examples {
display: flex;
justify-content: flex-start;
button {
margin-right: 2rem;
min-width: 4rem;
}
}
.icon-buttons .icon-button-examples:not(:last-child) {
margin-bottom: 1rem;
}
}
@include media-breakpoint-down(is) {

16
src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
View file

@ -5,36 +5,36 @@
<div class="col-md-12">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
<i class="ion-ios-home-outline"></i>
<i class="nb-home"></i>
</button>
<button type="button" class="btn btn-primary">Icon Button</button>
</div>
<div class="btn-with-icon-example">
<button type="button" class="btn btn-primary btn-with-icon">
<i class="icon ion-ios-home-outline"></i>
<i class="nb-home"></i>
<span>Icon Button</span>
</button>
</div>
<div class="icon-button-examples">
<button type="button" class="btn btn-outline-primary btn-icon">
<i class="ion-paper-airplane"></i>
<i class="nb-layout-centre"></i>
</button>
<button type="button" class="btn btn-outline-success btn-icon">
<i class="ion-ios-cloud-download-outline"></i>
<i class="nb-layout-default"></i>
</button>
<button type="button" class="btn btn-outline-danger btn-icon">
<i class="ion-ios-sunny-outline"></i>
<i class="nb-layout-one-column"></i>
</button>
</div>
<div class="icon-button-examples">
<button type="button" class="btn btn-primary btn-icon">
<i class="ion-plus"></i>
<i class="nb-shuffle"></i>
</button>
<button type="button" class="btn btn-success btn-icon">
<i class="ion-ios-home-outline"></i>
<i class="nb-skip-backward-outline"></i>
</button>
<button type="button" class="btn btn-danger btn-icon">
<i class="ion-ios-gear-outline"></i>
<i class="nb-skip-forward-outline"></i>
</button>
</div>
</div>

18
src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss
View file

@ -11,3 +11,21 @@ nb-card-body {
width: 100%;
}
}
.btn-group:not(:last-child) {
margin-bottom: 1rem;
}
.icon-button-examples {
display: flex;
justify-content: flex-start;
button {
margin-right: 2rem;
min-width: 4rem;
}
}
.icon-button-examples:not(:last-child) {
margin-bottom: 1rem;
}