added snippet config in setting

browser/main/modals/PreferencesModal/SnippetTab.styl

@@ -0,0 +1,106 @@
+@import('./Tab')
+  
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color alpha($ui-text-color, 90%)
+  width 100%
+  font-size 14px
+
+.group
+  margin-bottom 45px
+
+.group-header
+  @extend .header
+  color $ui-text-color
+
+.group-header2
+  font-size 20px
+  color $ui-text-color
+  margin-bottom 15px
+  margin-top 30px
+
+.group-section
+  margin-bottom 20px
+  display flex
+  line-height 30px
+
+.group-section-label
+  width 150px
+  text-align left
+  margin-right 10px
+  font-size 14px
+
+.group-section-control
+  flex 1
+  margin-left 5px
+
+.group-section-control select
+  outline none
+  border 1px solid $ui-borderColor
+  font-size 16px
+  height 30px
+  width 250px
+  margin-bottom 5px
+  background-color transparent
+
+.group-section-control-input
+  height 30px
+  vertical-align middle
+  width 400px
+  font-size $tab--button-font-size
+  border solid 1px $border-color
+  border-radius 2px
+  padding 0 5px
+  outline none
+  &:disabled
+    background-color $ui-input--disabled-backgroundColor
+
+.group-checkBoxSection
+  margin-bottom 15px
+  display flex
+  line-height 30px
+  padding-left 15px
+
+.group-control
+  padding-top 10px
+  box-sizing border-box
+  height 40px
+  text-align right
+  :global
+    .alert
+      display inline-block
+      position absolute
+      top 60px
+      right 15px
+      font-size 14px
+    .success
+      color #1EC38B
+    .error
+      color red
+    .warning
+      color #FFA500
+
+.snippet-list
+  width 30%
+  height calc(100% - 200px)
+  background #f5f5f5
+  position absolute
+
+  .snippet-item
+    width 100%
+    height 50px
+    font-size 20px
+    line-height 50px
+    padding 0 10px
+    cursor pointer
+
+    &:hover
+      background darken(#f5f5f5, 5)
+
+.snippet-detail
+  width 70%
+  height calc(100% - 200px)
+  position absolute
+  left 33%