evokit-list/style.css

Used to create list

@custom-media --ek-list-media-small only screen and (min-width: 480px);

@custom-media --ek-list-media-medium only screen and (min-width: 768px);

@custom-media --ek-list-media-large only screen and (min-width: 960px);

@custom-media --ek-list-media-wide only screen and (min-width: 1200px);

@custom-media --ek-list-media-huge only screen and (min-width: 1400px);

:root {
    /* prop 'list-indent' */
    --ek-list-indent-xxs: 5px;
    --ek-list-indent-xs: 10px;
    --ek-list-indent-s: 15px;
    --ek-list-indent-m: 20px;
    --ek-list-indent-l: 25px;
    --ek-list-indent-xl: 30px;
    --ek-list-indent-xxl: 35px;
    --ek-list-indent-3xl: 40px;
    --ek-list-indent-4xl: 45px;
    --ek-list-indent-5xl: 50px;
}

.ek-list {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ek-list__item {
    display: block;
}

/**
 * Display:
 *
 *  - list_display_block
 *  - list_display_none
 *
 * */

.ek-list_display_block {
        display: block;
}

.ek-list_display_none {
        display: none;
}

/**
 * Item display:
 *
 *  - list__item_display_block
 *  - list__item_display_none
 *
 * */

.ek-list__item_display_block {
        display: block;
}

.ek-list__item_display_none {
        display: none;
}

/**
 * Indent:
 *
 *  - list_indent_*
 *
 * */

.ek-list_indent_none {
            margin-top: 0;
            margin-bottom: 0;
}

.ek-list_indent_none > .ek-list__item {
                padding-top: 0;
                padding-bottom: 0;
}

.ek-list_indent_xxs {
            margin-top: calc(var(--ek-list-indent-xxs) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-xxs) / 2  * -1);
}

.ek-list_indent_xxs > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-xxs) / 2);
                padding-bottom: calc(var(--ek-list-indent-xxs) / 2);
}

.ek-list_indent_xs {
            margin-top: calc(var(--ek-list-indent-xs) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-xs) / 2  * -1);
}

.ek-list_indent_xs > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-xs) / 2);
                padding-bottom: calc(var(--ek-list-indent-xs) / 2);
}

.ek-list_indent_s {
            margin-top: calc(var(--ek-list-indent-s) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-s) / 2  * -1);
}

.ek-list_indent_s > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-s) / 2);
                padding-bottom: calc(var(--ek-list-indent-s) / 2);
}

.ek-list_indent_m {
            margin-top: calc(var(--ek-list-indent-m) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-m) / 2  * -1);
}

.ek-list_indent_m > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-m) / 2);
                padding-bottom: calc(var(--ek-list-indent-m) / 2);
}

.ek-list_indent_l {
            margin-top: calc(var(--ek-list-indent-l) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-l) / 2  * -1);
}

.ek-list_indent_l > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-l) / 2);
                padding-bottom: calc(var(--ek-list-indent-l) / 2);
}

.ek-list_indent_xl {
            margin-top: calc(var(--ek-list-indent-xl) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-xl) / 2  * -1);
}

.ek-list_indent_xl > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-xl) / 2);
                padding-bottom: calc(var(--ek-list-indent-xl) / 2);
}

.ek-list_indent_xxl {
            margin-top: calc(var(--ek-list-indent-xxl) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-xxl) / 2  * -1);
}

.ek-list_indent_xxl > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-xxl) / 2);
                padding-bottom: calc(var(--ek-list-indent-xxl) / 2);
}

.ek-list_indent_3xl {
            margin-top: calc(var(--ek-list-indent-3xl) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-3xl) / 2  * -1);
}

.ek-list_indent_3xl > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-3xl) / 2);
                padding-bottom: calc(var(--ek-list-indent-3xl) / 2);
}

.ek-list_indent_4xl {
            margin-top: calc(var(--ek-list-indent-4xl) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-4xl) / 2  * -1);
}

.ek-list_indent_4xl > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-4xl) / 2);
                padding-bottom: calc(var(--ek-list-indent-4xl) / 2);
}

.ek-list_indent_5xl {
            margin-top: calc(var(--ek-list-indent-5xl) / 2  * -1);
            margin-bottom: calc(var(--ek-list-indent-5xl) / 2  * -1);
}

.ek-list_indent_5xl > .ek-list__item {
                padding-top: calc(var(--ek-list-indent-5xl) / 2);
                padding-bottom: calc(var(--ek-list-indent-5xl) / 2);
}

/**
 * Divider indent:
 *
 *  - list_divider-indent_*
 *
 * */

.ek-list_divider-indent_none {
            margin-top: 0;
            margin-bottom: 0;
}

.ek-list_divider-indent_none > .ek-list__item {
                padding-top: 0;
                padding-bottom: 0;
}

