artistry/src/styl/section/section.styl

A powerful and configurable stylesheet

@require "section-settings.styl";
@require "../core/mixins.styl";
$section-header-margin = -($section-border-width + $section-padding);
.section {
    border: $section-border-width solid $section-border-color;
    border-radius: $section-border-radius;
    padding: 0;
    margin: $section-margin 0;
    color: $section-color;
    background-color: $section-background-color;
    box-shadow: $section-box-shadow;
    transition: height $section-animation-time;

    & > .section-title {
        padding: $section-header-padding;
    }

    & > header {
        display: flex;
        & > .section-toggle {
            padding: 0;
            margin: 0;
            margin-left: auto;
            height: 20px;
            width: 20px;
            font-weight: bold;
        }
    }

    & > header,
    & > footer {
        background-color: $section-header-background-color;
        color: $section-header-color;
        font-weight: $section-header-font-weight;
        border: 0 solid $section-border-color;
        padding: 0;
        margin: 0;
        clearfix();

        &:first-child {
            border-bottom-width: $section-border-width;
            border-top-left-radius: $section-border-radius;
            border-top-right-radius: $section-border-radius;
            // Support section closing
            margin: 0 0 -1px 0;
        }

        &:last-child {
            border-top-width: $section-border-width;
            border-bottom-left-radius: $section-border-radius;
            border-bottom-right-radius: $section-border-radius;
        }
    }
    .section-content {
        padding: 0;
        transition: max-height $section-animation-time;

        &.section-content-relative {
            position: relative;
        }

        &.section-content-space {
            padding: $section-padding;
        }

        &:not(.section-content-space) {
            &:after {
                content: '';
                display: block;
                height: 1px;
                margin-top: -1px;
            }
        }

        &.lock-contents:after {
            border-bottom-right-radius: max(0, $section-border-radius - $section-border-width);
            border-bottom-left-radius: max(0, $section-border-radius - $section-border-width);
        }
    }
    &.section-closed {
        overflow: hidden;
        & > .section-content {
            overflow: hidden;
            padding-top: 0;
            padding-bottom: 0;
            max-height: 0;
        }
    }
    &.section-run {
        overflow: hidden;
    }
}