@kademi/keditor/src/styles/keditor/_sidebar.less

KEditor is a jQuery plugin which provides a content editor with drag n drop, configurable contents

// Import
// -------------------------------------------------
@import "../_mixins";
@import "../_variables";


// Sidebar
// -------------------------------------------------
.keditor-sidebar {
    position: absolute;
    top: @topbar-height;
    bottom: 0;
    right: -@sidebar-width;
    width: @sidebar-width;
    background: @sidebar-bg;
    border-left: 1px solid @border-color;
    box-shadow: -1px 0 5px @sidebar-shadow-color;
    transition: all @animation-duration;
    opacity: 0;
    
    &.opened {
        right: 0;
        opacity: 1;
    }
    
    .keditor-iframe-wrapper & {
        position: absolute;
    }
}

.keditor-sidebar-header {
    border-bottom: 1px solid @border-color;
    padding: 10px 30px 10px 15px;
    position: relative;
}

.keditor-sidebar-closer {
    text-decoration: none !important;
    color: @closer-color;
    text-align: center;
    position: absolute;
    top: 8px;
    right: 5px;
    width: @sidebar-close-size;
    height: @sidebar-close-size;
    line-height: unit(@sidebar-close-size - 1, px);
    font-size: 19px;
    font-weight: bold;
    
    &:hover {
        color: @closer-hover-color;
    }
}

.keditor-sidebar-title {
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

.keditor-sidebar-body {
    height: ~"calc(100% - 41px)";
    overflow: hidden;
    position: relative;
    
    .keditor-setting-form {
        .keditor-scrollbar();
        .clearfix();
        overflow-x: hidden;
        overflow-y: auto;
        padding: @sidebar-body-padding;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        right: -100%;
        opacity: 0;
        transition: all @animation-duration;
        
        &.active {
            right: 0;
            opacity: 1;
        }
    }
}