metro4/less/lists.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.step-list {
    margin: 0 0 0 3em;
    padding: 0;
    list-style-type: none;
    counter-reset:li;

    & > li {
        border-left: 1px #ccc solid;
        position: relative;
        padding: 0 .625rem;
        margin: .625rem;
        vertical-align: top;
    }

    & > li::before {
        position: absolute;
        content:counter(li);
        counter-increment:li;
        font-size: 2rem;
        color: @lightGray;
        left: 0;
        top: .3125rem;
        margin-left: -2em;
        width: 1.8em;
        text-align: right;
    }
}

.custom-list-marker {

    list-style: none inside;

    li {
        position: relative;
        padding-left: 1.2em;

        &::before {
            content: attr(data-marker);
            position: absolute;
            left: 0;
            top: 50%;
            .translateY(-50%);
        }
    }
}

.items-list, .feed-list {
    margin: 0;
    padding: 4px;
    position: relative;
    display: block;
    list-style: none inside;

    .item, & > li {
        display: flex;
        flex-flow: column;
        justify-content: center;
        position: relative;
        height: 56px;
        padding: 8px 16px;
        vertical-align: middle;
        overflow: hidden;
        cursor: default;

        .avatar {
            .square(42, px);
            border-radius: 50%;
            position: absolute;
            left: 16px;
            top: 50%;
            margin-top: -21px;
            font-size: 32px;
            line-height: 42px;
        }

        .second-action {
            position: absolute;
            right: 16px;
            .square(24, px);
            font-size: 24px;
            line-height: 24px;
            top: 50%;
            margin-top: -12px;
            cursor: pointer;
        }

        .label, .second-label {
            display: block;
        }

        .label {
            line-height: 1;
        }

        .second-label {
            font-size: .9em;
            color: @darkGray;
            line-height: 1;
        }

        .avatar ~ .label, .avatar ~ .second-label {
            padding-left: 56px;
        }

    }

    .item + .item {
        border-top: 1px @borderColor solid;
    }

    & > li + li {
        border-top: 1px @borderColor solid;
    }
}

.feed-list {

    .title {
        padding: 0 16px;
        font-size: 18px;
        font-weight: 500;
        height: 36px;
        line-height: 36px;
        display: block;
    }

    .item + .title,
    li + .title {
        margin-top: 32px;
    }

    .title + .item, .title + li, li + .title {
        border-top: 1px @transparent solid;
    }

    .item, & > li {
        height: 104px;
        padding: 16px 0;
        justify-content: space-around;

        .avatar {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 96px;
            height: 72px;
            border-radius: 0;
            margin-top: 0;
        }

        .second-label {
            font-size: 10px;
        }

        .avatar ~ .label, .avatar ~ .second-label  {
            margin-left: 128px;
            margin-right: 16px;
            padding-left: 0;
        }

        .avatar {
            &.on-right {
                float: none;
                left: auto;
                right: 16px;
            }
        }

        .avatar.on-right ~ .label,.avatar.on-right ~ .second-label {
            margin-left: 16px;
            margin-right: 128px;
        }
    }
}

.group-list {
    margin: 0;
    position: relative;
    display: block;
    list-style: none inside;
    border: 1px solid @borderColor;

    .item, & > li {
        display: block;
        position: relative;
        padding: 4px 8px;
    }

    .item + .item,  & > li + li {
        border-top: 1px solid @borderColor;
    }

    &.horizontal {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item, & > li {
            flex-basis: 100%;
        }

        .item + .item,  & > li + li {
            border-top: none;
            border-left: 1px solid @borderColor;
        }

    }
}