Switch Group: Type: Toggle Group 

<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup kx-switchgroup--inline">
    <div class="kx-switchgroup__inner">
        <!-- SWITCH toggle Component -->
        <div class="kx-switch kx-switch--toggle">
            <label class="kx-switch__label" for="foo--21525">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="foo--21525"  />
        <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">foo</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
        </div>
        <!-- SWITCH toggle Component -->
        <div class="kx-switch kx-switch--toggle">
            <label class="kx-switch__label" for="bar--61118">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="bar--61118"  />
        <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">bar</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
        </div>
        <!-- SWITCH toggle Component -->
        <div class="kx-switch kx-switch--toggle">
            <label class="kx-switch__label" for="baz--42253">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="baz--42253"  />
        <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">baz</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
        </div>
    </div>
</div>
 
<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup{% if inline %} kx-switchgroup--inline{% endif %}{% for class in classes %} {{ class }}{% endfor %}">
    <div class="kx-switchgroup__inner">
        {% for switcher in switches -%}
        {% render '@switch', switcher.context, true %}
        {% endfor -%}
    </div>
</div>
 
{
  "classes": null,
  "inline": true,
  "switches": [
    {
      "context": {
        "toggle": true,
        "label": "foo"
      }
    },
    {
      "context": {
        "toggle": true,
        "label": "bar"
      }
    },
    {
      "context": {
        "toggle": true,
        "label": "baz"
      }
    }
  ]
}
  • Content: 
    // ==========================================================================
// Component: switchgroup (Shared styles for radiobuttons & checkboxes)
// ==========================================================================

// Elements (children)
// ==========================================================================

// Block (parent)
// ==========================================================================

.kx-switchgroup {
    overflow: hidden;
    position: relative;

    .kx-switchgroup__inner {
        @include flex;
        @include flex-row;
        @include flex-wrap;
        margin-top: -1rem;
    }

    .kx-switch {
        @include mt(base);
        flex-basis: 100%;
    }

    > * {
        flex-basis: 100%;
    }
}

// Modifiers
// ==========================================================================

.kx-switchgroup--inline {
    .kx-switchgroup__inner {
        @include flex;
        @include flex-row;
        @include flex-wrap;
    }

    .kx-switch {
        // If number of switches within a switchgroup with modifier --inline is
        // more than 3, we force a stacked view.
        @include at-most(3) {
            @include m(base, large, none, none);
            display: inline-block;
            flex-basis: auto;
        }
    }
}
  • URL: /components/raw/switch-group/_switch-group.scss
  • Filesystem Path: src\components\01-form\switch-group\_switch-group.scss
  • Size: 1.3 KB

There are no notes for this item.