META-INF.resources.components.mini_cart._mini_cart_item.scss Maven / Gradle / Ivy

Go to download
.mini-cart-item {
	$price-size: 70px;

	align-items: center;
	border-bottom: 1px solid rgba(180, 187, 201, 0.2);
	display: grid;
	font-size: 12px;
	grid-template-areas:
		'info quantity price delete'
		'errors errors errors errors';
	grid-template-columns: auto 120px minmax(min-content, 100px) min-content;
	overflow: visible;
	position: relative;
	transition:
		height 0.2s ease-in,
		padding 0.1s ease-in;
	width: 100%;

	.mini-cart-item-details {
		align-items: center;
		color: inherit;
		display: flex;
		grid-area: info;
		margin: 1rem;
		text-decoration: inherit;
	}

	.mini-cart-item-anchor {
		z-index: 10;
	}

	.mini-cart-item-alignment {
		align-items: center;
		display: flex;
		min-height: 86px;
	}

	.mini-cart-item-actions {
		font-size: 1rem;
		padding-right: 0.3rem;
	}

	.mini-cart-item-thumbnail {
		align-self: flex-start;
		background-position: center center;
		background-size: cover;
		border-radius: 4px;
		height: 70px;
		min-height: 70px;
		min-width: 70px;
		overflow: hidden;
		position: relative;
		width: 70px;
	}

	.mini-cart-item-info {
		max-width: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		& *:not(& .child-items-quantity) {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&.options {
			align-items: initial;
			display: grid;
			height: 100%;

			.item-info-base {
				align-self: flex-start;
			}

			.item-info-extra {
				align-self: flex-end;
			}

			.item-info-collapse {
				border: 0;
				position: relative;
				z-index: 10;

				.panel-header {
					padding-left: 0;

					.panel-title {
						font-size: 0.75rem;
						text-transform: initial;
					}
				}

				.panel-body {
					padding: 4px 0 0;
				}
			}
		}

		.child-items {
			font-weight: 600;

			.child-item {
				display: flex;

				&-quantity {
					padding-right: 0.5em;
					text-align: right;
					width: 20%;
				}

				&-info p:nth-child(2) {
					font-weight: 400;
				}
			}
		}

		.item-info-replacement {
			align-items: center;
			display: flex;
			gap: 0.4em;
		}

		p,
		h5,
		h6,
		.h5,
		.h6 {
			margin: 0;
		}
	}

	.mini-cart-item-price {
		grid-area: price;
		padding: 1rem;
		text-align: right;

		.price {
			grid-template-areas: unset;

			&-value {
				display: block;
				font-size: 0.9rem !important;
				margin: 0 !important;
			}
		}
	}

	&.is-removed {
		border: 0;
		max-height: 0;
		overflow-y: hidden;
		padding: 0;
		transition: all 400ms $ease-out-quart;
	}

	.mini-cart-item-is-removing-wrapper {
		bottom: 0;
		left: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;

		.mini-cart-item-is-removing {
			align-items: center;
			background: #fff;
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			left: 100%;
			position: relative;
			width: 100%;
		}

		&.active {
			pointer-events: auto;

			.mini-cart-item-is-removing {
				animation: isRemoving 400ms $ease-out-quart 1 forwards;
			}
		}

		&.canceled .mini-cart-item-is-removing {
			animation: isCanceled 400ms $ease-out-quart 1 forwards;
		}

		.rtl & {
			&.active .mini-cart-item-is-removing {
				animation: isRemovingRTL 400ms $ease-out-quart 1 forwards;
			}

			&.canceled .mini-cart-item-is-removing {
				animation: isCanceledRTL 400ms $ease-out-quart 1 forwards;
			}
		}

		.btn-link {
			font-size: 12px;
			padding: 0;
		}

		@keyframes isRemoving {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(-100%);
			}
		}

		@keyframes isCanceled {
			from {
				transform: translateX(-100%);
			}

			to {
				transform: translateX(0);
			}
		}

		@keyframes isRemovingRTL {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(100%);
			}
		}

		@keyframes isCanceledRTL {
			from {
				transform: translateX(100%);
			}

			to {
				transform: translateX(0);
			}
		}
	}

	.mini-cart-item-errors {
		background-color: $gray-200;
		color: $danger-primary;
		font-weight: 600;
		grid-area: errors;
		max-width: 100%;
		overflow: hidden;
		padding: 1rem;

		span {
			margin-left: 10px;
		}
	}

	.quantity-selector {
		max-width: 70px;
	}
}