@import "./variables.less";
@import "./core.less";

@HEADERSIZE: 44px;

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: @HEADERSIZE;
    z-index: 1030;
    background-color: @HEADER-BG-COLOR;
    p{
    	position: absolute;
    	top: 0;
    	left: 55px;
    	right: 55px;
    	line-height: @HEADERSIZE;
    	.text_oneRow_ellipsis();
    	color: @HEADER-TITLE-COLOR;
    	font-size: @HEADER-TITLE-FONTSIZE;
        text-align: center;
    }
    span{
    	color: @HEADER-TEXT-COLOR;
        font-size: @HEADER-TEXT-FONTSIZE;
    	width: 55px;
    	line-height: @HEADERSIZE;
    	display: block;
    	//active style
        &:active{
            opacity: 0.5;    
        }
    }
    .header-left{
    	float: left;
    	padding-left: 8px;
    }
    .header-right{
    	float: right;
    	padding-right: 8px;
    	text-align: right;
    }
    .icon{
        color: @HEADER-ICON-COLOR;
    	.iconfont(@HEADER-ICON-FONTSIZE,@HEADERSIZE);
        &.header-left{
            padding-left: 5px;
        }
        &.header-right{
            padding-right: 5px;
        }    
    }
    ~ .content{
    	padding-top: @HEADERSIZE;
    }
}