<a href="#" class="radio-color" style="background: #9A2B2F;" title="red"></a>
{{#if url}}
<a href="{{ url }}" class="radio-color{{#if size}} radio-color--{{ size }}{{/if}}" style="background: {{ color }};" title="{{ label }}"></a>
{{else}}
<span class="radio-color{{#if size}} radio-color--{{ size }}{{/if}}" style="background: {{ color }};" title="{{ label }}"></span>
{{/if}}
color: '#9A2B2F'
label: red
url: '#'
  • Content:
    .radio-color {
      transition: box-shadow 250ms, border-width 250ms;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      overflow: hidden;
      border: 4px solid var(--color--neutrals-2);
      border-radius: 50%;
      background-color: currentColor;
    
      &.radio-color--small {
        width: 12px;
        height: 12px;
        border: 2px solid var(--color--neutrals-2);
      }
    
      .is-active & {
        box-shadow: 0 0 0 1px var(--color--neutrals-4);
      }
    }
    
  • URL: /components/raw/radio-color/radio-color.scss
  • Filesystem Path: ../src/02_atoms/radio-color/radio-color.scss
  • Size: 498 Bytes

No notes defined.