File "upsell.scss"

Full Path: /home2/sdektunc/cepali.edu.mx/wp-content/themes/shapely/inc/libraries/epsilon-framework/assets/css/scss/controls/upsell.scss
File size: 2.33 KB
MIME-type: text/plain
Charset: utf-8

.epsilon-upsell-container {
	background: #fff;
	padding: 20px;
	display: none;

	span.wp-ui-notification {
		padding: 2px 8px;
		text-transform: uppercase;
		font-size: 10px;
		font-weight: bold;
		border-radius: 5px;
		margin-right: 5px;
		display: inline-block;
	}

	.epsilon-button-group {
		position: relative;
		width: 100%;
		display: inline-block;
		box-sizing: border-box;
		.button {
			display: inline-block;
			text-align: center;
			vertical-align: middle;
			width: 50%;
			float: left;
			padding: 3px 0;
			height: initial;
			&:first-of-type {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			&:last-of-type {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}
		}

		.button-separator {
			text-align: center;
			display: inline-block;
			width: 40px;
			height: 20px;
			line-height: 19px;
			position: absolute;
			border-radius: 50px;
			color: #fff;
			background: #333;
			left: 50%;
			top: 50%;
			font-size: 12px;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
	}
}

.epsilon-upsell-options {
	li {
		margin-bottom: 0;
		display: inline-block;
		width: 100%;
		font-size: 12px;
		color: #8b9096;
		i {
			vertical-align: middle;
			position: relative;
		}
		&:last-of-type {
			margin-bottom: 20px;
		}
	}
}

.customize-control-epsilon-upsell {
	margin: 0 -12px;
	width: 105.5%;
	margin-bottom: 40px;

	.epsilon-upsell-label {
		background: #d54e21;
		color: #fff;
		padding: 14px 20px;
		cursor: pointer;
		-webkit-transition: all .2s;
		transition: all .2s;
		width: calc(100% - 20px);
		margin-top: -20px;


		&:hover,
		&.opened {
			-webkit-transition: all .2s;
			transition: all .2s;
			background: #008ec2;
		}
		i {
			float: right;
			margin-right: 20px;
		}
	}

	.mte-tooltip {
		left: 0;
	}
}

@media only screen and (max-width: 1680px) {

	.epsilon-upsell-container {

		.epsilon-button-group {

			.button-separator {
				margin: 5px auto;
				text-align: center;
				position: static;
				-webkit-transform: none;
				transform: none;
				display: block;
			}

			.button {
				display: block;
				width: 100%;
				float: none;
			}

		}

	}
}