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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,11 +3,11 @@
<nga-card-body>
<div class="row block-level-buttons">
<div class="col-md-12">
<div class="btn-group btn-group-block" role="group">
<div class="btn-group btn-group-full-width" role="group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
<i class="ion-ios-home-outline"></i>
</button>
<button type="button" class="btn btn-primary btn-block">Icon Block Button</button>
<button type="button" class="btn btn-primary">Icon Block Button</button>
</div>
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
</div>

15
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
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>

21
src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
View file

@ -9,6 +9,11 @@
.pagination-container {
flex: 1;
margin-right: 1rem;
.btn-group > .btn {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
}
.icon-toolbar-container {
@ -18,20 +23,4 @@
.example-container:not(:last-child) {
margin-bottom: 2rem;
}
.btn-toggle-group {
width: 100%;
.btn {
width: 100%;
}
}
.btn-divided-group-block {
width: 100%;
.btn {
width: 100%;
}
}
}

5
src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss
View file

@ -7,8 +7,7 @@
margin-bottom: 1rem;
}
nga-card {
overflow-x: visible;
overflow-y: visible;
nga-card-body {
overflow: visible;
}
}