<!-- SWITCH toggle Component -->
<div class="kx-switch kx-switch--toggle">
    <label class="kx-switch__label" for="toggle-label-text--680">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="toggle-label-text--680" disabled="disabled" checked="checked"/>
        <span class="kx-switch__fake" aria-hidden="true">
            <span class="kx-switch__option-left" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#check"></use>
    </svg>
</i>
            </span>
            <span class="kx-switch__option-right kx-is-hidden" aria-hidden="true">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
            </span>
        </span>
        <span class="kx-switch__label__txt">Toggle label text</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></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": "checkbox",
  "id": null,
  "disabled": true,
  "checked": true,
  "value": null,
  "name": null,
  "label": "Toggle label text",
  "hideLabel": null,
  "toggle": true
}
  • 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.