metro4/less/window.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";

.window {
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    background-color: @winFlatBackgroundColor;
    color: @dark;
    border: 1px @winFlatBorderColor solid;
    z-index: 1;
}

.window-caption {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    height: 2.25rem;
    line-height: 2.25rem;
    padding: 0;
    border-bottom: 1px @transparent solid;
    cursor: default;
    vertical-align: middle;
    background-color: @winCaptionBackground;
    color: @winCaptionColor;
    user-select: none;
}

.window-caption {
    .title {
        font-size: .875rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        padding-left: 4px;
    }

    .icon {
        width: 34px;
        height: 34px;
        text-align: center;
        flex-shrink: 0;
        display: block;
        position: relative;

        * {
            width: 1rem;
            font-size: 1rem;
            line-height: 34px;
            text-align: center;
        }
    }

    * + .title {
        padding-left: 0;
    }

    .buttons {
        height: 100%;
        margin-left: auto;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
    }
}

.window-caption {
    .buttons {
        .btn-min, .btn-max, .btn-close, .btn-custom {
            position: relative;
            height: 34px;
            width: 34px;
            text-align: center;
            vertical-align: middle;
            font-size: 1rem;
            font-weight: normal;
            padding: 0 0 .625rem 0;
            outline: none;
            cursor: pointer;
            display: block;
            border: 1px solid @transparent;
            margin: 1px 0;
        }

        .sys-button {
            background-color: @transparent;
            color: @white;
            &:hover {
                background-color: @hoverBackgroundLight1;

                &::before {
                    border-color: @white;
                    color: @white;
                }
            }
            &:active {
                background-color: @hoverBackgroundLight3;
                color: @white;
            }
        }

        .btn-close {
            &:hover {
                background-color: @winCloseButtonColor;
                color: @white;
                &::before {
                    color: @white;
                }
            }
            &:active {
                background-color: @winCloseButtonActiveColor;
                color: @white;
            }
            &::before {
                border-color: @winFlatSystemButtonRestColor;
                content: '\D7';
                position: absolute;
                line-height: 34px;
                vertical-align: middle;
                left: 50%;
                top: -4px;
                margin-left: -.32em;
                color: #fff;
                font-size: 1.5rem;
            }
        }

        .btn-min, .btn-max {
            &::before {
                display: block;
                position: absolute;
                width: .625rem;
                height: .625rem;
                border: 0 #fff solid;
                border-bottom-width: 2px;
                content: ' ';
                bottom: .72rem;
                left: 50%;
                margin-left: -.3rem;
                top: auto;
            }
        }

        .btn-max {
            &::before {
                height: .575rem;
                border: 1px #fff solid;
                border-top-width: 2px;
            }
        }

        .btn-custom {
            min-width: 34px;
            width: auto;
            flex-shrink: 0;
        }

        .btn-custom {order: 1;}
        .btn-min {order: 2;}
        .btn-max {order: 3;}
        .btn-close {order: 4;}
    }
}

.window-content {
    overflow: auto;
    height: ~"calc(100% - 2.25rem)";
}

.window-status {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: .1rem .5rem;
    background-color: @light;
    color: @dark;
    height: 1.2rem;
    font-size: .8rem;
}

.window {
    &.info {
        .window-caption {
            background-color: @cyan;
            color: @white;
        }
    }
    &.alert {
        .window-caption {
            background-color: @red;
            color: @white;
        }
    }
    &.warning {
        .window-caption {
            background-color: @orange;
            color: @white;
        }
    }
    &.success {
        .window-caption {
            background-color: @green;
            color: @white;
        }
    }
}

.window {
    &.focused {
        .win-shadow();
    }
}

.window {
    &.modal {
        z-index: @zindex-modal;
    }
}

.window {
    &.minimized {
        max-width: 12rem;
        max-height: 2.25rem;

        .window-caption {
            border-bottom: none!important;
        }

        .window-content {
            display: none!important;
        }

        .window-caption .btn-custom {
            display: none;
        }
    }

    &.maximized {
        top: 0!important;
        left: 0!important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        max-width: none !important;

        .btn-max {
            &::before {
                border: 1px #fff solid;
                z-index: 2;
            }
            &::after {
                display: block;
                position: absolute;
                width: .625rem;
                height: .625rem;
                border-top: 1px #fff solid;
                border-right: 1px #fff solid;
                content: ' ';
                bottom: .375rem;
                right: 7px;
                top: 8px;
                z-index: 1;
            }
        }
    }

    &.resizable {
        min-width: 12rem;
        min-height: 2.25rem;
    }
}