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;
$breadcrumb_margin: $button-large/2.5;

@mixin button($size) {
  @include button-layout($size);
  @include shape-style($size);
  @include button-hover();
  font-weight: $fontweight_base;
}

@mixin button-layout($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;
}

@mixin button-hover() {
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  &: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;
      }
  }

  &:before {
    transition: background-color .2s;
  }
}

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

@mixin button-color($background-color) {
    @include button-fullcontrol($background-color, lighten($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 shape-style($button_small);
    @include button-hover();
    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);
    @include prefer-no-borders();
    padding-left: $button_small;
    padding-right: $button_small;
}

.btn-readmore {
  @include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
  @include prefer-no-borders();
}

// BUTTONS GROUPS

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

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

.btn-group {
  & > .btn {
    @include border-radius($btn-radius);
    margin:0 $breadcrumb_margin 0 $breadcrumb_margin!important;
  }

  &:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius:0;
    &:before {
      content: " "!important;
      border-left:1px solid rgba(0,0,0,0.2);
    }
  }

  &:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius:0;
  }
}

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

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

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

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

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

    &:not(:first-child) a, &:not(:first-child) > span {
      border-top-left-radius: 0;
      border-bottom-left-radius:0;
      &:before {
        content: " "!important;
        border-left:1px solid rgba(0,0,0,0.2);
      }
    }

    &:not(:last-child) a, &:not(:last-child) > span {
      border-top-right-radius: 0;
      border-bottom-right-radius:0;
    }

}

// COLORIZE BUTTONS

.btn, a.btn, .btn.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));
          @include borders();
        }
    }
    &-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);}
  }