erpnext/public/less/pos.less

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

[data-route="point-of-sale"] {
	.layout-main-section-wrapper {
		margin-bottom: 0;
	}

	.pos-items-wrapper {
		max-height: ~"calc(100vh - 210px)";
	}
}

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

.list-item {
	min-height: 40px;
	height: auto;
}

.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;
	}

	.list-item--head .list-item__content:nth-child(2) {
		flex: 1.5;
	}
}

.cart-items {
	height: 150px;
	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;
	}

	.list-item .quantity {
		flex: 1.5;
	}

	input {
		text-align: right;
		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;
	position: relative;
	width: 25%;
}

.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;
	}
}

// taxes, totals and discount area
.discount-amount {
	.discount-inputs {
		display: flex;
		flex-direction: column;
		padding: 15px 0;
	}

	input:first-child {
		margin-bottom: 10px;
	}
}

.taxes-and-totals {
	border-top: 1px solid @border-color;

	.taxes {
		display: flex;
		flex-direction: column;
		padding: 15px 0;
		align-items: flex-end;

		& > div:first-child {
			margin-bottom: 10px;
		}
	}
}

.grand-total {
	border-top: 1px solid @border-color;

	.list-item {
		height: 60px;
	}

	.grand-total-value {
		font-size: 24px;
	}
}