• No results

Choices Radio

Installation

  yarn add @chewy/kib-choices-styles

Import

  @use '~@chewy/kib-choices-styles/src/kib-radio/styles' as kib-radio;

Mixins

radio-control-custom

@mixin radio-control-custom($block) { ... }@mixin radio-control-custom($block) { 
  @include mixins.choice-control-custom($block);

  #{$block}__native:checked ~ & {
    #{$block}__fill {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    @media (forced-colors: active) {
      border-color: Highlight;
    }
  }
  #{$block}__native:checked:disabled ~ & {
    #{$block}__fill {
      @media (forced-colors: active) {
        background-color: GrayText;
      }
    }
    @media (forced-colors: active) {
      border-color: GrayText;
    }
  }
 }
Description

Radio custom input control styles and various states

Parameters
Parameters
NameDescriptionTypeDefault value
$block

root class of parent block element

String—
Author

  • CDS

radio-control-fill

@mixin radio-control-fill() { ... }@mixin radio-control-fill() { 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  background-color: settings.$brand;
  border-radius: 50%;
  content: '';
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s, opacity 0.2s;

  @media (forced-colors: active) {
    background-color: Highlight;
  }
 }
Description

Control fill with inner pseudo element to style checked state

Parameters

None.

Requires
Author

  • CDS