META-INF.resources.css.diagram.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.commerce.shop.by.diagram.web
Liferay Commerce Shop by Diagram Web
The newest version!
@import 'atlas-variables';

$diagram-height: 700px;

.shop-by-diagram {
	display: flex;
	flex-direction: column;
	height: $diagram-height;

	.svg-wrapper {
		background-color: $white;
		height: 100%;
		opacity: 0;
		transition: opacity 0.1s ease;
		width: 100%;

		&.rendered {
			opacity: 1;
		}
	}

	.view-wrapper {
		flex-grow: 1;
		height: auto;
		position: relative;
		z-index: 1;
	}

	&.expanded {
		bottom: 0;
		height: auto;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 990;
	}

	svg .pin {
		cursor: pointer;
		fill: $gray-600;

		&.mapped {
			fill: $primary;
		}
	}

	.empty-pin-node {
		.pin-node-background {
			fill: $primary;
			stroke: $primary;
			stroke-width: 1;
			transition:
				transform 0.1s ease,
				fill 0.1s ease;
		}
	}

	.sequences-wrapper {
		height: 100%;
		left: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.pin-foreground {
		align-items: center;
		color: $gray-600;
		display: flex;
		font-weight: 600;
		height: 0;
		justify-content: center;
		pointer-events: none;
		position: absolute;
		width: 0;
		z-index: 2;

		&.highlighted {
			z-index: 3;
		}

		&::before {
			animation: 0.1s ease-out 0s 1 pinZoomIn forwards;
			background-color: $white;
			border: var(--border-width) solid $warning;
			border-radius: 50%;
			content: '';
			height: var(--size);
			position: absolute;
			width: var(--size);
			z-index: -1;
		}

		&.mapped {
			color: $primary;

			&::before {
				border-color: $primary;
			}
		}

		&.hide::before {
			animation: 0.1s ease-in 0s 1 pinZoomOut forwards;
		}
	}

	.pin-node {
		cursor: pointer;

		&:hover,
		&.active,
		&.highlighted {
			.pin-node-text {
				fill: $warning;
			}

			.pin-node-background {
				stroke: $warning;
			}
		}

		&.drag-started {
			cursor: grabbing;
		}

		&.dragging {
			.pin-node-background {
				transform: scale(1.3);
			}
		}

		.pin-node-text {
			fill: $primary;
			paint-order: stroke;
			stroke: $white;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-width: 2;
		}

		.pin-node-background {
			fill: $white;
			stroke: $primary;
			stroke-width: 1;
			transition:
				transform 0.1s ease,
				fill 0.1s ease;
		}
	}

	.pin-radius-handler {
		transition: transform 0.1s linear;
	}

	.svg-loader {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
	}
}

.slider-wrapper.disabled {
	opacity: 0.5;
}

@keyframes pinZoomIn {
	from {
		opacity: 0.4;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pinZoomOut {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

.shop-by-diagram-table {
	background: $white;
	display: flex;
	flex-direction: column;
	height: $diagram-height;
	max-height: $diagram-height;

	.full-height-content {
		flex-grow: 1;
		padding-bottom: map-get($spacers, 5);
		padding-top: map-get($spacers, 5);
		text-align: center;
	}

	.inline-scroller {
		flex-grow: 1;
		max-height: none;
	}
}

.diagram-tooltip-wrapper {
	position: absolute;
	transform: translate(0, -50%);
	z-index: 990;

	.diagram-tooltip {
		background: $white;
		border-radius: 3px;
		box-shadow: 1px 6px 11px rgba(0, 0, 0, 0.1);
		padding: map-get($spacers, 3);
		width: 450px;

		.loading-animation {
			margin: 0;
		}
	}

	.fill-cover .sticker-img {
		height: 100%;
		object-fit: cover;
		object-position: 50%;
		position: static;
		transform: none;
		width: 100%;
	}
}

.shop-by-diagram-table .btn-add-to-order {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}