JezK

Edit File: list.scss

@import "../scss/_variable";
@import "../scss/_mixin";

.gel-list {
    ul {
        counter-reset: item;
        .list-type {
            min-width: 30px;
            line-height: 1.4rem;
            color: inherit;
        }
    }
    .item-list {
        @include d-flex();
        @include justify-content-start();
        line-height: 1.4rem;
        margin: 0;
        &:before {
            counter-increment: item;
            min-width: 30px;
            line-height: 1.4rem;
        }
    }
    .content-list {
        padding-left: 0;
        margin-bottom: 0;
        a {
            color: inherit;
            &:hover {
                color: inherit;
            }
        }
    }
    .circle-type {
        li:before {
            font-family: var(--g5-font-icon);
            content: "\f111";
            font-weight: 600;
            font-size: 8px;
        }
    }
    .square-type {
        li:before {
            content: counter(item, square);
        }
    }
}

.gel-list-style-01, .gel-list-style-02 {
    .item-list:not(:first-child) {
        padding-top: 3px;
    }
    .item-list:not(:last-child) {
        padding-bottom: 3px;
    }
}

.gel-list-style-01 {
    ul {
        .list-type {
            @include justify-content-start();
        }
    }
    .roman-number-type {
        li:before {
            content: counter(item, upper-roman) ". ";
        }
    }
    .alpha-type {
        li:before {
            content: counter(item, lower-alpha) ". ";
        }
    }
    .number-type {
        li:before {
            content: counter(item, decimal-leading-zero) ". ";
        }
    }
}

.gel-list-style-02 {
    ul {
        li {
            @include flex-flow-row-reverse();
            text-align: right;
            &:before {
                @include justify-content-end();
            }
        }
        .list-type {
            @include justify-content-end();
        }
    }

.roman-number-type {
        li:before {
            content: " ." counter(item, upper-roman);
        }
    }
    .alpha-type {
        li:before {
            content: " ." counter(item, lower-alpha);
        }
    }
    .number-type {
        li:before {
            content: ". " counter(item, decimal-leading-zero);
        }
    }
}

.gel-list-style-03 {
    ul {
        li:before {
            display: none;
        }
        span {
            display: none;
        }
        @include d-flex();
        li:not(:last-child) {
            padding-right: 20px;
        }
        li:not(:first-child) {
            padding-left: 20px;
        }
    }
    &.align-left ul {
        @include justify-content-start();
    }
    &.align-right ul {
        @include justify-content-end();
    }
    &.align-center ul {
        @include justify-content-center();
    }
}