lobipanel/less/main.less

jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.

.tooltip{
    z-index: 20000;
}
body.lobipanel-minimized{
    padding-bottom: @lobipanel-toolbar-height;
}

.lobipanel{
    position: relative;
    margin-bottom: @lobipanel-panel-margin-bottom;
    >.panel-heading{
        padding: 5px;
        position: relative;
        .border-top-radius(0px);
        >.panel-title{
            float: left;
            max-width: calc(%(~"100% - %a", @lobipanel-panel-control-width));
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: @lobipanel-panel-title-font-size;
            line-height: @lobipanel-panel-title-line-height;
            padding-left: @lobipanel-panel-title-padding-horizontal;
            h1, h2, h3, h4, h5, h6{
                margin: 0;
                line-height: @lobipanel-panel-title-line-height;
            }
            input{
                color: inherit;
                line-height: @lobipanel-panel-title-line-height;
                border-radius: 2px;
                padding: 0 5px;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.2);
                border: 1px solid @brand-primary;
                outline: 0;
                &:focus{
                    background-color: rgba(0, 0, 0, 0.15);
                }
            }
        }
        .dropdown{
            display: inline-block;
            float: right;
            position: relative;
            .dropdown-menu{
                left: auto;
                right: 0;
                min-width: 0;
                margin-top: 0;
                border-radius: 0;
                >li>a{
                    .control-title{
                        display: inline-block;
                        margin-left: 15px;
                    }
                }
            }
            .dropdown-toggle{
                border: none;
                outline: 0;
                background-color: transparent;
                text-align: center;
                padding: 0;
                width: @lobipanel-panel-control-width;
                font-size: @lobipanel-panel-control-font-size;
                .transition(all @lobipanel-transition-duration);
                .panel-control-icon{
                    top: 0;
                    line-height: @lobipanel-panel-title-line-height;
                }
                &:hover,
                &:hover:focus{
                    text-shadow: @lobipanel-panel-control-hover-text-shadow;
                    background-color: @lobipanel-panel-control-hover-bg;
                }
            }
            &.open{
                .dropdown-toggle{
                    text-shadow: @lobipanel-panel-control-hover-text-shadow;
                    background-color: @lobipanel-panel-control-hover-bg;
                }
            }
        }
        .clearfix();
    }
    @media screen and (min-width: @screen-sm-min){
        .panel-heading{
            .panel-title{
                max-width: calc(%(~"100% - %a", @lobipanel-panel-control-width * 6));
            }
            .lobipanel-dropdown-screen-lg();
        }
    }
    >.panel-body{
        overflow: auto;
        position: relative;
    }
    .panel-loader{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.8;
    }
    &.panel-collapsed{
        >.panel-heading{
            border-bottom: none;
            .dropdown{
                .dropdown-menu{
                    >li{
                        >a{
                            &[data-func="unpin"],
                            &[data-func="reload"],
                            &[data-func="expand"]{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    &.panel-expanded,
    &.panel-unpin,
    &.panel-minimized.panel-unpin{
        margin-bottom: 0;
    }
    &.panel-unpin{
        overflow: hidden;
        position: absolute;
        z-index: @lobipanel-basic-z-index;
        .box-shadow(@lobipanel-panel-unpin-box-shadow);
        >.panel-heading{
            cursor: move;
        }
        &.panel-minimized{
            float: left;
            position: static;
            border-radius: 0;
            .box-shadow(none);
            min-width: @lobipanel-panel-minimized-min-width;
            margin-right: @lobipanel-panel-minimized-margin-right;
            >.panel-heading{
                padding: 0;
                cursor: pointer;
                border-bottom: none;
                .panel-title{
                    max-width: calc(%(~"100% - %a", @lobipanel-panel-control-width * 2));
                    h1,h2,h3,h4,h5,h6{
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .lobipanel-dropdown-screen-lg();
                .dropdown{
                    .dropdown-menu{
                        >li{
                            >a{
                                display: none;
                                &[data-func="close"],
                                &[data-func="expand"]{
                                    display: inline-block;
                                }
                            }
                        }
                    }
                }
            }
            >.panel-body, 
            >.panel-footer{
                display: none !important;
            }
        }
    }
    &.panel-expanded{
        >.panel-heading{
            cursor: default;
            .dropdown{
                .dropdown-menu{
                    >li{
                        >a{
                            &[data-func="unpin"],
                            &[data-func="minimize"]{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
        &.panel-unpin{
            >.panel-heading{
                .panel-control[data-func="minimize"]{
                    display: block;
                }
            }
        }
    }
}
.lobipanel-minimized-toolbar{
    position: fixed;
    height: @lobipanel-toolbar-height;
    padding: @lobipanel-toolbar-padding;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    background: @lobipanel-toolbar-bg;
}
.lobipanel-placeholder{
    background-color: #f9f5d1;
    border: 1px dashed #919191;
    margin-bottom: @lobipanel-panel-margin-bottom;
}

.lobipanel-dropdown-screen-lg(){
    .dropdown{
        .dropdown-menu{
            position: static;
            display: inline-block;
            border: none;
            padding: 0;
            margin: 0;
            min-width: 0;
            width: auto;
            .box-shadow(none);
            background: transparent;
            >li{
                display: inline-block;
                >a{
                    cursor: pointer;
                    color: inherit;
                    padding: 0;
                    outline: 0;
                    text-align: center;
                    width: @lobipanel-panel-control-width;
                    font-size: @lobipanel-panel-control-font-size;
                    .transition(all @lobipanel-transition-duration);
                    .panel-control-icon{
                        top: 0;
                        line-height: @lobipanel-panel-title-line-height;
                    }
                    .control-title{
                        display: none;
                    }
                    &:hover, &:focus:hover{
                        text-shadow: @lobipanel-panel-control-hover-text-shadow;
                        background-color: @lobipanel-panel-control-hover-bg;
                    }
                    &:focus{
                        text-shadow: none;
                        background-color: transparent;
                    }
                }
            }
        }
        .dropdown-toggle{
            display: none;
        }
    }
}

.lobipanel-parent-sortable{
    min-height: 20px;
}