Custom checkbox

*.html

<li ng-repeat="group in groups" ng-class="{active: filterGroupIds[group.id]}">
  <div class="checkboxgroup whitebg large-custom">
    <input type="checkbox" id="groupsSelected{{$index}}" ng-model="group.selected" ng-value="group.id">
    <label class="fake-input" for="groupsSelected{{$index}}"></label>
    <label for="groupsSelected{{$index}}">{{ group.name }}</label>
  </div>
</li>

*.scss

@mixin customRadioCheckbox($size:2em, $border-color:#aaa, $border-width:.2em, $background-color:#fff, $hover-color:#666){
	display: none !important;
	& ~ .fake-input{
		position: absolute;
		top: 50%;
		margin-top: -$size/2 - 2;
		left: 0;
		display: inline-block;
		border: $border-width solid $border-color;
		border-radius: .3em;
		width: $size;
		height: $size;
		vertical-align: middle;
		background: $background-color;
		margin-right: 3px;
		&:hover{
			//border-color: $hover-color;
			border-color: lighten($border-color,10%);
		}
	}
	
	& ~ label:not(.fake-input){
		padding-left: $size + 2;
		min-width: calc(100% - #{$size} + 2px);
        overflow: hidden;
        text-overflow: ellipsis;
	}
}

@mixin customLargeCheckbox($size:24px, $border-color:#777, $border-width:1px, $background-color:#fff, $core-color:#000, $hover-color:#666){
	@include customRadioCheckbox($size + 1, $border-color, $border-width, $background-color, $hover-color);
	&:checked ~ .fake-input{
		border-radius: .3em;
	}
	&:checked ~ .fake-input:before{
		font-family: 'flomail';
		content: "\e0f4";
		color: $core-color;
		background-color: $background-color;
		font-size: $size+1;
		line-height: 1;
		position: absolute;
		left: -$border-width;
		top: -$border-width;
		font-weight: normal;
		border-radius: .2em;
	}
}


.checkboxgroup{
  @include checkbox(16px, #bbb, 1px, #fff, $highlight-color, nil);
	position: relative;
	display: block;
	padding: 3px 0;
  &.large-custom{
	  input[type="checkbox"]{	
			@include customLargeCheckbox(18px, #999, 1px, $highlight-color, #fff);
		}
		&.no-background{
			input[type="checkbox"]{	
				@include customLargeCheckbox(18px, #ddd, 1px, transparent, #fff, #fff);
			}
		}

		&.whitebg{
			input[type="checkbox"]{	
				@include customLargeCheckbox(18px, #ddd, 1px, #428bca, #fff, #fff);
			}
			input[type="checkbox"]:not(:checked) ~ .fake-input{
				background-color: transparent;
			}
		}
  }

  >input[type="checkbox"]{
	  margin-right: 5px;

  }
}