UCI

Radio: Label Light 

<div class="radio">
    <input class="radio-input" id="radio" type="radio" title="Radio" name="Radio group" value="Radio">
    <label class="radio-label radio-label_light  " for="radio" id="" value="">
        <span class="caption-placeholder-m">Radio</span>
    </label>
</div>
 
<div class="radio{{#if disabled}} disabled{{/if}}">
    <input class="radio-input{{#if distinguisher}} radio-distinguisher_{{ distinguisher }} {{/if}}" id="{{ id }}" type="radio" title="{{ title }}" name="{{ name }}" value="{{ label.text }}"{{#if disabled}} disabled{{/if}}{{#if additionalAttributes}} {{{ additionalAttributes }}}{{/if}}>
    <label class="radio-label{{#if isLight}} radio-label_light {{/if}} {{#if icon}} radio-label_icon {{/if}}"  for="{{ id }}" id="{{ label.id}}" value="{{ label.value}}">
        {{#if icon}}
            {{> @icon icon }}
        {{else}}
            {{> @caption label}}
        {{/if}}
    </label>
</div>
 
{
  "id": "radio",
  "title": "Radio",
  "name": "Radio group",
  "label": {
    "text": "Radio",
    "type": "-placeholder-m"
  },
  "isLight": true
}
  • Content: 
    .radio{display: flex; flex-direction: row; align-items: center;position:relative;
    .radio-input {opacity: 0;

        &:hover,
        &:focus {
            + .radio-label {
                &::before {
                    border-color: var(--color-secondary);
                }
            }
        }

        &:checked {
            + .radio-label {
                &::after {
                    opacity: 1;
                }
            }
        }
    }

    .radio-label {
        padding-top: 4px;
        padding-left: 22px;
        min-height: 25px;
        display: flex;
        align-items: center;

        &::before {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 25px;
            height: 25px;
            border: 1px solid var(--color-grey3);
            border-radius: 50%;
            transition: border-color 0.3s;
            content: '';
        }

        &::after {
            opacity: 0;
            position: absolute;
            top: 8px;
            left: 8px;
            display: block;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background-color: var(--color-primary-brand);
            transition: opacity 0.3s;
            content: '';
        }

        &:hover,
        &:focus {
            &::before {
                border-color: var(--color-secondary);
            }
        }

        &_light {
            .text-label-m {
                color: var(--color-text-light);
            }
        }

        &_icon {
            padding-top: 0;
            &::before {
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .icon {
            width: 54px;
            height: 54px;
        }
    }
    
    &.disabled{
        .radio-input {opacity: 0;

            &:hover,
            &:focus {
                + .radio-label {
                    &::before {
                        border-color: var(--color-border);
                    }
                }
            }
        }
        .radio-label {
            cursor: unset;
            color: var(--color-text-disabled);
            &::before {
                border: 1px solid var(--color-border);
                background-color: var(--color-background-disabled);
            }
    
            &::after {
                background-color: var(--color-icon-cta-primary-disabled);
            }
    
            &:hover,
            &:focus {
                &::before {
                    border-color: var(--color-border);
                }
            }
        }
    }
}
  • URL: /components/raw/radio/radio.css
  • Filesystem Path: src/01-atoms/radio/radio.css
  • Size: 2.8 KB

No notes defined.