--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Note.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,61 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.note {
+    min-width: 95%;
+    display: flex;
+    position: relative;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    min-height: ($line-height-base * 4);
+
+    &:before {
+        content: "";
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+        display: block;
+        width: 2px;
+    }
+
+    &:hover {
+        color: darkgray;
+        border-bottom-color: black;
+    }
+
+    &:hover .delete-icon {
+        opacity: 1;
+        color: black;
+    }
+
+    .start, .finish {
+        position: absolute;
+        padding-right: 5rem;
+        font-size: .72rem;
+    }
+
+    .start {
+        top: 0;
+        left: 0;
+    }
+    .finish {
+        bottom: 0;
+        left: 0;
+    }
+
+    &-content {
+        min-width: 95%;
+        font-size: .8rem;
+
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+    }
+}
+
+.delete-icon {
+    font-size: 1.2rem;
+    opacity: 0;
+}