evokit-box/theme.css

The content block allows to apply indents, position and more

:root {
    --ek-box-background-TEMPLATE_NAME: var(--background);
    --ek-box-border-TEMPLATE_NAME: var(--border)
}

.ek-box_background_TEMPLATE_NAME {
    background: var(--ek-box-background-TEMPLATE_NAME)
}

/* BORDER */

.ek-box_border_TEMPLATE_NAME {
    border: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-top_TEMPLATE_NAME {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-right_TEMPLATE_NAME {
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-bottom_TEMPLATE_NAME {
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-left_TEMPLATE_NAME {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

/* BORDER COLOR */

.ek-box_border-color_TEMPLATE_NAME {
    border-color: var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-color-top_TEMPLATE_NAME {
    border-top-color: var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-color-right_TEMPLATE_NAME {
    border-right-color: var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-color-bottom_TEMPLATE_NAME {
    border-bottom-color: var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-color-left_TEMPLATE_NAME {
    border-left-color: var(--ek-box-border-TEMPLATE_NAME)
}

/* DEPRECATED */

.ek-box_border-tb_TEMPLATE_NAME {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

.ek-box_border-lr_TEMPLATE_NAME {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
}

@media (--ek-box-media-small) {
        .ek-box_background_TEMPLATE_NAME\@small {
    background: var(--ek-box-background-TEMPLATE_NAME)
    }
        .ek-box_border_TEMPLATE_NAME\@small {
    border: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-top_TEMPLATE_NAME\@small {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-right_TEMPLATE_NAME\@small {
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-bottom_TEMPLATE_NAME\@small {
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-left_TEMPLATE_NAME\@small {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color_TEMPLATE_NAME\@small {
    border-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-top_TEMPLATE_NAME\@small {
    border-top-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-right_TEMPLATE_NAME\@small {
    border-right-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-bottom_TEMPLATE_NAME\@small {
    border-bottom-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-left_TEMPLATE_NAME\@small {
    border-left-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-tb_TEMPLATE_NAME\@small {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-lr_TEMPLATE_NAME\@small {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
}

@media (--ek-box-media-medium) {
        .ek-box_background_TEMPLATE_NAME\@medium {
    background: var(--ek-box-background-TEMPLATE_NAME)
    }
        .ek-box_border_TEMPLATE_NAME\@medium {
    border: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-top_TEMPLATE_NAME\@medium {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-right_TEMPLATE_NAME\@medium {
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-bottom_TEMPLATE_NAME\@medium {
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-left_TEMPLATE_NAME\@medium {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color_TEMPLATE_NAME\@medium {
    border-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-top_TEMPLATE_NAME\@medium {
    border-top-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-right_TEMPLATE_NAME\@medium {
    border-right-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-bottom_TEMPLATE_NAME\@medium {
    border-bottom-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-left_TEMPLATE_NAME\@medium {
    border-left-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-tb_TEMPLATE_NAME\@medium {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-lr_TEMPLATE_NAME\@medium {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
}

@media (--ek-box-media-large) {
        .ek-box_background_TEMPLATE_NAME\@large {
    background: var(--ek-box-background-TEMPLATE_NAME)
    }
        .ek-box_border_TEMPLATE_NAME\@large {
    border: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-top_TEMPLATE_NAME\@large {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-right_TEMPLATE_NAME\@large {
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-bottom_TEMPLATE_NAME\@large {
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-left_TEMPLATE_NAME\@large {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color_TEMPLATE_NAME\@large {
    border-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-top_TEMPLATE_NAME\@large {
    border-top-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-right_TEMPLATE_NAME\@large {
    border-right-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-bottom_TEMPLATE_NAME\@large {
    border-bottom-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-left_TEMPLATE_NAME\@large {
    border-left-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-tb_TEMPLATE_NAME\@large {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-lr_TEMPLATE_NAME\@large {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
}

@media (--ek-box-media-wide) {
        .ek-box_background_TEMPLATE_NAME\@wide {
    background: var(--ek-box-background-TEMPLATE_NAME)
    }
        .ek-box_border_TEMPLATE_NAME\@wide {
    border: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-top_TEMPLATE_NAME\@wide {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-right_TEMPLATE_NAME\@wide {
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-bottom_TEMPLATE_NAME\@wide {
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-left_TEMPLATE_NAME\@wide {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color_TEMPLATE_NAME\@wide {
    border-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-top_TEMPLATE_NAME\@wide {
    border-top-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-right_TEMPLATE_NAME\@wide {
    border-right-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-bottom_TEMPLATE_NAME\@wide {
    border-bottom-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-left_TEMPLATE_NAME\@wide {
    border-left-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-tb_TEMPLATE_NAME\@wide {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-lr_TEMPLATE_NAME\@wide {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
}

@media (--ek-box-media-huge) {
        .ek-box_background_TEMPLATE_NAME\@huge {
    background: var(--ek-box-background-TEMPLATE_NAME)
    }
        .ek-box_border_TEMPLATE_NAME\@huge {
    border: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-top_TEMPLATE_NAME\@huge {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-right_TEMPLATE_NAME\@huge {
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-bottom_TEMPLATE_NAME\@huge {
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-left_TEMPLATE_NAME\@huge {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color_TEMPLATE_NAME\@huge {
    border-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-top_TEMPLATE_NAME\@huge {
    border-top-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-right_TEMPLATE_NAME\@huge {
    border-right-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-bottom_TEMPLATE_NAME\@huge {
    border-bottom-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-color-left_TEMPLATE_NAME\@huge {
    border-left-color: var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-tb_TEMPLATE_NAME\@huge {
    border-top: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-bottom: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
        .ek-box_border-lr_TEMPLATE_NAME\@huge {
    border-left: 1px solid var(--ek-box-border-TEMPLATE_NAME);
    border-right: 1px solid var(--ek-box-border-TEMPLATE_NAME)
    }
}