Flat checkboxes and radio buttons - Sass styles + Mixin for other colors

README.md

Flat Checkboxes and radio buttons

Sass styles + Mixin for other colors

Note: the scss need Compass to compile correctly

Demo: Codepen

The utilisation is simple just use the .flat-custom class on any checkbox or radio.

<input type="checkbox" class="flat-custom" id="flat_check"/>
<label for="flat_check">I'm a checkbox label</label>

or

<input type="radio" class="flat-custom" id="flat_radio1" name="flat_radio"/>
<label for="flat_radio1"></label>
<input type="radio" class="flat-custom" id="flat_radio2" name="flat_radio"/>
<label for="flat_radio2"></label>

Has these styles are basically hiding the <input type="checkbox"> or the <input type="radio"> and styling the <label>. The label must follow the input for the styles to apply correctly

####Inverted

<input type="checkbox" class="flat-custom inverted" id="checkbox_inverted" checked />
<label for="checkbox_inverted">I'm a label aligned right</label>

####Small

<input type="checkbox" class="flat-custom small" id="checkbox_small" checked />
<label for="checkbox_small">I'm small</label>

####Large

<input type="checkbox" class="flat-custom large" id="checkbox_large" checked />
<label for="checkbox_large">I'm large</label>

####Colored with the @mixin

$color-name : 'sunflower';
$color-value : #F1C40F;
@include flat-checkbox-radio( $color-name , $color-value );

<div class="sunflower">
    <input type="radio" class="flat-custom" id="radio_colored_1" checked />
    <label for="radio_colored_1">I'm a label</label>
    <input type="radio" class="flat-custom" id="radio_colored_2" checked />
    <label for="radio_colored_2">I'm a label</label>
</div>

####or

<input type="checkbox" class="flat-custom sunflower" id="radio_colored" checked />
<label for="radio_colored">I'm a label</label>

flat_custom.scss

@import "compass/css3";

// ================================
// Flat checkboxes and radiobuttons
// ================================
$flat-width : 20px;
$flat-width-small : 16px;
$flat-width-large : 24px;
$flat-color: #999999;

// ------------------
// Checkbox AND Radio
// ------------------
input[type="checkbox"].flat-custom,
input[type="radio"].flat-custom {
  display: none;

  // ---------
  // Unchecked
  // ---------
  & + label{
    line-height: $flat-width;
    height: $flat-width;
    position: relative;
    display: inline-block;
    padding-left: $flat-width * 1.3;
    cursor: pointer;
    box-sizing: border-box;
    @include transition(all 0.2s ease-in-out);

    &:before,
    &:after{
      content:'';
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      box-sizing: border-box;
      @include transition(all 0.2s ease-in-out);
    }

    &:before{
      height: $flat-width;
      width: $flat-width;
      border: 1px solid $flat-color;
    }
    &:after{
      height: $flat-width/2;
      width: $flat-width/2;
      background-color: $flat-color;
      margin-top: $flat-width/4;
      margin-left: $flat-width/4;
      @include opacity(0);
    }
  }

  // -------
  // Checked
  // -------
  &:checked + label{ // When checked
    &:after{
      @include opacity(1);
    }
  }

  // --------
  // Disabled
  // --------
  &:disabled + label{ // When checked
    @include opacity(0.5);
    cursor: not-allowed;
  }

  // -----
  // Small
  // -----
  &.small{
    & + label{
      line-height: $flat-width-small;
      padding-left: $flat-width-small * 1.3;

      &:before{
        height: $flat-width-small;
        width: $flat-width-small;
      }
      &:after{
        height: $flat-width-small/2;
        width: $flat-width-small/2;
        margin-left: $flat-width-small/4;
        margin-top: $flat-width-small/4;
      }
    }
  }

  // -----
  // Large
  // -----
  &.large{
    & + label{
      line-height: $flat-width-large;
      padding-left: $flat-width-large * 1.3;

      &:before{
        height: $flat-width-large;
        width: $flat-width-large;
      }
      &:after{
        height: $flat-width-large/2;
        width: $flat-width-large/2;
        margin-left: $flat-width-large/4;
        margin-top: $flat-width-large/4;
      }
    }
  }

  &.inverted{
    & + label {
      text-align: right;
      padding-left: 0;
      padding-right : $flat-width * 1.2;

      &:before,
      &:after{
        right: 0;
        left: initial;
      }
      &:after{
        margin-top: $flat-width/4;
        margin-right: $flat-width/4;
        @include opacity(0);
      }
    }
    &:checked + label{
      &:after{
        @include opacity(1);
      }
    }
    &.small + label{
      padding-right: $flat-width-small * 1.3;
      padding-left: 0;
      &:after{
        margin-top: $flat-width-small/4;
        margin-right: $flat-width-small/4;
        margin-left: 0;
      }
    }
    &.large + label{
      padding-right: $flat-width-large * 1.3;
      padding-left: 0;
      &:after{
        margin-top: $flat-width-large/4;
        margin-right: $flat-width-large/4;
        margin-left: 0;
      }
    }
  }
}

// -------------
// Checkbox only
// -------------
input[type="checkbox"].flat-custom {
  &:indeterminate + label{
    &:after{
      width: 0;
      height: 0;
      background-color: transparent;
      border-style: solid;
      border-width: 0 0 $flat-width/2 $flat-width/2;
      border-color: transparent transparent $flat-color transparent;
      @include opacity(1);
    }
  }
  &.small:indeterminate + label{
    &:after{
      border-width: 0 0 $flat-width-small/2 $flat-width-small/2;
    }
  }
  &.large:indeterminate + label{
    &:after{
      border-width: 0 0 $flat-width-large/2 $flat-width-large/2;
    }
  }
}

