hkk Frontend 2017

Radio-Button: Standard 

<label class="radio">
  <input class="radio__input" type="radio" value="1" id="radio-596d" name="radio-596d"/><span class="radio__indicator"></span><span class="radio__label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</span>
</label>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `radio-${randomString()}`;
  attr.name = name || attr.name || attr.id;

  //- Prepare wrapAttr object
  wrapAttr = wrapAttr || {};
  wrapAttr.class = classList(wrapAttr.class);

  //- Process options
  if (disabled) {
    attr.disabled = true;
    wrapAttr.class.push('radio--disabled');
  }

  if (invalid) {
    attr['aria-invalid'] = 'true';
    wrapAttr.class.push('radio--invalid');
  }
  
  if (nextline) {
    wrapAttr.class.push('radio--nextline');
  }

//- Render atom
label.radio&attributes(wrapAttr)
  input.radio__input(type='radio', value=value, checked=checked, required=required)&attributes(attr)
  span.radio__indicator
  span.radio__label #{text}
 
{
  "value": 1,
  "text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor."
}
  • Content: 
    .radio {
  cursor: pointer;
  display: inline-flex;
  min-height: 3rem;
  padding-left: 4rem;
  position: relative;

  // Inline stacked
  & + & {
    margin-left: $spacer;
  }
}

.radio--disabled {
  cursor: not-allowed;
}

.radio--nextline {
  margin-bottom: $spacer;
  width: 100%;

  & + & {
    margin-left: 0;
  }
}

.radio__input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.radio__indicator {
  border: 1px solid $color-steelgrey-xdark;
  border-radius: 50%;
  height: 3rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  user-select: none;
  width: 3rem;

  &::after {
    border-radius: 50%;
    content: '';
    height: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }

  // Focus, hover style
  .radio__input:not([disabled]):focus ~ &::after,
  .radio:not(.radio--disabled):hover &::after {
    background-color: $color-steelgrey-xlight;
  }

  // Radio button is selected
  .radio__input:not([disabled]):checked ~ &::after {
    background-color: $color-blue;
  }

  // Radio button is selected, but disabled
  .radio__input[disabled]:checked ~ &::after {
    background-color: $color-steelgrey-dark;
  }

  // User currently clicks on radio button
  .radio__input:not([disabled]):active ~ &::after {
    background-color: $color-blue-light;
  }

  // Disabled
  .radio__input[disabled] ~ & {
    border-color: $color-steelgrey-dark;
  }

  // Invalid
  .radio__input[aria-invalid='true']:invalid ~ & {
    background-color: rgba($color-red, 0.2);
    border-color: $color-red;
  }

  // Invalid hover, focus
  .radio__input[aria-invalid='true']:invalid:focus ~ &::after,
  .radio--invalid:hover .radio__input[aria-invalid='true']:invalid ~ &::after {
    background-color: rgba($color-red, 0.3);
  }
}

.radio__label {
  align-self: center;
  font-size: 1.5rem;
  margin-top: -1px;

  // Disabled
  .radio__input[disabled] ~ & {
    color: $color-steelgrey-xdark;
  }

  // Invalid
  .radio--invalid .radio__input:invalid ~ &,
  .radio__input[aria-invalid='true']:invalid ~ & {
    color: $color-red;
    font-weight: bold;
  }
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/components/atoms/radio/radio.scss
  • Size: 2.1 KB

There are no notes for this item.