From 69c2dd2bb319c09bb1538d538bbfd895c8aff694 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Tue, 17 Nov 2020 14:45:36 +0100 Subject: [PATCH] feature: header - new classes (part2) --- src/header.pug | 22 +++---- src/styles/abstracts/_variables.scss | 2 +- src/styles/base/header.scss | 50 ++++++++-------- src/styles/base/main.scss | 85 ++++++++++++++++++++++++++++ 4 files changed, 121 insertions(+), 38 deletions(-) diff --git a/src/header.pug b/src/header.pug index 8c0f8c4..d4d9e11 100644 --- a/src/header.pug +++ b/src/header.pug @@ -5,20 +5,20 @@ span.tag.beta.reversed.color-primary(data-trans='header.beta') -.segment.lg-quarter.float-right - .segment.lg-auto.float-left +.segment.lg-auto.float-right + .segment.lg-auto.float-left.margin-right solid-notifications.notLoggedIn( nested-field="inbox" bind-user ) - .segment.lg-auto.float-right - details#user-controls.notLoggedIn - summary(tabindex='0' role='button') + .segment.lg-auto.float-left.margin-left.text-bold.text-small.text-color-heading + details#user-controls.notLoggedIn.segment + summary.segment.padding(tabindex='0' role='button') solid-display#user-controls__profile( fields='first_name, account.picture' - class-first_name='flex' - class-account.picture='avatar' + class-first_name='text-letter-spacing-large' + class-account.picture='avatar small margin-right-small' widget-account.picture='hubl-user-avatar' bind-user ) @@ -27,12 +27,12 @@ ul if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) li - solid-link(next='profile' data-trans='header.myProfile') + solid-link.segment.padding(next='profile' data-trans='header.myProfile') li - solid-link(next='admin' data-trans='header.admin') + solid-link.segment.padding(next='admin' data-trans='header.admin') li - solid-link(next='about' data-trans='header.about') - button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') + solid-link.segment.padding(next='about' data-trans='header.about') + button.segment.padding.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn') diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 5c63612..088c5ec 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -3,7 +3,7 @@ --color-primary: #FF0055; --color-secondary: #0068FF; --color-third: #00E3B4; - --color-gray: #636363; + --color-grey: #636363; --color-heading: #2E3F58; --color-complementary: #5BB4CE; diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss index fd7326b..c6a342f 100644 --- a/src/styles/base/header.scss +++ b/src/styles/base/header.scss @@ -82,7 +82,7 @@ /* General styling for both notification and user's panel */ details { - position: relative; + /*position: relative;*/ summary { @@ -134,7 +134,7 @@ solid-notifications { } span { - color: var(--color-notification-counter-number); + color: white; } } } @@ -189,7 +189,7 @@ solid-notifications { position: absolute; left: auto; right: -2.3em; - top: 3.99em; + top: 3.95em; width: 347px; } @@ -215,7 +215,7 @@ solid-notifications { /* End of custom scrollbar */ .solid-notifications__item { - border-bottom: 1px solid var(--color-notification-item-border); + /*border-bottom: 1px solid var(--color-notification-item-border);*/ .solid-notification { padding: 1.2rem 0 1.5rem; @@ -251,6 +251,7 @@ solid-notifications { font-family: Open Sans, sans-serif; .solid-notification__title { + color: var(--color-heading); font-size: 1.3rem; font-weight: 600; @@ -264,7 +265,7 @@ solid-notifications { } .solid-notification__summary { - color: var(--color-notification-summary); + color: var(--color-grey); font-size: 1.2rem; line-height: 1.7rem; margin: 1.1rem 0 0; @@ -302,11 +303,11 @@ solid-notifications { &:focus { background-color: transparent; - color: var(--color-user-panel-header-text-open); + color: white; outline: none; @include breakpoint(lg) { - background-color: var(--color-user-panel-header-background-open); + background-color: var(--color-heading); } } } @@ -321,14 +322,14 @@ solid-notifications { } hubl-user-avatar { - height: 3.3rem; + /*height: 3.3rem; margin-right: 0; - width: 3.3rem; + width: 3.3rem;*/ @include breakpoint(lg) { - height: 4.8rem; - margin-right: 2rem; - width: 4.8rem; + /*margin-right: 16px;*/ + /*height: 4.8rem; + width: 4.8rem;*/ } } @@ -337,8 +338,6 @@ solid-notifications { align-items: center; display: none; flex-direction: row-reverse; - font-size: 1.8rem; - font-weight: 600; &::before { margin-left: 1.5rem; @@ -362,11 +361,11 @@ solid-notifications { @include breakpoint (lg) { width: 100%; - top: 83px; + top: 72px; } > nav { - background-color: var(--color-user-panel-list-background); + background-color: white; box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); position: absolute; right: 0; @@ -381,35 +380,34 @@ solid-notifications { li { solid-link { - color: var(--color-grey-4); display: block; - border-bottom: 1px solid var(--color-user-panel-list-border); - margin-right: 0; - padding: 1.6rem 1.3rem; + border-bottom: 1px solid #E4E8ED; + /*margin-right: 0;*/ + /*padding: 1.6rem 1.3rem;*/ &:hover { - color: var(--color-user-panel-list-text-hover); + color: var(--color-secondary); } } } } button { - color: var(--color-grey-4); - padding: 1.6rem 1.3rem; + /*color: var(--color-grey-4); + padding: 1.6rem 1.3rem;*/ text-align: left; width: 100%; &:hover { - color: var(--color-user-panel-list-text-hover); + color: var(--color-secondary); } } } } &[open] { - background-color: var(--color-user-panel-header-background); - color: var(--color-user-panel-header-text); + /*background-color: var(--color-heading);*/ + color: var(--color-heading); #user-controls__profile { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index d2d4b7d..c5a9362 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -63,12 +63,97 @@ &.float-right { float: right; } + &.margin-left { + margin-left: 20px; + } + &.margin-right { + margin-right: 20px; + } + &.padding { + padding: 14px; + } +} + +.avatar { + border-radius: 50%; + object-fit: cover; + height: 50px; + width: 50px; + + &.xsmall { + height: 31px; + width: 31px; + } + &.small { + height: 44px; + width: 44px; + } + &.large { + height: 180px; + width: 180px; + } + &.xlarge { + height: 241px; + width: 241px; + } + &.margin-right-small { + margin-right: 16px; + } } .shadow { box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); } +.text-bold { + font-weight: 600; +} + +.text-xsmall { + font-size: 12px; +} + +.text-small { + font-size: 14px; +} + +.text-large { + font-size: 18px; +} + +.text-xlarge { + font-size: 18px; +} + +.text-color-primary { + color: var(--color-primary); +} + +.text-color-secondary { + color: var(--color-secondary); +} + +.text-color-third { + color: var(--color-third); +} + +.text-color-heading { + color: var(--color-heading); +} + +.text-letter-spacing-wide {} + +.text-letter-spacing-wider {} + +.text-letter-spacing-widest {} + +.text-letter-spacing-large { + letter-spacing: 0.38px; +} + +.text-letter-spacing-larger {} + + .logo { height: 34px; width: 220px;