.ek-list_divider-indent_xxs {
            margin-top: calc(var(--ek-list-indent-xxs) * -1);
            margin-bottom: calc(var(--ek-list-indent-xxs) * -1);
}

.ek-list_divider-indent_xxs > .ek-list__item {
                padding-top: var(--ek-list-indent-xxs);
                padding-bottom: var(--ek-list-indent-xxs);
}

.ek-list_divider-indent_xs {
            margin-top: calc(var(--ek-list-indent-xs) * -1);
            margin-bottom: calc(var(--ek-list-indent-xs) * -1);
}

.ek-list_divider-indent_xs > .ek-list__item {
                padding-top: var(--ek-list-indent-xs);
                padding-bottom: var(--ek-list-indent-xs);
}

.ek-list_divider-indent_s {
            margin-top: calc(var(--ek-list-indent-s) * -1);
            margin-bottom: calc(var(--ek-list-indent-s) * -1);
}

.ek-list_divider-indent_s > .ek-list__item {
                padding-top: var(--ek-list-indent-s);
                padding-bottom: var(--ek-list-indent-s);
}

.ek-list_divider-indent_m {
            margin-top: calc(var(--ek-list-indent-m) * -1);
            margin-bottom: calc(var(--ek-list-indent-m) * -1);
}

.ek-list_divider-indent_m > .ek-list__item {
                padding-top: var(--ek-list-indent-m);
                padding-bottom: var(--ek-list-indent-m);
}

.ek-list_divider-indent_l {
            margin-top: calc(var(--ek-list-indent-l) * -1);
            margin-bottom: calc(var(--ek-list-indent-l) * -1);
}

.ek-list_divider-indent_l > .ek-list__item {
                padding-top: var(--ek-list-indent-l);
                padding-bottom: var(--ek-list-indent-l);
}

.ek-list_divider-indent_xl {
            margin-top: calc(var(--ek-list-indent-xl) * -1);
            margin-bottom: calc(var(--ek-list-indent-xl) * -1);
}

.ek-list_divider-indent_xl > .ek-list__item {
                padding-top: var(--ek-list-indent-xl);
                padding-bottom: var(--ek-list-indent-xl);
}

.ek-list_divider-indent_xxl {
            margin-top: calc(var(--ek-list-indent-xxl) * -1);
            margin-bottom: calc(var(--ek-list-indent-xxl) * -1);
}

.ek-list_divider-indent_xxl > .ek-list__item {
                padding-top: var(--ek-list-indent-xxl);
                padding-bottom: var(--ek-list-indent-xxl);
}

.ek-list_divider-indent_3xl {
            margin-top: calc(var(--ek-list-indent-3xl) * -1);
            margin-bottom: calc(var(--ek-list-indent-3xl) * -1);
}

.ek-list_divider-indent_3xl > .ek-list__item {
                padding-top: var(--ek-list-indent-3xl);
                padding-bottom: var(--ek-list-indent-3xl);
}

.ek-list_divider-indent_4xl {
            margin-top: calc(var(--ek-list-indent-4xl) * -1);
            margin-bottom: calc(var(--ek-list-indent-4xl) * -1);
}

.ek-list_divider-indent_4xl > .ek-list__item {
                padding-top: var(--ek-list-indent-4xl);
                padding-bottom: var(--ek-list-indent-4xl);
}

.ek-list_divider-indent_5xl {
            margin-top: calc(var(--ek-list-indent-5xl) * -1);
            margin-bottom: calc(var(--ek-list-indent-5xl) * -1);
}

.ek-list_divider-indent_5xl > .ek-list__item {
                padding-top: var(--ek-list-indent-5xl);
                padding-bottom: var(--ek-list-indent-5xl);
}

/**
 * Style:
 *
 *  - list_style_*
 *
 * */

.ek-list_style_dash > .ek-list__item {
            padding-left: 20px;
            position: relative;
}

.ek-list_style_dash > .ek-list__item:before {
                position: absolute;
                margin-left: -20px;
                width: 20px;
                text-align: center;
                    content: '\2014';
}

.ek-list_style_decimal {
            counter-reset: item-index;
}

.ek-list_style_decimal > .ek-list__item {
            padding-left: 20px;
            position: relative;
}

.ek-list_style_decimal > .ek-list__item:before {
                position: absolute;
                margin-left: -20px;
                width: 20px;
                text-align: center;
                    content: counter(item-index) '.';
                    counter-increment: item-index;
}

.ek-list_style_disc > .ek-list__item {
            padding-left: 20px;
            position: relative;
}

.ek-list_style_disc > .ek-list__item:before {
                position: absolute;
                margin-left: -20px;
                width: 20px;
                text-align: center;
                    content: '\2022';
                    font-weight: bold;
}