autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Gaelle Morin 2018-11-30 22:28:00 +01:00
parent 15f40ff490
commit 291822bbeb
3 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/menu.pug
View File

@ -14,7 +14,8 @@ nav#navbar
sib-route(hidden, name='job-offer-create') sib-route(hidden, name='job-offer-create')
div div
div.menu div.menu
div.menu-notification div.menu-chevron
div.menu-icon.icon-arrow-down
div.menu-label Projects div.menu-label Projects
div.menu-icon.icon-folder-alt div.menu-icon.icon-folder-alt
sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`) sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`)
@ -28,7 +29,7 @@ nav#navbar
div.menu div.menu
div.menu-notification div.menu-notification
div.menu-label Groups div.menu-label Groups
div.menu-icon.icon-bubbles div.menu-icon.icon-globe
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)
div.sub-menu div.sub-menu
sib-display( sib-display(

38
src/styles/menu.scss
View File

@ -11,9 +11,10 @@
display: flex; display: flex;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 17em; flex-basis: 16em;
overflow: hidden; overflow: hidden;
flex-direction: column; flex-direction: column;
font-size: 16px;
&.open { &.open {
transform: translateX(0); transform: translateX(0);
@ -41,9 +42,10 @@ sib-router {
flex-direction: column; flex-direction: column;
.sub-menu { .sub-menu {
padding-left: 2em; padding-left: 1.9em;
div{ div{
padding-bottom: 1em; color: $color-grey-mid;
padding-bottom: 0.7em;
} }
} }
@ -60,8 +62,7 @@ sib-router {
&[active] { &[active] {
background-color: $color-yellow-light; background-color: $color-yellow-light;
color: $color-black; color: $color-purple-dark;
font-weight: normal;
.menu-icon:before { .menu-icon:before {
background-color: $color-purple-dark; background-color: $color-purple-dark;
@ -72,6 +73,7 @@ sib-router {
.menu-notification > div { .menu-notification > div {
background-color: $color-purple-dark; background-color: $color-purple-dark;
color: $color-yellow-light; color: $color-yellow-light;
font-size: 14px;
} }
} }
@ -84,6 +86,7 @@ sib-router {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 12px;
&:before { &:before {
width: 1.9em; 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 { .menu-label {
//flex-basis: 8em; //flex-basis: 8em;
width: 8em; width: 8em;
@ -106,6 +127,8 @@ sib-router {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600;
padding-left: 10px;
} }
.menu-notification { .menu-notification {
@ -123,10 +146,11 @@ sib-router {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 1.5em; width: 1.6em;
height: 1.5em; height: 1.6em;
border-radius: 100%; border-radius: 100%;
background-color: $color-yellow-light; background-color: $color-yellow-light;
font-size: 14px;
} }
} }

1
src/styles/variables.scss
View File

@ -2,6 +2,7 @@
$color-white: #fff; $color-white: #fff;
$color-black: #36383b; $color-black: #36383b;
$color-grey: #898f95; $color-grey: #898f95;
$color-grey-mid: #abaaba;
$color-grey-light2: #d8d8d8; $color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6; $color-grey-light: #f0f3f6;
$color-yellow: #ffb700; $color-yellow: #ffb700;