CSS 审核印章样式

// 旋转
.arrow {
	&_up {
		@include arrow_animation(270deg);
	}
	&_down {
		@include arrow_animation(90deg);
	}
	&_right {
		@include arrow_animation(0deg);
	}
	&_left {
		@include arrow_animation(180deg);
	}
}
// 审核印章
@mixin arrow_animation($color: #fa3534) {
	color: $color;
	border: 4px double $color;
	padding: 4px 6px;
	border-radius: 50%;
	transform: rotateZ(15deg);
	transition-property: transform;
	transition-duration: 0.3s;
	font-size: $uni-font-size-sm;
	
}
.audit {
	&_error {
		@include arrow_animation(#fa3534);
	}
	&_success {
		@include arrow_animation(rgba($color: #49dc00, $alpha: 0.8));
	}
	&_warning {
		@include arrow_animation(rgba($color: #ffaa00, $alpha: 0.8));
	}
	&_bone {
		@include arrow_animation(rgba($color: #aaaa00, $alpha: 0.8));
	}
}

猜你喜欢

转载自blog.csdn.net/myfather103/article/details/121562990