erpnext/public/less/pos.less

@import "../../../../frappe/frappe/public/less/variables.less";

.pos {
	// display: flex;
	padding: 15px;
}

.cart-container {
	padding: 0 15px;
	// flex: 2;
	display: inline-block;
	width: 39%;
	vertical-align: top;
}

.item-container {
	padding: 0 15px;
	// flex: 3;
	display: inline-block;
	width: 60%;
	vertical-align: top;
}

.search-field {
	width: 60%;

	input::placeholder {
		font-size: @text-medium;
	}
}

.item-group-field {
	width: 40%;
	margin-left: 15px;
}

.cart-wrapper {
	margin-bottom: 10px;
	.list-item__content:not(:first-child) {
		justify-content: flex-end;
	}
}

.cart-items {
	height: 200px;
	overflow: auto;

	.list-item.current-item {
		background-color: @light-yellow;
	}

	.list-item.current-item.qty input {
		border: 1px solid @brand-primary;
		font-weight: bold;
	}

	.list-item.current-item.disc .discount {
		font-weight: bold;
	}

	.list-item.current-item.rate .rate {
		font-weight: bold;
	}

	input {
		height: 22px;
		font-size: @text-medium;
	}
}

.fields {
	display: flex;
}

.pos-items-wrapper {
	max-height: 480px;
	overflow-y: auto;
}

.pos-items {
	overflow: hidden;
}

.pos-item-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.image-view-container {
	display: block;
}

.image-view-container .image-field {
	height: auto;
}

.empty-state {
	height: 100%;
	position: relative;

	span {
		position: absolute;
		color: @text-muted;
		font-size: @text-medium;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

@keyframes yellow-fade {
	0% {background-color: @light-yellow;}
	100% {background-color: transparent;}
}

.highlight {
	animation: yellow-fade 1s ease-in 1;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

// number pad

.number-pad {
	border-collapse: collapse;
	cursor: pointer;
	display: table;
	margin: auto;
}
.num-row {
	display: table-row;
}
.num-col {
	display: table-cell;
	border: 1px solid @border-color;

	& > div {
		width: 50px;
		height: 50px;
		text-align: center;
		line-height: 50px;
	}

	&.active {
		background-color: @light-yellow;
	}

	&.brand-primary {
		background-color: @brand-primary;
		color: #ffffff;
	}
}