META-INF.resources.designer.css.definition-builder._sidebar.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of com.liferay.portal.workflow.kaleo.designer.web Show documentation
Liferay Portal Workflow Kaleo Designer Web
The newest version!
.sidebar {
	background: #fff;
	border-left: 1px solid #e7e7ed;
	width: 368px;

	.tab-pane {
		padding: 10px;
	}

	.node {
		border: none;
		cursor: grab;
		padding: 12px 16px 12px 8px;
		width: fit-content;

		&:hover {
			border: 2px solid #80acff;
			box-shadow: 0 8px 16px 0 #27283329;
		}

		> .lexicon-icon {
			margin-right: 16px !important;
		}

		.node-icon,
		.lexicon-icon {
			flex-shrink: 0;
		}

		.node-icon {
			height: 32px;
			width: 32px;

			svg {
				height: 16px;
				width: 16px;
			}
		}

		.node-info {
			.node-label {
				font-size: 14px;
				line-height: 150%;
			}
			.node-description {
				font-size: 12px;
				line-height: 150%;
			}
		}
	}

	.node.selected {
		background-color: transparent;
	}

	.sidebar-body {
		overflow: hidden;
		padding: 12px;

		.delete-button {
			& svg {
				fill: #6b6c7e;
				height: 16px;
				width: 16px;
			}
		}

		.panel .sheet-subtitle {
			align-items: center;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

		.recipient-type-form-group {
			margin-bottom: 0.5rem;
		}

		.section-buttons-area {
			align-items: center;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 1.5rem;
		}

		#timers-buttons-area {
			display: flex;
			justify-content: end;
		}

		#script-language {
			margin-bottom: 1.5rem;
		}

		.current-node-data-area {
			border: 1px solid #e7e7ed;
			border-radius: 4px;
			padding: 3px 15px 3px 30px;

			.current-node-data-row {
				align-items: center;

				.truncate-container {
					max-width: 200px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.delete-button {
					& svg {
						fill: #6b6c7e;
					}
				}
			}
		}

		#timerDescription {
			height: 2.5rem;
		}

		span .lexicon-icon-exclamation-full:hover {
			color: #da1414 !important;
		}

		span svg:hover {
			color: #6b6c7e !important;
		}

		#resource-actions {
			height: 136px;
		}

		.help-text {
			color: #6b6c7e;
			word-wrap: break-word;
		}

		.help-text {
			margin-bottom: 0;
		}

		.select-options {
			color: $dark;
		}

		.select-placeholder {
			color: $secondary;
		}

		.timers-input {
			margin-bottom: 1.5rem;
		}

		.timers-duration-toggle {
			align-items: center;
			display: flex;
			margin-bottom: 1.5rem;
		}
	}

	.sidebar-header {
		align-items: center;
		border-bottom: 1px solid #e7e7ed;
		display: flex;
		height: 75px;

		.title {
			color: #272833;
			font-size: 20px;
			font-weight: 700;

			&:first-letter {
				text-transform: capitalize;
			}
		}
	}

	.spaced-items {
		align-items: center;
		display: flex;
		justify-content: space-between;
		width: 100%;

		.auto-create {
			align-items: center;
			display: flex;

			.custom-control {
				margin-bottom: 0;
			}
		}

		.delete-button {
			align-items: flex-end;
		}

		.trash-button {
			height: 32px;
			width: 32px;

			svg {
				height: 16px;
				width: 16px;
			}

			&:hover {
				background: #feefef;
				border-radius: 4px;
				height: 32px;
				padding: 8px;
				width: 32px;

				svg {
					fill: #da1414;
					height: 16px;
					width: 16px;
				}
			}
		}
	}
}