Copy environment

Check 

<div class="check
    ">
    <input type="checkbox" id="check1" name="check" value="" class="check__input">
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon">
                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
            </svg>
        </span>
        <span class="check__text">Checkbox label</span>
    </label>
</div>
 
{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}>
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { class: 'check__icon', name: 'check-22' } %}
        </span>
        <span class="check__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check"
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 40px;
    padding-top: 2px;
    font-size: $font-size-h3-xs;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .check__input:disabled ~ & {
        opacity: .5;
    }

    .check__input:disabled:hover ~ & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &:hover {
        cursor: pointer;
    }
}

.check__indicator {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid $color-text-01;
    position: absolute;
    left: 0;
    top: 6px;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    .check__input:checked ~ .check__label & {
        background: $color-brand-01;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    color: $color-brand-01;

    @include bp(sm-min) {
        font-size: 32px;
    }

    .check__input:not(:disabled):hover ~ .check__label & {
        opacity: 1;
    }

    .check__input:checked ~ .check__label & {
        opacity: 1;
        fill: $color-text-03;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.4 KB
  • Handle: @check--default
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon

Disabled 

<div class="check
     is-disabled">
    <input type="checkbox" id="check1" name="check" value="" class="check__input" disabled>
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon">
                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
            </svg>
        </span>
        <span class="check__text">Checkbox label</span>
    </label>
</div>
 
{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}>
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { class: 'check__icon', name: 'check-22' } %}
        </span>
        <span class="check__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check",
    "isDisabled": true
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 40px;
    padding-top: 2px;
    font-size: $font-size-h3-xs;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .check__input:disabled ~ & {
        opacity: .5;
    }

    .check__input:disabled:hover ~ & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &:hover {
        cursor: pointer;
    }
}

.check__indicator {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid $color-text-01;
    position: absolute;
    left: 0;
    top: 6px;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    .check__input:checked ~ .check__label & {
        background: $color-brand-01;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    color: $color-brand-01;

    @include bp(sm-min) {
        font-size: 32px;
    }

    .check__input:not(:disabled):hover ~ .check__label & {
        opacity: 1;
    }

    .check__input:checked ~ .check__label & {
        opacity: 1;
        fill: $color-text-03;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.4 KB
  • Handle: @check--disabled
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon

Checked 

<div class="check
    ">
    <input type="checkbox" id="check1" name="check" value="" class="check__input" checked>
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon">
                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
            </svg>
        </span>
        <span class="check__text">Checkbox label</span>
    </label>
</div>
 
{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}>
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { class: 'check__icon', name: 'check-22' } %}
        </span>
        <span class="check__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check",
    "isChecked": true
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 40px;
    padding-top: 2px;
    font-size: $font-size-h3-xs;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .check__input:disabled ~ & {
        opacity: .5;
    }

    .check__input:disabled:hover ~ & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &:hover {
        cursor: pointer;
    }
}

.check__indicator {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid $color-text-01;
    position: absolute;
    left: 0;
    top: 6px;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    .check__input:checked ~ .check__label & {
        background: $color-brand-01;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    color: $color-brand-01;

    @include bp(sm-min) {
        font-size: 32px;
    }

    .check__input:not(:disabled):hover ~ .check__label & {
        opacity: 1;
    }

    .check__input:checked ~ .check__label & {
        opacity: 1;
        fill: $color-text-03;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.4 KB
  • Handle: @check--checked
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon

Checked Disabled 

<div class="check
     is-disabled">
    <input type="checkbox" id="check1" name="check" value="" class="check__input" checked disabled>
    <label for="check1" class="check__label">
        <span class="check__indicator">
            <svg class="icon  check__icon">
                <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
            </svg>
        </span>
        <span class="check__text">Checkbox label</span>
    </label>
</div>
 
{% set BEM -%}
    check
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if data.isDisabled %} is-disabled{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <input
        type="checkbox"
        id="{{ data.id }}"
        name="{{ data.name }}"
        value="{{ data.value }}"
        class="check__input"
        {% if data.isChecked %}checked{% endif %}
        {% if data.isDisabled %}disabled{% endif %}
        {{ data.attributes }}>
    <label for="{{ data.id }}" class="check__label">
        <span class="check__indicator">
            {% include '@icon' with { class: 'check__icon', name: 'check-22' } %}
        </span>
        <span class="check__text">{{ data.label }}</span>
    </label>
</div>

{
  "language": "en-US",
  "data": {
    "label": "Checkbox label",
    "id": "check1",
    "name": "check",
    "isChecked": true,
    "isDisabled": true
  }
}
  • Content: 
    .check {
    position: relative;
}

.check__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.check__label {
    display: inline-block;
    padding-left: 40px;
    padding-top: 2px;
    font-size: $font-size-h3-xs;

    @include bp(sm-min) {
        font-size: $font-size-h3-lg;
        padding-left: 64px;
    }

    .check__input:disabled ~ & {
        opacity: .5;
    }

    .check__input:disabled:hover ~ & {
        cursor: not-allowed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    &:hover {
        cursor: pointer;
    }
}

.check__indicator {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid $color-text-01;
    position: absolute;
    left: 0;
    top: 6px;

    @include bp(sm-min) {
        width: 32px;
        height: 32px;
        top: 10px;
    }

    .check__input:checked ~ .check__label & {
        background: $color-brand-01;
    }
}

.check__icon {
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    color: $color-brand-01;

    @include bp(sm-min) {
        font-size: 32px;
    }

    .check__input:not(:disabled):hover ~ .check__label & {
        opacity: 1;
    }

    .check__input:checked ~ .check__label & {
        opacity: 1;
        fill: $color-text-03;
    }
}
  • URL: /components/raw/check/check.scss
  • Filesystem Path: src/patterns/components/forms/check/check.scss
  • Size: 1.4 KB
  • Handle: @check--checked-disabled
  • Filesystem Path: src/patterns/components/forms/check/check.twig
  • References (1): @icon