From 372ee5c6e8fcdc1a44a327120d5c68ebe6875a05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Tue, 5 Nov 2019 19:58:40 +0100
Subject: [PATCH] sidebar corrected

---
 src/styles/base/main.scss          | 94 ++++++++++++++++++++++--------
 src/styles/components/sidebar.scss |  2 +
 2 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index ea2ea9b..4655bb7 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -225,38 +225,49 @@ a,
   &.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;
       }
@@ -265,69 +276,90 @@ a,
     &.with-icon::before {
       font-size: 1.6rem;
       margin-right: 1rem;
+
       &.icon-plus {
-        /* ... */
+        @include icon('plus');
       }
+
       &.icon-close {
-        /* ... */
+        @include icon('close');
       }
+
       &.icon-edit {
-        /* ... */
+        @include icon('pencil');
       }
     }
-    
+
     &.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%);
           }
@@ -336,30 +368,42 @@ a,
 
       &.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%);
           }
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index f9d2499..683403e 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -36,6 +36,8 @@
 
       >ul {
         cursor: pointer;
+        display: flex;
+        flex-direction: column;
         list-style: none;
         margin: 0;
         padding-left: 0;