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