Switch: Radio Button 

<!-- SWITCH radio Component -->
<div class="kx-switch kx-switch--radio">
    <label class="kx-switch__label" for="radio-button-label--22468">
        <input class="kx-switch__control kx-is-vishidden" type="radio" id="radio-button-label--22468"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">Radio Button Label</span>
    </label>
</div>
 
{%- if id -%}
    {% set random_number = range(0, 100000) | random -%}
    {% set id = id | replace(' ', '-') | lower + '--' + random_number -%}
{%- else -%}
    {% set random_number = range(0, 100000) | random -%}
    {% set id = label | replace(' ', '-') | lower + '--' + random_number -%}
{% endif -%}
{%- if toggle -%}
<!-- SWITCH toggle Component -->
<div class="kx-switch kx-switch--toggle{% for class in classes %} {{ class }}{% endfor %}">
    <label class="kx-switch__label" for="{{ id }}">
        <input class="kx-switch__control kx-is-vishidden" type="{{ type }}" id="{{ id }}"{% if name %} name="{{ name }}"{% endif %}{% if value %} value="{{ value }}"{% endif %} {{ 'disabled="disabled"' if disabled }} {{ 'checked="checked"' if checked }}/>
        <span class="kx-switch__fake" aria-hidden="true">
            <span class="kx-switch__option-left" aria-hidden="true">
                {% render '@icon', { symbol: 'check', size: 'tiny' } %}
            </span>
            <span class="kx-switch__option-right kx-is-hidden" aria-hidden="true">
                {% render '@icon', { symbol: 'close', size: 'tiny' } %}
            </span>
        </span>
        <span class="kx-switch__label__txt{% if hideLabel == true %} kx-is-vishidden{% endif %}">{{ label }}</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
</div>
{%- else -%}
<!-- SWITCH {{ type }} Component -->
<div class="kx-switch kx-switch--{{ type }}{% for class in classes %} {{ class }}{% endfor %}">
    <label class="kx-switch__label" for="{{ id }}">
        <input class="kx-switch__control kx-is-vishidden" type="{{ type }}" id="{{ id }}"{% if name %} name="{{ name }}"{% endif %}{% if value %} value="{{ value }}"{% endif %} {{ 'disabled="disabled"' if disabled }} {{ 'checked="checked"' if checked }}/>
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt{% if hideLabel == true %} kx-is-vishidden{% endif %}">{{ label }}</span>
    </label>
</div>
{%- endif -%}
 
{
  "classes": null,
  "type": "radio",
  "id": null,
  "disabled": null,
  "checked": null,
  "value": null,
  "name": null,
  "label": "Radio Button Label",
  "hideLabel": null,
  "toggle": null
}
  • Content: 
    // ==========================================================================
// Component: Switch
// ==========================================================================

// Local variables
// ==========================================================================

$switch-size: 24px; // Equal to base line-height for body text
$fake-radio-size: $switch-size / 2;
$fake-check-width: ($switch-size / 4);
$fake-check-height: $switch-size / 1.84;
$switch-border-radius: $radius-global;

// Elements (children)
// ==========================================================================
.kx-switch__label {
    @include flex;
    @include align-items-start;
    position: relative;

    &:hover {
        .kx-switch__control {
            &:not(:disabled):not(:focus):not(:checked) {
                ~ .kx-switch__fake {
                    border-color: $color-switch-border-hover;
                    box-shadow: 0 0 0 rem-calc(1) $color-switch-border-hover inset;
                }
            }
        }
    }
}

.kx-switch__label__txt {
    display: inline;
    vertical-align: top;
}

.kx-switch__control {
    &:checked {
        ~ .kx-switch__fake {
            background-color: $color-switch-bg-checked;
            box-shadow: rem-calc(0 0 0 1) $color-switch-border-checked inset;

            &:after {
                display: block;
                border-color: $color-switch-symbol-checked;
            }
        }
    }

    &:disabled {
        ~ .kx-switch__fake {
            background: $color-switch-bg-disabled;
            cursor: not-allowed;
        }

        ~ .kx-switch__label__txt {
            cursor: not-allowed;
        }

        &:checked {
            ~ .kx-switch__fake {
                border-color: $color-switch-border-disabled;
                box-shadow: 0 0 0 rem-calc(1) $color-switch-border-disabled inset;

                &:after {
                    opacity: 0.4;
                }
            }
        }
    }

    &:focus {
        &:not(:disabled) {
            ~ .kx-switch__fake {
                box-shadow: 0 0 0 rem-calc(2) $color-switch-border-focus inset;
            }
        }
    }
}

// The visible indicator, all with custom styling
.kx-switch__fake {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: rem-calc($switch-size);
    height: rem-calc($switch-size);
    min-width: rem-calc($switch-size);
    color: $color-switch-txt;
    background-color: $color-switch-bg;
    box-shadow: 0 0 0 rem-calc(1) $color-switch-border inset;
    transition: all $duration-instant ease-in-out;
    outline: none;
    flex-shrink: 0;

    &:after {
        content: '';
        position: absolute;
    }

    + .kx-switch__label__txt {
        @include pl(mini);
        display: inline-block;
        vertical-align: middle;
    }
}

