/* * Social Buttons for Bootstrap * * Copyright 2013-2016 Panayiotis Lipiridis * Licensed under the MIT License * * https://github.com/lipis/bootstrap-social */ /** * Classic buttons */ .btn.btn-social { position: relative; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; span { margin-left: $input-height; } > :first-child { position: absolute; left: 0; top: 0; bottom: 0; width: $input-height; display: flex; align-items: center; justify-content: center; font-size: 1.6em; text-align: center; border-right: 1px solid rgba(0, 0, 0, 0.2); } &.btn-lg { span { margin-left: $input-height-lg; } > :first-child { line-height: $input-height-lg; width: $input-height-lg; font-size: 1.8em; } } &.btn-sm { span { margin-left: $input-height-lg; } > :first-child { line-height: $input-height-sm; width: $input-height-sm; font-size: 1.4em; } } } /** * Button without text(only icon) */ .btn-social-icon { display: flex; align-items: center; font-size: 14px; line-height: 17px; color: $gray-800; text-transform: uppercase; letter-spacing: 0.08em; i { height: $input-height; flex: 0 0 $input-height; width: $input-height; border-radius: 100%; line-height: $input-height; text-align: center; margin-right: 10px; } &:hover { color: $gray-600; } &.btn-social-icon-sm { font-size: 12px; i { height: $input-height-sm; flex: 0 0 $input-height-sm; line-height: $input-height-sm; margin-right: 5px; } } } @mixin btn-social($color-bg, $color: #fff) { background-color: $color-bg; @include button-variant($color-bg, $color); } .btn-adn { @include btn-social(#d87a68); } .btn-bitbucket { @include btn-social(#205081); } .btn-dropbox { @include btn-social(#1087dd); } .btn-facebook { @include btn-social(#3b5998); } .btn-flickr { @include btn-social(#ff0084); } .btn-foursquare { @include btn-social(#f94877); } .btn-github { @include btn-social(#444444); } .btn-google { @include btn-social(#dd4b39); } .btn-instagram { @include btn-social(#3f729b); } .btn-linkedin { @include btn-social(#007bb6); } .btn-microsoft { @include btn-social(#2672ec); } .btn-odnoklassniki { @include btn-social(#f4731c); } .btn-openid { @include btn-social(#f7931e); } .btn-pinterest { @include btn-social(#cb2027); } .btn-reddit { @include btn-social(#eff7ff, #000); } .btn-soundcloud { @include btn-social(#ff5500); } .btn-tumblr { @include btn-social(#2c4762); } .btn-twitter { @include btn-social(#55acee); } .btn-vimeo { @include btn-social(#1ab7ea); } .btn-vk { @include btn-social(#587ea3); } .btn-yahoo { @include btn-social(#720e9e); }