Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
204 righe
4.3 KiB
204 righe
4.3 KiB
@import "compass"; |
|
@import "mixins"; |
|
|
|
@import "flex"; |
|
@import "animation"; |
|
|
|
$mainBackgroundColor: #FFF; |
|
$default_z-index: 1000; |
|
|
|
$counterTextColor: #444; |
|
$labelTextColor: #444; |
|
$counterBackgroundColor: #FFF; |
|
$labelBackgroundColor: #FFF; |
|
$borderColor: #ccc; |
|
|
|
$mySignsColor: #444; |
|
$bossSignsColor: #444; |
|
$expiringFilesColor: orange; |
|
$expiredFilesColor: red; |
|
$expiredintegrationsColor: red; |
|
|
|
|
|
.aui { |
|
#left_fixed_sidebar{ |
|
position: fixed; |
|
top: 50%; |
|
left: 0; |
|
@include translate3d(-70%, -50%, 0); |
|
z-index: $default_z-index; |
|
ul.notification_list{ |
|
position: relative; |
|
margin: 0; |
|
li.notification_group{ |
|
background: $mainBackgroundColor; |
|
|
|
$i : 0; |
|
@for $i from 1 through 10 { |
|
&:nth-child(#{$i}){ |
|
.notification_group_label{z-index: $default_z-index + $i} |
|
.notification_item{z-index: $default_z-index + $i + 1}; |
|
} |
|
} |
|
} |
|
li.notification_group{ |
|
position: relative; |
|
list-style: none; |
|
margin: 0 0 .5rem 0; |
|
padding: 0; |
|
left: 0; |
|
transition: all .3s ease; |
|
.notification_group_label{ |
|
position: absolute; |
|
width: 70%; |
|
font-size: 16px; |
|
color: $counterTextColor; |
|
background: $counterBackgroundColor; |
|
padding: .5rem; |
|
margin: 0; |
|
top: 0; |
|
left: 0; |
|
border: 1px solid $borderColor; |
|
border-left: 0; |
|
@include display-flex; |
|
@include align-items(center); |
|
i{margin-right: .5rem;} |
|
} |
|
&:hover{ |
|
left: 70%; |
|
> .notification_group_label{ |
|
@include animation(move .33s .33s normal forwards ease-in-out); |
|
|
|
} |
|
} |
|
.notification_item{ |
|
position: relative; |
|
background: $labelBackgroundColor; |
|
@include box-shadow(1px 1px 5px rgba(0,0,0,.3)); |
|
a{ |
|
z-index: 20; |
|
cursor: pointer; |
|
position: relative; |
|
|
|
@include display-flex; |
|
@include align-items(stretch); |
|
@include justify-content(space-between); |
|
left: 0; |
|
&.not_linkable{ |
|
cursor: default; |
|
} |
|
&:hover, &:focus, &:active{text-decoration: none} |
|
.notification_inner{ |
|
display: inline-block; |
|
font-size: 1.2rem; |
|
&.left{ |
|
width: 70%; |
|
@include display-flex; |
|
@include align-items(center); |
|
color: $counterTextColor; |
|
background: $counterBackgroundColor; |
|
border-right: 2px solid $borderColor; |
|
margin: .5rem 0; |
|
.notification_title{padding: 0 .5rem;} |
|
} |
|
&.right{ |
|
width:30%; |
|
@include display-flex; |
|
@include flex-flow(row nowrap); |
|
@include align-items(center); |
|
@include justify-content(space-around); |
|
padding: .3rem .5rem; |
|
color: $counterTextColor; |
|
background: $counterBackgroundColor; |
|
} |
|
.notification_title{margin: 0;} |
|
i, .notification_number{ |
|
display: inline-block; |
|
} |
|
i{ |
|
margin-right: .3rem; |
|
.fa-hover{ |
|
color: $counterTextColor; |
|
margin: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&.my_signs{ |
|
.notification_inner.right{ |
|
.fa{color: $mySignsColor;} |
|
} |
|
} |
|
&.boss_signs{ |
|
.notification_inner.right{ |
|
/* .notification_number, i.fa{color: $bossSignsColor;} */ |
|
.fa{color: $bossSignsColor;} |
|
.fa-hover{color: #ffe400;} |
|
} |
|
} |
|
&.expiring_files{ |
|
.notification_inner.right{ |
|
/* .notification_number, i.fa{color: $expiringFilesColor;} */ |
|
.fa{color: $expiringFilesColor;} |
|
} |
|
} |
|
&.expired_files{ |
|
.notification_inner.right{ |
|
/* .notification_number, i.fa{color: $expiredFilesColor;} */ |
|
.fa{color: $expiredFilesColor;} |
|
} |
|
} |
|
&.expired_integrations{ |
|
.notification_inner.right{ |
|
/* .notification_number, i.fa{color: $expiredintegrationsColor;} */ |
|
.fa{color: $expiredintegrationsColor;} |
|
} |
|
} |
|
|
|
} |
|
} |
|
} |
|
|
|
} |
|
} |
|
@include keyframes(move) { |
|
0% { |
|
@include translateY(0); |
|
} |
|
100% { |
|
@include translateY(-100%); |
|
} |
|
} |
|
.aui{ |
|
i.fa{ |
|
&.relative{ |
|
position: relative; |
|
} |
|
.fa-hover{ |
|
position: absolute; |
|
&.fa-top-right{ |
|
top: -8px; |
|
right: -8px; |
|
} |
|
&.fa-bottom-right{ |
|
bottom: -8px; |
|
right: -8px; |
|
} |
|
&.fa-top-left{ |
|
top: -8px; |
|
left: -8px; |
|
} |
|
&.fa-bottom-left{ |
|
bottom: -8px; |
|
left: -8px; |
|
} |
|
} |
|
&.fa-combine .fa-hover{ |
|
&:not(span){ |
|
top: 0; |
|
left: 5px; |
|
} |
|
} |
|
} |
|
} |