// Block (parent)
// ==========================================================================
.kx-switch {
    @include flex;
    @include flex-wrap;
}

// Modifiers
// ==========================================================================
// Fake radiobutton
.kx-switch--radio {
    .kx-switch__fake {
        border-radius: 50%;

        // The ✓-symbol within checkboxes
        &:after {
            display: none;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: rem-calc($fake-radio-size);
            width: rem-calc($fake-radio-size);
            border-radius: 50%;
            background: $color-switch-symbol;
        }
    }

    .kx-switch__control {
        &:checked {
            ~ .kx-switch__fake {
                &:after {
                    background: $color-switch-symbol-checked;
                }
            }
        }

        &:disabled {
            &:checked {
                ~ .kx-switch__fake {
                    &:after {
                        background: $color-switch-symbol-checked-disabled;
                    }
                }
            }
        }
    }
}

// Fake checkbox
.kx-switch--checkbox {
    .kx-switch__fake {
        border-radius: $switch-border-radius;

        // The ●-symbol within radio buttons
        &:after {
            display: none;
            left: 50%;
            top: 45%; // Visual adjustment to make it appear vertical center
            width: rem-calc($fake-check-width);
            height: rem-calc($fake-check-height);
            border: solid $color-switch-symbol;
            border-width: rem-calc(0 2 2 0);
            transform: translate(-50%, -50%) rotate(38deg);
        }
    }

    .kx-switch__control {
        &:disabled {
            &:checked {
                ~ .kx-switch__fake {
                    &:after {
                        border-color: $color-switch-symbol-checked-disabled;
                    }
                }
            }
        }
    }
}

// Fake toggle
.kx-switch--toggle {
    .kx-switch__fake {
        @include inline-flex;
        @include align-items-center;
        @include justify-content-between;
        height: rem-calc($switch-size - 4px);
        width: rem-calc($switch-size * 2);
        position: relative;
        line-height: 1;
        margin: rem-calc(2 0 2 1);
        padding: rem-calc(0 8);
        background: $color-switch-bg;
        border-radius: ($switch-size/2) + 2;
        transition: all $duration-instant;
        box-shadow: rem-calc(0 0 0 1) $color-formfield-border inset;

        &::after {
            width: rem-calc($switch-size);
            height: rem-calc($switch-size);
            position: absolute;
            top: 50%;
            left: rem-calc(-1);
            content: '';
            will-change: transform;
            background-color: $color-white;
            border-radius: 100%;
            box-shadow: rem-calc(0 0 0 1) $color-btn-secondary-border inset;
            transition: all $duration-instant ease-in-out;
            transform: translateY(-50%);
        }
    }

    .kx-switch__option-left {
        transform: scale(0.1);
        opacity: 0;

        svg {
            fill: $color-white;
        }
    }

    .kx-switch__option-right {
        transform: scale(1);
        opacity: 1;

        svg {
            fill: $color-gray-04;
        }
    }

    .kx-switch__disabled-msg {
        display: none;

        &::before {
            content: attr(data-unchecked);
            font-style: italic;
            opacity: 0.8;
        }
    }

    [class^='kx-switch__option-'] {
        @include flex;
        @include justify-content-center;
        flex: 0 0 auto;
        position: relative;
        z-index: 1;
        line-height: 1;
        text-align: center;
        text-transform: uppercase;
        transition: all $duration-fast ease-out;
        transition-delay: $duration-instant;
        speak: none;
    }

    .kx-switch__control {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;

        &:focus {
            ~ .kx-switch__fake {
                box-shadow: rem-calc(0 0 0 2) $color-switch-border-focus inset;
            }
        }

        &:checked {
            ~ .kx-switch__fake {
                background-color: $color-switch-bg-checked;
                box-shadow: rem-calc(0 0 0 1) $color-switch-border-checked inset;

                .kx-switch__option-left {
                    color: $color-white;
                    transform: scale(1);
                    opacity: 1;

                    svg {
                        fill: $color-white;
                    }
                }

                .kx-switch__option-right {
                    color: $color-white;
                    transform: scale(0.1);
                    opacity: 0;

                    svg {
                        fill: $color-white;
                    }
                }

                &::after {
                    transform: translate3d(calc(100% + 2px), -50%, 0);
                }
            }

            .kx-switch__disabled-msg {
                &::before {
                    content: attr(data-checked);
                }
            }
        }

        &:checked {
            &:focus {
                ~ .kx-switch__fake {
                    box-shadow: rem-calc(0 0 0 2) $color-switch-border-focus inset;

                    &::after {
                        box-shadow: rem-calc(0 0 0 1) $color-btn-secondary-border inset;
                    }
                }
            }
        }

        &[disabled] {
            ~ .kx-switch__disabled-msg {
                display: block;
            }

            ~ .kx-switch__fake,
            ~ [class^='kx-switch__option-'] {
                display: none;
            }
        }
    }

    .kx-switch__label {
        &:hover {
            .kx-switch__fake {
                &::after {
                    box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset, rem-calc(0 1 4 0) $color-shadow-base;
                }
            }
        }
    }
}
  • URL: /components/raw/switch/_switch.scss
  • Filesystem Path: src\components\01-form\switch\_switch.scss
  • Size: 9.3 KB

There are no notes for this item.