From d5f62176d49800037adb82bac1e50b28952e4911 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sat, 24 Jan 2015 04:14:06 -0500
Subject: main view: Create & style delete link

Made as an "x" button to the right of the note load/edit link.
---
 app/assets/stylesheets/layouts/_global.scss | 35 +++++++++++++++++++++++++++--
 app/views/home/main.html.erb                |  9 +++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss
index 621df8d..5113083 100644
--- a/app/assets/stylesheets/layouts/_global.scss
+++ b/app/assets/stylesheets/layouts/_global.scss
@@ -8,6 +8,10 @@ body {
 	display: block;
 }
 
+.display-none {
+	display: none !important;
+}
+
 
 .margin-top-70 {
 	margin-top: 70px;
@@ -61,13 +65,13 @@ $sidebar-width: 250px;
 	border-right: 2px solid rgb(234, 224, 224);
 	overflow: auto;
 
-	a {
+	.sidebar-link {
 		border-bottom: 1px solid rgb(213, 202, 202);
 		color: rgb(18, 113, 18);
 		text-decoration: none;
 	}
 	
-	a:hover,
+	.sidebar-link:hover,
 	.active {
 		background: #249124; /* Old browsers */
 		background: -moz-linear-gradient(top, #249124 0%, #127112 100%); /* FF3.6+ */
@@ -80,6 +84,33 @@ $sidebar-width: 250px;
 		
 		color: #ddd;
 	}
+	
+	.delete-link {
+		position: absolute;
+		display: block;
+		margin-left: 220px;
+		margin-top: -34px;
+		height: 24px;
+		width: 24px;
+		background-color: #E75F5F;
+		border-radius: 50%;
+		color: #FFFCFC;
+		font-size: 25px;
+		text-decoration: none;
+		
+		span {
+			position: relative;
+			left: 3px;
+		}
+		
+		&:hover {
+			background-color: #E54343;
+		}
+		
+		&:active {
+			background-color: #D22121;
+		}
+	}
 }
 
 
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index 73ee2b6..84244f6 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -8,9 +8,12 @@
 
 <div class="margin-top-70">
 	<div class="sidebar position-fixed min-height-100%">
-		<a href="#" class="display-block padding-13">A Note</a>
-		<a href="#" class="display-block padding-13">A Note</a>
-		<a href="#" class="display-block padding-13">A Note</a>
+		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
+		<a href="#" class="delete-link display-none"><span>×</span></a>
+		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
+		<a href="#" class="delete-link display-none"><span>×</span></a>
+		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
+		<a href="#" class="delete-link display-none"><span>×</span></a>
 	</div>
 
 	<div class="note-editor" contenteditable>
-- 
cgit v1.2.3