From 61e67c8b1f44edbf793dae71c5f203b676526f37 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Mon, 26 Jul 2021 09:10:43 +0200
Subject: [PATCH] improvement: refactor buttons

Now buttons is divided into three mixins, the layout, the style and the
hover
---
 src/scss/_definitions.scss        |  7 +++--
 src/scss/components/_buttons.scss | 45 +++++++++++++++++--------------
 src/scss/components/_cards.scss   |  8 +++---
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss
index fa0c9cb..0a4c240 100644
--- a/src/scss/_definitions.scss
+++ b/src/scss/_definitions.scss
@@ -105,10 +105,14 @@ $screen-xxl-min: 1600px;
   border-radius: $border-radius $border-radius $border-radius $border-radius;
 }
 
-@mixin biseau($size) {
+@mixin button-style($size) {
     position: relative;
     z-index:1;
     overflow: visible;
+    @include borders();
+    @include border-radius();
+
+    background-color:transparent;
 
     &:before {
         content: " ";
@@ -119,6 +123,5 @@ $screen-xxl-min: 1600px;
         bottom:0;
         z-index:-1;
         transform: skewX(-15deg);
-        transition: background-color 0.3s;
     }
 }
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
index d76e46c..06c1d4a 100644
--- a/src/scss/components/_buttons.scss
+++ b/src/scss/components/_buttons.scss
@@ -11,11 +11,13 @@ $button_large: $lineheight;
 $button_small: $lineheight_quarter;
 
 @mixin button($size) {
-  @include button-nobiseau($size);
-  @include biseau($size);
+  @include button-layout($size);
+  @include button-style($size);
+  @include button-hover();
+  font-weight: $fontweight_base;
 }
 
-@mixin button-nobiseau($size) {
+@mixin button-layout($size) {
     padding: $size;
     padding-top: $size/3;
     padding-bottom: $size/3;
@@ -25,25 +27,27 @@ $button_small: $lineheight_quarter;
     //font-size: 4.75mm;
     line-height:$lineheight;
     height:auto;
-    @include borders();
-    @include border-radius();
-    font-weight: $fontweight_base;
+}
 
-    background-color:transparent;
+@mixin button-hover() {
+  transition: background 0.3s, border .3s, box-shadow .3s, color .3s;
+  &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
+      text-decoration:none;
+      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;
+      }
+  }
 
-    &: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 0.3s;
+  }
 }
 
 @mixin colorize-button($background-color) {
@@ -97,7 +101,8 @@ $button_small: $lineheight_quarter;
 }
 
 .menu-label {
-    @include biseau($button_small);
+    @include button-style($button_small);
+    @include button-hover();
     padding-left: $button_small;
     padding-right: $button_small;
 }
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index c8a3315..1d730cc 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -35,7 +35,7 @@ $card-smallpad: $lineheight_half;
 
     width:95%;
 
-    @include biseau($size);
+    @include button-style($size);
 
     h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
         font-family:$basefont;
@@ -104,7 +104,8 @@ $card-smallpad: $lineheight_half;
             text-overflow: ellipsis;
             overflow:hidden;
 
-            @include biseau($lineheight_half);
+            @include button-style($lineheight_half);
+            @include button-hover();
 
             strong {
               font-weight: 900;
@@ -128,7 +129,8 @@ $card-smallpad: $lineheight_half;
                 text-decoration:none;
                 color: $color-primary;
 
-                @include biseau($lineheight_half);
+                @include button-style($lineheight_half);
+                @include button-hover();
 
                 &:before {
                     background-color: darken($color-background-alt, 7.5%)