kspace-static/scss/_buttons.scss

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

$color-button-light: $color-light;
$color-button-dark: $color-dark;

$button_large: 1.5rem;
$button_small: 0.375rem;

@mixin biseau($size) {
    position: relative;
    z-index:1;
    overflow: visible;

    &:before {
        content: " ";
        position: absolute;
        top:0;
        left:-$size/2;
        right:-$size/2;
        bottom:0;
        z-index:-1;
        transform: skewX(-15deg);
    }

}

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

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

    @include biseau($size);

    &: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);
    &, &: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, lighten($background-color, 10%), $text-color)
}

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

.btn {
	@include button($button_large);
    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
    &:hover, &:active {
        @include borders();
    }

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

.label, label.label, a.label, .chip, a.chip {
    @include button($button_small);
}

// NAVBAR SPECIAL BUTTONS

.navbar .btn-link {
    @include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-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-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-darken($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:1.5rem;
  }
  
  .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);}
  }