symphonycms/symphony-2

View on GitHub
symphony/assets/css/src/symphony.drawers.css

Summary

Maintainability
Test Coverage
/**
 * Drawers are areas in the backend that contain additional information
 * like settings or documentation. They are hidden by default and can be
 * expanded on click.
 *
 * @since Symphony 2.3
 */


/*-----------------------------------------------------------------------------
    Horizontal drawers
-----------------------------------------------------------------------------*/

div.drawer.horizontal {
    position: relative;
}

div.drawer.horizontal .contents {
    margin-top: 1.7rem;
    padding: 2rem 0;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.05);
}

div.drawer.horizontal .contents:after {
    content: ' ';
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    visibility: hidden;
}

/*-----------------------------------------------------------------------------
    Vertical drawers
-----------------------------------------------------------------------------*/

/**
 * Height is set implicitly via `top` and `bottom` to allow for dynamic height.
 */
div.drawer.vertical-left,
div.drawer.vertical-right {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 30rem;
    background: #f4f4f4;
}

div.drawer.vertical-left {
    left: 0;
    border-right: 0.1rem solid rgba(0, 0, 0, 0.05);
}

div.drawer.vertical-right {
    right: 0;
    border-left: 0.1rem solid rgba(0, 0, 0, 0.05);
}

div.drawer.vertical-left .contents,
div.drawer.vertical-right .contents {
    padding: 2rem;
}