<div class="custom-input custom-input--checkbox ">
    <input id="checkbox-" type="checkbox" class="custom-input__input">
    <label for="checkbox-" class="custom-input__label">if label text it goes here</label>
</div>
<div class="custom-input custom-input--{{type}} {{#if extraClasses}}{{extraClasses}}{{/if}}">
    <input id="{{type}}-{{sequence}}" type="{{type}}" {{#if isChecked}}checked='checked'{{/if}} class="custom-input__input">
    <label for="{{type}}-{{sequence}}" class="custom-input__label">{{#if labelText}}{{labelText}}{{else}}if label text it goes here{{/if}}</label>
</div>
{
    "type": "checkbox"
}
:not(#foo) .custom-input input {
    opacity: 0;
    position: absolute;
}
:not(#foo) .custom-input label {
    position: relative;
    cursor: pointer;
    font-family: 'smithnephewlfbold';
}

:not(#foo) .custom-input--checkbox .custom-input__label:before {
    content: '';
    border: 2px solid $grey;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    @include rem2px(height,3);
    margin-right: 0.5em;
    text-align: center;
    @include rem2px(font-size,2.8);
    transition: 0.5s ease all;
}
:not(#foo) .custom-input--checkbox .custom-input__input:checked + .custom-input__label:before {
    content: "\2713";
    color: $brand--prime;
    background-color: $grey--superdark;
    border: 2px solid $black;
}

:not(#foo) .custom-input--radio .custom-input__input + .custom-input__label:before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	border: 0.3em solid $black;
	background-color: $white;
	margin-right: 0.5em;
	transition: 0.5s ease all;
	vertical-align: middle;	
}
:not(#foo) .custom-input--radio .custom-input__input:checked + .custom-input__label:before {
	background: $brand--prime;
}
:not(#foo) .custom-input--select {
    position: relative;
}
:not(#foo) .custom-input__select {
    appearance:none;
    display: block;
    width: 100%;
    border-radius: 0;
    border: none;
    height: 34px;
    padding-top: 8px;
    padding-bottom: 8px;
    #{$padding-right}: 2em;
    #{$padding-left}: 1em;
    background-color: $white;
    @include rem2px(font-size, 1.3);
}
:not(#foo) .custom-input--select:after {
    background-image: url('/assets/icons/arrow-down-grey.png');
    background-image: url('/assets/icons/arrow-down-grey.svg');
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 2.5em;
    background-size: 18px;
    content: '';
    width: 24px;
    height: 34px;
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 5px;
}
:not(#foo) .custom-input--orange {
    .custom-input__select, .custom-input__text {
         background-color: $brand--prime;
         color: $white;
    } 
    &:after {
        background-image: url('/assets/icons/arrow-down-white.png');
        background-image: url('/assets/icons/arrow-down-white.svg');
        background-repeat: no-repeat;
        background-position: center right;
        padding-right: 2.5em;
        background-size: 18px;
    }   
}
:not(#foo) .custom-input--transparent {
    .custom-input__select {
         background-color: transparent;
         color: $white;
    } 
    &:after {
        background-image: url('/assets/icons/arrow-down-white.png');
        background-image: url('/assets/icons/arrow-down-white.svg');
        background-repeat: no-repeat;
        background-position: center right;
        padding-right: 2.5em;
        background-size: 18px;
    }   
}
:not(#foo) .custom-input--grey {
    .custom-input__select, .custom-input__text {
         background-color: $grey--light;
    }  
}
:not(#foo) .custom-input.icon--orange {
    &:after {
        background-image: url('/assets/icons/arrow-down-orange.png');
        background-image: url('/assets/icons/arrow-down-orange.svg');
        background-repeat: no-repeat;
        background-position: center right;
        padding-right: 2.5em;
        background-size: 18px;
    }   
}
:not(#foo) .custom-input.icon--large {
    &:after {
        background-size: 22px;
    }   
}

There are no notes for this item.