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

feature: header - new classes (part2)

Browse Source
This commit is contained in:
gaelle morin 2020-11-17 14:45:36 +01:00
parent 14dd36a619
commit 69c2dd2bb3
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
4 changed files with 121 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/header.pug
View File

@ -5,20 +5,20 @@
span.tag.beta.reversed.color-primary(data-trans='header.beta') span.tag.beta.reversed.color-primary(data-trans='header.beta')
.segment.lg-quarter.float-right .segment.lg-auto.float-right
.segment.lg-auto.float-left .segment.lg-auto.float-left.margin-right
solid-notifications.notLoggedIn( solid-notifications.notLoggedIn(
nested-field="inbox" nested-field="inbox"
bind-user bind-user
) )
.segment.lg-auto.float-right .segment.lg-auto.float-left.margin-left.text-bold.text-small.text-color-heading
details#user-controls.notLoggedIn details#user-controls.notLoggedIn.segment
summary(tabindex='0' role='button') summary.segment.padding(tabindex='0' role='button')
solid-display#user-controls__profile( solid-display#user-controls__profile(
fields='first_name, account.picture' fields='first_name, account.picture'
class-first_name='flex' class-first_name='text-letter-spacing-large'
class-account.picture='avatar' class-account.picture='avatar small margin-right-small'
widget-account.picture='hubl-user-avatar' widget-account.picture='hubl-user-avatar'
bind-user bind-user
) )
@ -27,12 +27,12 @@
ul ul
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users)) if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
li li
solid-link(next='profile' data-trans='header.myProfile') solid-link.segment.padding(next='profile' data-trans='header.myProfile')
li li
solid-link(next='admin' data-trans='header.admin') solid-link.segment.padding(next='admin' data-trans='header.admin')
li li
solid-link(next='about' data-trans='header.about') solid-link.segment.padding(next='about' data-trans='header.about')
button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut') 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') button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')

2
src/styles/abstracts/_variables.scss
View File

@ -3,7 +3,7 @@
--color-primary: #FF0055; --color-primary: #FF0055;
--color-secondary: #0068FF; --color-secondary: #0068FF;
--color-third: #00E3B4; --color-third: #00E3B4;
--color-gray: #636363; --color-grey: #636363;
--color-heading: #2E3F58; --color-heading: #2E3F58;
--color-complementary: #5BB4CE; --color-complementary: #5BB4CE;

50
src/styles/base/header.scss
View File

@ -82,7 +82,7 @@
/* General styling for both notification and user's panel */ /* General styling for both notification and user's panel */
details { details {
position: relative; /*position: relative;*/
summary { summary {
@ -134,7 +134,7 @@ solid-notifications {
} }
span { span {
color: var(--color-notification-counter-number); color: white;
} }
} }
} }
@ -189,7 +189,7 @@ solid-notifications {
position: absolute; position: absolute;
left: auto; left: auto;
right: -2.3em; right: -2.3em;
top: 3.99em; top: 3.95em;
width: 347px; width: 347px;
} }
@ -215,7 +215,7 @@ solid-notifications {
/* End of custom scrollbar */ /* End of custom scrollbar */
.solid-notifications__item { .solid-notifications__item {
border-bottom: 1px solid var(--color-notification-item-border); /*border-bottom: 1px solid var(--color-notification-item-border);*/
.solid-notification { .solid-notification {
padding: 1.2rem 0 1.5rem; padding: 1.2rem 0 1.5rem;
@ -251,6 +251,7 @@ solid-notifications {
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
.solid-notification__title { .solid-notification__title {
color: var(--color-heading);
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 600; font-weight: 600;
@ -264,7 +265,7 @@ solid-notifications {
} }
.solid-notification__summary { .solid-notification__summary {
color: var(--color-notification-summary); color: var(--color-grey);
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.7rem; line-height: 1.7rem;
margin: 1.1rem 0 0; margin: 1.1rem 0 0;
@ -302,11 +303,11 @@ solid-notifications {
&:focus { &:focus {
background-color: transparent; background-color: transparent;
color: var(--color-user-panel-header-text-open); color: white;
outline: none; outline: none;
@include breakpoint(lg) { @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 { hubl-user-avatar {
height: 3.3rem; /*height: 3.3rem;
margin-right: 0; margin-right: 0;
width: 3.3rem; width: 3.3rem;*/
@include breakpoint(lg) { @include breakpoint(lg) {
height: 4.8rem; /*margin-right: 16px;*/
margin-right: 2rem; /*height: 4.8rem;
width: 4.8rem; width: 4.8rem;*/
} }
} }
@ -337,8 +338,6 @@ solid-notifications {
align-items: center; align-items: center;
display: none; display: none;
flex-direction: row-reverse; flex-direction: row-reverse;
font-size: 1.8rem;
font-weight: 600;
&::before { &::before {
margin-left: 1.5rem; margin-left: 1.5rem;
@ -362,11 +361,11 @@ solid-notifications {
@include breakpoint (lg) { @include breakpoint (lg) {
width: 100%; width: 100%;
top: 83px; top: 72px;
} }
> nav { > nav {
background-color: var(--color-user-panel-list-background); background-color: white;
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
position: absolute; position: absolute;
right: 0; right: 0;
@ -381,35 +380,34 @@ solid-notifications {
li { li {
solid-link { solid-link {
color: var(--color-grey-4);
display: block; display: block;
border-bottom: 1px solid var(--color-user-panel-list-border); border-bottom: 1px solid #E4E8ED;
margin-right: 0; /*margin-right: 0;*/
padding: 1.6rem 1.3rem; /*padding: 1.6rem 1.3rem;*/
&:hover { &:hover {
color: var(--color-user-panel-list-text-hover); color: var(--color-secondary);
} }
} }
} }
} }
button { button {
color: var(--color-grey-4); /*color: var(--color-grey-4);
padding: 1.6rem 1.3rem; padding: 1.6rem 1.3rem;*/
text-align: left; text-align: left;
width: 100%; width: 100%;
&:hover { &:hover {
color: var(--color-user-panel-list-text-hover); color: var(--color-secondary);
} }
} }
} }
} }
&[open] { &[open] {
background-color: var(--color-user-panel-header-background); /*background-color: var(--color-heading);*/
color: var(--color-user-panel-header-text); color: var(--color-heading);
#user-controls__profile { #user-controls__profile {

85
src/styles/base/main.scss
View File

@ -63,12 +63,97 @@
&.float-right { &.float-right {
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 { .shadow {
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); 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 { .logo {
height: 34px; height: 34px;
width: 220px; width: 220px;