<div class="kx-listgroup">
    <ul class="kx-listgroup__list">
        <li class="kx-listgroup__row">
            <span></span>
            <!-- SWITCH toggle Component -->
            <div class="kx-switch kx-switch--toggle">
                <label class="kx-switch__label" for="pacific-drilling--17040">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="pacific-drilling--17040"  />
        <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">Pacific Drilling</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
            </div>
        </li>
        <li class="kx-listgroup__row">
            <span></span>
            <!-- SWITCH toggle Component -->
            <div class="kx-switch kx-switch--toggle">
                <label class="kx-switch__label" for="floatel-test--28204">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="floatel-test--28204"  />
        <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">Floatel test</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
            </div>
        </li>
        <li class="kx-listgroup__row">
            <span></span>
            <!-- SWITCH toggle Component -->
            <div class="kx-switch kx-switch--toggle">
                <label class="kx-switch__label" for="maersk--27408">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="maersk--27408"  />
        <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">Maersk</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
            </div>
        </li>
        <li class="kx-listgroup__row">
            <span></span>
            <!-- SWITCH toggle Component -->
            <div class="kx-switch kx-switch--toggle">
                <label class="kx-switch__label" for="bwo--26185">
        <input class="kx-switch__control kx-is-vishidden" type="checkbox" id="bwo--26185"  />
        <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">BWO</span>
        <span class="kx-switch__disabled-msg" data-checked="On" data-unchecked="Off" aria-hidden="true"></span>
    </label>
            </div>
        </li>
    </ul>
</div>
<div class="kx-listgroup">
    {% if title -%}
    <header class="kx-listgroup__header">
        <h4 class="kx-listgroup__title">
            {{ title }}
        </h4>
    </header>
    {% endif -%}
    <ul class="kx-listgroup__list">
        {% for row in rows -%}
        <li class="kx-listgroup__row{% if row.selected %} kx-is-selected{% endif %}">
            {% if row.href -%}
            {% render '@button', { text: row.label, href: row.href, classes: ['kx-listgroup__link'] } %}
            {% else -%}
            <span>{{ row.label }}</span>
            {% endif -%}

            {% if row.metaData -%}
            <span class="kx-listgroup__metadata">{{ row.metaData }}</span>
            {% endif -%}

            {% if row.badge -%}
            {% render '@badge', { text: row.badge, skin: 'info' } -%}
            {% endif -%}

            {% if actions -%}
            {% render '@button-group', actions -%}
            {% endif -%}

            {% if row.switch -%}
            {% render '@switch', row.switch -%}
            {% endif -%}
        </li>
        {% endfor -%}
    </ul>
</div>
{
  "title": null,
  "rows": [
    {
      "switch": {
        "label": "Pacific Drilling",
        "type": "checkbox",
        "toggle": true
      }
    },
    {
      "switch": {
        "label": "Floatel test",
        "type": "checkbox",
        "toggle": true
      }
    },
    {
      "switch": {
        "label": "Maersk",
        "type": "checkbox",
        "toggle": true
      }
    },
    {
      "switch": {
        "label": "BWO",
        "type": "checkbox",
        "toggle": true
      }
    }
  ],
  "href": null,
  "selected": null,
  "status": null,
  "metadata": null,
  "switch": null
}
  • Content:
    // ==========================================================================
    // Component: listgroup
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    
    .kx-listgroup__title {
        @include p(mini, base);
        @include type-scale(base);
        @include type-weight(regular);
        flex-grow: 1;
        text-transform: uppercase;
        color: $color-gray-06;
    
    }
    
    .kx-listgroup__link {
        @include p(mini, base);
        @include flex;
        flex-grow: 1;
        color: inherit;
        text-decoration: none;
    
        .kx-btn__inner {
            @include justify-content-start;
        }
    }
    
    .kx-listgroup__actions {
        @include mr(tiny, $spacing-important: true);
    }
    
    .kx-listgroup__metadata {
        @include type-scale(small);
        color: $color-gray-06;
    }
    
    .kx-listgroup__row {
        @include flex;
        @include align-items-center;
        @include flex-row;
        position: relative;
        //background-color: $color-listgroup-row-bg;
        box-shadow: 0 -1px 0 0 $color-listgroup-row-border inset;
    
        &:first-child {
            box-shadow: 0 -1px 0 0 $color-listgroup-row-border inset, 0 1px 0 0 $color-listgroup-row-border inset;
        }
    
        &.kx-is-selected {
            &:before {
                position: absolute;
                content: '';
                flex: 0 0 auto;
                width: rem-calc(8);
                top: 0;
                bottom: 0;
                left: 0;
                background-color: $color-listgroup-row-bg-selected;
            }
        }
    
        > *:last-child {
            @include mr(base);
        }
    
        > .kx-switch {
            flex-grow: 1;
            margin: 0;
    
            .kx-switch__label {
                @include m(mini, base);
                flex-grow: 1;
            }
        }
    
        > .kx-switch--toggle {
            .kx-switch__fake {
                @include ml(auto);
                order: 1;
    
                + .kx-switch__label__txt {
                    @include px(tiny, none);
    
                }
            }
        }
    
        &:hover {
            background-color: $color-listgroup-row-bg-hover;
        }
    }
    
    .kx-listgroup__list {
        @include reset-list;
    }
    
    
    // Block (parent)
    // ==========================================================================
    .kx-listgroup {
        position: relative;
    }
    
    // Modifiers
    // ==========================================================================
    
  • URL: /components/raw/listgroup/_listgroup.scss
  • Filesystem Path: src\components\01-listgroup\_listgroup.scss
  • Size: 2.4 KB

There are no notes for this item.