// ================================================
// List View Template Styles for Gravity View
// http://katz.co/gravityview/
// ================================================

// @since 1.17 - This is overridden by list-view-rtl.scss
$rtl: false !default;

// @since 1.17
@import "rtl";

@import "responsive";

// 1. Variables
// ================================================

// 1.1. Colors
// Change accordingly to your website styles
// ------------------------------------------------

$color-border: #ddd;
$color-footer: #eee;
$color-description: #999;

// 2. Placeholders and Mixins
// ================================================

%clearfix {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
	*zoom: 1;
}

.gv-grid-col-1-3 {
  @include respond($small-tablet) {
    width: 100%;
    float: none;
  }
}

.gv-grid-col-2-3 {
  @include respond($small-tablet) {
    width: 100%;
    float: none;
  }
}



// 3. Structure
// ================================================

.gv-list-view {
	border: 1px solid $color-border;
	margin-bottom: 1em;
}

// 3.1. Title
// ------------------------------------------------

.gv-list-view-title {
	border-bottom: 1px solid $color-border;

    .gv-no-results & {
      border-bottom: none;
    }

	padding: .5em 1em;

	h3 {
		margin: 0 0 .5em 0;
		padding: 0;
	}

	p {
		margin: 0;
		padding: 0;
	}
}

// 3.2. Subtitle
// ------------------------------------------------

.gv-list-view-subtitle {

	h4 {
		margin: 0;
	}

}

// 3.3. Content
// ------------------------------------------------

.gv-list-view-content {

  padding: .75em 1em;

  @extend %clearfix; // Clears image floats

  h4 {
    clear: none; // Fix themes with H4 clearing the images
  }

  p {
    margin: 0 0 1em 0;
    padding: 0;
  }

  .gv-list-view-content-image {
    padding: 0 0 1em 0;
    #{$padding-right}: 1em;
    max-width: 50%;

    .gv-field-file-uploads li,
    .gv-field-file-uploads {
      list-style: none;
      margin: 0;
      padding: 0;
    }

  }
}

.gv-list-single-container .gv-list-view-content-image {
  float: $left;
  img {
    max-height: 400px;
    max-width: 100%;
  }
}


// 3.4. Footer
// ------------------------------------------------

.gv-list-view-footer {
	border-top: 1px solid $color-border;
	background-color: $color-footer;
	padding: 1em;
}
