WTS - Custom Form (Checkbox)

by Paulo Ávila

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/FontAwesome.otf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.eot"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.svg"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.ttf"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/font/fontawesome-webfont.woff"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css">
<form>
    <input id="checkbox1" type="checkbox" checked >
    <label for="checkbox1">Full</label>
    <br>
    <input id="checkbox2" type="checkbox" >
    <label for="checkbox2">Partial</label>
    <br>
    <input id="checkbox3" type="checkbox" class="required" >
    <label for="checkbox3">Required</label>
</form>
        
<form class="example-class-that-has-an-orange-bg">
    <input id="checkbox4" type="checkbox" checked >
    <label for="checkbox4">Full</label>
    <input id="checkbox5" type="checkbox" >
    <label for="checkbox5">Partial</label>
    <br>
    <input id="checkbox6" type="checkbox" >
    <label for="checkbox6" style="font-size:11px;font-weight:bold">Optional</label>
</form>

SCSS

*, *:before, *:after { box-sizing: border-box; }
body { font: 12px Arial; }
form { padding: 5px 8px; }
$primary-color: #e75113;
@mixin accessibility-hide-box {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);

  // only needed for an apparent bug in Webkit/Opera
  // http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  height: 1px;
  width: 1px;
  overflow: hidden;
}
// use the @include user-select(none) mixin from Compass instead of this:
.user-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
////////////////////////////////////////////////////////////////////////////////////////////////

$input-checkbox-offset: 18px;
$input-checkbox-width: 13px;
$input-checkbox-line-height: 12px;
$input-checkbox-color-idle: #acacac;
$input-checkbox-color-required: #f25c66;
$input-checkbox-color-focus: #4fd0e8;

$input-checkbox-bg-gradient-from: #fdfdfd;
$input-checkbox-bg-gradient-to: #eeeae9;

.example-class-that-has-an-orange-bg {
    background-color: $primary-color;
    color: white;
    
    & input[type=checkbox] {
        & + label {
            &:before {
                border-color: white;
            }
        }
    }
}

input[type=checkbox] {
    outline: none;
    @include accessibility-hide-box;

    & + label {
        @extend .user-select;
        position: relative;
        margin: 0 $input-checkbox-offset;

        &:before {
            content: "";
            position: absolute;
            top: 1px;
            left: -$input-checkbox-offset;
            width: $input-checkbox-width;
            height: $input-checkbox-width;
            padding-left: 1px;
            font-family: 'FontAwesome';
            font-size: 9px;
            font-weight: normal;
            line-height: $input-checkbox-line-height;
            color: $primary-color;
                
            // Use Compass mixins!
 ...