main view: Create & style delete link

Made as an "x" button to the right of the note load/edit link.

1 files changed, 33 insertions, 2 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;
+		}
+	}
 }