sito per le richieste......
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

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