From 291822bbeb9fec540f8374ff1afee0cd3119d3a4 Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Fri, 30 Nov 2018 22:28:00 +0100
Subject: [PATCH] wip
---
src/menu.pug | 5 +++--
src/styles/menu.scss | 38 +++++++++++++++++++++++++++++++-------
src/styles/variables.scss | 1 +
3 files changed, 35 insertions(+), 9 deletions(-)
diff --git a/src/menu.pug b/src/menu.pug
index 070d94f4..90c8e1f9 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -14,7 +14,8 @@ nav#navbar
sib-route(hidden, name='job-offer-create')
div
div.menu
- div.menu-notification
+ div.menu-chevron
+ div.menu-icon.icon-arrow-down
div.menu-label Projects
div.menu-icon.icon-folder-alt
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
@@ -28,7 +29,7 @@ nav#navbar
div.menu
div.menu-notification
div.menu-label Groups
- div.menu-icon.icon-bubbles
+ div.menu-icon.icon-globe
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
div.sub-menu
sib-display(
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index af9ad2db..7a9942ed 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -11,9 +11,10 @@
display: flex;
flex-grow: 0;
flex-shrink: 0;
- flex-basis: 17em;
+ flex-basis: 16em;
overflow: hidden;
flex-direction: column;
+ font-size: 16px;
&.open {
transform: translateX(0);
@@ -41,9 +42,10 @@ sib-router {
flex-direction: column;
.sub-menu {
- padding-left: 2em;
+ padding-left: 1.9em;
div{
- padding-bottom: 1em;
+ color: $color-grey-mid;
+ padding-bottom: 0.7em;
}
}
@@ -60,8 +62,7 @@ sib-router {
&[active] {
background-color: $color-yellow-light;
- color: $color-black;
- font-weight: normal;
+ color: $color-purple-dark;
.menu-icon:before {
background-color: $color-purple-dark;
@@ -72,6 +73,7 @@ sib-router {
.menu-notification > div {
background-color: $color-purple-dark;
color: $color-yellow-light;
+ font-size: 14px;
}
}
@@ -84,6 +86,7 @@ sib-router {
align-items: center;
display: flex;
flex-direction: column;
+ font-size: 12px;
&:before {
width: 1.9em;
@@ -97,6 +100,24 @@ sib-router {
}
}
+ .menu-chevron {
+ width: 2em;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > div {
+ color: $color-grey-mid;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ }
+ }
+
.menu-label {
//flex-basis: 8em;
width: 8em;
@@ -106,6 +127,8 @@ sib-router {
display: flex;
flex-direction: column;
text-transform: uppercase;
+ font-weight: 600;
+ padding-left: 10px;
}
.menu-notification {
@@ -123,10 +146,11 @@ sib-router {
display: flex;
justify-content: center;
align-items: center;
- width: 1.5em;
- height: 1.5em;
+ width: 1.6em;
+ height: 1.6em;
border-radius: 100%;
background-color: $color-yellow-light;
+ font-size: 14px;
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1fc8a299..81e787cf 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,6 +2,7 @@
$color-white: #fff;
$color-black: #36383b;
$color-grey: #898f95;
+$color-grey-mid: #abaaba;
$color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
--
GitLab