documize/gui/app/styles/view/document/add-section.scss

.start-section {
	@extend .no-select;
	height: 60px;
	background-color: transparent;
	position: relative;
	cursor: pointer;

	> .start-button {
		display: none;
		text-align: center;
		padding-top: 20px;
		color: $color-green;
		font-size: 1rem;
		position: relative;

		> .round-button {
			opacity: 0.6 !important;
		}

		> .label {
			display: inline-block;
			margin-left: 10px;
		}

		> .line {
			display: inline-block;
			height: 1px;
			border: 1px solid $color-green;
			width: 100px;
			margin: 0 20px 0 20px;
			opacity: 0.2;
		}
	}

	&:first-of-type {
		height: 30px;

		> .start-button {
			padding-top: 0;
		}
	}
}

.start-section-empty-state {
	> .start-button {
		display: block;
	}
}

.new-section-wizard {
	@include border-radius(2px);
	margin: 0 0 30px 0;
	padding: 30px;
	border: 1px solid $color-stroke;
	background-color: $color-off-white;
	display: none;

	.section-name {
		font-weight: bold;
		font-size: 1.5rem;
		margin: 0 0 30px 0;
		color: $color-black;
	}

	.template-caption {
		color: $color-gray;
		margin: 10px 0 10px 0;
		font-size: 1.2rem;
	}

	> .list-wrapper {
		height: 440px;
		overflow-y: auto;

		> .preset-list {
			margin: 0;
			padding: 0;

			> .item {
				@include ease-in();
				@include border-radius(4px);
				list-style: none;
				cursor: pointer;
				display: inline-block;
				border: 1px solid $color-stroke;
				background-color: $color-white;
				margin: 0 20px 20px 0;
				padding: 15px 0 0 20px;
				width: 200px;
				height: 60px;

				&:hover {
					@include ease-in();
					border-color: $color-link;
				}

				.icon {
					text-align: center;
					display: inline-block;
					width: 40px;
					margin-right: 10px;
					float: left;

					> .img {
						text-align: center;
						display: inline-block;
						height: 30px;
						width: 30px;
						float: left;
					}
				}

				> .title {
					font-size: 1rem;
					font-weight: normal;
					color: $color-off-black;
					letter-spacing: 0.5px;
					margin-top: 6px;
				}
			}
		}

		> .block-list {
			margin: 0;
			padding: 0;

			> .item {
				@include ease-in();
				@include border-radius(4px);
				list-style: none;
				cursor: pointer;
				display: inline-block;
				border: 1px solid $color-stroke;
				background-color: $color-white;
				margin: 0 20px 20px 0;
				padding: 12px 0 0 20px;
				width: 423px;
				height: 60px;
				position: relative;

				&:hover {
					@include ease-in();
					border-color: $color-link;

					> .block-actions {
						display: block;
					}
				}

				> .block-actions {
					@include ease-in();
					display: none;
					position: absolute;
					top: 10px;
					right: 8px;

					.material-icons {
						color: $color-stroke;
						font-size: 1rem;
					}
				}

				> .details {
					width: 350px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					> .title {
						font-size: 1rem;
						font-weight: normal;
						color: $color-off-black;
						letter-spacing: 0.5px;
						margin-top: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					> .desc {
						color: $color-gray;
						font-size: 0.8rem;
						margin-top: 5px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
}