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')
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(

38
src/styles/menu.scss
View File

@ -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;
}
}

1
src/styles/variables.scss
View File

@ -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;