admin/addon/cashier/source/os/common/css/common.scss

// 基础flex布局
.uni-flex {
	display: flex;
	flex-direction: row;
}
.uni-flex-item {
	flex: 1;
}
.uni-row {
	flex-direction: row;
}
.uni-column {
	flex-direction: column;
}

// 高度填充
.height-all {
	min-height: 100%;
}

// 公共区块样式
.common-wrap {
	box-sizing: border-box;
	background: #fff;
	// margin: .15rem .2rem;
	
	// &:first-child {
	// 	margin-right: 0;
	// }
	
	// &:last-child {
	// 	margin-right: .14rem;
	// }
}

// 公共滚动条样式
.common-scrollbar, .common-scrollbar .uni-scroll-view {
	&::-webkit-scrollbar {
		width: .06rem;
		height: .06rem;
		background-color: rgba($color: #000000, $alpha: 0);
	}
	
	&::-webkit-scrollbar-button {
	    display: none;
	}
	
	&::-webkit-scrollbar-thumb {
		border-radius: .06rem;
		box-shadow: inset 0 0 .06rem rgba(45,43,43,.45);
		background-color: #ddd;
	}
	
	&::-webkit-scrollbar-track {
		background-color: transparent;
	}
}

// 公共头像样式
.common-headimg {
	overflow: hidden;
	border-radius: 50%;
	
	image {
		width: 100%;
	}
}

// 公共tab切换
.common-tab-wrap {
	height: .53rem;
	border-bottom: .01rem solid #E6E6E6;
	display: flex;
	padding: 0 .2rem;
	position: relative;
	
	.tab-item {
		height: .53rem;
		line-height: .53rem;
		padding: 0 .2rem;
		cursor: pointer;
		
		&:first-child {
			padding-left: 0;
		}
		
		&.active-bar {
			color: $primary-color;
		}
	}
	
	.active {
		position: absolute;
		width: 0;
		height: .03rem;
		border-radius: .03rem;
		background: $primary-color;
		bottom: -.01rem;
		left: 0;
		transition: transform .3s cubic-bezier(.645,.045,.355,1);
	}
}

// 公共表格操作样式
.common-table-action {
	text {
		margin-left: .1rem;
		color: $primary-color;
		cursor: pointer;
		transition: all .3s;
		
		&:hover {
			color: rgba($color: $primary-color, $alpha: 0.6);
		}
	}
}

// 公共表格批量操作样式
.common-table-batch {
	display: flex;
	
	button {
		width: auto!important;
		margin: .1rem 0 .1rem .1rem!important;
		font-size: .12rem;
	}
}

@mixin button {
	font-size: .14rem;
	transition: .1s;
	border-radius: .02rem;
	border-width: .01rem!important;
	
	&:after{
		border-radius: .02rem!important;
	}
	
}

// 主要按钮
.primary-btn {
	@include button;
	background: $primary-color!important;
	color: #fff!important;
	
	&:hover {
		background-color: rgba($color: $primary-color, $alpha: 0.6)!important;
	}
	
	&[disabled] {
		background: rgba($color: $primary-color, $alpha: 0.6)!important;
		border-color: rgba($color: $primary-color, $alpha: 0.6)!important;
		color: #fff!important;
		
		&:hover {
			background: rgba($color: $primary-color, $alpha: 0.6)!important;
			border-color: rgba($color: $primary-color, $alpha: 0.6)!important;
			color: #fff!important;
		}
	}
}

// 默认按钮
.default-btn {
	@include button;
	background: #fff!important;
    color: #606266!important;
	border-color: #606266!important;
	
	&:hover {
		color: $primary-color!important;
		border-color: $primary-color!important;
	}
	
	&:hover:after{
		border-color: $primary-color!important;
	}
	
	
	
	&[plain] {
		color: $primary-color!important;
		border-color: $primary-color!important;
		background-color: rgba($color: $primary-color, $alpha: 0.1)!important;
		
		&:after{
			border-color: $primary-color!important;
		}
		
		&:hover {
			background: $primary-color!important;
			color: #fff!important;
		}
		
		&[disabled] {
			color: #ddd!important;
			border-color: #e6e6e6!important;
			background: #f5f5f5!important;
			
			&:after{
				border-color: #e6e6e6!important;
			}
			
			&:hover {
				color: #ddd!important;
				border-color: #e6e6e6!important;
			}
		}
	}
	
	&[disabled] {
		color: #ddd!important;
		border-color: #e6e6e6!important;
		background: #f5f5f5!important;
		
		&:after{
			border-color: #e6e6e6!important;
		}
		
		&:hover {
			color: #ddd!important;
			border-color: #e6e6e6!important;
		}
	}
}

/* 公共数字键盘 */
.keyboard-wrap {
	width: 5rem;
	margin-top: 0.2rem;
	display: flex;

	.num-wrap {
		flex: 1;
		width: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.key-item {
			margin: 0.1rem 0.1rem 0 0;
			background: #f5f5f5;
			min-width: calc((100% - 0.3rem) / 3);
			text-align: center;
			padding: 0.15rem 0;
			border-radius: 0.05rem;
			font-size: 0.16rem;
			font-weight: bold;
			transtion: all 0.3s;
			cursor: pointer;

			&:hover {
				background: #ddd;
			}

			&.empty:hover {
				background: #f5f5f5;
			}
		}
	}

	.operation-wrap {
		display: flex;
		flex-direction: column;
		width: 1rem;

		.delete,
		.confirm {
			background: #f5f5f5;
			min-width: calc((100% - 0.3rem) / 3);
			text-align: center;
			padding: 0.15rem 0;
			margin-top: 0.1rem;
			border-radius: 0.05rem;
			font-size: 0.16rem;
			cursor: pointer;
			transtion: all 0.3s;

			&:hover {
				background: #ddd;
			}
		}

		.confirm {
			flex: 1;
			background: $primary-color;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;

			&:hover {
				background: rgba($color: $primary-color, $alpha: 0.9);
			}
		}
	}
}

/* 单行超出隐藏 */
.using-hidden {
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	white-space: break-spaces;
}
/* 多行超出隐藏 */
.multi-hidden {
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}