Permalink
Fetching contributors…
Cannot retrieve contributors at this time
215 lines (180 sloc) 4.35 KB
// @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;
}
}