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): add margin for the examples blocks

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-24 17:23:54 +03:00
parent 43aca56e0d
commit 0c22fbb784
4 changed files with 29 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -166,23 +166,23 @@
</div>
<div class="demo-radio">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input">
<input type="radio" class="custom-control-input" name="customRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 1</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input">
<input type="radio" class="custom-control-input" name="customRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 2</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input">
<input type="radio" class="custom-control-input" name="customRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 3</span>
</label>
</div>
<div class="demo-disabled-checkbox-radio">
<nga-checkbox [disabled]="true">Disbaled Checkbox</nga-checkbox>
<nga-checkbox [disabled]="true">Disabled Checkbox</nga-checkbox>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span>

9
src/app/pages/forms/form-inputs/form-inputs.component.scss
View file

@ -1,6 +1,11 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
nga-card-body {
overflow: visible;
}
.input-group {
margin-bottom: 1rem;
}
@ -88,4 +93,8 @@
top: 0.25rem;
}
}
.dropdown {
width: 25%;
}
}

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

@ -3,9 +3,9 @@
<nga-card-body>
<div class="row">
<div class="col-md-12">
<div class="example-container">
<div class="example-container toggle-types">
<div class="container-title">Toggle Types</div>
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width">
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-toggle-group btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
<label class="btn btn-outline-primary">
<input type="radio" value="left"> Left
</label>
@ -71,8 +71,8 @@
</div>
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width" data-toggle="buttons">
<div class="container-title divided-button-group">Divided Button Group</div>
<div class="btn-group btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group" 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>
</label>

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

@ -27,6 +27,18 @@
flex: 1;
}
.toggle-types {
.btn-toggle-radio-group {
margin-bottom: 1rem;
}
}
.divided-button-group {
.btn-divided-checkbox-group {
margin-bottom: 1rem;
}
}
.example-container:not(:last-child) {
margin-bottom: 2rem;
}