Project

General

Profile

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
}
(3-3/6)