Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / alert.scss

.error,
.info,
.success,
.warning {
	border-left: 5px solid transparent;
	margin-top: 20px;

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

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

	a {
		@include wcfFontBold;

		&:hover {
			text-decoration: underline;
		}
	}
}

.error {
	background-color: $wcfStatusErrorBackground;
	border-color: $wcfStatusErrorBorder;
	color: $wcfStatusErrorText;

	a {
		color: $wcfStatusErrorLink;

		&:hover {
			color: $wcfStatusErrorLinkActive;
		}
	}
}

.info {
	background-color: $wcfStatusInfoBackground;
	border-color: $wcfStatusInfoBorder;
	color: $wcfStatusInfoText;

	a {
		color: $wcfStatusInfoLink;

		&:hover {
			color: $wcfStatusInfoLinkActive;
		}
	}
}

.success {
	background-color: $wcfStatusSuccessBackground;
	border-color: $wcfStatusSuccessBorder;
	color: $wcfStatusSuccessText;

	a {
		color: $wcfStatusSuccessLink;

		&:hover {
			color: $wcfStatusSuccessLinkActive;
		}
	}
}

.warning {
	background-color: $wcfStatusWarningBackground;
	border-color: $wcfStatusWarningBorder;
	color: $wcfStatusWarningText;

	a {
		color: $wcfStatusWarningLink;

		&:hover {
			color: $wcfStatusWarningLinkActive;
		}
	}
}

.innerError,
.innerInfo,
.innerSuccess,
.innerWarning {
	display: table;
	line-height: 1.5;
	margin-top: 8px;
	padding: 5px 10px;
	position: relative;

	/* pointer */
	&::before {
		border: 6px solid transparent;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 99;
	}
}

/* inline messages */
.innerError {
	background-color: rgb(242, 222, 222);
	color: rgb(169, 68, 66);

	&::before {
		border-bottom-color: rgb(242, 222, 222);
	}

	a {
		color: $wcfStatusErrorLink;

		&:hover {
			color: $wcfStatusErrorLinkActive;
		}
	}
}
.innerSuccess {
	background-color: $wcfStatusSuccessBackground;
	color: $wcfStatusSuccessText;

	&::before {
		border-bottom-color: $wcfStatusSuccessBackground;
	}

	a {
		color: $wcfStatusSuccessLink;

		&:hover {
			color: $wcfStatusSuccessLinkActive;
		}
	}
}
.innerWarning {
	background-color: $wcfStatusWarningBackground;
	color: $wcfStatusWarningText;

	&::before {
		border-bottom-color: $wcfStatusWarningBackground;
	}

	a {
		color: $wcfStatusWarningLink;

		&:hover {
			color: $wcfStatusWarningLinkActive;
		}
	}
}

/* sticky footer notices */
.pageFooterStickyNotice {
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	z-index: 600;

	.error,
	.info,
	.success,
	.warning {
		border-left-width: 0;
		border-top-width: 1px;
		border-top-style: solid;
		margin-top: 0;
		padding: 10px 0;

		@include screen-sm-down {
			@include wcfFontSmall;
		}
	}

	.cookiePolicyNotice {
		.layoutBoundary {
			display: flex;
			align-items: center;

			@include screen-sm-down {
				flex-wrap: wrap;
			}
		}

		.cookiePolicyNoticeText {
			flex: 1 1 auto;

			@include screen-sm-down {
				flex-basis: 100%;
				margin-bottom: 5px;
			}
		}

		.cookiePolicyNoticeMoreInformation,
		.cookiePolicyNoticeDismiss {
			flex: 0 0 auto;
		}

		.cookiePolicyNoticeDismiss {
			margin-left: 5px;
		}
	}
}

/* inline infos */
.innerInfo {
	background-color: $wcfStatusInfoBackground;
	color: $wcfStatusInfoText;

	&::before {
		border-bottom-color: $wcfStatusInfoBackground;
	}

	a {
		color: $wcfStatusInfoLink;

		&:hover {
			color: $wcfStatusInfoLinkActive;
		}
	}
}

/* dismiss icon */
.noticeDismissible > .jsDismissNoticeButton {
	float: right;

	@include screen-md-down {
		font-size: 18px;
		height: 24px;
		line-height: 24px;
		width: 24px;
	}
}

.userExceptionMessage {
	align-self: center;
}