forms/css/sidebar.scss

@import 'colors.scss';

$border_current_user: 2px solid;
$border_user: 1px solid var(--color-border-dark);
$user-column-width: 265px;

#forms-sidebar {
	width: 520px;
	flex-grow: 0;
	flex-shrink: 1;
	min-width: 300px;
	border-left: 1px solid var(--color-border);
	transition: margin-right 300ms;
	z-index: 500;
	> div, > ul {
		padding: 8px;
	}
}


	.authorRow {
		align-items: center;
		.author {
			margin-left: 8px;
			opacity: .5;
			flex-grow: 1;
			&.external {
				margin-right: 33px;
				opacity: 1;
				> input {
					width: 100%
				}
			}
		}
	}

	.detailsView  {
		z-index: 1000 !important;
		.close.flex-row {
			justify-content: flex-end;
			margin: 8px 8px 0 0;
		}

		.header.flex-row {
			flex-direction: row;
			flex-grow: 0;
			align-items: flex-start;
			margin-left: 0;
			margin-top: 0;
			padding: 0 17px;
		}

		.formInformation {
			width: 220px;
			flex-grow: 1;
			flex-shrink: 1;
			padding-right: 15px;

			.authorRow {
				.leftLabel {
					margin-right: 4px;
				}
			}

			.cloud {
				margin: 4px 0;

				> span {
					color: var(--color-primary-text);
					margin: 2px;
					padding: 2px 4px;
					border-radius: var(--border-radius);
					float: left;
					text-shadow: 1px 1px var(--color-box-shadow);
					background-color: var(--color-loading-light);

				}
				.open {
					background-color: $fg-yes;
				}
				.expired {
					background-color: $fg-no;
				}
				.information {
					background-color: $bg-information;
				}
			}
		}
		#expired_info {
			margin: 0 15px;
		}

		.formActions {
			display: flex;
			flex-direction: column;
			margin-right: 15px;

			.close {
				margin: 15px;
				background-position: right top;
				height: 30px;
			}

			> ul > li {
				&:focus, &:hover, &.active, a.selected {
					&, > a {
						opacity: 1;
						box-shadow: inset 4px 0 var(--color-primary);
					}
				}

				> a[class*="icon-"],
				> ul > li > a[class*="icon-"],
				> a[style*="background-image"],
				> ul > li > a[style*="background-image"] {
					padding-left: 44px;
				}

				> a,
				> ul > li > a {
					background-size: 16px 16px;
					background-position: 14px center;
					background-repeat: no-repeat;
					display: block;
					justify-content: space-between;
					line-height: 44px;
					min-height: 44px;
					padding: 0 12px;
					overflow: hidden;
					box-sizing: border-box;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: var(--color-main-text);
					opacity: 0.57;
					flex: 1 1 0;
					z-index: 100;
				}
				a,
				.app-navigation-entry-deleted {
					padding-left: 44px !important;
				}
			}
		}
		#configurationsTabView {
			.configBox {
				padding: 8px 8px;

				> .title {
					font-weight: bold;
					margin-bottom: 4px;
				}

				> div {
					padding-left: 4px;
				}

				input.hasDatepicker {
					margin-left:17px;
				}
				&.oneline {
					width: 100%;
				}
			}
		}
		#commentsTabView {

			.newCommentForm div.message:empty:before {
				content: attr(data-placeholder);
				color: grey;
			}
			#commentBox {
				border: 1px solid var(--color-border-dark);
				border-radius: var(--border-radius);
				padding: 7px 6px;
				margin: 3px 3px 3px 40px;
				cursor: text;
			}
			.comment {
				margin-bottom: 30px;

				.date {
					right: 0;
					top: 5px;
					opacity: .5;
				}
			}

			.message {
				margin-left: 40px;
				flex-grow: 1;
				flex-shrink: 1;
			}


			.new-comment {
				.submitComment {
					align-self: last baseline;
					width: 30px;
					margin: 0;
					padding: 7px 9px;
					background-color: transparent;
					border: none;
					opacity: .3;
				}

				.icon-loading-small {
					float: left;
					margin-top: 10px;
					display: none;
				}
			}
		}
	}