forked from ViaductCSS/Viaduct
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_media.scss
64 lines (49 loc) · 1.46 KB
/
_media.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
// =============================
// Enable Private Variables
// =============================
$media-pattern-enable: true !default;
// =============================
// Core Media Pattern Styling
// =============================
//
// Core Media Pattern will display two content elements side by side.
// Find more information regarding this pattern here
// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
// Note - This pattern usually consists of an image and textual content, but isn't restricted.
//
// Media Pattern Default.
// Note - Reversed Version is the diagram below but the elements are in opposite positions.
//
// Media Sidebar Media Body
//
// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
// ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
//
@if ($media-pattern-enable) {
.media {
@extend %clearfix;
// .media__body
&__body {
overflow: hidden;
}
//.media__sidebar
&__sidebar {
@extend %float-left;
}
// .media__sidebar--rev
&__sidebar--rev {
@extend %float-right;
}
&__sidebar img,
&__sidebar--rev img {
display: block;
}
&__body,
&__body > :last-child {
margin-bottom: 0;
}
}
}