lubuntu.me/plugins/so-widgets-bundle/widgets/testimonial/styles/default.less

@import "../../../base/less/mixins";

.widget-function('import_google_font');

@testimonial_padding: 10px;

@testimonial_background: transparent;
@text_background: #f0f0f0;
@text_color: #666;
@text_border_radius: 4px;

@title_font_family: default;
@title_font_weight: default;
@title_font_size: default;
@name_font_family: default;
@name_font_weight: default;
@name_font_size: default;
@location_font_family: default;
@location_font_weight: default;
@location_font_size: default;
@text_font_family: default;
@text_font_weight: default;
@text_font_size: default;

// Testimonial sizes
@testimonial_size: 33.333%;
@tablet_testimonial_size: 50%;
@mobile_testimonial_size: 100%;

// Image Sizes
@image_size: 75px;
@tablet_image_size: default;
@mobile_image_size: default;

// Responsive breakpoints
@tablet_width: 800px;
@mobile_width: 480px;

.widget-title {
	font-family: @title_font_family;
	font-weight: @title_font_weight;
	font-size: @title_font_size;
}

.sow-testimonials {

	.sow-testimonial-wrapper {
		width: @testimonial_size;

		@media screen and (max-width: @tablet_width) {
			width: @tablet_testimonial_size;
		}

		@media screen and (max-width: @mobile_width) {
			width: @mobile_testimonial_size;
		}
	}

	.sow-testimonial {
		background: @testimonial_background;
	}

	.sow-testimonial-name {
		font-family: @name_font_family;
		font-weight: @name_font_weight;
		font-size: @name_font_size;
	}

	.sow-testimonial-location {
		font-family: @location_font_family;
		font-weight: @location_font_weight;
		font-size: @location_font_size;
	}

	.sow-testimonial-text {
		font-family: @text_font_family;
		font-weight: @text_font_weight;
		font-size: @text_font_size;
		background: @text_background;
		color: @text_color;
		padding: @testimonial_padding @testimonial_padding*1.5;
		.rounded(@text_border_radius);
	}

	.sow-round-image-frame {
		border-radius: @image_size;
		width: @image_size;
		height: @image_size;
		
		@media screen and (max-width: @tablet_width) {
			width: @tablet_image_size;
			height: @tablet_image_size;
		}

		@media screen and (max-width: @mobile_width) {
			width: @mobile_image_size;
			height: @mobile_image_size;
		}
	}

	// All the specific layouts

	.sow-testimonial-wrapper {
		.clearfix();

		&.sow-layout-side {

			&.sow-user-left,
			&.sow-user-middle {
				.sow-testimonial-user {
					width: 33%;
					float: left;
					padding: @testimonial_padding @testimonial_padding*2 @testimonial_padding @testimonial_padding;

					img {
						margin: 0 auto;
						max-width: 100%;
						height: auto;

						@media screen and (max-width: @tablet_width) {
							width: @tablet_image_size;
						}

						@media screen and (max-width: @mobile_width) {
							width: @mobile_image_size;
						}

					}
				}

				.sow-testimonial-text {
					margin-left: 33%;
				}
			}

			&.sow-user-right {

				.sow-testimonial-user {
					width: 33%;
					float: right;
					padding: @testimonial_padding @testimonial_padding @testimonial_padding @testimonial_padding*2;

					img {
						width: @image_size;
						margin: 0 auto;
						max-width: 100%;
						height: auto;
					}
				}

				.sow-testimonial-text {
					margin-right: 33%;
				}

			}

		}

		&.sow-layout-text-above,
		&.sow-layout-text-below {

			.sow-testimonial-user {
				width: auto;
				padding: @testimonial_padding;

				img {
					width: @image_size;
					height: auto;
				}
			}

			.sow-testimonial-text {

			}

		}

		&.sow-layout-text-below {

			.sow-testimonial-user {
				padding:@testimonial_padding;
			}

		}

	}

}