evokit-line/style.css

Horizontal line, used to separate content

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

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

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

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

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

:root {
    /* prop 'line-indent' */
    --ek-line-indent-xxs: 5px;
    --ek-line-indent-xs: 10px;
    --ek-line-indent-s: 15px;
    --ek-line-indent-m: 20px;
    --ek-line-indent-l: 25px;
    --ek-line-indent-xl: 30px;
    --ek-line-indent-xxl: 35px
}

.ek-line {
    display: block;
    border-width: 1px 0 0;
    border-style: solid;
    border-color: transparent;
    margin: 0
}

/**
 * Style:
 *
 *  - line_display_*
 *
 * */

.ek-line_display_block {
        display: block
}

.ek-line_display_none {
        display: none
}

/**
 * Indent:
 *
 *  - line_indent_*
 *
 * */

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

.ek-line_indent_xxs {
            margin-top: var(--ek-line-indent-xxs);
            margin-bottom: var(--ek-line-indent-xxs)
}

.ek-line_indent_xs {
            margin-top: var(--ek-line-indent-xs);
            margin-bottom: var(--ek-line-indent-xs)
}

.ek-line_indent_s {
            margin-top: var(--ek-line-indent-s);
            margin-bottom: var(--ek-line-indent-s)
}

.ek-line_indent_m {
            margin-top: var(--ek-line-indent-m);
            margin-bottom: var(--ek-line-indent-m)
}

.ek-line_indent_l {
            margin-top: var(--ek-line-indent-l);
            margin-bottom: var(--ek-line-indent-l)
}

.ek-line_indent_xl {
            margin-top: var(--ek-line-indent-xl);
            margin-bottom: var(--ek-line-indent-xl)
}

.ek-line_indent_xxl {
            margin-top: var(--ek-line-indent-xxl);
            margin-bottom: var(--ek-line-indent-xxl)
}

/**
 * Style:
 *
 *  - line_style_*
 *
 * */

.ek-line_style_solid {
        border-top-style: solid
}

.ek-line_style_dotted {
        border-top-style: dotted
}

.ek-line_style_dashed {
        border-top-style: dashed
}