add: style sheet for NoteItemSimple component

browser/main/NoteList/NoteItemSimple.js

@@ -3,7 +3,7 @@
  */
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteItem.styl'
+import styles from './NoteItemSimple.styl'
 
 /**
  * @description Note item component when using simple display mode.
@@ -14,17 +14,17 @@ import styles from './NoteItem.styl'
  */
 const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
   <div styleName={isActive
-      ? 'item--active'
-      : 'item'
+      ? 'item-simple--active'
+      : 'item-simple'
     }
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
   >
-    <div styleName='item-title'>
+    <div styleName='item-simple-title'>
       {note.title.trim().length > 0
         ? note.title
-        : <span styleName='item-title-empty'>Empty</span>
+        : <span styleName='item-simple-title-empty'>Empty</span>
       }
     </div>
   </div>

browser/main/NoteList/NoteItemSimple.styl

@@ -0,0 +1,68 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item-simple
+  position relative
+  padding 20px 25px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.15s
+  &:hover
+    background-color alpha($ui-active-color, 20%)
+  &:active
+    background-color $ui-active-color
+    color white
+
+.item-simple--active
+  @extend .item-simple
+  background-color $ui-active-color
+  color white
+  &:hover
+    background-color $ui-active-color
+
+.item-simple-title
+  font-size 14px
+  height 40px
+  box-sizing border-box
+  line-height 24px
+  padding-top 5px
+  padding-bottom 20px
+  overflow ellipsis
+  color $ui-text-color
+
+.item-simple-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:active
+      background-color $ui-active-color
+    &:hover
+      background-color alpha($ui-active-color, 20%)
+
+  .item-simple--active
+    @extend .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-active-color
+    .item-simple-title
+      color white
+    &:hover
+      background-color $ui-active-color
+
+  .item-simple-title
+    color $ui-dark-text-color
+
+  .item-simple-title-empty
+    color $ui-dark-inactive-text-color