hut-accordion/index.css

HTML UI Toolkit accordion component

@import "hut-base";

.hut-accordion .accordion-section {
    border: 1px solid #999;
    padding: 0 0.5em;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.hut-accordion .accordion-header {
    cursor: pointer;
}

.hut-accordion .accordion-header h1,
.hut-accordion .accordion-header h2,
.hut-accordion .accordion-header h3,
.hut-accordion .accordion-header h4,
.hut-accordion .accordion-header h5,
.hut-accordion .accordion-header h6 {
    /* Make all headings have the same top and bottom margin */
    margin: 0.5rem 0;
}

.hut-accordion .accordion-content {
    overflow: hidden;
    position: relative;

    /* Set max-height instead of height since height cannot be transitioned */
    max-height: 0;

    /* Position off the screen to the left to slide in when shown */
    left: -100%;

    /* When transitioning out */
    /* Do not wait to slide out, wait to collapse until slide out is done */
    transition-property: left, max-height;
    transition-delay: 0s, 0.2s;
    transition-duration: 0.2s, 0s;
}

.hut-accordion .accordion-selected .accordion-content {
    left: 0;
    max-height: 100000px;

    /* When transitioning in when no other section is being removed */
    /* Immediately slide in */
    transition-delay: 0s, 0s;
    transition-duration: 0.3s, 0s;
}

.hut-accordion.accordion-removing .accordion-selected .accordion-content {
    /* When transitioning in when another section is being removed */
    /* Wait to slide in until other section is collapsed */
    transition-delay: 0.2s, 0.3s;
}