Subversion Repositories Integrator Subversion

/******************
Page Quick Sidebar
******************/

/***
Quick Sidebar Layout
***/

/* Quick sidebar toggler */

.page-header {
        .top-menu {
                .dropdown-quick-sidebar-toggler {
                        > .dropdown-toggle {
                                padding: $header-top-menu-general-item-padding !important; 
                                i {
                                        top: 0px;  

                                        .page-quick-sidebar-open &:before {
                                                content: "\e066";
                                        }
                                }
                        }
                }
        }
}

/* Quick sidebar wrapper */

.page-quick-sidebar-wrapper {
        transition: right 0.3s; 
        z-index: $zindex-quick-sidebar;
        position: fixed;
        top: $header-height;
        bottom: 0;
        right: -$quick-sidebar-width;
        width: $quick-sidebar-width;

        .page-footer-fixed & {
                bottom: $page-footer-height; 
        }

        .page-quick-sidebar-full-height & {
                top: 0;
                bottom: 0;
        }

        .page-quick-sidebar-open & {
                transition: right 0.3s; 
                right: 0;
        }
}

/*** 
Quick Sidebar Toggler 
***/

.page-quick-sidebar-toggler {
        overflow: hidden;
        z-index: $zindex-quick-sidebar;
        display: none;
        width: 28px;
        height: 27px;
        position: fixed;
        top: $header-height - 27px; 
        right: 15px;
        text-align: center;
        padding-top: 6px;

        .page-quick-sidebar-open & {
                display: inline-block;
        }

        > i {
                font-size: 17px;
        }
}

/* quick sidebar top position fix for mobile view */
@media (max-width: $screen-xs-min) { /* 480px */
        .page-quick-sidebar-wrapper {
                top: $header-height-xs;
        }

        .page-quick-sidebar-toggler {
                top: $header-height-xs - 27px;
        }
}

.page-header,
.page-sidebar-wrapper,
.page-content-wrapper,
.page-footer {
        transition: margin 0.3s;
}

/* Quick sidebar with push content */

.page-quick-sidebar-open.page-quick-sidebar-push-content {
        .page-sidebar-wrapper {
                transition: margin-left 0.3s;
                margin-left: -$quick-sidebar-width;
        }       

        .page-content-wrapper {
                transition: margin-left 0.3s; 
                margin-left: -$quick-sidebar-width;
        }

        .page-footer {
                transition: margin-right 0.3s;
                margin-right: $quick-sidebar-width;  
                margin-left: - $quick-sidebar-width;    
        }
}


/* Page sidebar reversed */

.page-sidebar-reversed.page-quick-sidebar-open.page-quick-sidebar-push-content {
        .page-sidebar-wrapper {
                transition: margin-right 0.3s;
                margin-right: $quick-sidebar-width;
        }
}

/* Quick sidebar with full height content */

.page-quick-sidebar-open.page-quick-sidebar-push-content.page-quick-sidebar-full-height {
        .page-header {
                transition: margin-left 0.3s;
                margin-left: - $quick-sidebar-width; 
        }
}       

.page-quick-sidebar-open.page-quick-sidebar-push-content.page-footer-fixed:not(.page-quick-sidebar-full-height) {       
        .page-footer {
                margin-left: 0;
                margin-right: 0; 
        }
}

/* Quick sidebar with transparent content */

.page-quick-sidebar-open.page-quick-sidebar-over-content-transparent {
        .page-quick-sidebar-wrapper {
                opacity: 0.9;
        filter: alpha(opacity=90);
        }
}

/* Hide the responsive menu if its shown while the quick sidebar opened on mobile  */

@media (max-width: $screen-sm-max) { /* 991px */
        .page-quick-sidebar-open.page-quick-sidebar-push-content {
                .page-sidebar-wrapper {
                        display: none;
                }
        }       
}

/***
Quick Sidebar Content
***/

