META-INF.resources.asset.ajaxjs-ui.less.widgets.msg.less Maven / Gradle / Ivy

Show more of this group Show more artifacts with this name
Show all versions of ajaxjs-web Show documentation

AJAXJS Web aims to full-stack, not only the server-side framework, but also integrates the front-end library. It's written in HTML5 + Java, a successor to the JVM platform, efficient, secure, stable, cross-platform and many other advantages, but it abandoned the traditional enterprise architecture brought about by the large and bloated, emphasizing the lightweight, and fast, very suitable for the Internet fast application.

There is a newer version: 1.3.0

Show newest version

.aj-modal {
	.fadeIn (.8s);
	display: flex;
	&.hide {
		display: none;
	}

	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
	position: fixed;
	z-index: 99999999;
	& > div {
		border-radius: 10px;
		background-color: white;
		padding: 2%;
		text-align: center;
		& > div > button {
			background-color: initial;
			border: 1px solid gray;
			border-radius: 6px;
			margin-top: 20px;
			padding: 2px 15px;
		}
	}

	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
}

// 首先定义关键帧动画，一个显示、一个隐藏的
@keyframes topMsg-fade-in {
	0% {
		opacity: 0;
	}

	30% {
		opacity: .2;
	}

	80% {
		opacity: .4;
	}

	100% {
		opacity: 1;
	}
}

@keyframes topMsg-fade-out {
	0% {
	}

	30% {
		opacity: .2;
	}

	80% {
		opacity: .4;
	}

	100% {
		opacity: 0;
	}
}

// 元素样式，采用绝对布局
.aj-topMsg {
	position: fixed;
	width: 300px;
	height: 80px;
	right: 30px;
	padding: 10px;
	border-radius: 5px;
	color: #0066cc;
	box-sizing: border-box;
	background-color: #f5faff;
	border: 1px solid #0066cc;
	z-index: 999999999;
	top: -100px;
	transition: top ease-in 550ms;
	animation-fill-mode: forwards;
	&.fadeIn {
		top: 50px;
		animation: topMsg-fade-in ease-in 550ms;
	}

	&.fadeOut {
		animation: topMsg-fade-out ease-out 550ms;
	}
}