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