Current File : /home/kelaby89/www/wp/wp-content/plugins/trx_addons/addons/audio-effects/audio-effects.scss

@import "../../css/_mixins.scss";
@import "../../css/_trx_addons.vars.scss";


/* Audio effects */
.sc_audio_effects {
	@include flex;
	@include flex-align-items(flex-end);
	@include flex-justify-content(center);
	@include box(1.5em, 1em);
	position: relative;

	&.sc_audio_effects_off:before {
		content: '\e875';
		font-family: $trx_addons_icons;
		font-size: 9px;
		display: block;
		@include abs-rt(-0.25em,-0.5em);
		@include square(1em);
		pointer-events: none;
		color: #a00000;
	}

	& > span {
		display: inline-flex;
		margin: 0 1px;
		@include box(2px, 0.7143em);
		background-color: #333;
	}
	&.sc_audio_effects_on > span:nth-child(1) {
		@include animation(music-bar 2s 1s ease-out alternate infinite);
	}
	& > span:nth-child(2) {
		height: 0.4286em;
	}
	&.sc_audio_effects_on > span:nth-child(2) {
		@include animation(music-bar 2s 0.5s ease-out alternate infinite);
	}
	& > span:nth-child(3) {
		height: 1em;
	}
	&.sc_audio_effects_on > span:nth-child(3) {
		@include animation(music-bar 2s 1.5s ease-out alternate infinite);
	}
	& > span:nth-child(4) {
		height: 0.5714em;
	}
	&.sc_audio_effects_on > span:nth-child(4) {
		@include animation(music-bar 2s 0.25s ease-out alternate infinite);
	}
}


@-webkit-keyframes music-bar {
	0% {	height: 0.4286em; }
	10% {	height: 0.7143em; }
	20% {	height: 0.4286em; }
	30% {	height: 1em; }
	40% {	height: 1.2857em; }
	50% {	height: 0.4286em; }
	60% {	height: 1.1429em; }
	70% {	height: 0.7143em; }
	80% {	height: 0.8571em; }
	90% {	height: 0.2857em; }
	100% {	height: 1.2857em; }
}
@keyframes music-bar {
	0% {	height: 0.4286em; }
	10% {	height: 0.7143em; }
	20% {	height: 0.4286em; }
	30% {	height: 1em; }
	40% {	height: 1.2857em; }
	50% {	height: 0.4286em; }
	60% {	height: 1.1429em; }
	70% {	height: 0.7143em; }
	80% {	height: 0.8571em; }
	90% {	height: 0.2857em; }
	100% {	height: 1.2857em; }
}