Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / bbcode / quote.scss

woltlab-quote,
.quoteBox {
	background-color: $wcfContentBackground;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	border-radius: 2px;
	clear: both;
	display: block;
	font-style: italic;
	margin: 1em 0;
	overflow: hidden;

	&:first-child {
		margin-top: 0;
	}

	// hide nested icons
	.quoteBox {
		clear: both;

		.quoteBoxIcon {
			display: none;
		}
	}

	@include screen-md-up {
		padding: 20px;
	}

	@include screen-sm-down {
		padding: 10px;
	}
}

.quoteBox {
	@include screen-md-up {
		min-height: 104px;
	}

	&.collapsed {
		position: relative;

		> .quoteBoxContent {
			overflow: hidden;
			max-height: 100px;
		}

		> .toggleButton {
			bottom: 0;
			box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, 0.9);
			left: 0;
			padding-bottom: 10px;
			position: absolute;
			right: 0;
			z-index: 1;
		}
	}

	> .toggleButton {
		background-color: opacify($wcfContentBackground, 0.9);
		cursor: pointer;
		display: block;
		padding: 10px 20px 0 10px;
		text-align: center;

		@include wcfFontSmall;
	}

	.quoteBox {
		min-height: 0;
	}
}

woltlab-quote:not(.redactorCalcHeight)::before {
	color: $wcfContentLink;
	content: attr(data-title);
	cursor: pointer;
	display: block;
	font-style: normal;
	margin-bottom: 20px;

	@include wcfFontHeadline;
}

.quoteBoxTitle {
	font-style: normal;
	margin-bottom: 20px;

	@include wcfFontHeadline;
}

.quoteBoxIcon {
	float: right;
	margin: 0 0 10px 10px;

	> a {
		display: block;
		font-size: 0;
	}

	> .quoteBoxQuoteSymbol {
		color: $wcfContentDimmedText;
		display: block;
		font-family: Georgia, "Times New Roman", serif;
		font-style: normal;
		text-align: center;

		@include screen-md-up {
			font-size: 160px;
			line-height: 160px;
			height: 64px;
			width: 64px;
		}

		@include screen-sm-down {
			font-size: 80px;
			line-height: 80px;
			height: 32px;
			width: 32px;
		}

		&::before {
			content: "\201c";
			position: relative;

			@include screen-md-up {
				top: -5px;
			}
		}
	}

	@include screen-sm-down {
		.userAvatarImage {
			width: 32px !important;
			height: 32px !important;
		}
	}
}