Switch Group: Type: Checkbox Group 

<!-- SWITCH-GROUP Component -->
<div class="kx-switchgroup kx-switchgroup--inline">
    <div class="kx-switchgroup__inner">
        <!-- SWITCH checkbox Component -->
        <div class="kx-switch kx-switch--checkbox">
            <label class="kx-switch__label" for="foo--88302">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="foo--88302"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">foo</span>
    </label>
        </div>
        <!-- SWITCH checkbox Component -->
        <div class="kx-switch kx-switch--checkbox">
            <label class="kx-switch__label" for="bar--7113">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="bar--7113"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">bar</span>
    </label>
        </div>
        <!-- SWITCH checkbox Component -->
        <div class="kx-switch kx-switch--checkbox">
            <label class="kx-switch__label" for="baz--86215">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="baz--86215"  />
        <span class="kx-switch__fake" aria-hidden="true"></span>
        <span class="kx-switch__label__txt">baz</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": {
        "label": "foo",
        "type": "checkbox"
      }
    },
    {
      "context": {
        "label": "bar",
        "type": "checkbox"
      }
    },
    {
      "context": {
        "label": "baz",
        "type": "checkbox"
      }
    }
  ]
}
  • 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.