Material Checkbox button

Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
      <ul>
        <li>
          <p class="material-checkbox">
            <input class="material-checkbox-field" type="checkbox" name="option" id="option-1">
            <label class="material-checkbox-label" for="option-1">Option 1</label>
          </p>
        </li>
                <li>
          <p class="material-checkbox">
            <input class="material-checkbox-field" type="checkbox" name="option" id="option-2">
            <label class="material-checkbox-label" for="option-2">Option 2</label>
          </p>
        </li>
                <li>
          <p class="material-checkbox">
            <input class="material-checkbox-field" type="checkbox" name="option" id="option-3">
            <label class="material-checkbox-label" for="option-3">Option 3</label>
          </p>
        </li>
                <li>
          <p class="material-checkbox">
            <input class="material-checkbox-field" type="checkbox" name="option" id="option-4">
            <label class="material-checkbox-label" for="option-4">Option 4</label>
          </p>
        </li>
      </ul>
      
  </div>

  <div class="align-bis black">  
        <ul>
        <li>
          <p class="material-checkbox black">
            <input class="material-checkbox-field" type="checkbox" name="option-black" id="option-6">
            <label class="material-checkbox-label" for="option-6">Option 1</label>
          </p>
        </li>
                <li>
          <p class="material-checkbox black">
            <input class="material-checkbox-field" type="checkbox" name="option-black" id="option-7">
            <label class="material-checkbox-label" for="option-7">Option 2</label>
          </p>
        </li>
                <li>
          <p class="material-checkbox black">
            <input class="material-checkbox-field" type="checkbox" name="option-black" id="option-8">
            <label class="material-checkbox-label" for="option-8">Option...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

$primary : #03A9F4;
$grey : rgba(0,0,0,0.54);
$white : rgba(255,255,255,0.7);
$black: #333;

//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.align{
  display: flex;
  background-color: rgb(250,250,250);
  min-height: 100%;
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 100px 0;
  }
  .black{
    background-color:$black;
  }
}

ul{
  list-style:none;
  li{
    margin-top: 18px;
    &:first-child{
      margin-top: 0;
    }
  }
}


//
// Style components
$this : '.material-checkbox';

#{$this}{
  input{
    display:none;
    &:checked{
      + label{
        &:before{
          background-color: $primary;
          border-color: $primary;
        }
        &:after{
          opacity: 1;
        }
      }
    }
  }
  &.black{
    label{
      color: $white;
      &:before{
        border-color: $white;
      }
      &:after{
        color: $black;
      }
    }
  }
  label{
    padding-left: 30px;
    position:relative;
    cursor: pointer;
    &:before, &:after{
      content:"";
      position:absolute;
      transition: all 0.2s ease;
      left:0;
    }
    &:before{
      width: 18px;
      height: 18px;
      border: solid 2px $grey;
      box-sizing: border-box;
      border-radius: 3px;
    }
    &:after{
      opacity:0;
      font-family: 'Material Icons';
      content : "check";
      margin-left: 1px;
      color: #fff;
      font-weight: 700;
      font-size: 15.5px;
    }
  }
}