From 5bef19a3065ae86f4d1950b9fc2a681cb51ee095 Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Thu, 29 Dec 2016 16:56:05 +0900
Subject: [PATCH] add: stylesheet for note-item components

---
 browser/main/NoteList/NoteItem.js       |   2 +-
 browser/main/NoteList/NoteItem.styl     | 172 ++++++++++++++++++++++++
 browser/main/NoteList/NoteItemSimple.js |   2 +-
 3 files changed, 174 insertions(+), 2 deletions(-)
 create mode 100644 browser/main/NoteList/NoteItem.styl

diff --git a/browser/main/NoteList/NoteItem.js b/browser/main/NoteList/NoteItem.js
index 0f2fd43e..5ee38e1f 100644
--- a/browser/main/NoteList/NoteItem.js
+++ b/browser/main/NoteList/NoteItem.js
@@ -4,7 +4,7 @@
 import React, { PropTypes } from 'react'
 import { isArray } from 'lodash'
 import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteList.styl'
+import styles from './NoteItem.styl'
 
 /**
  * @description Tag element component.
diff --git a/browser/main/NoteList/NoteItem.styl b/browser/main/NoteList/NoteItem.styl
new file mode 100644
index 00000000..ae86a4c3
--- /dev/null
+++ b/browser/main/NoteList/NoteItem.styl
@@ -0,0 +1,172 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item
+  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-title
+    .item-title-empty
+    .item-title-icon
+    .item-bottom-tagIcon
+    .item-bottom-tagList-empty
+    .item-bottom-time
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+
+.item--active
+  @extend .item
+  background-color $ui-active-color
+  color white
+  .item-title
+  .item-title-empty
+  .item-title-icon
+  .item-bottom-tagIcon
+  .item-bottom-tagList-empty
+  .item-bottom-time
+    color white
+  .item-bottom-tagList-item
+    background-color transparent
+    color white
+  &:hover
+    background-color $ui-active-color
+
+.item-border
+  absolute top bottom left right
+  border-style solid
+  border-width 2px
+  border-color transparent
+  transition 0.15s
+
+.item-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-title-icon
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 3px
+
+.item-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+.item-bottom
+  position relative
+  bottom 0px
+  margin-top 2px
+  height 20px
+  font-size 12px
+  line-height 20px
+  overflow ellipsis
+  display flex
+
+.item-bottom-tagIcon
+  vertical-align middle
+  color $ui-button-color
+  height 20px
+  line-height 20px
+
+.item-bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 20px
+
+.item-bottom-tagList-item
+  font-size 12px
+  margin-right 8px
+  padding 0 10px
+  height 20px
+  box-sizing border-box
+  border-radius 20px
+  vertical-align middle
+  background-color $ui-tag-backgroundColor
+  color #FFFFFF
+
+.item-bottom-tagList-empty
+  color $ui-inactive-text-color
+  vertical-align middle
+  font-size 10px
+  margin-left 5px
+
+.item-bottom-time
+  color $ui-inactive-text-color
+  font-size 12px
+
+.item-star
+  position absolute
+  top 20px
+  right 20px
+  width 34px
+  height 34px
+  color $ui-favorite-star-button-color
+  font-size 14px
+  padding 0
+  border-radius 17px
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item
+    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--active
+    @extend .item
+    border-color $ui-dark-borderColor
+    background-color $ui-active-color
+    .item-title
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+    .item-bottom-tagList-empty
+      color white
+    &:hover
+      background-color $ui-active-color
+
+  .item-title
+    color $ui-dark-text-color
+
+  .item-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-title-empty
+    color $ui-dark-inactive-text-color
+
+  .item-bottom-tagIcon
+    color $ui-dark-button-color
+
+  .item-bottom-tagList-item
+    background-color $ui-dark-tag-backgroundColor
+    color $ui-dark-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle
diff --git a/browser/main/NoteList/NoteItemSimple.js b/browser/main/NoteList/NoteItemSimple.js
index 3e66a43e..020023b5 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 './NoteList.styl'
+import styles from './NoteItem.styl'
 
 /**
  * @description Note item component when using simple display mode.