META-INF.resources.components.mini_compare.mini_compare.scss Maven / Gradle / Ivy

Go to download
@import '../../styles/variables';

.mini-compare {
	background: white;
	border-radius: 4px 4px 0 0;
	bottom: 0;
	box-shadow: 0 17px 84px 0 rgba(52, 55, 62, 0.2);
	display: inline-flex;
	left: 50%;
	opacity: 0.3;
	padding: $spacer;
	position: fixed;
	transform: translateX(-50%) translateY(100%);
	transition:
		transform 0.2s ease-in,
		opacity 0.2s ease-in;

	&.active {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		z-index: 5;
	}

	body.open & {
		transform: translateX(calc(-50% + #{$liferay-sidebars-width / 2}))
			translateY(100%);

		&.active {
			opacity: 1;
			transform: translateX(calc(-50% + #{$liferay-sidebars-width / 2}))
				translateY(0);
		}
	}

	&-item {
		margin-right: $spacer;
		position: relative;

		@media screen and (hover: none) {
			margin-right: $spacer;
		}

		&::after {
			border: 2px dashed $border-color;
			border-radius: 4px;
			bottom: 0;
			content: '';
			left: 0;
			opacity: 1;
			position: absolute;
			right: 0;
			top: 0;
			transition: opacity 0.2s ease-in;
		}

		&.active {
			&::after {
				opacity: 0;
			}

			.mini-compare-delete {
				opacity: 1;
				transform: scale(1) translate(50%, -50%);
			}

			.mini-compare-thumbnail-container {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	&-thumbnail {
		background-position: 50%;
		background-size: cover;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	&-thumbnail-container {
		opacity: 0;
		position: relative;
		transform: scale(0.6);
		transition: all 0.2s ease-in;
	}

	&-delete {
		align-items: center;
		background-color: $danger-primary;
		border: none;
		border-radius: 4px;
		color: $gray-100;
		display: inline-flex;
		font-size: 12px;
		height: 1.2rem;
		justify-content: center;
		opacity: 0;
		padding: 0;
		position: absolute;
		right: 2px;
		top: 2px;
		transform: scale(0) translate(50%, -50%);
		transition: all 0.2s ease-in;
		width: 1.2rem;
		z-index: 10;

		.lexicon-icon {
			margin-top: -1px;
		}
	}
}