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

Merge branch 'master' into feature/resource-component

Browse Source
This commit is contained in:
Benoit Alessandroni
2020-08-11 16:38:37 +02:00
parent 38e0a54130 86656447be
commit 268169ddc9
17 changed files with 506 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,6 @@
--color-main-text: var(--color-grey-4);
--color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black);
--color-bell: var(--color-secondary);
--color-avatar-background: var(--color-grey-10);
--color-title: var(--color-secondary);
--color-h1: var(--color-secondary);
@ -42,6 +41,12 @@
/* Header's elements */
--color-header-background: var(--color-white);
--color-bell: var(--color-secondary);
--color-notification-counter-number: var(--color-white);
--color-notification-summary: var(--color-grey-4);
--solid-notifications-theme: var(--color-primary);
--color-notification-item-border: var(--color-grey-12);
--color-notification-scrollbar-background: #EDF1FA;
--color-notification-scrollbar-track: var(--color-grey-8);
--color-user-panel-header-text: var(--color-secondary);
--color-user-panel-header-background: var(--color-white);
--color-user-panel-header-text-open: var(--color-white);

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

@ -67,17 +67,17 @@ details {
}
/* End */
sib-notifications {
solid-notifications {
color: var(--color-bell);
@include breakpoint(sm) {
padding: 0;
}
.sib-notifications__container {
.solid-notifications__container {
position: relative;
.sib-notifications__button {
.solid-notifications__button {
@include icon('bell');
font-size: 2.5rem;
@ -93,7 +93,7 @@ sib-notifications {
display: none;
}
.sib-notifications__counter {
.solid-notifications__counter {
left: 2rem;
position: absolute;
top: 1px;
@ -102,27 +102,157 @@ sib-notifications {
left: 2.1rem;
top: -3px;
}
span {
color: var(--color-notification-counter-number);
}
}
}
.solid-notifications__triangle-back {
display: none;
}
.solid-notifications__triangle-shadow {
display: none;
@include breakpoint(lg) {
background: white;
display: block;
position: absolute;
left: auto;
right: -2.1em;
top: 5em;
transform: initial;
width: 0;
z-index: 4;
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -5em;
top: 0px;
left: 50%;
border: 1em solid black;
border-color: #fff #fff transparent transparent;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: 6px -6px 10px -3px rgba(92, 97, 104, 0.14);
}
}
}
.sib-notifications__list {
overflow-x: hidden;
.solid-notifications__list {
border: none;
border-radius: 0;
box-shadow: 0 0 7px 0 rgba(92, 97, 104, 0.24);
max-height: calc(100vh - 50px);
position: fixed;
left: 0;
top: 4.5rem;
top: 2.5em;
width: 100vw;
@include breakpoint(md) {
border: 0;
border-radius: 0;
}
@include breakpoint(lg) {
max-height: calc(100vh - 93px);
position: absolute;
left: auto;
right: 0;
top: 5.6rem;
width: 300px;
right: -2.3em;
top: 3.99em;
width: 347px;
}
/* Custom scrollbar */
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: thin;
scrollbar-color: var(--color-notification-scrollbar-track) var(--color-notification-scrollbar-background);
&::-webkit-scrollbar-track {
background: var(--color-notification-scrollbar-background);
}
&::-webkit-scrollbar-thumb {
background-color: var(--color-notification-scrollbar-track);
border-radius: 6px;
}
&::-webkit-scrollbar {
width: 6px;
}
/* End of custom scrollbar */
.solid-notifications__item {
border-bottom: 1px solid var(--color-notification-item-border);
.solid-notification {
padding: 1.2rem 0 1.5rem;
.solid-notification__avatar {
align-items: center;
background: var(--color-avatar-background);
display: flex;
height: 35px;
justify-content: center;
margin-left: 1.6rem;
margin-right: 1.4rem;
overflow: hidden;
position: relative;
vertical-align: middle;
width: 35px;
img {
background-color: var(--color-grey-10);
height: 100%;
object-fit: cover;
object-position: center center;
width: 100%;
}
object {
height: 45%;
width: 45%;
}
}
.solid-notification__content {
font-family: Open Sans, sans-serif;
.solid-notification__title {
font-size: 1.3rem;
font-weight: 600;
.solid-notification__title__side {
font-weight: normal;
}
.solid-notification__title__icon {
font-family: simple-line-icons;
}
}
.solid-notification__summary {
color: var(--color-notification-summary);
font-size: 1.2rem;
line-height: 1.7rem;
margin: 1.1rem 0 0;
@include breakpoint(320px, 388px) {
max-width: 226px;
}
@include breakpoint(lg) {
max-width: 256px;
}
}
}
.solid-notification__read {
display: none;
}
}
}
}
}

17
src/styles/base/menu-left.scss
View File

@ -301,20 +301,3 @@
}
}
}
// Temporary fix for badges
solid-fix-badge {
display: none;
box-sizing: border-box;
font-family: sans-serif;
font-size: 12px;
background-color: var(--sib-notifications-theme, gray);
color: #36383a;
border-radius: 50%;
line-height: 20px;
width: 20px;
height: 20px;
text-align: center;
font-weight: bold;
padding-bottom: 0;
}