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

fix(dashboard\todo\checkbox): checkboxes was rendering uncorrectly

Browse source
This commit is contained in:
tibing 2016-07-13 12:53:59 +03:00 • committed by nixa
parent 386b1dc216
commit 743dc38f72
10 changed files with 80 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
View file

@ -1,10 +1,10 @@
import {Component} from '@angular/core';
import {BaMultiCheckbox} from '../../../../../../theme/components';
import {BaMultiCheckbox, BaCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'checkbox-inputs',
template: require('./checkboxInputs.html'),
directives: [BaMultiCheckbox]
directives: [BaMultiCheckbox, BaCheckbox]
})
export class CheckboxInputs {
public checkboxModel = [{
@ -27,7 +27,7 @@ export class CheckboxInputs {
label: 'name',
baCheckboxClass: 'class'
};
constructor() {
}

4
src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
View file

@ -24,9 +24,7 @@
</div>
</div>
<div>
<div class="checkbox disabled">
<ba-checkbox [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
</div>
<ba-checkbox [(ngModel)]="isDisabled" [baCheckboxClass]="'disabled'" [label]="'Disabled checkbox'" [disabled]="true"></ba-checkbox>
<div class="radio disabled">
<label class="custom-radio nowrap">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>

2
src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts
View file

@ -1,7 +1,9 @@
import {Component} from '@angular/core';
import {BaCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'basic-form',
directives: [BaCheckbox],
template: require('./basicForm.html'),
})
export class BasicForm {

5
src/app/pages/forms/components/layouts/components/basicForm/basicForm.html
View file

@ -8,10 +8,7 @@
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Check me out</span>
</label>
<ba-checkbox [(ngModel)]="isChecked" [label]="'Check me out'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>

2
src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts
View file

@ -1,7 +1,9 @@
import {Component} from '@angular/core';
import {BaCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'horizontal-form',
directives: [BaCheckbox],
template: require('./horizontalForm.html'),
})
export class HorizontalForm {

5
src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.html
View file

@ -14,10 +14,7 @@
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Remember me</span>
</label>
<ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
</div>
</div>
</div>

4
src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts
View file

@ -1,11 +1,13 @@
import {Component} from '@angular/core';
import {BaCheckbox} from '../../../../../../theme/components';
@Component({
selector: 'inline-form',
directives: [BaCheckbox],
template: require('./inlineForm.html'),
})
export class InlineForm {
constructor() {
}
}

5
src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.html
View file

@ -6,10 +6,7 @@
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Remember me</span>
</label>
<ba-checkbox [(ngModel)]="isRemember" [label]="'Remember me'" [ngModelOptions]="{standalone: true}"></ba-checkbox>
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>

66
src/app/theme/components/baCheckbox/baCheckbox.scss
View file

@ -54,72 +54,6 @@ label.custom-checkbox > span {
margin-right: 10px;
}
label.custom-checkbox {
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
& > input {
height: 0;
z-index: -100 !important;
opacity: 0;
position: absolute;
&:checked {
& + span {
&:before {
content: "\f00c";
font-weight: $font-light;
}
}
}
&:disabled {
& + span {
color: $disabled;
cursor: not-allowed;
&:before {
border-color: $disabled !important;
cursor: not-allowed;
}
}
}
}
& > span {
position: relative;
display: inline-block;
margin: 0;
line-height: 16px;
font-weight: $font-light;
cursor: pointer;
padding-left: 22px;
width: 100%;
&:before {
cursor: pointer;
font-family: fontAwesome;
font-weight: $font-light;
font-size: 12px;
color: $content-text;
content: "\a0";
background-color: transparent;
border: 1px solid $border;
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 6px;
position: relative;
top: 0;
margin-left: -22px;
float: left;
}
&:hover {
&:before {
border-color: $primary-bg;
}
}
}
}
.form-horizontal {
.checkbox, .checkbox-inline{
padding-top: 0;

66
src/app/theme/sass/_form.scss
View file

@ -580,3 +580,69 @@ label.custom-input-danger {
rating-inputs span {
vertical-align: middle;
}
label.custom-checkbox {
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
& > input {
height: 0;
z-index: -100 !important;
opacity: 0;
position: absolute;
&:checked {
& + span {
&:before {
content: "\f00c";
font-weight: $font-light;
}
}
}
&:disabled {
& + span {
color: $disabled;
cursor: not-allowed;
&:before {
border-color: $disabled !important;
cursor: not-allowed;
}
}
}
}
& > span {
position: relative;
display: inline-block;
margin: 0;
line-height: 16px;
font-weight: $font-light;
cursor: pointer;
padding-left: 22px;
width: 100%;
&:before {
cursor: pointer;
font-family: fontAwesome;
font-weight: $font-light;
font-size: 12px;
color: $content-text;
content: "\a0";
background-color: transparent;
border: 1px solid $border;
border-radius: 0;
display: inline-block;
text-align: center;
height: 16px;
line-height: 14px;
min-width: 16px;
margin-right: 6px;
position: relative;
top: 0;
margin-left: -22px;
float: left;
}
&:hover {
&:before {
border-color: $primary-bg;
}
}
}
}