metro4/source/components/head-bar/head-bar.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";

@headerSize: 56px;

.head-bar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: @white;
    color: @dark;
    height: @headerSize;
    z-index: @zindex-fixed;
    padding: 0 4px;
    .shadow(1);
}

.head-bar {
    .app-title {
        height: 48px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 4px;
        line-height: 48px;
        color: inherit;
        font-size: 20px;
        font-weight: 100;
    }
    .app-title:nth-child(1) {
        padding-left: 10px;
    }
}

.head-bar {
    .header-container {
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }
}

.head-bar {
    .tool-button {
        margin: 0 4px;
        background-color: inherit;
        color: inherit;

        .icon {
            width: 24px;
            height: 24px;
            font-size: 24px;
        }
    }
}

.head-bar {
    &.more {
        height: @headerSize * 2;

        & .app-title {
            position: absolute;
            bottom: 22px;
            left: 74px;
            height: 28px;
            font-size: 24px;
        }
    }
}

.head-bar {
    .header-container {
        .input {
            float: left;
            margin-left: 20px;
            width: ~"calc(100% - 80px)";
            border: none;

            input {
                border: none;
            }

            input, input::-webkit-input-placeholder {
                color: white;
            }
        }
    }
}