PDJ Brandbox

radio-color 

<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.