Sha256: 254493245137df0c984e6afd339066469b7a3f1c317023679682b50794f6f81a

Contents?: true

Size: 1.76 KB

Versions: 3

Compression:

Stored size: 1.76 KB

Contents

//
// TwoPaneWidget styles mixin for a widget
//
@mixin two-pane-widget {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    .pane.left {
        @include two-pane-widget-pane( -1 );
    }
    .pane.right {
        @include two-pane-widget-pane( 1 );
    }
}

//
// TwoPaneWidget styles mixin for a pane
// $left_or_right: -1 for left, 1 for right
//
@mixin two-pane-widget-pane( $left_or_right ) {

    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
    vertical-align: top;

    position: relative;

    &.closed {
        width: 0;
        .btn-open {
            display: inline-block;
        }
        .content {
            display: none;
        }
    }
    &.half-open{
        width: 50%;
        &:not(:hover) .btn-open { display: none }
    }
    &.open {
        width: 100%;
        .btn-open { display: none }
    }

    // scrollable content of a pane
    .content {
        overflow-y: scroll;
        height: 100%;
    }

    // opening button/tab
    .btn-open {
        @include two-pane-widget-button( $left_or_right );
    }
    &.closed {
        .btn-open:not(:hover) {
            opacity: 0.5;
        }
    }
}


// Opening button/tab mixin.
// $left_or_right: -1 for left, 1 for right
//
@mixin two-pane-widget-button( $left_or_right ) {
    $btn-size: 45px;

    width: $btn-size;
    height: $btn-size;
    position: absolute;
    z-index: 50;
    top: 45%;

    @if $left_or_right > 0 {
        right: 100%;
    } @else {
        left: 100%;
    }

    cursor: pointer;

    i {
        display: inline-block;
        margin: auto;
        position: absolute;
        height: 16px;
        width: 16px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}


Version data entries

3 entries across 3 versions & 1 rubygems

Version Path
aerogel-pages-1.4.16 assets/stylesheets/admin-pages/_two-pane-widget.css.scss
aerogel-pages-1.4.14 assets/stylesheets/admin-pages/_two-pane-widget.css.scss
aerogel-pages-1.4.12 assets/stylesheets/admin-pages/_two-pane-widget.css.scss