zmp-ui/header/styles/index.less

Zalo Mini App framework

@import './variables.less';
@import './mixins.less';

.@{header-prefix-cls}{
	position: fixed;
	top: 0;
	left: 0;
	height: @header-height;
	width: 100%;
	max-width: 100vw;
	min-width: 100vw;
	overflow: hidden;
	box-sizing: border-box;
	background: @light-header-background-color;
	color: @light-header-color;
	padding: @header-spacing;
	display: flex;
	align-items: center;
	margin-bottom: 1px;
	z-index: 999;
	&::after{
		position: absolute;
		width: 100%;
		height: @header-divider-height;
		background: @light-header-divider;
		content: '';
		left: 0;
		bottom: 0;
	}
	&-title{
		flex: 1;
		overflow:hidden;
		text-overflow:ellipsis;
		font-size: @header-title-font-size;
		line-height: @header-title-line-height;
		font-weight: @header-title-font-weight;
		white-space: nowrap;
		display: inline-block;
	}
	&-back{
		width: @header-back-icon-size;
		height: @header-back-icon-size;
		position: relative;
		display: inline-block;
	}
	&-back-btn{
		padding: 0;
		margin: 0;
		width: 100%;
		height:100%;
	}
	> * {
		&:not(:first-child){
			margin-left: @header-item-space;
		}
	}
}

.if-dark-theme({
	@import './variables.less';
@import './mixins.less';

.@{header-prefix-cls}{
	background: @dark-header-background-color;
	color: @dark-header-color;
	&::after{
		background: @dark-header-divider;
	}
}
});