-
Notifications
You must be signed in to change notification settings - Fork 5
/
_base.scss
88 lines (75 loc) · 2.12 KB
/
_base.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// @page Pattern Library/Articles
// @name Base article
//
// @description
// Article listings for news are important on the landing pages.
//
// @markup
// <article class='us-article'>
// <a class='us-article__link' href="#">
// <div class='us-grid-row'>
// <div class='us-col-md-8'>
// <h3 class='us-article__title'>Car insurance guides</h3>
// <p class='us-article__description'>
// A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks
// </p>
// <div class="us-article__meta">
// <span class="date">2 months ago</span>
// in
// <span class="category">Banking</span>
// </div>
// </div>
// <div class='us-col-md-4 us-tablet--block'>
// <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />
// </div>
// </a>
// </div>
// </article>
$article-border-color: $c-keylinegrey !default;
$article-padding: 2em !default;
$article-description-color: $c-typegrey-2 !default;
.us-article {
padding-top: $article-padding/2;
padding-bottom: $article-padding/2;
border-bottom: 1px solid $article-border-color;
@include respond-to(tablet, true) {
padding-top: $article-padding;
padding-bottom: $article-padding;
}
}
.us-article__link {
display: block;
-webkit-tap-highlight-color: rgba(0,0,0,0);
&:hover {
.us-article__title {
text-decoration: underline;
}
}
}
.us-article__link,
.us-article__link:hover,
.us-article__link:visited, {
color: inherit;
}
.us-article__title {
@include heading(4);
@include respond-to(tablet, true) {
@include heading(3, $extend: false);
}
}
.us-article__meta,
.us-article__description {
color: $article-description-color;
}
.us-article__meta {
font-size: .875em;
}
.us-article__description {
margin-bottom: 1em;
@include respond-to(tablet, true) {
font-size: 1.125em;
}
}
.us-article__image {
border: 1px solid $article-border-color;
}