Vulcan/packages/telescope-theme-hubble/lib/client/scss/modules/_notifications.scss

$notifications-width: 260px;

.notifications{
	@include small{
		margin-bottom: 10px;
		&.no-notifications{
			display: none;
		}
		.read{
			display: none;
		}
	}
	@include medium-large{
		position:fixed;
		height:100%;
		width:$notifications-width;
		top:0px;
		left:-$notifications-width;
	}
	background:#f3f3f3;
	@include single-transition(left, 400ms, ease-out, 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 single-transition(left, 400ms, ease-out, 0ms);	
	@include small{
		display: none;
	}
	display:block;
	position:absolute;
	left:0px;
	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: 20;
	&.no-notifications{
		background:white(0.3);
		@include box-shadow(none);
		color:$light-text;
	}
	.notifications-open &{
		@include box-shadow(0 1px 1px black(0.15));
		left: $notifications-width;
		background: white;
		color: $text;
	}
}