File "contact-box.scss"

Full Path: /home/adniftyx/public_html/wp-content/plugins/credio-addons/widgets/contact-box/contact-box.scss
File size: 2.32 KB
MIME-type: text/plain
Charset: utf-8

@import '../../common';

.rs-contact-box {
	text-align: left;
	.address-item {
		display: flex;
		position: relative;
		align-items: center;
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
		}
		.address-icon {
			display: inline-block;
			position: relative;
			height: 70px;
			width: 70px;
			line-height: 70px;
			border-radius: 100%;
			text-align: center;

			span {
				z-index: 2;
				position: relative;
				&:before {
					content: "";
					position: absolute;
					z-index: 0;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
					display: block;
					width: 70px;
					height: 70px;
					background: #071230;
					border-radius: 50%;
					animation: pulse-border 1500ms ease-out infinite;
					opacity: 0.1;
					visibility: visible;
					z-index: -1;
				}
				&:hover {
					border-color: rgba(255, 255, 255, 0.7);
				}
			}
		
			i {
				text-align: center;
				border-radius: 100%;
				font-size: 30px;
				position: relative;
				line-height: 70px;
				z-index: 9;
				width: 100%;
				vertical-align: middle;
				margin-left: 0;
				height: auto;
				z-index: 1;
			}
			svg{

				position: relative;
				z-index: 1;
				top: -1px;
			}
			img{
				transition: transform 0.3s;
			}
		}
		
		.address-text {
			.des,
			.label{
				display: block;
			}
			.contact-title {
				margin-bottom: 1px;
				font-weight: 500;
				font-size: 20px;
				margin-top: 6px;
			}
			.phone {
				display: inline-grid;
			}
			.email {
				display: inline-grid;
			}
		}
		&:hover {
			.address-icon{
				img,svg,i{
					animation: vibrate 0.4s;
				}
			}
		}
	}
	.address-item.vertical {
		display: block;
		text-align: center;
		.address-text {
			span.label {
				display: block;
				font-weight: 500;
				font-size: 20px;
				margin-top: 15px;
			}
			a {
				transition: $transition;
			}
		}
	}
	.address-item.horizontal {
		.address-icon {
			margin-right: 20px;
		}
	}
}

@keyframes vibrate {
	0% {
		transform: translateX(-2px) rotate(0deg);
	  }
	  25% {
		transform: translateX(2px) rotate(-2deg);
	  }
	  50% {
		transform: translateX(-2px) rotate(2deg);
	  }
	  75% {
		transform: translateX(2px) rotate(-2deg);
	  }
	  100% {
		transform: translateX(-2px) rotate(0deg);
	  }
}