vui-design/src/style/components/alert.less

A high quality UI Toolkit based on Vue.js

@vui-alert: ~"@{vui}-alert";

.@{vui-alert} {
	position:relative;
	display:block;
	box-sizing:border-box;
	border:@alert-border;
	border-radius:@alert-border-radius;
	background-color:@alert-background-color;
	line-height:@alert-line-height;
	transform-origin:50% 0;

	&-icon {
		position:absolute;
		display:block;
		box-sizing:border-box;
		line-height:1;

		.@{vui}-icon {
			display:block;
		}
	}

	&-message {
		display:block;
		box-sizing:border-box;
		text-align:left;
		.writeBreak;
	}

	&-description {
		display:block;
		box-sizing:border-box;
		margin-top:@alert-description-margin-top;
		color:@alert-description-font-color;
		font-size:@alert-description-font-size;
		text-align:left;
		.writeBreak;
	}

	&-btn-close {
		position:absolute;
		cursor:pointer;
		display:block;
		box-sizing:border-box;
		color:@alert-btn-close-font-color;
		font-size:@alert-btn-close-font-size;
		line-height:1;
		transition:all @transition-duration @transition-timing-function;

		.@{vui}-icon {
			display:block;
			transform:scale(0.85);
		}

		&:hover {
			color:@alert-btn-close-hover-font-color;
		}
	}

	&-info {
		border-color:@alert-info-border-color;
		background-color:@alert-info-background-color;
	}
	&-info &-icon {
		color:@alert-info-icon-color;
	}
	&-warning {
		border-color:@alert-warning-border-color;
		background-color:@alert-warning-background-color;
	}
	&-warning &-icon {
		color:@alert-warning-icon-color;
	}
	&-success {
		border-color:@alert-success-border-color;
		background-color:@alert-success-background-color;
	}
	&-success &-icon {
		color:@alert-success-icon-color;
	}
	&-error {
		border-color:@alert-error-border-color;
		background-color:@alert-error-background-color;
	}
	&-error &-icon {
		color:@alert-error-icon-color;
	}

	& {
		padding:@alert-padding-vertical @alert-padding-horizontal;
	}
	&&-with-icon {
		padding-left:@alert-with-icon-padding-left;
	}
	&&-closable {
		padding-right:@alert-closable-padding-right;
	}
	& &-icon {
		top:@alert-icon-top;
		left:@alert-icon-left;
		font-size:@alert-icon-font-size;
	}
	& &-message {
		color:@alert-message-font-color;
		font-size:@alert-message-font-size;
	}
	& &-btn-close {
		top:@alert-btn-close-top;
		right:@alert-btn-close-right;
	}

	&-with-description {
		padding:@alert-with-description-padding-vertical @alert-with-description-padding-horizontal;
	}
	&-with-description&-with-icon {
		padding-left:@alert-with-description-with-icon-padding-left;
	}
	&-with-description&-closable {
		padding-right:@alert-with-description-closable-padding-right;
	}
	&-with-description &-icon {
		top:@alert-with-description-icon-top;
		left:@alert-with-description-icon-left;
		font-size:@alert-with-description-icon-font-size;
	}
	&-with-description &-message {
		color:@alert-with-description-message-font-color;
		font-size:@alert-with-description-message-font-size;
	}
	&-with-description &-btn-close {
		top:@alert-with-description-btn-close-top;
		right:@alert-with-description-btn-close-right;
	}

	&-banner {
		border:unset;
		border-radius:unset;
		margin-bottom:0;
	}

	&-closing {
		height:0 !important;
		margin-top:0 !important;
		margin-bottom:0 !important;
		padding-top:0 !important;
		padding-bottom:0 !important;
		opacity:0;
		transform:scaleY(0);
		transition:all @transition-duration @transition-timing-function;
	}
}

@keyframes vuiAlertSlideUpIn {
	0% { opacity:0; transform-origin:50% 0%; transform:scaleY(0); }
	100% { opacity:1; transform-origin:50% 0%; transform:scaleY(1); }
}

@keyframes vuiAlertSlideUpOut {
	0% { opacity:1; transform-origin:50% 0%; transform:scaleY(1); }
	100% { opacity:0; transform-origin:50% 0%; transform:scaleY(0); }
}