UCI

Checkbox: Default 

<div class="checkbox">
    <input class="checkbox-input" id="checkbox" type="checkbox" name="Checkbox" title="Checkbox">
    <svg class="icon icon-icon-check     ">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
    </svg>

    <label class="checkbox-label" for="checkbox">
        <span class="caption-placeholder-m">Label</span>
    </label>
</div>
 
<div class="checkbox{{#if disabled}} disabled{{/if}}">
    <input class="checkbox-input" id="{{ id }}" type="checkbox" name="{{ title }}" title="{{ title }}" {{#if disabled}}
        disabled{{/if}}>
    {{ render '@icon--icon-check' }}
    <label class="checkbox-label{{#if isLight}} checkbox-label_light{{/if}}" for="{{ id }}">
        {{> @caption label}}
    </label>
</div>
 
{
  "id": "checkbox",
  "title": "Checkbox",
  "label": {
    "text": "Label",
    "type": "-placeholder-m"
  }
}
  • Content: 
    .checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    .checkbox-input {
        opacity: 0;

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

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

            +.icon {
                opacity: 1;
                z-index: 1;
            }
        }
    }

    &-label {
        padding-top: 3px;
        padding-left: 22px;
        min-height: 25px;
        display: flex;
        align-items: center;

        .text-label-m {
            padding-top: 2px;
        }

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

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

        a {
            text-decoration: underline;
            color: var(--color-text);

            &:hover,
            &:focus {
                text-decoration: none;
            }
        }

        &_light {
            .bodycopy-s {
                color: var(--color-text-light);
            }

            a {
                color: var(--color-text-light);
            }
        }
    }

    .icon {
        opacity: 0;
        position: absolute;
        top: 4px;
        left: 4px;
        display: block;
        width: 18px;
        height: 18px;
        transition: opacity 0.3s;
        fill: var(--color-primary-brand);
    }

    &.disabled {
        .checkbox-input {
            opacity: 0;

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

        .checkbox-label {
            cursor: unset;
            color: var(--color-text-disabled);

            &::before {
                border: 1px solid var(--color-border);
                background-color: var(--color-background-disabled);
            }

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

        .icon {
            fill: var(--color-icon-cta-secondary-disabled);
        }
    }
}
  • URL: /components/raw/checkbox/checkbox.css
  • Filesystem Path: src/01-atoms/checkbox/checkbox.css
  • Size: 2.7 KB

No notes defined.