metro4/less/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;
        }

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

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