-
Notifications
You must be signed in to change notification settings - Fork 3
/
_component-1.scss
113 lines (75 loc) · 1.96 KB
/
_component-1.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/**
* author: S Griffin | IM : contactme69 | e-mail : stewiekillsloiss@gmail.com
* design: http://link-to-design
* created: 19/07/2015
*
* comments: common media-element
* @project class: media
**/
/* Media
---------------------------------------------------------------------------------- */
@import "variables";
@import "mixins";
/*
cssg
media --selectable --selected
media__container
media__image
[1]
<img>
[2]
<stub>
[/]
media__content
media__header
<header-level-3>
media__text
*/
/* Variables
-------------------------------------------------- */
$media-bg-color: $color-brand-primary-light;
$media-bg-color-hover: lighten($color-brand-primary-light, 25%);
/* /Variables
-------------------------------------------------- */
/* Layout
-------------------------------------------------- */
.media {
display: flex;
background: $media-bg-color;
cursor: pointer;
&:hover {
background: $media-bg-color-hover;
}
}
/* /Layout
-------------------------------------------------- */
/* Image
-------------------------------------------------- */
.media__image {
flex: 1 0 25%;
}
/* /Image
-------------------------------------------------- */
/* Content
-------------------------------------------------- */
.media__content {
flex: 1 1 auto;
}
/* /Content
-------------------------------------------------- */
/* Content parts
-------------------------------------------------- */
/* Header */
.media__header {
margin-bottom: $offset-s;
}
/* /Header */
/* Text */
.media__text {
color: $color-text-light;
}
/* /Text */
/* /Content parts
-------------------------------------------------- */
/* /Media
---------------------------------------------------------------------------------- */