/
eu-component-social-media-share.scss
67 lines (55 loc) · 1.41 KB
/
eu-component-social-media-share.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
/**
* Social media share component
* @define social-media-share; weak
*/
// Import base
@import '@ecl/eu-base/eu-base';
// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-component-link'));
@mixin ecl-social-media-share($description-color: $ecl-color-black-100) {
@include ecl-icon-rollover(ecl-social-media-share);
@include ecl-social-icon-color-map($ecl-social-media-list);
.ecl-social-media-share {
margin: 0;
padding: 0;
}
.ecl-social-media-share__description {
color: $description-color;
font: $ecl-font-prolonged-m;
font-weight: $ecl-font-weight-bold;
margin-bottom: $ecl-spacing-s;
margin-top: 0;
}
.ecl-social-media-share__list {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.ecl-social-media-share__item {
margin: $ecl-spacing-s $ecl-spacing-2-xs 0 0;
&:not(:last-child) {
max-width: 8.625rem;
}
&:not(:last-child) .ecl-link {
color: #fff;
padding-right: $ecl-spacing-xs;
width: 8.125rem;
}
}
.ecl-social-media-share__link {
align-items: center;
display: flex;
font: $ecl-font-s;
overflow: hidden; /* Improve rendering on IE */
.ecl-link__icon {
top: 0;
}
}
}
// Use mixin
@include exports('eu-component-social-media-share') {
@include ecl-social-media-share();
}