kspace-wordpress-theme/scss/components/_buttons.scss

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

$color-button-light: $color-light;
$color-button-dark: $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, $text-color) {
    //@include background-color($background-color, $text-color);
    color: $text-color;
    &:before {
        background-color: $background-color;
    }
}

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

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

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

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

.label, label.label, a.label, .chip, a.chip {
    @include biseau($button_small);
    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

.navbar .btn-link {
    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
}

.btn-readmore {
    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
}

// 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-light2, darken($color-light2, 5%), $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-light);
        }
    }


}

// COLORIZE BUTTONS

.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
    &-blue { @include button-color($color-blue, $color-button-light); }
    &-violet { @include button-color($color-violet, $color-button-light); }
    &-purple { @include button-color($color-purple, $color-button-light); }
    &-red { @include button-color($color-red, $color-button-light); }
    &-orange { @include button-color($color-orange, $color-button-light); }
    &-green { @include button-color($color-green, $color-button-light); }
    &-skyblue { @include button-color($color-skyblue, $color-button-light); }
    &-dark { @include button-color($color-dark, $color-button-light); }
    &-light { @include button-color($color-light2, $color-button-dark); }
    &-turquoise { @include button-color($color-turquoise, $color-button-light); }
    &-yellow { @include button-color($color-yellow, $color-button-light); }
    &-brown { @include button-color($color-brown, $color-button-light); }
    &-grey { @include button-color($color-grey, $color-button-light); }

    &-primary { @include button-color($color-primary, $color-button-light); }
    &-secondary { @include button-color($color-secondary, $color-button-light); }
    &-warning { @include button-color($color-warning, $color-button-light); }
    &-danger { @include button-color($color-danger, $color-button-light); }
    &-info { @include button-color($color-info, $color-button-light); }
    &-success { @include button-color($color-success, $color-button-light);}
    &-link {@include button-color(transparent, $color-dark);}
  }

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

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

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