From aacada4ae767bac6f9902b96752fdeeae6522a27 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Thu, 6 Dec 2018 17:51:04 +0100
Subject: [PATCH] header.scss file added + styles changed

---
 src/header.pug         |  2 +-
 src/styles/header.scss | 78 ++++++++++++++++++++++++++++++++++++++++++
 src/styles/index.scss  |  1 +
 src/styles/main.scss   |  9 ++---
 4 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/styles/header.scss

diff --git a/src/header.pug b/src/header.pug
index 55d364b..a7549f9 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -16,5 +16,5 @@ details
 #profile
   img(src="/images/user.jpg")
   span
-    | Profile 
+    | Profile
     span.icon-arrow-down
diff --git a/src/styles/header.scss b/src/styles/header.scss
new file mode 100644
index 0000000..076235b
--- /dev/null
+++ b/src/styles/header.scss
@@ -0,0 +1,78 @@
+
+#header {
+  background-color: $color-white;
+  color: $color-black;
+  //position: relative;
+  //@include border-shadow(bottom);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+  border: solid $color-white;
+  border-width: 1px 0;
+  display: flex;
+  //flex-grow: 0;
+  //flex-basis : 150px;
+  flex-shrink: 0;
+  align-items: center;
+  padding: 1em 0.4em;
+
+  > * {
+    padding: 0 1.8rem;
+  }
+}
+
+#button-toggle {
+  @include icon('menu');
+  display: none;
+  color: $color-black;
+  font-size: 2em;
+  padding: 0.72em;
+  cursor: pointer;
+}
+
+#logo {
+  flex: 1 1 0;
+}
+
+#notifications-button {
+  @include icon(bell);
+  font-size: 2em;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+#notifications {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 0;
+  left: 0;
+  z-index: 1;
+
+  > div {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+#profile {
+  > * {
+    vertical-align: middle;
+  }
+
+  img {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 100%;
+    margin-right: 1rem;
+  }
+
+  span {
+    color: $color-black;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.38px;
+    padding: 0 0.5rem;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8e0598b..457c9b4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -10,4 +10,5 @@
 @import 'content';
 
 // @import 'members';
+@import 'header';
 @import 'menu';
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6ce8dc5..f3fa214 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -68,7 +68,7 @@ h4 {
   @extend %frame;
   padding: 1em;
 }
-
+/*
 #header {
   background-color: $color-white;
   color: $color-black;
@@ -104,7 +104,7 @@ h4 {
 
 #notifications-button {
   @include icon(bell);
-  font-size: 1.5em;
+  font-size: 2em;
   cursor: pointer;
   list-style-type: none;
 }
@@ -131,13 +131,14 @@ h4 {
 
   img {
     margin-right: 0.5em;
-    width: 43px;
-    height: 43px;
+    width: 48px;
+    height: 48px;
     object-fit: cover;
     object-position: center;
     border-radius: 100%;
   }
 }
+*/
 
 .layer {
   position: absolute;