_news.scss

// @page Pattern Library/Articles
// @name News article
//
// @description
//   The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying `<img>` tags on mobile hasn't been resolved.
//
//  @markup
//   <div class='us-article-group'>
//     <div class='us-news-item us-col-md-4'>
//       <a class='us-news-item-link' href='#'>
//         <div class='us-news-item-image-container'>
//           <div class='us-news-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>
//         </div>
//         <div class='us-news-meta'>
//           <span class='category'>Consumer rights</span>
//           <span class='date'>14 Nov 2014</span>
//         </div>
//         <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>
//         <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>
//         <div class='us-news-item-readmore'>
//           <span class='us-news-item-readmorelink'>More consumer rights</span>
//         </div>
//       </a>
//     </div>
//   </div>

$item-padding: 9px;
$news-item-image-size: 128px !default;
$base-item-image-size: $news-item-image-size;

%base-item {
  margin-bottom: 1em;

  &:hover {
    %base-item-image {
      opacity: .8;
    }

    %readmore:after {
      left: .5em;
    }
  }

  .us-article-group & {
    @include respond-to(mobile) {
      padding: 0;
      margin-bottom: 0;
    }
  }
}

%base-item-link {
  @extend %bordered-box;
  @extend %backface-visibility--hidden;
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background-color: #fff;
  transition: border-color 333ms, background-color 333ms;

  @include respond-to(small-tablet,true) {
    padding-bottom: em(35px);
  }

  .us-article-group & {
    @include respond-to(mobile) {
      border-top-width: 0;
      border-radius: 0;
    }
  }
}

%base-item-title {
  @extend %heading-4;
  padding: $item-padding;
  margin: 0;
  color: $c-navy;
}

%base-item-description {
  @include baseline(14px);
  padding: 0 $item-padding;
  color: $c-navy;
}

%base-item-image-container {
  display: none;

  @include respond-to(small-tablet, true) {
    display: block;
  }
}

%base-item-image {
  @extend %backface-visibility--hidden;
  width: 100%;
  height: auto;
  border-radius: em(5px) em(5px) 0 0;
  transition: opacity 333ms;

  &.background {
    height: $base-item-image-size;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

%readmore-link {
  @include normal-font;
  @include link-colors($c-typecyan, $c-typecyan, $c-typecyan, $c-typecyan);
  border-bottom: 1px solid $c-typecyan;
}

%readmore {
  position: absolute;
  bottom: 0;
  display: none;
  padding: $item-padding;
  color: $c-typecyan;
  white-space: nowrap;

  @include respond-to(small-tablet,true) {
    display: block;
  }

  &:after {
    @extend %link-triangle;
  }
}

.us-article-group {
  @include respond-to(mobile) {
    margin-bottom: 1em;
    overflow: hidden;

    %base-item:first-child {
      %base-item-link {
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-radius: em(5px) em(5px) 0 0;
      }
    }

    %base-item:last-child {
      %base-item-link {
        border-bottom-width: 1px;
        border-radius: 0 0 em(5px) em(5px);
      }
    }
  }
}

.us-news-item {
  @extend %base-item;
}

.us-news-item-link {
  @extend %base-item-link;
}

.us-news-item-title {
  @extend %base-item-title;
}

.us-news-item-snippet {
  @extend %base-item-description;
}

.us-news-item-image-container {
  @extend %base-item-image-container;
}

.us-news-item-image {
  @extend %base-item-image;
}

.us-news-item-readmore {
  @extend %readmore;
}

.us-news-item-readmorelink {
  @extend %readmore-link;
}

.us-news-meta {
  padding-right: $item-padding;
  padding-left: $item-padding;
  overflow: hidden;

  .category,
  .date {
    padding-top: em(4px);
    padding-bottom: em(4px);
    font-size: em(13px);
    font-weight: bold;
    color: $c-navy;

    @include respond-to(large-desktop) {
      font-size: em(14px);
    }
  }

  .date {
    display: block;
    float: right;
  }

  .category {
    display: block;
    float: left;
  }
}