improvement: rework button styling

index.html

@@ -52,9 +52,7 @@
 
 <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
-    <li class="breadcrumb-item"><a href="#">Accueil</a></li>
+    <li class="breadcrumb-item"><a href="#">Accueil</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
-    <li class="breadcrumb-item"><a href="#">Contenus</a></li>
-    <li class="breadcrumb-item active" aria-current="page">Article exemple</li>
   </ol>
 </nav>
 
@@ -210,8 +208,8 @@ In id suscipit elit.</code></pre>
 </div>
 
 <aside class="sidebar column col-3">
-  <ul class="menu menu-magenta">
+  <ul class="menu menu-primary">
-    <li class="menu-header bg-magenta"><i class="fa fa-folder"></i> Catégories</li>
+    <li class="menu-header"><i class="fa fa-folder"></i> Catégories</li>
     <li class="menu-item">
       <a href="#">
         Images

scss/_buttons.scss

@@ -0,0 +1,158 @@
+/*
+ * 3. Buttons and labels
+ * All clickable elements
+ *
+*/
+
+$color-button-light: $color-light;
+$color-button-dark: $color-dark;
+
+$button_large: 1em;
+$button_small: 0.40em;
+
+@mixin biseau($size) {
+    position: relative;
+    z-index:1;
+    overflow: visible;
+
+    &:before {
+        content: " ";
+        position: absolute;
+        top:0;
+        left:-$size/1.5;
+        right:-$size/1.5;
+        bottom:0;
+        z-index:-1;
+        transform: skewX(-15deg);
+    }
+
+}
+
+@mixin button($size) {
+    padding: $size;
+    padding-top: $size/2;
+    padding-bottom:$size/2;
+    height:auto;
+    margin: $size/1.5;
+    @include borders();
+    @include border-radius();
+    
+
+    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
+        text-decoration:none;
+    }
+
+    @include biseau($size);
+}
+
+@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();
+    }
+}
+
+.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)
+}
+
+// Breadcrumb
+
+ul.breadcrumb, ol.breadcrumb, .breadcrumb {
+    @include biseau($button-large);
+    padding: 0px;
+    background-color:transparent;
+}
+
+.breadcrumb li.breadcrumb-item {
+    margin:0!important;
+    padding:0!important;
+
+    &:before {
+        display:none;
+    }
+
+    a, span {
+        @include button($button-large);
+        @include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
+        margin:0 $button-large/1.5 0 $button-large/1.5!important;
+    
+        &: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);}
+  }
+  
+  /* social */
+  
+  .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);}
+  }

scss/_colorize.scss

@@ -1,64 +0,0 @@
-/* ------------------ COULEURS ------------------- */
-
-$color-button-light: $color-light;
-$color-button-dark: $color-dark;
-
-@mixin button-lighten($background-color, $text-color) {
-  background-color: lighten($background-color, 10%); 
-  color:$text-color;
-}
-
-@mixin button-color($background-color, $text-color) {
-  background-color: $background-color;
-  color: $text-color;
-  &, &:not(.disabled):not(:disabled) {
-    &:hover, &:active, &:focus {
-      @include button-lighten($background-color, $text-color);
-    }
-  }
-}
-
-@mixin badge-color($background-color, $text-color) {
-  background-color: $background-color;
-  color: $text-color;
-    &, &:not(.disabled):not(:disabled) {
-    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
-      @include button-lighten($background-color, $text-color);
-    }
-  }
-}
-
-/* BUTTONS & BADGES */
-
-.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.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); }
-}
-
-/* social */
-
-.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);}
-}

scss/_commons.scss

@@ -4,24 +4,7 @@
 
 /* ------------------ BUTTONS ------------------- */
 
-.btn {
+@import 'buttons';
-	@include borders();
-	@include border-radius();
-	box-shadow: $large-shadow, $inset-shadow;
-	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
-}
-
-.btn:hover {
-  position:relative;
-	box-shadow: $narrow-shadow, $inset-shadow;
-	@include borders();
-}
-
-.btn:active {
-  position:relative;
-	box-shadow: $inset-shadow-inverted;
-	@include borders();
-}
 
 .btn-group {
 	box-shadow: $large-shadow;
@@ -93,8 +76,6 @@
   width:100%
 }
 
-
-
 @media(max-width:767px){}
 @media(min-width:768px){}
 @media(min-width:992px){

scss/_palette.scss

@@ -52,10 +52,10 @@ a, a:hover, a:active {
 }
 
 ::selection {
-    @include background-color($color-selection, $color-button-light);
+    @include background-color($color-selection, $color-light);
 }
 ::-moz-selection {
-    @include background-color($color-selection, $color-button-light);
+    @include background-color($color-selection, $color-light);
 }
 
 mark {
@@ -71,26 +71,26 @@ blockquote, pre {
 /* BACKGROUNDS */
 
 .bg {
-    &-blue { @include background-color($color-blue, $color-button-light); }
+    &-blue { @include background-color($color-blue, $color-light); }
-    &-violet { @include background-color($color-violet, $color-button-light); }
+    &-violet { @include background-color($color-violet, $color-light); }
-    &-purple { @include background-color($color-purple, $color-button-light); }
+    &-purple { @include background-color($color-purple, $color-light); }
-    &-red { @include background-color($color-red, $color-button-light); }
+    &-red { @include background-color($color-red, $color-light); }
-    &-orange { @include background-color($color-orange, $color-button-light); }
+    &-orange { @include background-color($color-orange, $color-light); }
-    &-green { @include background-color($color-green, $color-button-light); }
+    &-green { @include background-color($color-green, $color-light); }
-    &-skyblue { @include background-color($color-skyblue, $color-button-light); }
+    &-skyblue { @include background-color($color-skyblue, $color-light); }
-    &-dark { @include background-color($color-dark, $color-button-light); }
+    &-dark { @include background-color($color-dark, $color-light); }
-    &-light { @include background-color($color-light, $color-button-dark); }
+    &-light { @include background-color($color-light, $color-dark); }
-    &-turquoise { @include background-color($color-turquoise, $color-button-light); }
+    &-turquoise { @include background-color($color-turquoise, $color-light); }
-    &-yellow { @include background-color($color-yellow, $color-button-light); }
+    &-yellow { @include background-color($color-yellow, $color-light); }
-    &-brown { @include background-color($color-brown, $color-button-light); }
+    &-brown { @include background-color($color-brown, $color-light); }
-    &-grey { @include background-color($color-grey, $color-button-light); }  
+    &-grey { @include background-color($color-grey, $color-light); }  
     
-    &-primary { @include background-color($color-primary, $color-button-light); }
+    &-primary { @include background-color($color-primary, $color-light); }
-    &-secondary { @include background-color($color-secondary, $color-button-light); }
+    &-secondary { @include background-color($color-secondary, $color-light); }
-    &-warning { @include background-color($color-warning, $color-button-light); }
+    &-warning { @include background-color($color-warning, $color-light); }
-    &-danger { @include background-color($color-danger, $color-button-light); }
+    &-danger { @include background-color($color-danger, $color-light); }
-    &-info { @include background-color($color-info, $color-button-light); }
+    &-info { @include background-color($color-info, $color-light); }
-    &-success { @include background-color($color-success, $color-button-light); }
+    &-success { @include background-color($color-success, $color-light); }
 }
   
   /* TEXT */

scss/style.scss

@@ -3,7 +3,3 @@
 @import 'definitions';
 
 @import 'commons';
-
-@import 'colorize';
-
-@import 'overrides';