.page-quick-sidebar-wrapper {
        overflow: hidden;

        .page-quick-sidebar {

                /* Quick sidebar tabs */
                .nav-justified {
                        margin: 0;
                        padding: 0;

                        > li {
                                display: table-cell !important;
                                width: 1%  !important;

                                > a {
                                        padding: $quick-sidebar-tab-item-padding;
                                        border: 0;
                                        height: $header-height;
                                        font-size: 13px;
                                        text-transform: uppercase;

                    @include border-radius(0); 

                                        > .badge {
                                                position: absolute;
                                                top: 12px;
                                                right: 3px;
                                        }

                                        &:hover {
                                                border: 0;
                                        }
                                }

                                .dropdown-menu {          
                        margin-top: 8px;                   
                        margin-right: 20px;  

                        &:before {
                                                position: absolute;
                                                top: -7px;
                                                right: 19px;
                                                display: inline-block !important;
                                                border-right: 7px solid transparent;
                                                border-left: 7px solid transparent;
                                                border-bottom-color: rgba(0, 0, 0, 0.2);
                                                content: '';
                                        }   

                                        &:after {
                                                position: absolute;
                                                top: -6px;
                                                right: 20px;
                                                display: inline-block !important;
                                                border-right: 6px solid transparent;
                                                border-bottom: 6px solid #fff;
                                                border-left: 6px solid transparent;
                                                content: '';
                                        }
                    }
                        }
                }

                /* Quick sidebar tabs content */
                .nav-justified {
                        > .tab-content {
                                margin: 0;
                                padding: 0;
                        }
                }

                /* Quick sidebar general list heading */
                .list-heading {
                        font-size: 16px;
                        margin: 10px 10px;
                }

                /* Quick sidebar general list-items */
                .list-items {
                        margin: 0;
                        padding: 0;
                        list-style: none;

                        > li {
                                margin: 0;
                        padding: 10px;
                        background: none;
                        border-bottom-width: 1px;
                        border-bottom-style: solid;

                    &:last-child {
                            border-bottom: 0;
                        }

                        &:hover { 
                        }
                }

                &.borderless {
                        li {
                                border: 0;  
                        }
                }
                }

                /* Inner content */
                .inner-content {
                        margin: 10px 10px;
                }

                /* Quick sidebar list */
                .page-quick-sidebar-list {
                        position: absolute !important;
                        width: $quick-sidebar-width !important; 
                        transition: margin 0.3s; 
                }

                /* Quick sidebar list item */
                .page-quick-sidebar-item {
                        position: absolute !important;
                        width: $quick-sidebar-width  !important; 
                        transition: margin 0.3s; 
                        margin-left: $quick-sidebar-width; 

                        .page-quick-sidebar-nav {
                                padding: 15px 10px 0px 10px;

                                .page-quick-sidebar-back-to-list {
                        vertical-align: middle;  
                        display: inline-block;
                        font-size: 14px;

                        > i {
                            font-size: 17px;
                            line-height: 17px;
                            vertical-align: top;
                            margin-right: 3px;
                        }
                    }
                        }            
                }       

                /* Quick sidebar list item shown */
                .page-quick-sidebar-content-item-shown {
                        .page-quick-sidebar-list {
                                transition: margin 0.3s; 
                                margin-left: - $quick-sidebar-width; 

                                .slimScrollBar,
                                .slimScrollRail {
                                        display: none !important;  
                                }
                        }

                        .page-quick-sidebar-item {
                                transition: margin 0.3s;
                                margin-left: 0;  
                        } 
                }

                /* Quick sidebar chat */
                .page-quick-sidebar-chat {
                        .page-quick-sidebar-chat-users {
                                padding: 10px 0;
                                position: relative;
                                                
                                .media-list {
                                        .media {
                                                padding: 12px 10px 11px 10px;

                                                .media-object {                                                 
                                            border-radius: 50% !important;
                                                        width:  $quick-sidebar-width/7;
                                                        opacity: 0.8;
                                                filter: alpha(opacity=80);
                                                        float: left;
                                                        margin-right: 10px;

                                                        @include clearfix();
                                                }

                                                &:hover {
                                                        cursor: pointer;

                                                        .media-object {
                                                                opacity: 1;
                                                filter: alpha(opacity=100);
                                                        }
                                                }

                                                .media-body {

                                                        .media-heading {
                                                                margin: 5px 0 0 0;
                                                                font-size: 14px;
                                                        }

                                                        .media-heading-sub {
                                                                font-size: 11px;
                                                                text-transform: uppercase;
                                                        }

                                                        .media-heading-small {
                                                                font-size: 10px;                                                                
                                                        }
                                                }

                                                .media-status {
                                                        margin-top: 10px; 
                                                        right: 10px;
                                                        position: absolute;
                                                        display: inline-block;
                                                }
                                        }
                                }
                        }

                        .page-quick-sidebar-chat-user {

                                .page-quick-sidebar-chat-user-messages { 
                                        padding: 0px 10px;
                                        position: relative;

                                        .post {
                                                transition: display 0.3s;
                                        padding: 5px 0;
                                        margin: 10px auto;
                                        font-size: 12px;

                                        .body {
                                            display: block;
                                        }
        
                                        .avatar {
                                            width:$quick-sidebar-width/7;
                                            border-radius: 50% !important;
                                        }

                                        &.in .avatar {
                                            float: left;
                                            margin-right: 10px;
                                        }

                                        &.out .avatar {
                                            float: right;
                                            margin-left: 10px;
                                        }

                                        .name {
                                            font-size: 12px;
                                            font-weight: 300;
                                        }
                                        
                                        .datetime {
                                            font-size: 12px;
                                            font-weight: 300;
                                            text-style: italic;
                                        }
                                       
                                        .message {                      
                                            display: block;
                                            padding: 5px;
                                            position: relative;
                                        }

                                        &.in {
                                                .message {
                                                text-align: left;
                                                margin-left: 55px;
                                      
                                                .arrow {
                                                        display: block;
                                                        position: absolute;
                                                        top: 9px;
                                                        left: -6px;
                                                        width: 0;
                                                        height: 0;
                                                        border-top: 6px solid transparent;
                                                        border-bottom: 6px solid transparent;
                                                        border-right-width: 6px;
                                                        border-right-style: solid;
                                                }
                                            }
                                        }

                                        &.out {
                                            .message {
                                                margin-right: 55px;
                                                text-align: right;

                                                .arrow {
                                                    display: block;
                                                    position: absolute;
                                                    top: 9px;
                                                    right: -6px;
                                                    border-top: 6px solid transparent;
                                                    border-bottom: 6px solid transparent;
                                                    border-left-width: 6px;
                                                        border-left-style: solid;
                                                }  
                                            }
                                  
                                            .name, 
                                            .datetime {
                                                text-align: right;
                                            }
                                        }
                                    }
                                }

                                .page-quick-sidebar-chat-user-form {
                                        padding: 20px 10px 15px 10px;

                                        .input-group {
                                                .form-control {
                                                        font-size: 13px;   
                                                }
                                        }
                                }
                        }
                }

                /* Quick sidebar alerts */
                .page-quick-sidebar-alerts {
                        
                        .page-quick-sidebar-alerts-list {
                                padding: 10px 0;
                                position: relative;

                    .feeds {
                        li {                            
                            .label {
                                margin-top: 5px;
                            }

                            .desc {
                                padding: 0;
                            }
                        }
                    }
                }
                }

                /* Quick sidebar settings */
                .page-quick-sidebar-settings {

                        .page-quick-sidebar-settings-list {
                                padding: 10px 0;
                                position: relative;

                                .list-items {
                                        li {
                                                .bootstrap-switch {
                                                        margin-top: -3px;
                                                        float: right;
                                                        border: 0;
                                                        min-width: 59px;
                                                }       

                                                .form-control {
                                                        width: 75px !important;                                                 
                                                        padding: 4px 4px !important;
                                                        float: right;
                                                        border: 0;
                                                        margin-top: -4px;
                                                }

                                                select.form-control {                                                           
                                                        padding: 4px 0px !important;
                                                }
                                        }
                                }
                        }                               
                }
        }
}