Check Box Radial Wash

Check Box Radial Wash.markdown

Check Box Radial Wash

Very Android Lollipop. Wanted this feature when designing an app, and wanted to see what it would take in CSS.

Because of z-index issues, the background of the li has to be drawn with a :before element. Will fix it when I have time.

Check it out on Dribbble!: https://dribbble.com/shots/1968649-Radial-Checkbox

A Pen by Taylor Palmer on CodePen.

License.

index.html

ul
  li
    div.circle
      img(src="https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg")
    h4 Steven Wilson
    input(id="check-1" type="checkbox")
    label(for="check-1")
      i.fa.fa-check
  li
    div.circle
      img(src="https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg")
    h4 Jamie Harden
    input(id="check-2" type="checkbox")
    label(for="check-2")
      i.fa.fa-check
  li
    div.circle
      img(src="https://s3.amazonaws.com/uifaces/faces/twitter/cacique/128.jpg")
    h4 Mike Portnoy
    input(id="check-3" type="checkbox")
    label(for="check-3")
      i.fa.fa-check
     
p(style="text-align:center;margin-top: 50px; font-family: 'Roboto', sans-serif;")
  a(href="https://dribbble.com/shots/1968649-Radial-Checkbox" target="_blank" style="color: #90CAF9;") View it on Dribbble!
  
  

script.js

$('label').click(function() {
  $(this).parent('li').toggleClass('active');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

style.css

body {
  background: #607D8B;
}

* {
  box-sizing: border-box;
}

ul {
  border-radius: 2px;
  overflow: hidden;
  width: 360px;
  margin: 60px auto 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.2)
}

li {
  width: 360px;
  padding: 12px;
  margin: auto;
  position: relative;
  overflow: hidden;
  &.active{
    h4 {
      color: white;
    }
  }
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .circle {
    width: 40px;
    height: 40px;
    background: #ccc;
    border-radius: 9999px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    position: relative; //for z-index
    z-index: 10;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  h4 {
    display: inline-block;
    font-family: "Roboto", Helvetica, sans-serif;
    font-weight: 500;
    font-size: 20px;
    margin: 0;
    vertical-align: middle;
    position: relative; //for z-index
    z-index: 10;
    transition: all .5s;
  }
  input {
    vertical-align: middle;
    display: none;
    & + label {
      display:inline-block;
      background: #ccc;
      width: 24px;
      height: 24px;
      border-radius: 2px;
      position: absolute;
      right: 20px;
      top: 20px;
      text-align: center;
      padding-top: 3px;
      color: transparent;
      cursor: pointer;
      transition: all .2s;
      &:after {
          content: '';
          background: rgba(3, 169, 244,.5);
          width: 10px;
          height: 10px;
          position: absolute;
          right: 8px;
          top: 8px;
          border-radius: 9999px;
          transition: all .3s ease-in;
          z-index:-1;
        }
    }
    &:checked + label {
      background: white;
      color: rgb(3, 169, 244);
    }
    &:checked + label:after {
      width: 1000px;
      height: 1000px;
      top: -500px;
      right: -500px;
      background: rgb(3, 169, 244);
    }
  }
  
}