sharetribe/sharetribe

/**
  Homepage thumbnail grid view
*/

@import "mixins/all";

$home-thumbnail-grid-avatar: 36px;
$home-thumbnail-grid-avatar-padding: 6px;
$home-thumbnail-grid-author: $home-thumbnail-grid-avatar + ($home-thumbnail-grid-avatar-padding * 2);

.home-fluid-thumbnail-grid-narrow {
  @include create-fluid-thumbnail-grid(home, 1, 1, 2, 3, 3, 3, 3, 3);
}

.home-fluid-thumbnail-grid-wide {
  @include create-fluid-thumbnail-grid(home, 1, 1, 2, 3, 4, 4, 4, 4);
}

.home-fluid-thumbnail-grid-author {
  @include border-bottom-radius($default-border-radius);
  background-color: $highlight;
  height: $home-thumbnail-grid-author;
  position: relative;
}

.home-fluid-thumbnail-grid-author-avatar {
  padding: $home-thumbnail-grid-avatar-padding;
}

.home-fluid-thumbnail-grid-author-avatar-image {
  @include border-radius($default-border-radius);
  height: $home-thumbnail-grid-avatar;
}

.home-fluid-thumbnail-grid-author-name {
  @include small-type;
  position: absolute;
  top: $home-thumbnail-grid-avatar-padding;
  left: (2.5 * $home-thumbnail-grid-avatar-padding) + $home-thumbnail-grid-avatar; // 2.5 for some extra padding
  right: $home-thumbnail-grid-avatar-padding;
  bottom: $home-thumbnail-grid-avatar-padding;

  // Vertical centering
  line-height: $home-thumbnail-grid-avatar;

  @include ellipsis;
}

.home-fluid-thumbnail-grid-details {
  position: absolute;
  top: $home-thumbnail-grid-avatar-padding;
  left: (2.5 * $home-thumbnail-grid-avatar-padding) + $home-thumbnail-grid-avatar; // 2.5 for some extra padding
  right: $home-thumbnail-grid-avatar-padding;
  bottom: $home-thumbnail-grid-avatar-padding;
}
.home-fluid-thumbnail-grid-details-author-name {
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
  @include small-type;
  // Vertical centering
  line-height: $home-thumbnail-grid-avatar;
  @include ellipsis;
}
.home-fluid-thumbnail-grid-details-distance {
  float:left;
  width: 50%;
  height:100%;
  text-align:right;
  color:$body;
  font-weight:600;
  @include small-type;
  // Vertical centering
  line-height: $home-thumbnail-grid-avatar;
  @include ellipsis;
}