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

feature: header - new classes (part2)

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

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

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

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

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

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

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