List Group: With Metadata 

<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.