From 3c7700e96686c445a754b87424d6702d2e60fec3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 5 Nov 2019 16:52:34 +0000
Subject: [PATCH] update: semantic css for buttons

---
 src/styles/base/main.scss | 221 ++++++++++++++++++++++++++++----------
 1 file changed, 162 insertions(+), 59 deletions(-)

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index d43fd44..ea2ea9b 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -82,55 +82,6 @@ h5 {
   font-size: 2rem;
 }
 
-button {
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-sib-route,
-sib-link,
-button,
-input,
-a {
-  cursor: pointer;
-  &:hover,
-  &:link,
-  &:active {
-    cursor: pointer;
-  }
-}
-
-sib-link.yellow-button {
-  @include icon('plus');
-
-  &::before {
-    font-size: 1.6rem;
-    margin-right: 1rem;
-  }
-}
-
-sib-delete {
-  
-  button {
-    @include icon('close');
-    background-color: $color-233-18-29;
-    border: none;
-    /*border-radius: 100em;*/
-    color: $color-0-0-100;
-    /*cursor: pointer;*/
-    /*font-size: 1.4rem;*/
-    /*font-weight: bold;*/
-    /*padding: 0.55rem 2.5rem;*/
-    /*text-transform: uppercase;*/
-
-    &::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
-    }
-  }
-}
-
 %padding-main {
   padding: 5rem;
 }
@@ -231,15 +182,6 @@ sib-delete {
   }
 }
 
-.editlink {
-  
-  @include icon('pencil');
-  background: $color-244-73-62;
-  border-radius: 50%;
-  color: white;
-  padding: 12px;
-}
-
 .name {
   color: $color-216-4-22;
   font-size: 2rem;
@@ -264,4 +206,165 @@ sib-delete {
 @import 'form';
 @import 'header';
 @import 'menu-left';
-@import 'user-avatar';
\ No newline at end of file
+@import 'user-avatar';
+
+// Button global CSS
+sib-delete,
+sib-route,
+sib-link,
+button,
+input[type='submit'],
+a,
+.button {
+  display: inline-block;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+
+  &.button {
+    padding: 0.55rem 2.5rem;
+    border-radius: 100em;
+    *, & {
+      font-size: 1.4rem;
+    }
+    
+    &.small {
+      *, & {
+        font-size: 1rem;
+      }
+    }
+
+    &.text-bold {
+      *, & {
+        font-weight: bold;
+      }
+    }
+
+    &.text-uppercase {
+      *, & {
+        text-transform: uppercase;
+      }
+    }
+    
+    &.rounded {
+      border-radius: 50%;
+      padding: 0.5rem 1rem;
+    } 
+
+    &.button-link {
+      border-radius: 100em;
+      *, & {
+        text-decoration: underline;
+      }
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.with-icon::before {
+      font-size: 1.6rem;
+      margin-right: 1rem;
+      &.icon-plus {
+        /* ... */
+      }
+      &.icon-close {
+        /* ... */
+      }
+      &.icon-edit {
+        /* ... */
+      }
+    }
+    
+    &.button-yellow {
+      background-color: white;
+      *, & {
+        color: hsl(43, 100%, 50%);
+      }
+      &.bordered {
+        border: 1px solid hsl(43, 100%, 50%);
+      }
+      &:hover {
+        background-color: #FFCE51;
+        *, & {
+          color: white;
+        }
+      }
+    }
+    
+    &.button-blue {
+      background-color: white;
+      *, & {
+        color: hsl(244, 73%, 62%);
+      }
+      &.bordered {
+        border: 1px solid hsl(244, 73%, 62%);
+      }
+      &:hover {
+        background-color: hsl(244, 73%, 62%);
+        *, & {
+          color: white;
+        }
+      }
+    }
+    
+    &.button-dark {
+      color: hsl(233, 18%, 29%);
+      background-color: white;
+      &.bordered {
+        border: 1px solid hsl(233, 18%, 29%);
+      }
+      &:hover {
+        background-color: hsl(233, 18%, 29%);
+        color: white;
+      }
+    }
+    
+    &.reversed {
+      &.button-yellow {
+        background-color: hsl(43, 100%, 50%);
+        *, & {
+          color: white;
+        }
+        &:hover {
+          background-color: #FFCE51;
+          &.bordered {
+            border: 1px solid hsl(43, 100%, 50%);
+          }
+        }
+      }
+
+      &.button-blue {
+        background-color: hsl(244, 73%, 62%);
+        *, & {
+          color: white;
+        }
+        &:hover {
+          background-color: white;
+          *, & {
+            color: hsl(244, 73%, 62%);
+          }
+          &.bordered {
+            border: 1px solid hsl(244, 73%, 62%);
+          }
+        }
+      }
+    
+      &.button-dark {
+        background-color: hsl(233, 18%, 29%);
+        *, & {
+          color: white;
+        }
+        &:hover {
+          background-color: white;
+          *, & {
+            color: hsl(233, 18%, 29%);
+          }
+          &.bordered {
+            border: 1px solid hsl(233, 18%, 29%);
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file