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