checkbox-full.scss

$theme : #0096D9;

.checkbox
{
    position: absolute;
    left: -9999px;
    
    & + label
    {
        position: relative;
        display: inline-block;
        padding: 6px 30px;
        cursor: pointer;

        &:before,
        &:after
        {
            position: absolute;
            top: 0;
            content: '';
            border-radius: 1px;
        }
        
        &:before
        {
            top: 4px;
            left: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #CCC;
            background-color: #fff;
        }
        
        &:after
        {
            /* hidden */
            width: 0;
            height: 0; 
        }
        
    }
    
    &:checked
    {
        & + label
        {
            &:before{
              border-color: $theme;
              background-color: $theme;
            }
          
            &:after{
              width: 6px;
              height: 13px;
              top: 3px;
              left: 5px;
              
              color: #fff;
              border-top: 2px solid transparent;
              border-left: 2px solid transparent;
              border-right: 2px solid #fff;
              border-bottom: 2px solid #fff;

              -webkit-transform: rotate(37deg);
                  -ms-transform: rotate(37deg);
                   -o-transform: rotate(37deg);
                      transform: rotate(37deg);
            }
        }
    }
    
    &:disabled
    {
        
        & + label
        {
            color: #CCC;
          
            &:before{
              border-color: #CCC;
              background-color: #F2F2F2;
              box-shadow: none;
            }
          
            &:after{
              /* hidden */
              width: 0;
              height: 0; 
            }
        }                
    }
}