// ----------
// Radio only
// ----------
input[type="radio"].flat-custom {
  & + label{
    &:before,
    &:after{
      border-radius: 100%;
    }
  }
}

// ======================
// Mixin for other colors
// ======================
@mixin flat-checkbox-radio( $colorname, $color ){
  .#{$colorname} input[type="checkbox"].flat-custom,
  .#{$colorname} input[type="radio"].flat-custom,
  input[type="checkbox"].flat-custom.#{$colorname},
  input[type="radio"].flat-custom.#{$colorname} {
    & + label{
      &:after{ background-color: $color; }
    }
    &:checked + label{ // When checked
      color: $color;
    }
  }
  input[type="checkbox"].flat-custom.#{$colorname},
  .#{$colorname} input[type="checkbox"].flat-custom{
    &:indeterminate + label{
      &:after{
        background-color: transparent;
        border-color: transparent transparent $color transparent;
      }
    }
  }
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Custom checkboxes and radio inputs</title>

        <link rel="stylesheet" href="flat_custom.css" />
    </head>
    <body>

        <h2>Flat checkboxes and radio buttons</h2>
        <h4>Sass Styles + @mixin for custom colors</h4>

        <input type="checkbox" class="flat-custom" id="unchecked" />
        <label for="unchecked">unchecked</label>
        <br/>

        <input type="checkbox" class="flat-custom" id="check1" checked />
        <label for="check1">checked</label>
        <br/>

        <input type="checkbox" class="flat-custom" id="check_indeterminate"/>
        <label for="check_indeterminate">indeterminate (with JS only)</label>
        <br/>

        <input type="checkbox" class="flat-custom" id="check_disabled" checked disabled/>
        <label for="check_disabled">disabled</label>
        <br/>

        <input type="checkbox" class="flat-custom inverted" id="check_inverted" checked/>
        <label for="check_inverted">inverted</label>
        <br/>

        <input type="checkbox" class="flat-custom small" id="check_small" checked/>
        <label for="check_small">small</label>
        <br/>

        <input type="checkbox" class="flat-custom large" id="check_large" checked/>
        <label for="check_large">large</label>
        <br/>

        <input type="checkbox" class="flat-custom sunflower" id="check_sunflower" checked/>
        <label for="check_sunflower">sunflower</label>
        <br/>

        <div class="alizarin">
            <input type="checkbox" class="flat-custom" id="check_alizarin" checked/>
            <label for="check_alizarin">color class on wrapper</label>
        </div>
        <br/>

        <input type="radio" class="flat-custom" id="radioA" name="radio" checked/>
        <label for="radioA">checked</label>
        <input type="radio" class="flat-custom" id="radioB" name="radio"/>
        <label for="radioB">not checked</label>
        <br/>

        <input type="radio" class="flat-custom" id="radio_disabled_A" name="radio_disabled" disabled  checked/>
        <label for="radio_disabled_A">disabled checked</label>
        <input type="radio" class="flat-custom" id="radio_disabled_B" name="radio_disabled" disabled />
        <label for="radio_disabled_B">disabled</label>
        <br/>

        <input type="radio" class="flat-custom inverted small" id="radio_inverted_A" name="radio_inverted"  checked/>
        <label for="radio_inverted_A">inverted checked</label>
        <input type="radio" class="flat-custom inverted large" id="radio_inverted_B" name="radio_inverted" />
        <label for="radio_inverted_B">inverted</label>
        <br/>

        <input type="radio" class="flat-custom small" id="radio_small_A" name="radio_small"  checked/>
        <label for="radio_small_A">small checked</label>
        <input type="radio" class="flat-custom small" id="radio_small_B" name="radio_small" />
        <label for="radio_small_B">small</label>
        <br/>

        <input type="radio" class="flat-custom large" id="radio_large_A" name="radio_large"  checked/>
        <label for="radio_large_A">large checked</label>
        <input type="radio" class="flat-custom large" id="radio_large_B" name="radio_large" />
        <label for="radio_large_B">large</label>
        <br/>


        <input type="radio" class="flat-custom turquoise" id="radio_colored_A" name="radio_colored" checked/>
        <label for="radio_colored_A">turquoise</label>
        <input type="radio" class="flat-custom sunflower" id="radio_colored_B" name="radio_colored"/>
        <label for="radio_colored_B">sunflower</label>
        <br/>

        <div class="alizarin">
            <input type="radio" class="flat-custom " id="radio2A" name="radio2" checked/>
            <label for="radio2A">color on a wrapper</label>
            <input type="radio" class="flat-custom " id="radio2B" name="radio2"/>
            <label for="radio2B">color on a wrapper</label>
        </div>


        <input type="radio" class="flat-custom turquoise inverted small" id="radio_crazyA" name="radio_crazy" checked/>
        <label for="radio_crazyA">turquoise inverted small</label>
        <input type="radio" class="flat-custom sunflower large" id="radio_crazyB" name="radio_crazy"/>
        <label for="radio_crazyB">sunflower large</label>

        <script type="text/javascript" >
          var checkbox = document.getElementById("check_indeterminate");
          checkbox.indeterminate = true;
        </script>
    </body>
</html>