feature: header - new classes (part2)
This commit is contained in:
gaelle morin
parent
14dd36a619
commit
69c2dd2bb3
@ -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')
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user