AdminLte/less/boxes.less

/*
    component: Boxes
-------------------------
*/

.box {
    position: relative;
    background: #ffffff;
    border-top: 2px solid darken(@box-border-color, 20%);
    margin-bottom: 20px;
    .border-radius(@box-border-radius);
    width: 100%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

    // Box color variations
    &.box-primary {
        border-top-color: @light-blue;
    }
    &.box-info {
        border-top-color: @aqua;
    }
    &.box-danger {
        border-top-color: @red;
    }
    &.box-warning {
        border-top-color: @yellow;
    }
    &.box-success {
        border-top-color: @green;
    }

    // fixed height to 300px
    &.height-control {
        .box-body {
            max-height: 300px;
            overflow: auto;
        }
    }

    // Box header
    .box-header {
        position: relative;
        .clearfix();
        //Add top left and top right border radius
        .border-radius(@box-border-radius; @box-border-radius; 0; 0);
        border-bottom: 0px solid @box-border-color;
        color: #444;
        padding-bottom: 10px;
        // Icons and box title
        > .fa, > .glyphicon, > .ion,
        .box-title {
            display: inline-block;
            padding: 10px 0px 10px 10px;
            margin: 0;
            font-size: 20px;
            font-weight: 400;
            float: left;
            cursor: default;
            //text-transform: capitalize;
        }
        a {
            color: #444;
        }
        // Box Tools
        > .box-tools {
            padding: 5px 10px 5px 5px;
        }


    }

    // Box body
    .box-body {
        padding: 10px;
        .border-radius(0; 0; @box-border-radius; @box-border-radius);
        // Tables within the box body
        > table, > .table {
            margin-bottom: 0;
        }

        &.chart-responsive {
            width: 100%;
            overflow: hidden;
        }

        // Charts
        > .chart {
            position: relative;
            overflow: hidden;
            width: 100%;
            svg, canvas { width: 100%!important;}
        }

        // Calendar within the box body
        .fc {
            margin-top: 5px;
        }
        // Calendar title
        .fc-header-title h2 {
            font-size: 15px;
            line-height: 1.6em;
            color: #666;
            margin-left: 10px;
        }
        .fc-header-right {
            padding-right: 10px;
        }
        .fc-header-left {
            padding-left: 10px;
        }
        // Calendar table header cells
        .fc-widget-header {
            background: #fafafa;
            box-shadow: inset 0px -3px 1px rgba(0,0,0,0.02);
        }
        .fc-grid {
            width: 100%;
            border: 0;
        }
        .fc-widget-header:first-of-type,
            .fc-widget-content:first-of-type {
            border-left: 0;
            border-right: 0;
        }
        .fc-widget-header:last-of-type,
            .fc-widget-content:last-of-type {
            border-right: 0;
        }
        // tables in the box body
        .table {
            margin-bottom: 0;
        }

        .full-width-chart {
            margin: -19px;
        }
        &.no-padding .full-width-chart {
            margin: -9px;
        }


    }

    // Box footer
    .box-footer {
        border-top: 1px solid @box-border-color;
        .border-radius(0; 0; @box-border-radius; @box-border-radius);
        padding: 10px;
        background-color: @box-footer-bg;
    }

    //
    //    SOLID BOX:
    //------------------
    //use this class to get a colored header and borders
    //

    &.box-solid {

        border-top: 0px;
        > .box-header {
            padding-bottom: 0px!important;
            .btn.btn-default {
                background: transparent;
            }
        }

        // Box color variations
        &.box-primary {
            .box-solid-variant(@light-blue);
        }
        &.box-info {
            .box-solid-variant(@aqua);
        }
        &.box-danger {
            .box-solid-variant(@red);
        }
        &.box-warning {
            .box-solid-variant(@yellow);
        }
        &.box-success {
            .box-solid-variant(@green);
        }

        > .box-header > .box-tools > .btn {
            border: 0;
            box-shadow: none;
        }

        // collapsed mode
        &.collapsed-box {
            .box-header {
                .border-radius(@box-border-radius);
            }
        }

        // Fix font color for tiles
        &[class*='bg'] {
            > .box-header {
                color: #fff;
            }
        }

    }

    //BOX GROUP
    .box-group {
        > .box {
            margin-bottom: 5px;
        }
    }


    // jQuery Knob in a box
    .knob-label {
        text-align: center;
        color: #333;
        font-weight: 100;
        font-size: 12px;
        margin-bottom: 0.3em;
    }

    //
    //  Widgets
    //-----------
    //

    // Widget: TODO LIST

    .todo-list {
        margin: 0;
        padding: 0px 0px;
        list-style: none;
        // Todo list element
        > li {
            .border-radius(2px);
            padding: 10px;
            background: @table-striped-color;
            margin-bottom: 2px;
            border-left: 2px solid #e6e7e8;
            color: #444;
            &:last-of-type {
                margin-bottom: 0;
            }
            // Color varaity
            &.danger {
                border-left-color: @red;
            }
            &.warning {
                border-left-color: @yellow;
            }
            &.info {
                border-left-color: @aqua;
            }
            &.success {
                border-left-color: @green;
            }
            &.primary {
                border-left-color: @light-blue;
            }

            > input[type='checkbox']  {
                margin: 0 10px 0 5px;
            }

            .text {
                display: inline-block;
                margin-left: 5px;
                font-weight: 600;
            }

            // Time labels
            .label {
                margin-left: 10px;
                font-size: 9px;
            }

            // Tools and options box
            .tools {
                display: none;
                float: right;
                color: @red;
                // icons
                > .fa, > .glyphicon, > .ion {
                    margin-right: 5px;
                    cursor: pointer;
                }

            }
            &:hover .tools {
                display: inline-block;
            }

            &.done {
                color: #999;
                .text {
                    text-decoration: line-through;
                    font-weight: 500;
                }

                .label {
                    background: @gray!important;
                }
            }
        }

        .handle {
            display: inline-block;
            cursor: move;
            margin: 0 5px;
        }

    }
    // END TODO WIDGET

    // Chat widget
    .chat {
        padding: 5px 20px 5px 10px;

        .item {
            .clearfix();
            margin-bottom: 10px;
            // The image
            > img {
                //display: inline-block;
                width: 40px;
                height: 40px;
                border: 2px solid transparent;
                .border-radius(50%)!important;
                &.online {
                    border: 2px solid @green;
                }
                &.offline {
                    border: 2px solid @red;
                }
            }

            // The message body
            > .message {
                margin-left: 55px;
                margin-top: -40px;
                > .name {
                    display: block;
                    font-weight: 600;
                }
            }

            // The attachment
            > .attachment {
                .border-radius(@attachment-border-radius);
                background: #f0f0f0;
                margin-left: 65px;
                margin-right: 15px;
                padding: 10px;
                > h4 {
                    margin: 0 0 5px 0;
                    font-weight: 600;
                    font-size: 14px;
                }
                > p, > .filename {
                    font-weight: 600;
                    font-size: 13px;
                    font-style: italic;
                    margin: 0;

                }
                .clearfix();
            }
        }

    }
    // END CHAT WIDGET

    // Box overlay for LOADING STATE effect
    > .overlay, > .loading-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    > .overlay {
        z-index: 1010;
        background: rgba(255, 255, 255, 0.7);
    }

    > .overlay.dark {
        background: rgba(0, 0, 0, 0.5);
    }

    > .loading-img {
        z-index: 1020;
        background: transparent url('../img/ajax-loader1.gif') 50% 50% no-repeat;
    }

}