There are no notes for this item.

<div class="control control--radio radio radio--selected">
    <input type="radio" id="radio1" checked name="radio">
    <label for="radio1" class="control__name">Selected</label>
    <div class="control__indicator"></div>
</div>
  • Content:
    /*------------------------------------*\
        #RADIO
    \*------------------------------------*/
    
    // Check Checkbox CSS
    
    // Makes radio buttons circlular
    .control--radio .control__indicator {
      border-radius: $radius-circle;
    }
    
    // Disabled circle colour
    .control--radio input:disabled ~ .control__indicator:after {
      opacity: .5;
    }
    
    // Radio button inner circle
    .control--radio .control__indicator:after {
      left: 3px;
      top: 3px;
      height: 5px;
      width: 5px;
      border-radius: $radius-circle;
      border: 1px solid $border-form;
      display: block;
    }
    
    .control--radio input:checked ~ .control__indicator:after {
      background-color: $border-hover;
      border-color: $border-hover;
    }
    
    // Radio pressed + Radio pressed when checked
    .control--radio input:not([disabled]):active ~ .control__indicator:after,
    .control--radio input:not([disabled]):checked:active ~ .control__indicator:after {
      border-radius: $radius-circle;
      height: 5px;
      width: 5px;
      top: 3px;
      left: 3px;
    }
    
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: components/02-atoms/05-radio/radio.scss
  • Size: 965 Bytes