WebStackPage.github.io/assets/less/xenon-less/notes.less

.notes-env {
	position: relative;
	margin-bottom: @default-padding;
	
	.notes-header {
		margin-bottom: @base-padding;
	}
	
	.notes-list {
		@wp_width: 74%;
		@wp_bg: #fff;
		@nl_bg: #ededed;
		@wp_line_bg: darken(@nl_bg, 5%);
		
		position: relative;
		//background: @nl_bg;
		//border: 1px solid @default-border-color;
		&:extend(.clearfix all);
		
		.write-pad, .list-of-notes {
			.box-sizing(border-box);
		}
		
		.list-of-notes {
			float: left;
			width: 100% - @wp_width;
			list-style: none;
			margin: 0;
			padding: 0;
			padding-bottom: @base_margin;
			
			li {
				position: relative;
				//padding: @base_margin;
				padding-right: @base-padding;
				padding-bottom: @base-padding;
				
				a {
					display: block;
					border: 1px solid @wp_line_bg;
					background: @wp_bg;
					padding: @base-padding @default-padding/2;
					
					strong, span {
						display: block;
						
						& + strong, & + span {
							padding-top: 8px;
						}
					}
					
					strong {
						word-break: break-all;
						background: #f5f5f5;
						margin: -@default-padding/2;
						margin-top: -@base-padding;
						margin-bottom: 0;
						padding: @base-padding - 2 @base-padding;
						border-bottom: 1px solid @wp_line_bg;
						font-size: @font-size-base - 1;
						
						@media screen and (max-width: @screen-sm){
							margin-bottom: -@base-padding;
							border-bottom: 0;
						}
					}
					
					span {
						.text-overflow();
						font-size: @font-size-small;
					}
					
					em {
						float: right;
					}
					
					&:hover {
						background: #f5f5f5 !important;
						border-color: darken(@wp_line_bg, 5%);
						
						span, strong {
							color: @text_color_light;
						}
					}
				}
				
				.note-close {
					position: absolute;
					right: 1px + @base-padding;
					top: 1px;
					border: none;
					background: none;
					outline: none;
					background: #f5f5f5;
					border: 1px solid @wp_line_bg;
					border-top: 0;
					border-right: 0;
					.opacity(0);
				}
				
				&:hover .note-close {
					.opacity(1);
				}
				
				.content {
					display: none;
				}
				
				&.current {
					
					a {
						background: #fff;
					}
				}
			}
			
			li + .no-notes {
				display: none;
			}
		}
		
		.write-pad {
			float: right;
			width: @wp_width;
			background: @wp_bg;
			position: relative;
							
			&:after {
				display: block;
				content: '';
				position: absolute;
				left: 95px;
				top: 0;
				bottom: 0;
				background: #f9d4d1;
				width: 1px;
			}
			
			textarea {
				background: transparent;
				border: none;
				background: url(../images/notes-lines.png) left top;
				background-attachment: local;
				min-height: 780px;
				font: 14px/52px @font-family-sans-serif, serif;
				border: 1px solid @default-border-color;
				max-height: 1500px;
				padding-left: 125px;
				padding-right: 50px;
				
				&::-webkit-scrollbar {
			            width: 5px;
			    }
			    &::-webkit-scrollbar-track {
			            width: 5px;
			            background-color: darken(@nl_bg, 5%);
			    }
			    &::-webkit-scrollbar-thumb {
			            background-color: darken(#ebebeb, 18%);
			    }
			}
		}
	}
	
	& + footer.main {
		border-top: 0;
		padding-top: @base_padding;
	}
}



// Medium Screens
@media (max-width: @screen-md-min) {

	.notes-env {
		
		.notes-list {
			@wp_width: 65%;
			
			.list-of-notes {
				width: 100% - @wp_width;
			}
		
			.write-pad {
				width: @wp_width;
				
				textarea {
					padding-left: 50px;
				}
				
				&:after {
					left: 35px;
				}
			}
		}
	}
}

// Small Screens
@media (max-width: @screen-sm-min) {
	
	body .notes-env {
		
		.notes-list {
			@wp_width: 100%;
			
			.list-of-notes, .write-pad {
				width: 100%;
				float: none;
			}
			
			.list-of-notes {
				padding-bottom: @base_padding;
				
				li {
					padding: 0;
					padding-top: @base_padding;
					padding-bottom: 0;
					
					a {
						span {
							display: none;
						}
					}
					
					.note-close {
						right: 1px;
						top: @base-padding + 1;
					}
				}
			}
			
			.write-pad {
				
				textarea {
					min-height: 400px; 
					max-height: 600px; 
				}
			}
		}
	}
}