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

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.segments.web
Liferay Segments Web
The newest version!
@import 'atlas-variables';

.contributor-builder-root {
	.criteria-builder-section-main,
	.criteria-builder-section-sidebar {
		transition: all 0.5s ease;
	}

	.criteria-builder-section-main {
		.criteria-builder-empty-errors-alert {
			border-bottom: 1px solid;
			z-index: 1;
		}

		.contributor-container {
			background-color: $light;

			@include media-breakpoint-up(md) {
				overflow: auto;
			}

			.container-fluid {
				transition: all 0.5s ease;

				.content-wrapper {
					.empty-contributors {
						background: $light-l1;
						border: 2px dashed $secondary-l2;
					}
				}
			}
		}

		.sheet {
			.criterion-string {
				color: $secondary;
				font-weight: 600;
			}
		}
	}

	.criteria-builder-section-sidebar {
		position: absolute;
		right: 0;
		width: 0;
		z-index: 10;

		.criteria-sidebar-root {
			min-height: calc(100vh - 121px);
		}

		@include media-breakpoint-up(md) {
			height: calc(100% - 121px);
			position: fixed;
			top: 121px;

			&--with-warning {
				height: calc(100% - 177px);
				top: 177px;
			}

			.criteria-sidebar-root {
				position: absolute;
			}
		}
	}

	.drag-icon {
		cursor: grab;
	}

	&.editing {
		.criteria-builder-section-main {
			.contributor-container .container-fluid {
				@include media-breakpoint-up(md) {
					padding-right: $sidebarWidth;
				}

				.content-wrapper {
					height: 100%;
					overflow: auto;
					position: relative;
				}
			}

			@media (min-width: $pageContentMaxWidth) {
				.contributor-container .container-fluid {
					padding-right: calc(
						#{$sidebarWidth} - ((100% - #{$pageContentMaxWidth}) / 2)
					);

					.content-wrapper {
						padding-right: 32px;
					}
				}
				.criteria-builder-empty-errors-alert {
					&__inner {
						margin: 0 auto;
						max-width: $pageContentMaxWidth;
						padding-right: calc(
							#{$sidebarWidth} - ((100% - #{$pageContentMaxWidth}) /
										2)
						);
					}
				}
			}
		}

		.criteria-builder-section-sidebar {
			width: $sidebarWidthSmall;

			@include media-breakpoint-up(sm) {
				width: $sidebarWidth;
			}
		}
	}
}