mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-22 07:56:16 +08:00
109 lines
2.5 KiB
SCSS
109 lines
2.5 KiB
SCSS
// scss-lint:disable SelectorDepth unknownProperties
|
|
// scss-lint:disable NestingDepth SelectorFormat
|
|
|
|
.sci--navigation--notificaitons-flyout-container {
|
|
position: relative;
|
|
|
|
.sci--navigation--notificaitons-flyout {
|
|
background-color: $color-white;
|
|
border-radius: 0 0 $border-radius-default $border-radius-default;
|
|
box-shadow: $flyout-shadow;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - var(--top-navigation) - 2em);
|
|
padding: 1.5rem;
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(var(--top-navigation) - .5em);
|
|
width: 400px;
|
|
|
|
.sci--navigation--notificaitons-flyout-title {
|
|
@include font-h2;
|
|
align-items: center;
|
|
display: flex;
|
|
margin-bottom: .625rem;
|
|
|
|
.fas {
|
|
@include font-button;
|
|
cursor: pointer;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.sci--navigation--notificaitons-flyout-tabs {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-basis: 2.5rem;
|
|
flex-shrink: 0;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.sci--navigation--notificaitons-flyout-tab {
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
color: $brand-focus;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: .625rem 0;
|
|
}
|
|
|
|
.sci-navigation--notificaitons-flyout-subtitle {
|
|
@include font-main;
|
|
line-height: 2.25rem;
|
|
margin-bottom: .625rem;
|
|
}
|
|
|
|
.sci--navigation--notificaitons-flyout-notifications {
|
|
position: relative;
|
|
|
|
.next-page-loader {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
|
|
.sci-navigation--notificaitons-flyout-notification {
|
|
border-bottom: $border-tertiary;
|
|
display: grid;
|
|
grid-template-columns: max-content auto;
|
|
padding: 1rem 0;
|
|
|
|
.sci-navigation--notificaitons-flyout-notification-icon {
|
|
align-items: center;
|
|
background-color: $brand-primary;
|
|
border-radius: 50%;
|
|
color: $color-white;
|
|
display: flex;
|
|
grid-row: 1 / 4;
|
|
height: 2rem;
|
|
justify-content: center;
|
|
margin-right: .75rem;
|
|
width: 2rem;
|
|
|
|
&.deliver {
|
|
background-color: $brand-warning;
|
|
}
|
|
|
|
&.system {
|
|
background-color: $brand-success;
|
|
}
|
|
}
|
|
|
|
.sci-navigation--notificaitons-flyout-notification-date {
|
|
@include font-small;
|
|
color: $color-silver-chalice;
|
|
}
|
|
|
|
.sci-navigation--notificaitons-flyout-notification-title {
|
|
font-weight: bold;
|
|
margin: .25rem 0;
|
|
}
|
|
}
|
|
}
|
|
}
|