lipis · Sep 18, 2017 · Nov 10, 2017 · Dec 23, 2017 · Jan 1, 2018 · Jan 1, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 .DS_Store
 dev
 node_modules
+.sass-cache
+yarn.lock
diff --git a/README.md b/README.md
@@ -1,22 +1,19 @@
 
 Social Buttons for Bootstrap
 ============================
-[![npm version](https://badge.fury.io/js/bootstrap-social.svg)](https://badge.fury.io/js/bootstrap-social)
-[![Bower version](https://badge.fury.io/bo/bootstrap-social.svg)](https://badge.fury.io/bo/bootstrap-social)
 
 Social Buttons made in pure CSS based on
 [Bootstrap](http://twbs.github.io/bootstrap/) and
 [Font Awesome](http://fortawesome.github.io/Font-Awesome/)!
 
-[Check the live demo!](http://lipis.github.io/bootstrap-social)
+[Check the live demo!](http://niftylettuce.com/bootstrap-social/)
 
 Installation
 ------------
 
-Include the `bootstrap-social.css` or `bootstrap-social.less` in your project, or
-install it through [Bower](http://bower.io/):
+Include the `bootstrap-social.css` or `bootstrap-social.scss` in your project.
 
-    bower install bootstrap-social
+You can also include `_custom.scss` if you'd like to import your own `_functions`, `_mixins`, and `_variables` (see source of `bootstrap-social.scss` for insight).
 
 Available classes
 -----------------
@@ -55,8 +52,3 @@ Examples
   <span class="fa fa-twitter"></span>
 </a>
 ```
-
-Notes
------
-For now I won't accept any request for new buttons as I'm planning to
-split the main CSS to have separate files for all of the requested ones.
diff --git a/_custom.scss b/_custom.scss
@@ -0,0 +1,246 @@
+/*
+ * Social Buttons for Bootstrap
+ *
+ * Copyright 2013-2016 Panayiotis Lipiridis
+ * Licensed under the MIT License
+ *
+ * https://github.com/lipis/bootstrap-social
+ */
+
+// bootstrap-social support for bootstrap 4.x
+// <https://github.com/lipis/bootstrap-social/issues/123>
+$btn-padding-y: 0.5rem;
+$btn-padding-y-lg: 0.75rem;
+$btn-padding-y-sm: 0.25rem;
+$btn-line-height: 1.25;
+$btn-padding-x: 1rem;
+$btn-padding-x-lg: 1.5rem;
+$btn-padding-x-sm: 0.5rem;
+$padding-base-horizontal: $btn-padding-y;
+$padding-large-horizontal: $btn-padding-y-lg;
+$padding-small-horizontal: $btn-padding-y-sm;
+
+$bs-height-base: floor($btn-line-height + $btn-padding-x * 2);
+$bs-height-lg: floor($btn-line-height + $btn-padding-x-lg * 2);
+$bs-height-sm: floor($btn-line-height + $btn-padding-x-sm * 2);
+$bs-height-xs: floor($btn-line-height + $btn-padding-x-sm * 2);
+
+.btn-social {
+  position: relative;
+  padding-left: $bs-height-base + $padding-base-horizontal;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  > :first-child {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: $bs-height-base;
+    line-height: $bs-height-base + 2;
+    font-size: 1.6em;
+    text-align: center;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  &.btn-lg {
+    padding-left: $bs-height-lg + $padding-large-horizontal;
+
+    > :first-child {
+      line-height: $bs-height-lg;
+      width: $bs-height-lg;
+      font-size: 1.8em;
+    }
+  }
+
+  &.btn-sm {
+    padding-left: $bs-height-sm + $padding-small-horizontal;
+
+    > :first-child {
+      line-height: $bs-height-sm;
+      width: $bs-height-sm;
+      font-size: 1.4em;
+    }
+  }
+
+  &.btn-xs {
+    padding-left: $bs-height-xs + $padding-small-horizontal;
+
+    > :first-child {
+      line-height: $bs-height-xs;
+      width: $bs-height-xs;
+      font-size: 1.2em;
+    }
+  }
+}
+
+.btn-social {
+  > :first-child {
+    line-height: $btn-line-height !important;
+    padding-top: $btn-padding-y !important;
+    padding-bottom: $btn-padding-y !important;
+    font-size: inherit !important;
+  }
+
+  &.btn-lg {
+    > :first-child {
+      line-height: $btn-line-height !important;
+      padding-top: $btn-padding-y-lg !important;
+      padding-bottom: $btn-padding-y-lg !important;
+      font-size: inherit !important;
+    }
+  }
+}
+
+.btn-social-icon {
+  @extend .btn-social;
+
+  height: $bs-height-base;
+  width: $bs-height-base;
+  padding: 0;
+
+  > :first-child {
+    border: none;
+    text-align: center;
+    width: 100% !important;
+  }
+
+  &.btn-lg {
+    height: $bs-height-lg;
+    width: $bs-height-lg;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.btn-sm {
+    height: $bs-height-sm;
+    width: $bs-height-sm;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.btn-xs {
+    height: $bs-height-xs;
+    width: $bs-height-xs;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@mixin btn-social($color-bg, $color: null) {
+  @if $color {
+    color: $color;
+  }
+
+  @include button-variant($color-bg, $color-bg);
+}
+
+.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);
+}
+
+.btn-soundcloud {
+  @include btn-social(#ff5500);
+}
+
+.btn-tumblr {
+  @include btn-social(#2c4762);
+}
+
+.btn-twitter {
+  @include btn-social(#1DA1F2, #fff);
+}
+
+.btn-vimeo {
+  @include btn-social(#1ab7ea);
+}
+
+.btn-vk {
+  @include btn-social(#587ea3);
+}
+
+.btn-yahoo {
+  @include btn-social(#720e9e);
+}
+
+.btn-stripe {
+  @include btn-social(#1275FF);
+}
+
+.btn-amazon {
+  @include btn-social(#FF9900, #232F3E);
+}
+
+.btn-patreon {
+  @include btn-social(#F96854, #052D49);
+}
+
+.btn-untappd {
+  @include btn-social(#ffc000);
+}
+
+.btn-gitlab {
+  @include btn-social(#de7e00);
+}
+
+.btn-whatsapp {
+  @include btn-social(#25D366, #fff);
+}