1 files changed, 228 insertions, 0 deletions

diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
new file mode 100755
index 0000000..e1252b6
--- /dev/null
+++ b/assets/scss/_buttons.scss
@@ -0,0 +1,228 @@
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Base styles
+//
+
+.btn {
+  display: inline-block;
+  font-weight: $btn-font-weight;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: $btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
+  @include transition($btn-transition);
+  box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+
+  // Share hover and focus styles
+  @include hover-focus {
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  // Opinionated: add "hand" cursor to non-disabled .btn elements
+  &:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    background-image: none;
+    @include box-shadow($btn-active-box-shadow);
+
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  background-color: transparent;
+
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+  }
+
+  // No need for an active state here
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+}
+
+.btn-sm {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+  display: block;
+  width: 100%;
+
+  // Vertically space out multiple block buttons
+  + .btn-block {
+    margin-top: $btn-block-spacing-y;
+  }
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+.navbar-light{
+
+  background-color: #fff;
+  box-shadow: 0 3px 10px #0000001a;
+
+  .btn-facebook{
+    color: #3b5998 !important;
+  }
+
+  .btn-instagram{
+    color: #fd5d58 !important;
+  }
+  .btn-linkedin{
+    color: #0077b5 !important;
+  }
+  .btn-twitter{
+    color: #1da1f3 !important; 
+  }
+  .btn-snapchat{
+    color: #000 !important;
+  }
+  .btn-google-plus{
+    color: #dd483c !important;
+  }
+  .btn-google{
+    color: #4c8cf6 !important;
+  }
+  .btn-dribbble{
+    color: #eb4c88 !important;
+  }
+  .btn-youtube{
+    color: #dd483c !important;
+  }
+  .btn-behance{
+    color: #1669ff !important;
+  }
+  .btn-medium{
+    color: #000 !important;
+  }
+}
+
+.btn-filled{
+  color: #fff !important;
+
+  &.btn-facebook{
+    background-color: #3b5998 !important;
+  }
+
+  &.btn-instagram{
+    background-color: #fd5d58 !important;
+  }
+  &.btn-linkedin{
+    background-color: #0077b5 !important;
+  }
+  &.btn-twitter{
+    background-color: #1da1f3 !important; 
+  }
+  &.btn-snapchat{
+    background-color: #000 !important;
+  }
+  &.btn-google-plus{
+    background-color: #dd483c !important;
+  }
+  &.btn-google{
+    background-color: #4c8cf6 !important;
+  }
+  &.btn-dribbble{
+    background-color: #eb4c88 !important;
+  }
+  &.btn-youtube{
+    background-color: #dd483c !important;
+  }
+  &.btn-behance{
+    background-color: #1669ff !important;
+  }
+  &.btn-medium{
+    background-color: #000 !important;
+  }
+  &.btn-pinterest{
+    background-color: #bd081a !important;
+  }
+
+}
\ No newline at end of file