Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-18 07:25:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(inputs\multi-checkbox): add multi-checkbox directive

Browse source
This commit is contained in:
tibing 2016-07-08 17:00:07 +03:00
parent 73cec2fceb
commit fa854ad6cc
12 changed files with 191 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/theme/components/baCheckbox/baCheckbox.component.ts
View file

@ -16,9 +16,8 @@ export class BaCheckbox implements ControlValueAccessor {
@Input() disabled:boolean;
@Input() label:string;
@Input() value:string;
@Input() name:string;
@Input() baCheckboxClass:string;
public state: boolean;
onChange(value: any): void {}

2
src/app/theme/components/baCheckbox/baCheckbox.html
View file

@ -1,6 +1,6 @@
<div class="{{baCheckboxClass}}">
<label class="checkbox-inline custom-checkbox nowrap">
<input type="checkbox" [name]="name" [checked]=state
<input type="checkbox" [checked]=state
(change)="onChange($event.target.checked)"
[disabled]="disabled" [value]="value">
<span>{{label}}</span>

78
src/app/theme/components/baCheckbox/baCheckbox.scss Normal file
View file

@ -0,0 +1,78 @@
label.custom-checkbox > span {
display: block;
margin-top: -13px;
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;
}
}