feat(ui-features): improve buttons styles (#17)

This commit is contained in:
Lex Zhukov 2017-07-20 16:48:46 +03:00 committed by GitHub
parent 33da370ab5
commit f745d4eb43
4 changed files with 16 additions and 29 deletions

View file

@ -5,7 +5,7 @@
<div class="col-md-12">
<div class="example-container">
<div class="container-title">Toggle Types</div>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons">
<div class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
@ -16,7 +16,7 @@
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<div class="btn-group btn-toggle-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
@ -31,8 +31,7 @@
<div class="example-container toolbars-container">
<div class="pagination-container">
<div class="container-title">Pagination</div>
<div class="btn-group btn-group-pagination btn-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel"
ngbRadioGroup>
<div class="btn-group btn-toggle-group btn-outline-toggle-group" data-toggle="buttons" [(ngModel)]="paginationModel" ngbRadioGroup>
<label class="btn btn-outline-success">
<input type="radio" [value]="1"> 1
</label>
@ -52,7 +51,7 @@
</div>
<div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-group-pagination" data-toggle="buttons">
<div class="btn-group btn-toggle-group" data-toggle="buttons">
<label class="btn btn-success" [class.active]="iconToolbarModel.one">
<input type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
@ -70,7 +69,7 @@
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="btn-group btn-divided-group" data-toggle="buttons">
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i class="ion-paper-airplane"></i>
</label>
@ -93,7 +92,7 @@
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-outline-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
@ -104,7 +103,7 @@
<input type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
<div class="btn-group btn-divided-group btn-divided-group-block " data-toggle="buttons">
<div class="btn-group btn-divided-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="checkboxModel.left">
<input type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>