markdown CustomForm.scss

Posted 2021-05-05

$active-color: #f00;
$border-color: #ccc;

$input-size: 20px;

.control{
  display: block;
  position: relative;
  padding-left: $input-size + 10px;
  margin-bottom: 15px;
  cursor: pointer;
  input{
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
}

.control__indicator{
  position: absolute;
  top: 2px;
  left: 0;
  height: $input-size;
  width: $input-size;
  background-color: #fff;
  border: 1px solid $border-color;
  
  .control--radio & {
    border-radius: 50%;
  }
  
  // ~: 同じ階層の
  .control input:checked ~ & {
  }
  
  &:after{
    content: '';
    position: absolute;
    display: none;
    .control input:checked ~ & {
      display: block;
    }
    $w: $input-size * 0.4;
    .control--checkbox & {
      left: $w;
      top: $w/2;
      width: ($w/2) - 1;
      height: $w;
      border: 1px solid $active-color;
      border-width: 0 $w/4 $w/4 0;
      transform: rotate(45deg);
    }
    .control--radio & {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: $w;
      width: $w;
      border-radius: 50%;
      background-color: $active-color;
    }
  }
}

<div class="control-group">
  <h1>Checkboxes</h1>
  <label class="control control--checkbox">First checkbox
    <input type="checkbox" checked="checked"/>
    <div class="control__indicator"></div>
  </label>
  <label class="control control--checkbox">Second checkbox
    <input type="checkbox"/>
    <div class="control__indicator"></div>
  </label>
</div>

<div class="control-group">
  <h1>Radio buttons</h1>
  <label class="control control--radio">First radio
    <input type="radio" name="radio" checked="checked"/>
    <div class="control__indicator"></div>
  </label>
  <label class="control control--radio">Second radio
    <input type="radio" name="radio"/>
    <div class="control__indicator"></div>
  </label>
</div>

code  
https://codepen.io/mo4_9/pen/Gazxxo

for mixin  
https://codepen.io/mo4_9/pen/ZNwNqL

cf. https://codepen.io/KenanYusuf/pen/PZKEKd