chore: split buttons

src/scss/_drawing.scss

@@ -6,6 +6,8 @@
  */
 
 @import 'components/buttons';
+@import 'components/badges';
+@import 'components/btn-groups';
 @import 'components/breadcrumb';
 @import 'components/navbars';
 @import 'components/pagination';

src/scss/_mixins.scss

@@ -5,5 +5,6 @@
 @import 'mixins/responsive';
 @import 'mixins/borders';
 @import 'mixins/shape';
+@import 'mixins/btns';
 @import 'mixins/panels';
 @import 'mixins/li';

src/scss/components/_badges.scss

@@ -0,0 +1,12 @@
+.badge {
+  @include button(0rem);
+  padding-left: $button_small;
+  padding-right: $button_small;
+  text-decoration:none;
+
+  @each $name, $color in list-colors() {
+      &-#{$name} {
+        @include button-color(get-color($name));
+      }
+  }
+}

src/scss/components/_breadcrumb.scss

@@ -19,7 +19,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
         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;
+        margin:0 $button-group-margin 0 $button-group-margin;
 
         &.active {
             @include button-fullcontrol($color-primary, $color-primary, $color-font-light);

src/scss/components/_btn-groups.scss

@@ -0,0 +1,26 @@
+// BUTTONS GROUPS
+
+.btn-toolbar {
+    padding: 0 $button-large;
+}
+
+.btn-group {
+  & > .btn {
+    @include border-radius($btn-radius);
+    margin:0 $button-group-margin 0 $button-group-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;
+  }
+}

src/scss/components/_buttons.scss

@@ -4,72 +4,6 @@
  *
 */
 
-$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 {
@@ -88,90 +22,41 @@ $breadcrumb_margin: $button-large/2.5;
   text-decoration:none;
 }
 
-.chip, .badge {
-  @include button(0rem);
-  padding-left: $button_small;
-  padding-right: $button_small;
-  text-decoration:none;
-}
-
-// 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;
-  }
-}
-
 // COLORIZE BUTTONS
 
-.btn, a.btn, .btn.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
+.btn {
-    @each $name, $color in list-colors() {
+  @each $name, $color in list-colors() {
-        &-#{$name} {
+      &-#{$name} {
-          @include button-color(get-color($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;
+  margin-top: $lineheight;
-    padding-bottom: $lineheight;
+  padding-bottom: $lineheight;
-  }
+}
 
-  .reagir {
+.reagir {
-    text-align:right;
+  text-align:right;
-  }
+}
-  .btn, a.btn {
+
-    &-facebook {@include button-color(#3B5998);}
+.btn, a.btn {
-    &-twitter {@include button-color(#55ACEE);}
+  &-facebook {@include button-color(#3B5998);}
-    &-googleplus {@include button-color(#d34836);}
+  &-twitter {@include button-color(#55ACEE);}
-    &-diaspora {@include button-color(#313739);}
+  &-googleplus {@include button-color(#d34836);}
-    &-mastodon {@include button-color(#282c37);}
+  &-diaspora {@include button-color(#313739);}
-  }
+  &-mastodon {@include button-color(#282c37);}
+}
 
 strong.btn-fake {
   @include button($button_large);
   @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
 }
+
+.btn-readmore, .btn-link {
+  @include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
+  @include prefer-no-borders();
+}

src/scss/components/_menus.scss

@@ -69,3 +69,11 @@
     padding-left: $button_small;
     padding-right: $button_small;
 }
+
+.label {
+  @each $name, $color in list-colors() {
+      &-#{$name} {
+        @include label-color(get-color($name));
+      }
+  }
+}

src/scss/components/_navbars.scss

@@ -8,3 +8,10 @@
     }
     @include li-no-margin();
 }
+
+.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;
+}

src/scss/definitions/_sizing.scss

@@ -9,6 +9,11 @@ $lineheight_quarter: $lineheight/4;
 
 $card-header-margin: $lineheight;
 
+// Buttons
+$button_large: $lineheight;
+$button_small: $lineheight_quarter;
+$button-group-margin: $button-large/2.5;
+
 // Responsives sizes
 // - sm : Small tablets and large smartphones (landscape view)
 // - md : Small tablets (portrait view)

src/scss/mixins/_btns.scss

@@ -0,0 +1,73 @@
+@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));
+}
+
+@mixin label-color($background-color) {
+    @include colorize-shape($background-color);
+    color:getTextColorFromBackground($background-color);
+    &:visited {
+      @include colorize-shape($background-color);
+      color:getTextColorFromBackground($background-color);
+    }
+    &, &:visited, &:not(.disabled):not(:disabled) {
+        &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
+          @include colorize-shape(accentuate($background-color));
+          color:lighten(getTextColorFromBackground($background-color), 5%);
+        }
+    }
+}