metro4/source/components/panel/panel.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.panel {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    background-color: @white;
    border: 1px solid @borderColor;
}

.panel {

    .panel-title, .panel-content {
        position: relative;
    }

    .panel-title {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        order: 1;
        height: 2.625rem;
        border-bottom: 1px solid @borderColor;
        line-height: 2.625rem;
        cursor: default;
        flex-shrink: 0;

        .icon {
            order: 1;
            height: 2.625rem;
            line-height: 2.625rem;
            width: 2.625rem;
            border-right: 1px solid @borderColor;
            flex-shrink: 0;
            color: inherit;
            text-align: center;
        }

        img.icon {
            padding: .625rem;
        }

        .caption {
            order: 2;
            width: 100%;
            padding: 0 .8125rem;
            color: inherit;
            .text-ellipsis();
        }

        .dropdown-toggle {
            order: 4;
            height: 100%;
            width: 2.625rem;
            border-left: 1px solid @borderColor;
            flex-shrink: 0;
        }

        .custom-buttons {
            order: 3;
            display: flex;
            flex-flow: row nowrap;
        }

        .btn-custom {
            width: 42px;
            height: 42px;
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;

            & > * {
                line-height: 1;
                width: 16px;
                height: 16px;
                font-size: 16px;
            }

            &:focus, &:active {
                box-shadow: none!important;
            }
        }
    }

    .panel-content {
        display: block;
        order: 2;
        height: auto;
        padding: .5rem;
        //overflow: auto;
    }
}