]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Social Buttons for Bootstrap | |
3 | * | |
4 | * Copyright 2013-2015 Panayiotis Lipiridis | |
5 | * Licensed under the MIT License | |
6 | * | |
7 | * https://github.com/lipis/bootstrap-social | |
8 | */ | |
9 | ||
10 | @bs-height-base: (@line-height-computed + @padding-base-vertical * 2); | |
11 | @bs-height-lg: (floor(@font-size-large * @line-height-base) + @padding-large-vertical * 2); | |
12 | @bs-height-sm: (floor(@font-size-small * 1.5) + @padding-small-vertical * 2); | |
13 | @bs-height-xs: (floor(@font-size-small * 1.2) + @padding-small-vertical + 1); | |
14 | ||
15 | .btn-social { | |
16 | position: relative; | |
17 | padding-left: (@bs-height-base + @padding-base-horizontal); | |
18 | text-align: left; | |
19 | white-space: nowrap; | |
20 | overflow: hidden; | |
21 | text-overflow: ellipsis; | |
22 | > :first-child { | |
23 | position: absolute; | |
24 | left: 0; | |
25 | top: 0; | |
26 | bottom: 0; | |
27 | width: @bs-height-base; | |
28 | line-height: (@bs-height-base + 2); | |
29 | font-size: 1.6em; | |
30 | text-align: center; | |
31 | border-right: 1px solid rgba(0, 0, 0, 0.2); | |
32 | } | |
33 | &.btn-lg { | |
34 | padding-left: (@bs-height-lg + @padding-large-horizontal); | |
35 | > :first-child { | |
36 | line-height: @bs-height-lg; | |
37 | width: @bs-height-lg; | |
38 | font-size: 1.8em; | |
39 | } | |
40 | } | |
41 | &.btn-sm { | |
42 | padding-left: (@bs-height-sm + @padding-small-horizontal); | |
43 | > :first-child { | |
44 | line-height: @bs-height-sm; | |
45 | width: @bs-height-sm; | |
46 | font-size: 1.4em; | |
47 | } | |
48 | } | |
49 | &.btn-xs { | |
50 | padding-left: (@bs-height-xs + @padding-small-horizontal); | |
51 | > :first-child { | |
52 | line-height: @bs-height-xs; | |
53 | width: @bs-height-xs; | |
54 | font-size: 1.2em; | |
55 | } | |
56 | } | |
57 | } | |
58 | ||
59 | .btn-social-icon { | |
60 | .btn-social; | |
61 | height: (@bs-height-base + 2); | |
62 | width: (@bs-height-base + 2); | |
63 | padding: 0; | |
64 | > :first-child { | |
65 | border: none; | |
66 | text-align: center; | |
67 | width: 100%; | |
68 | } | |
69 | &.btn-lg { | |
70 | height: @bs-height-lg; | |
71 | width: @bs-height-lg; | |
72 | padding-left: 0; | |
73 | padding-right: 0; | |
74 | } | |
75 | &.btn-sm { | |
76 | height: (@bs-height-sm + 2); | |
77 | width: (@bs-height-sm + 2); | |
78 | padding-left: 0; | |
79 | padding-right: 0; | |
80 | } | |
81 | &.btn-xs { | |
82 | height: (@bs-height-xs + 2); | |
83 | width: (@bs-height-xs + 2); | |
84 | padding-left: 0; | |
85 | padding-right: 0; | |
86 | } | |
87 | } | |
88 | ||
89 | .btn-social(@color-bg, @color: #fff) { | |
90 | background-color: @color-bg; | |
91 | .button-variant(@color, @color-bg, rgba(0, 0, 0, .2)); | |
92 | } | |
93 | ||
94 | .btn-adn { | |
95 | .btn-social(#d87a68); | |
96 | } | |
97 | ||
98 | .btn-bitbucket { | |
99 | .btn-social(#205081); | |
100 | } | |
101 | ||
102 | .btn-dropbox { | |
103 | .btn-social(#1087dd); | |
104 | } | |
105 | ||
106 | .btn-facebook { | |
107 | .btn-social(#3b5998); | |
108 | } | |
109 | ||
110 | .btn-flickr { | |
111 | .btn-social(#ff0084); | |
112 | } | |
113 | ||
114 | .btn-foursquare { | |
115 | .btn-social(#f94877); | |
116 | } | |
117 | ||
118 | .btn-github { | |
119 | .btn-social(#444444); | |
120 | } | |
121 | ||
122 | .btn-google { | |
123 | .btn-social(#dd4b39); | |
124 | } | |
125 | ||
126 | .btn-instagram { | |
127 | .btn-social(#3f729b); | |
128 | } | |
129 | ||
130 | .btn-linkedin { | |
131 | .btn-social(#007bb6); | |
132 | } | |
133 | ||
134 | .btn-microsoft { | |
135 | .btn-social(#2672ec); | |
136 | } | |
137 | ||
138 | .btn-openid { | |
139 | .btn-social(#f7931e); | |
140 | } | |
141 | ||
142 | .btn-pinterest { | |
143 | .btn-social(#cb2027); | |
144 | } | |
145 | ||
146 | .btn-reddit { | |
147 | .btn-social(#eff7ff, #000); | |
148 | } | |
149 | ||
150 | .btn-soundcloud { | |
151 | .btn-social(#ff5500); | |
152 | } | |
153 | ||
154 | .btn-tumblr { | |
155 | .btn-social(#2c4762); | |
156 | } | |
157 | ||
158 | .btn-twitter { | |
159 | .btn-social(#55acee); | |
160 | } | |
161 | ||
162 | .btn-vimeo { | |
163 | .btn-social(#1ab7ea); | |
164 | } | |
165 | ||
166 | .btn-vk { | |
167 | .btn-social(#587ea3); | |
168 | } | |
169 | ||
170 | .btn-yahoo { | |
171 | .btn-social(#720e9e); | |
172 | } |