SCSS

by Torwan

HTML

<section>
  <h1>Simple material design CSS only radio button example</h1>
  <div>
    <div class="md-radio">
      <input id="1" type="radio" name="g" checked>
      <label for="1">Option 1</label>
    </div>
    <div class="md-radio">
      <input id="2" type="radio" name="g">
      <label for="2">Option 2</label>
    </div>
  </div>
  <div>
    <div class="md-radio md-radio-inline">
      <input id="3" type="radio" name="g2" checked>
      <label for="3">Option 3</label>
    </div>
    <div class="md-radio md-radio-inline">
      <input id="4" type="radio" name="g2">
      <label for="4">Option 4</label>
    </div>
  </div>
  <div>
    <div class="md-radio md-radio-inline">
      <input id="5" type="radio" name="g3" checked>
      <label for="5"></label>
    </div>
    <div class="md-radio md-radio-inline">
      <input id="6" type="radio" name="g3">
      <label for="6">Option 6</label>
    </div>
  </div>
</section>

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto);

$md-radio-checked-color: rgb(51, 122, 183);
$md-radio-border-color: rgba(0, 0, 0, 0.54);
$md-radio-size: 20px;
$md-radio-checked-size: 10px; 
$md-radio-ripple-size: 15px;

@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.0);
  }
  50% { 
    box-shadow: 0px 0px 0px $md-radio-ripple-size rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px $md-radio-ripple-size rgba(0, 0, 0, 0);
  }
}

.md-radio {
    margin: 16px 0;
    
    &.md-radio-inline {
        display: inline-block;
    }

    input[type="radio"] {
        display: none;
        &:checked + label:before {
            border-color: $md-radio-checked-color;
            animation: ripple 0.2s linear forwards;   
        }
        &:checked + label:after {
            transform: scale(1);
        }
    }
    
    label {
        display: inline-block;
        height:$md-radio-size;
        position: relative;
        padding: 0 ($md-radio-size + 10px);
        margin-bottom: 0;
        cursor: pointer;
        vertical-align: bottom;
        &:before, &:after {
            position: absolute;            
            content: '';  
            border-radius: 50%;
            transition: all .3s ease;
            transition-property: transform, border-color;
        }
        &:before {
            left: 0;
            top: 0;
            width: $md-radio-size;
            height: $md-radio-size;
            border: 2px solid $md-radio-border-color;
        }
        &:after {
            top: $md-radio-size / 2 - $md-radio-checked-size / 2;
            left: $md-radio-size / 2 - $md-radio-checked-size / 2;
            width:$md-radio-checked-size;
            height:$md-radio-checked-size;
            transform: scale(0);
            background:$md-radio-checked-color;
        }
    }
}



// *************************************

// *************************************
*, *:before, *:after {
  box-sizing:...