bootstrap-social.less 3.2 KB

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