bluesky-bootstrap-theme/scss/components/_buttons.scss

// Mixins, variables and colorizations


@mixin button() {
	@include borders();
	@include border-radius();
	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}

// Colorization functions

@mixin colorize-button() {
    @each $name, $color in list-colors() {
        &-#{$name} { @include button-color(get-color($name), #FFF, #000); }
    }
}

@mixin button-color($background-color, $light-color, $dark-color) {
    @include background-color($background-color, $light-color, $dark-color);
  &, &:not(.disabled):not(:disabled) {
    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
      @include button-hover($background-color, $light-color, $dark-color);
    }
  }
}

@mixin button-hover($background-color, $light-color, $dark-color) {
    @include background-color(lighten($background-color, 10%), $light-color, $dark-color);
}

// 11.1 - Buttons

.btn {
    @include button();
	box-shadow: $inset-shadow, $narrow-shadow;

    &:hover {
        box-shadow: $inset-shadow, $narrow-shadow;
        @include button();
    }

    &:focus {
        box-shadow: $inset-shadow, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
        outline: none;
    }

    &:active {
        box-shadow: $inset-shadow-inverted, $narrow-shadow;
        @include button();

        &:focus {
            box-shadow: $inset-shadow-inverted, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
            outline: none;
        }
    }

    @include colorize-button();
}

.btn-group {
	box-shadow: none;
}

.btn-group .btn {
	@include border-radius();
	&:not(:first-child) {
	  border-top-left-radius: 0;
	  border-bottom-left-radius: 0;
	}
	&:not(:last-child) {
	  border-top-right-radius: 0;
	  border-bottom-right-radius: 0;
	}
}

/* 11.2 - Badges */

.badge {
    font-weight:400;

    @include colorize-button();
}

/* 11.3 - Réseaux sociaux */

.share-buttons {
  margin-top: $baselinerem;
  margin-bottom: $baselinerem;
}

.reagir {
  text-align:right;
}

.btn {
  &-facebook {@include button-color(#3B5998, #FFF, #000);}
  &-twitter {@include button-color(#55ACEE, #FFF, #000);}
  &-googleplus {@include button-color(#d34836, #FFF, #000);}
  &-diaspora {@include button-color(#313739, #FFF, #000);}
  &-mastodon {@include button-color(#282c37, #FFF, #000);}
}