<div class="form-item form-item--radio">
    <input type="radio" id="form-example-radio" value="" name="example-radio" class="radio radio--default">
    <label for="form-example-radio" class=" radio__label--outlined">
    
    <span class="radio__label-text">
      Outlined radio
      <br>
      <span class="radio__description">Descriptive information</span>
    </span>
    <span class="radio__meta">Meta</span>
  </label>
</div>
<div class="form-item form-item--radio">
  <input type="radio"{{#if id}} id="{{id}}"{{/if}} value="{{value}}" name="{{name}}" class="radio radio--{{modifier}}{{#each inputClasses}} {{this}}{{/each}}"{{#each dataAttributes}} data-{{name}}="{{value}}"{{/each}}{{#if checked}} checked="true"{{/if}}>
  <label for="{{id}}"{{#if labelClasses}}class="{{#each labelClasses}} {{this}}{{/each}}"{{/if}}>
    {{#if background}}
    <span class="radio__alternate-fill" style="background: {{background}};"></span>
    {{/if}}
    {{#if image}}<img class="radio__image{{#if imageModifier}} radio__image--{{imageModifier}}{{/if}}" src="{{image}}">{{/if}}
    <span class="radio__label-text{{#each labelTextClasses}} {{this}}{{/each}}">
      {{label}}
      {{#if description}}
      <br>
      <span class="radio__description{{#each descriptionTextClasses}} {{this}}{{/each}}">{{description}}</span>
      {{/if}}
    </span>
    {{#if meta}}
    <span class="radio__meta{{#each metaTextClasses}} {{this}}{{/each}}">{{meta}}</span>
    {{/if}}
  </label>
</div>
{
  "id": "form-example-radio",
  "name": "example-radio",
  "modifier": "default",
  "labelClasses": [
    "radio__label--outlined"
  ],
  "label": "Outlined radio",
  "description": "Descriptive information",
  "meta": "Meta"
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    
    // Adapted from checkbox styles
    .radio {
      position: absolute !important; // sass-lint:disable-line no-important
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      word-wrap: normal;
    }
    
    .radio ~ label {
      @include text-label($color-darkest);
      display: block;
      position: relative;
      cursor: pointer;
    
      a {
        transition: color $transition-standard;
        color: $color-darkest;
        font-weight: $font-weight-bold;
        text-decoration: none;
    
        &:hover {
          color: $color-primary;
        }
      }
    }
    
    .radio--default ~ label {
      padding-left: 30px;
      line-height: 20px;
    }
    
    .radio--alternate ~ label {
      padding-left: 40px;
      line-height: 30px;
    }
    
    .radio ~ label:before {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      content: '';
      box-sizing: border-box;
    }
    
    .radio--default ~ label:before {
      top: calc(50% - 1px);
      left: 0;
      transform: translateY(-50%);
      border: 1px solid $color-medium-dark;
      background: $color-white;
    }
    
    .radio--alternate ~ label:before {
      top: 5px;
      left: 5px;
      background: $color-medium-light;
    }
    
    .radio ~ label:after {
      position: absolute;
      transition: opacity .1s, transform .1s;
      border-radius: 50%;
      content: '';
    }
    
    .radio--default ~ label:after {
      top: calc(50% - 7px);
      left: 4px;
      width: 12px;
      height: 12px;
      background-color: $color-medium-light;
    }
    
    .radio--alternate ~ label:after {
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border: 2px solid $color-medium-light;
      box-sizing: border-box;
    }
    
    .radio:not(:checked) ~ label:after {
      transform: scale(0);
      opacity: 0;
    }
    
    .radio:checked ~ label:after {
      transform: scale(1);
      opacity: 1;
    }
    
    .radio:not(:checked) ~ label:hover:after {
      @include breakpoint($breakpoint-xl) {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    .radio--default:checked ~ label:after {
      background-color: $color-primary;
    }
    
    .radio--alternate:checked ~ label:after {
      border-color: $color-primary;
    }
    
    .radio--alternate {
      & ~ label .radio__alternate-fill {
        display: block;
        position: absolute;
        top: 5px;
        left: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
    
      &:not(:checked) {
        & ~ label .radio__alternate-fill {
          opacity: 0;
        }
      }
    
      &:checked {
        & ~ label .radio__alternate-fill {
          transform: scale(1);
          transition: opacity .1s, transform .1s;
          opacity: 1;
        }
      }
    }
    
    .radio--image {
      & ~ label:before,
      & ~ label:after {
        content: '';
      }
    }
    
    .radio__image {
      display: inline;
      width: 75px;
      margin-right: $gutter-width-half;
      padding: 11px 3px;
      transform: scale(1);
      border: 2px solid transparent;
      opacity: 1;
      vertical-align: middle;
      pointer-events: none;
    
      .radio--image:checked ~ label & {
        border-color: $color-primary;
      }
    
      @include breakpoint($breakpoint-lg) {
        width: 90px;
      }
    }
    
    .radio__label-text {
      pointer-events: none;
    }
    
    // Accessibility
    
    .radio--default:checked:focus ~ label:before,
    .radio--default:not(:checked):focus ~ label:before {
      border: 1px solid $color-dark;
    }
    
    .radio__label--outlined {
      position: relative;
      padding-top: 20px;
      padding-right: 80px;
      padding-bottom: 20px;
      border: 1px solid $color-light;
    
      .radio ~ &:before {
        left: 10px;
      }
    
      .radio ~ &:after {
        left: 14px;
      }
    
      .radio--default ~ & {
        padding-left: 40px;
      }
    
      .radio--alternate ~ & {
        padding-left: 50px;
      }
    }
    
    .radio__description {
      font-weight: $font-weight-bold;
    }
    
    .radio__meta {
      display: flex;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      flex-direction: column;
      justify-content: center;
      padding: 10px;
      font-weight: $font-weight-bold;
      text-transform: uppercase;
    }
    /* critical:end */
    
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/components/01-elements/form-items/radio/radio.scss
  • Size: 3.8 KB

There are no notes for this item.