From aba6c2eb4f7f1217a1a901baaac8541903ecc4cf Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Thu, 29 Dec 2016 17:07:42 +0900
Subject: [PATCH] add: style sheet for NoteItemSimple component

---
 browser/main/NoteList/NoteItemSimple.js   | 10 ++--
 browser/main/NoteList/NoteItemSimple.styl | 68 +++++++++++++++++++++++
 2 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 browser/main/NoteList/NoteItemSimple.styl

diff --git a/browser/main/NoteList/NoteItemSimple.js b/browser/main/NoteList/NoteItemSimple.js
index 020023b5..2696ccd4 100644
--- a/browser/main/NoteList/NoteItemSimple.js
+++ b/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>
diff --git a/browser/main/NoteList/NoteItemSimple.styl b/browser/main/NoteList/NoteItemSimple.styl
new file mode 100644
index 00000000..fbc36aee
--- /dev/null
+++ b/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