diff --git a/src/header.pug b/src/header.pug
index d4d9e1177da5aa87a6bdf26f04ca31654c5145e8..9ea0b6f8129ec3c8c9ac60c03892ef1c09ec218f 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -17,7 +17,7 @@
summary.segment.padding(tabindex='0' role='button')
solid-display#user-controls__profile(
fields='first_name, account.picture'
- class-first_name='text-letter-spacing-large'
+ class-first_name='text-letter-spacing-larger'
class-account.picture='avatar small margin-right-small'
widget-account.picture='hubl-user-avatar'
bind-user
diff --git a/src/index.pug b/src/index.pug
index 73520b219496c550bcb340d6050f0a136d3c3a2d..5986beb475e9eb59aeffc14545fcf30b24767769 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -19,10 +19,10 @@ html(lang="en")
//- header#header.header.is-spaced(role='banner')
include header.pug
- header#header.segment.shadow
+ header#header.segment.bg-color-white.shadow
include header.pug
- nav#main__menu.left-menu.jsLeftMenu
+ nav#main__menu.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug
main#viewport.content.notLoggedIn
diff --git a/src/menu-left.pug b/src/menu-left.pug
index b3a751801301932d2d6af110c5fb9d67177305bc..cd7f18f49641e7c5deff61857ba1f2beb9106d22 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -55,45 +55,39 @@ solid-widget(name='hubl-menu-fix-url-project')
solid-router#navbar-router(default-route='dashboard')
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
- solid-route.menu(name='dashboard')
- div.menu-label(data-trans="menuLeft.dashboard")
- div.menu-icon.icon-home
- div.divider
+ solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard')
+ div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
- solid-route.menu(name='members')
- div.menu-label(data-trans="menuLeft.profileDirectory")
- div.menu-icon.icon-people
- div.divider
+ solid-route.menu.segment.lg-auto.padding.text-bold(name='members')
+ div.menu-icon.icon-people.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
- solid-route.menu(name='job-offers', rdf-type='hd:joboffer')
- div.menu-label(data-trans="menuLeft.jobBoard")
- div.menu-icon.icon-briefcase
- div.divider
+ solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
+ div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
if endpoints.resources || (endpoints.get && endpoints.get.resources)
- solid-route.menu(name='resources')
- div.menu-label(data-trans="menuLeft.resources")
- div.menu-icon.icon-docs
- div.divider
+ solid-route.menu.segment.lg-auto.padding.text-bold(name='resources')
+ div.menu-icon.icon-docs.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
if endpoints.polls || (endpoints.get && endpoints.get.polls)
- solid-route.menu(name='polls')
- div.menu-label(data-trans="menuLeft.gov")
- div.menu-icon.icon-bubbles
- div.divider
+ solid-route.menu.segment.lg-auto.padding.text-bold(name='polls')
+ div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
if endpoints.events || (endpoints.get && endpoints.get.events)
- solid-route.menu(name='events')
- div.menu-label(data-trans="menuLeft.events")
- div.menu-icon.icon-calendar
- div.divider
+ solid-route.menu.segment.lg-auto.padding.text-bold(name='events')
+ div.menu-icon.icon-calendar.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
if endpoints.projects || (endpoints.get && endpoints.get.projects)
div.menu-wrapper
solid-link
//- (next='admin-project-list')
- div.menu
- div.menu-chevron
+ div.menu.segment.lg-auto.padding.text-bold
+ div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.projects")
+ div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
- div.menu-label(data-trans="menuLeft.projects")
- div.menu-icon.icon-folder-alt
solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
div#loader-projects.loader.loader-menu
@@ -117,12 +111,12 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-wrapper
solid-link
//- (next='admin-circle-list')
- div.menu
- div.menu-chevron
+ div.menu.segment.lg-auto.padding.text-bold
+ div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.circles")
+ div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up
//- div.menu-icon.icon-arrow-right-circle
- div.menu-label(data-trans="menuLeft.circles")
- div.menu-icon.icon-folder-alt
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
div#loader-circles.loader.loader-menu
@@ -144,11 +138,11 @@ solid-router#navbar-router(default-route='dashboard')
div.divider
if endpoints.users || (endpoints.get && endpoints.get.users)
div.menu-wrapper
- div.menu
- div.menu-chevron
+ div.menu.segment.lg-auto.padding.text-bold
+ div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-small.float-left
+ div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.messages")
+ div.menu-chevron.segment.lg-auto.float-left
div.menu-icon.icon-arrow-up
- div.menu-label(data-trans="menuLeft.messages")
- div.menu-icon.icon-envelope-letter
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
div#loader-messages.loader.loader-menu
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c5a9362a163744277df963eaf1ca0cbe2e14289e..d6c29ce34052380ecc3b79279b2758f58e25856a 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -23,7 +23,7 @@
}
.segment {
- background: white;
+ /*background: white;*/
position: relative;
.content-vertically-centered {
@@ -66,12 +66,18 @@
&.margin-left {
margin-left: 20px;
}
+ &.margin-right-small {
+ margin-right: 15px;
+ }
&.margin-right {
margin-right: 20px;
}
&.padding {
padding: 14px;
}
+ &.padding-large {
+ padding: 20px;
+ }
}
.avatar {
@@ -105,10 +111,22 @@
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
}
+.bg-color-heading {
+ background: var(--color-heading);
+}
+
+.bg-color-white {
+ background: white;
+}
+
.text-bold {
font-weight: 600;
}
+.text-uppercase {
+ text-transform: uppercase;
+}
+
.text-xsmall {
font-size: 12px;
}
@@ -141,6 +159,10 @@
color: var(--color-heading);
}
+.text-color-white {
+ color: white;
+}
+
.text-letter-spacing-wide {}
.text-letter-spacing-wider {}
@@ -148,10 +170,12 @@
.text-letter-spacing-widest {}
.text-letter-spacing-large {
- letter-spacing: 0.38px;
+ letter-spacing: 0.2px;
}
-.text-letter-spacing-larger {}
+.text-letter-spacing-larger {
+ letter-spacing: 0.38px;
+}
.logo {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index a952da0bded774ac04063b9272ea1688402b813c..06eb705c1a955e6f5dc90d23a5941cce380f3b13 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,7 +1,8 @@
#main__menu {
- background-color: var(--color-menu-background);
- color: var(--color-menu-text);
+ /*background-color: var(--color-menu-background);
+ color: var(--color-menu-text);*/
/*transition: flex-basis 0.5s ease-in-out;*/
+ width: 256px;
&.open {
transform: translateX(0);
@@ -13,6 +14,10 @@
solid-router {
.menu-wrapper {
+
+ .menu {
+ border-bottom: none;
+ }
.menu-icon.icon-arrow-up {
visibility: hidden;
}
@@ -26,7 +31,7 @@
}
.menu-chevron {
- transform: rotate(180deg);
+ transform: rotateX(180deg);
}
}
}
@@ -38,16 +43,21 @@
.menu {
cursor: pointer;
+ border-bottom: 1px solid #4F5E72;
display: flex;
- flex-direction: row-reverse;
- font-weight: bold;
- padding: 1.2rem;
+ align-items: center;
+ /*flex-direction: row-reverse;*/
+ /*font-weight: bold;
+ padding: 1.2rem;*/
&[active] {
- background-color: var(--color-menu-highlight-primary);
+ background-color: var(--color-third);
+ color: var(--color-heading);
+ border-bottom: none;
.menu-icon:before {
- background-color: var(--color-menu-icon-background-active);
+ background-color: var(--color-heading);
+ color: white;
}
.menu-notification>solid-display>div:first-child {
@@ -56,15 +66,15 @@
}
.menu-icon {
- align-items: center;
+ /*align-items: center;
display: flex;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
font-size: 1.7rem;
- width: 3.2em;
+ width: 3.2em;*/
- &:before {
+ &::before {
border-radius: 100%;
height: 1.9em;
line-height: 1.9em;
@@ -72,7 +82,7 @@
}
}
- .menu-label {
+ /*.menu-label {
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -82,16 +92,16 @@
letter-spacing: 0.017rem;
text-transform: uppercase;
width: 8em;
- }
+ }*/
- .menu-chevron {
+ /*.menu-chevron {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
width: 2em;
- }
+ }*/
>solid-display {
display: block;
@@ -295,8 +305,7 @@
.divider {
height: 1px;
- background-color: var(--color-grey-11);
- opacity: 0.2;
+ background-color: #4F5E72;
}
}
}