kazhnuz.css/src/scss/components/_buttons.scss

/*
 * 3. Buttons and labels
 * All clickable elements
 *
*/

$color-button-light: $color-background;
$color-button-dark: get-color("dark");

$button_large: $lineheight;
$button_small: $lineheight_quarter;

@mixin button($size) {
  @include button-nobiseau($size);
  @include biseau($size);
}

@mixin button-nobiseau($size) {
    padding: $size;
    padding-top: $size/3;
    padding-bottom: $size/3;
    margin:$size/2;
    margin-top: $size/3;
    margin-bottom: $lineheight;
    //font-size: 4.75mm;
    line-height:$lineheight;
    height:auto;
    @include borders();
    @include border-radius();
    font-weight: $fontweight_base;

    background-color:transparent;

    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
        text-decoration:none;
        background-color:transparent;
    }

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

@mixin colorize-button($background-color) {
    &:before {
        background-color: $background-color;
    }
}

@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
    @include colorize-button($background-color);
    color:$text-color;
    &:visited {
      @include colorize-button($background-color);
      color:$text-color;
    }
    &, &:visited, &:not(.disabled):not(:disabled) {
        &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
          @include colorize-button($hover-color);
          color:lighten($text-color, 5%);
        }
    }
}

@mixin button-color($background-color) {
    @include button-fullcontrol($background-color, darken($background-color, 7.5%), getTextColorFromBackground($background-color));
}

.btn {
	@include button($button_large);
    &:hover, &:active {
        @include borders();
    }

    p &:last-child {
        margin-bottom:0;
    }
}

.btn-small {
  @include button($button_small);
  padding-left: $button_small;
  padding-right: $button_small;
  text-decoration:none;
}

.chip, .badge {
  @include button(0rem);
  padding-left: $button_small;
  padding-right: $button_small;
  text-decoration:none;
}

.menu-label {
    @include biseau($button_small);
    padding-left: $button_small;
    padding-right: $button_small;
}

// NAVBAR SPECIAL BUTTONS

.btn-navbar {
    @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
    padding-left: $button_small;
    padding-right: $button_small;
}

.btn-readmore {
    @include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-font-light);
}

// BUTTONS GROUPS

$grouped-test: $button-large/1.5 - 0.05rem ;

.btn-toolbar {
    padding: 0 $button-large;
}

.btn-group {
    padding: 0px;
    background-color:transparent;
    margin-bottom: 1.33em;
}

.btn-group .btn {
    margin:0 $grouped-test 0 $grouped-test!important;
}

/* ------------------ BREADCRUMB ------------------- */

ul.breadcrumb, ol.breadcrumb, .breadcrumb {
    padding-top: 0em;
    background-color:transparent;
    margin: 0;
    padding-bottom:2rem;
}

.breadcrumb li.breadcrumb-item {
    padding:0;
    &:before {
        display:none;
    }

    a, & > span {
        display:inline-block;
        @include button($button-large);
        @include button-fullcontrol($color-background-alt, darken($color-background-alt, 5%), get-color("dark2"));
        margin:0 $button-large/2.5 0 $button-large/2.5;

        &:before {
            content: " "!important;
            border-right:1px solid rgba(0,0,0,0.2);
        }

        &.active {
            @include button-fullcontrol($color-primary, $color-primary, $color-font-light);
        }
    }

}

// COLORIZE BUTTONS

.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
    @each $name, $color in list-colors() {
        &-#{$name} { @include button-color(get-color($name)); }
    }
    &-link {
      @include button-color(transparent);
      color:$color-font!important;
    }
  }

/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */

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

  .reagir {
    text-align:right;
  }
  .btn, a.btn {
    &-facebook {@include button-color(#3B5998);}
    &-twitter {@include button-color(#55ACEE);}
    &-googleplus {@include button-color(#d34836);}
    &-diaspora {@include button-color(#313739);}
    &-mastodon {@include button-color(#282c37);}
  }