Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-elements   php

Repository URL to install this package:

Version: 2.5.6 

/ scss / addons / _jet-testimonials.scss

.jet-testimonials {
	width: 100%;
	position: relative;

	&.jet-equal-cols {
		.slick-track {
			display: flex;
			align-items: stretch;
		}

		.jet-testimonials__item {
			display: flex;
			flex-direction: column;
			float: none;
			height: auto;
		}

		.jet-testimonials__item-inner {
			flex-grow: 1;
		}
	}

	&__instance {
		width: 100%;
		position: relative;

		&:not(.slick-initialized) {
			display: flex;
			visibility: hidden;
		}

		&.jet-testimonials--comment-corner {
			.jet-testimonials__comment {
				&:after {
					content: '';
				}
			}
		}
	}

	&__item {
		outline: none;
	}

	&__content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	&__figure {
		position: relative;
		overflow: hidden;

		img.jet-testimonials__tag-img {
			max-width: 100%;
			object-fit: cover;
		}
	}

	&__icon {
		display: flex;
		justify-content: center;
		align-items: center;

		.jet-testimonials__icon-inner {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
		}

		svg {
			width: 1em;
			height: 1em;
		}
	}

	&__title {
		max-width: 100%;
	}

	&__comment {
		max-width: 100%;
		position: relative;

		&:after {
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -5px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px 10px 0 10px;
			bottom: -10px;
			content: none;
		}
	}

	&__name {
		max-width: 100%;

		a {
			color: inherit;
		}
	}

	&__position {
		max-width: 100%;
	}

	&__date {
		max-width: 100%;
	}

	&__rating {
		color: #ffe435;
		i{
			color: #c1c1c1;
			&::before{
				content: attr( data-star-style );
			}
		}
		&[data-rating="1"] i:nth-child( -n+1 ),
		&[data-rating="2"] i:nth-child( -n+2 ),
		&[data-rating="3"] i:nth-child( -n+3 ),
		&[data-rating="4"] i:nth-child( -n+4 ),
		&[data-rating="5"] i:nth-child( -n+5 ){
			color: inherit !important;
			&::before{
				content: attr( data-active-star-style );
			}
		}
	}

	.jet-arrow {
		position: absolute;
		top: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 999;
		transition: all 200ms linear;

		@if ( $direction == rtl ) {
			transform: rotate(180deg);
		}

		&:before {
			display: block;
			width: 100%;
			text-align: center;
			line-height: 0;
			transition: all 200ms linear;
		}

		&.prev-arrow {
			@include start(0);
		}

		&.next-arrow {
			@include end(0);
		}
	}

	.jet-slick-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 99;
		padding: 0;

		li {
			padding: 5px;
			margin: 0;
			list-style: none;

			span {
				display: block;
				cursor: pointer;
				width: 10px;
				height: 10px;
				border-radius: 5px;
				padding: 0;
				text-indent: 10em;
				overflow: hidden;
				transition: all 200ms linear;

				&:before {
					display: none;
				}
			}
		}
	}
}