update NoteDetail design

browser/main/Detail/SnippetNoteDetail.styl

@@ -62,12 +62,12 @@ $info-height = 75px
   absolute bottom left right
   top $info-height
 
-.body-description
+.body .description
   absolute top left right
   height 80px
   border-bottom $ui-border
 
-.body-description-textarea
+.body .description textarea
   display block
   height 100%
   width 100%
@@ -83,67 +83,23 @@ $info-height = 75px
   border-bottom $ui-border
   display flex
   background-color $ui-backgroundColor
-.tabList-item
-  position relative
+
+.tabList .list
   flex 1
+  display flex
+  overflow hidden
   border-right $ui-border
-  &:hover
-    .tabList-item-deleteButton
-      color $ui-inactive-text-color
-      &:hover
-        background-color darken($ui-backgroundColor, 15%)
-      &:active
-        color white
-        background-color $ui-active-color
-.tabList-item--active
-  @extend .tabList-item
-  .tabList-item-button
-    border-color $brand-color
-.tabList-item-button
-  width 100%
-  height 29px
-  navButtonColor()
-  border-left 4px solid transparent
-.tabList-item-deleteButton
-  position absolute
-  top 5px
-  height 20px
-  right 5px
-  width 20px
-  text-align center
-  border none
-  padding 0
-  color transparent
-  background-color transparent
-  border-radius 2px
-.tabList-plusButton
+
+.tabList .plusButton
   navButtonColor()
   width 30px
+
 .tabView
   absolute left right bottom
   top 110px
-.tabView-top
-  absolute top left right
-  height 30px
-  border-bottom $ui-border
-  display flex
-.tabView-top-name
-  flex 1
-  border none
-  padding 0 10px
-  font-size 14px
-.tabView-top-mode
-  width 110px
-  padding 0
-  border none
-  border-left $ui-border
-  colorDefaultButton()
-  color $ui-inactive-text-color
-  &:hover
-    color $ui-text-color
+
 .tabView-content
-  absolute left right bottom
-  top 30px
+  absolute top left right bottom
 
 body[data-theme="dark"]
   .root
@@ -178,10 +134,10 @@ body[data-theme="dark"]
   .info-right-button-tooltip
     darkTooltip()
 
-  .body-description
+  .body .description
     border-bottom-color $ui-dark-borderColor
 
-  .body-description-textarea
+  .body .description textarea
     background-color $ui-dark-button--hover-backgroundColor
     color white
 
@@ -190,41 +146,12 @@ body[data-theme="dark"]
     border-bottom-color $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
 
-  .tabList-item
+  .tabList .list
     border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-      .tabList-item-deleteButton
-        color $ui-dark-inactive-text-color
-        &:hover
-          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color white
-          background-color $ui-dark-button--active-backgroundColor
-  .tabList-item--active
-    border-color $ui-dark-borderColor
-    .tabList-item-button
-      border-color $brand-color
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-      .tabList-item-deleteButton
-        color $ui-dark-inactive-text-color
-        &:hover
-          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
-        &:active
-          color white
-          background-color $ui-dark-button--active-backgroundColor
-  .tabList-item-button
+
+  .tabList .plusButton
     navDarkButtonColor()
-    border-left 4px solid transparent
-  .tabList-plusButton
-    navDarkButtonColor()
-  .tabView-top
-    border-color $ui-dark-borderColor
-  .tabView-top-name
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    background-color $ui-dark-button--hover-backgroundColor
+
   .tabView-top-mode
     border-color $ui-dark-borderColor
     background-color $dark-default-button-background