Contents

/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

$accordion-transition: $default-transition !default;

/**
 * Should be used in conjunction with the JavaScript Titon.Tooltip module.
 *
 *    <ul class="accordion">
 *        <li>
 *            <header class="accordion-head">Title Bar</header>
 *            <section class="accordion-inner">
 *                <div class="accordion-body">Collapsible content</div>
 *            </section>
 *        </li>
 *    </ul>
 */

.accordion,
.accordion li {
    list-style: none;
    text-align: left;
    margin: 0;
    padding: 0;
}

.accordion {
    border: 1px solid $gray-dark;
}

.accordion-head {
    padding: $padding;
    background: $gray;
    border: 1px solid $gray-dark;
    margin: -1px;
    cursor: pointer;

    .is-active & {
        background: $gray-dark;
        border-color: $gray-darkest;
    }
}

// Style this
.accordion-body {
    padding: $padding;

    @include content-spacing;
}

// Inner is used for animations, do not style it!
.accordion-inner {
    overflow: hidden;
    position: relative;
    @include transition(all $accordion-transition ease-in-out);

    &.show { height: auto; }
    &.hide { max-height: 0; } // don't include on base styles
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
titon-toolkit-0.14.0	scss/toolkit/modules/accordion.scss
titon-toolkit-0.13.2	scss/toolkit/modules/accordion.scss