_social-icons.scss
7.0 KB
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/***
Social Icons
***/
.social-icons {
padding: 0;
margin:0;
@include clearfix();
li {
float:left;
display:inline;
list-style:none;
margin-right:5px;
margin-bottom:5px;
text-indent:-9999px;
> a {
@include border-radius(2px);
width:28px;
height:28px;
display:block;
background-position:0 0;
background-repeat:no-repeat;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
&:hover {
> a {
background-position:0 -38px;
}
}
.amazon {background: url(../img/social/amazon.png) no-repeat;}
.behance {background: url(../img/social/behance.png) no-repeat;}
.blogger {background: url(../img/social/blogger.png) no-repeat;}
.deviantart {background: url(../img/social/deviantart.png) no-repeat;}
.dribbble {background: url(../img/social/dribbble.png) no-repeat;}
.dropbox {background: url(../img/social/dropbox.png) no-repeat;}
.evernote {background: url(../img/social/evernote.png) no-repeat;}
.facebook {background: url(../img/social/facebook.png) no-repeat;}
.forrst {background: url(../img/social/forrst.png) no-repeat;}
.github {background: url(../img/social/github.png) no-repeat;}
.googleplus {background: url(../img/social/googleplus.png) no-repeat;}
.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;}
.last-fm {background: url(../img/social/last-fm.png) no-repeat;}
.linkedin {background: url(../img/social/linkedin.png) no-repeat;}
.picasa {background: url(../img/social/picasa.png) no-repeat;}
.pintrest {background: url(../img/social/pintrest.png) no-repeat;}
.rss {background: url(../img/social/rss.png) no-repeat;}
.skype {background: url(../img/social/skype.png) no-repeat;}
.spotify {background: url(../img/social/spotify.png) no-repeat;}
.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;}
.tumblr {background: url(../img/social/tumblr.png) no-repeat;}
.twitter {background: url(../img/social/twitter.png) no-repeat;}
.vimeo {background: url(../img/social/vimeo.png) no-repeat;}
.wordpress {background: url(../img/social/wordpress.png) no-repeat;}
.xing {background: url(../img/social/xing.png) no-repeat;}
.yahoo {background: url(../img/social/yahoo.png) no-repeat;}
.youtube {background: url(../img/social/youtube.png) no-repeat;}
.vk {background: url(../img/social/vk.png) no-repeat;}
.instagram {background: url(../img/social/instagram.png) no-repeat;}
.reddit {background: url(../img/social/reddit.png) no-repeat;}
.aboutme {background: url(../img/social/aboutme.png) no-repeat;}
.flickr {background: url(../img/social/flickr.png) no-repeat;}
.foursquare {background: url(../img/social/foursquare.png) no-repeat;}
.gravatar {background: url(../img/social/gravatar.png) no-repeat;}
.klout {background: url(../img/social/klout.png) no-repeat;}
.myspace {background: url(../img/social/myspace.png) no-repeat;}
.quora {background: url(../img/social/quora.png) no-repeat;}
}
&.social-icons-color {
> li {
> a {
opacity: 0.7;
background-position:0 -38px !important;
&:hover {
opacity: 1;
}
}
}
}
&.social-icons-circle {
> li {
> a {
border-radius: 25px !important;
}
}
}
}
/***
Inline Social Icons
***/
.social-icon {
display:inline-block !important;
width:28px;
height:28px;
background-position:0 0;
background-repeat:no-repeat;
@include border-radius(2px);
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
&.social-icon-circle {
border-radius: 25px !important;
}
}
.social-icon {
&.amazon {background: url(../img/social/amazon.png) no-repeat;}
&.behance {background: url(../img/social/behance.png) no-repeat;}
&.blogger {background: url(../img/social/blogger.png) no-repeat;}
&.deviantart {background: url(../img/social/deviantart.png) no-repeat;}
&.dribbble {background: url(../img/social/dribbble.png) no-repeat;}
&.dropbox {background: url(../img/social/dropbox.png) no-repeat;}
&.evernote {background: url(../img/social/evernote.png) no-repeat;}
&.facebook {background: url(../img/social/facebook.png) no-repeat;}
&.forrst {background: url(../img/social/forrst.png) no-repeat;}
&.github {background: url(../img/social/github.png) no-repeat;}
&.googleplus {background: url(../img/social/googleplus.png) no-repeat;}
&.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;}
&.last-fm {background: url(../img/social/last-fm.png) no-repeat;}
&.linkedin {background: url(../img/social/linkedin.png) no-repeat;}
&.picasa {background: url(../img/social/picasa.png) no-repeat;}
&.pintrest {background: url(../img/social/pintrest.png) no-repeat;}
&.rss {background: url(../img/social/rss.png) no-repeat;}
&.skype {background: url(../img/social/skype.png) no-repeat;}
&.spotify {background: url(../img/social/spotify.png) no-repeat;}
&.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;}
&.tumblr {background: url(../img/social/tumblr.png) no-repeat;}
&.twitter {background: url(../img/social/twitter.png) no-repeat;}
&.vimeo {background: url(../img/social/vimeo.png) no-repeat;}
&.wordpress {background: url(../img/social/wordpress.png) no-repeat;}
&.xing {background: url(../img/social/xing.png) no-repeat;}
&.yahoo {background: url(../img/social/yahoo.png) no-repeat;}
&.youtube {background: url(../img/social/youtube.png) no-repeat;}
&.vk {background: url(../img/social/vk.png) no-repeat;}
&.instagram {background: url(../img/social/instagram.png) no-repeat;}
&.reddit {background: url(../img/social/reddit.png) no-repeat;}
&.aboutme {background: url(../img/social/aboutme.png) no-repeat;}
&.flickr {background: url(../img/social/flickr.png) no-repeat;}
&.foursquare {background: url(../img/social/foursquare.png) no-repeat;}
&.gravatar {background: url(../img/social/gravatar.png) no-repeat;}
&.klout {background: url(../img/social/klout.png) no-repeat;}
&.myspace {background: url(../img/social/myspace.png) no-repeat;}
&.quora {background: url(../img/social/quora.png) no-repeat;}
&:hover {
background-position:0 -38px;
}
}
.social-icon-color {
opacity: 0.7;
background-position:0 -38px !important;
&:hover {
opacity: 1;
}
}