Vulcan/packages/telescope-theme-hubble/lib/client/sass/modules/_notifications.scss
2014-07-10 11:45:34 +09:00

80 lines
No EOL
1.3 KiB
SCSS

.notifications{
@include small{
margin-bottom: 10px;
&.no-notifications{
display: none;
}
.read{
display: none;
}
}
@include medium-large{
position:fixed;
height:100%;
width:260px;
top:0px;
left:-260px;
}
background:#f3f3f3;
@include single-transition(ease-out, left, 400ms, 0ms);
z-index: 1000;
.mark-as-read{
display:block;
text-align:center;
padding:10px;
font-size:13px;
border-bottom:1px solid $lighter-grey;
background:#f3f3f3;
&:link, &:visited{
color:$blue;
}
}
ul{
height:100%;
overflow:auto;
li{
padding:10px;
border-bottom:1px solid $lighter-grey;
font-size:13px;
background:white;
.notification-timestamp{
color:$light-text;
font-size:12px;
}
&.read{
color:$light-text;
background:#f3f3f3;
}
}
}
.notifications-open &{
left:0px;
@include box-shadow(1px 0px 1px black(0.15));
}
}
.notifications-toggle{
@include small{
display: none;
}
display:block;
position:absolute;
left:260px;
top:80px;
white-space:nowrap;
background:white;
@include border-radius(0px 3px 3px 0px);
@include box-shadow(0 1px 1px black(0.15));
padding:3px 10px;
font-size:13px;
z-index: 10;
&.no-notifications{
background:white(0.3);
@include box-shadow(none);
color:$light-text;
}
.notifications-open &{
background: white;
color: $text;
}
}