1
|
@import "shares";
|
2
|
|
3
|
$link-text-color: #fff !default;
|
4
|
$count-box-bg: #f5f5f5 !default;
|
5
|
$count-color: #444 !default;
|
6
|
$count-arrow-size: .4em !default;
|
7
|
$count-arrow-offset: $count-arrow-size - .1em !default;
|
8
|
$transition: background 200ms ease-in-out, border-color 200ms ease-in-out !default;
|
9
|
|
10
|
@for $i from 0 to length($share-names) {
|
11
|
$social: nth($share-names, $i + 1);
|
12
|
$background: nth($share-colors, $i + 1);
|
13
|
|
14
|
.jssocials-share-#{$social} .jssocials-share-link {
|
15
|
background: $background;
|
16
|
|
17
|
&:hover {
|
18
|
background: darken($background, 10%);
|
19
|
}
|
20
|
}
|
21
|
}
|
22
|
|
23
|
.jssocials-share-link {
|
24
|
padding: .5em .6em;
|
25
|
color: $link-text-color;
|
26
|
transition: $transition;
|
27
|
|
28
|
&:hover, &:focus, &:active {
|
29
|
color: $link-text-color;
|
30
|
}
|
31
|
}
|
32
|
|
33
|
.jssocials-share-count-box {
|
34
|
position: relative;
|
35
|
height: 2.5em;
|
36
|
padding: 0 .3em;
|
37
|
margin-left: $count-arrow-offset;
|
38
|
background: $count-box-bg;
|
39
|
transition: $transition;
|
40
|
|
41
|
&:hover {
|
42
|
background: darken($count-box-bg, 10%);
|
43
|
|
44
|
&:after {
|
45
|
border-color: transparent darken($count-box-bg, 10%) transparent transparent;
|
46
|
}
|
47
|
}
|
48
|
|
49
|
&:after {
|
50
|
content: "";
|
51
|
display: block;
|
52
|
position: absolute;
|
53
|
top: 1.25em - $count-arrow-size;
|
54
|
left: -$count-arrow-offset;
|
55
|
width: 0;
|
56
|
height: 0;
|
57
|
border-width: $count-arrow-size $count-arrow-size $count-arrow-size 0;
|
58
|
border-style: solid;
|
59
|
border-color: transparent $count-box-bg transparent transparent;
|
60
|
transform: rotate(360deg);
|
61
|
transition: $transition;
|
62
|
}
|
63
|
|
64
|
.jssocials-share-count {
|
65
|
line-height: 2.5em;
|
66
|
color: $count-color;
|
67
|
}
|
68
|
}
|