<div class="kx-listgroup">
    <ul class="kx-listgroup__list">
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Pacific Drilling</span>
    </span>
</a>
            <span class="kx-listgroup__metadata">25 minutes ago</span>
        </li>
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Floatel test</span>
    </span>
</a>
            <span class="kx-listgroup__metadata">2 hours ago</span>
        </li>
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Maersk</span>
    </span>
</a>
            <span class="kx-listgroup__metadata">5 weeks ago</span>
        </li>
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">BWO</span>
    </span>
</a>
            <span class="kx-listgroup__metadata">a year ago</span>
        </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": [
    {
      "label": "Pacific Drilling",
      "href": "#",
      "metaData": "25 minutes ago"
    },
    {
      "label": "Floatel test",
      "href": "#",
      "metaData": "2 hours ago"
    },
    {
      "label": "Maersk",
      "href": "#",
      "metaData": "5 weeks ago"
    },
    {
      "label": "BWO",
      "href": "#",
      "metaData": "a year ago"
    }
  ],
  "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.