From 01c9da878e1d39cf530ba5c3d8d672fec3686bf2 Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Sat, 30 Sep 2017 20:40:09 +0800
Subject: [PATCH] Dev: Snippets style

---
 src/Console/Console.scss   |  2 --
 src/Snippets/Snippets.hbs  |  3 +--
 src/Snippets/Snippets.scss | 20 +++++++++++---------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/Console/Console.scss b/src/Console/Console.scss
index d34d11a..676b44b 100644
--- a/src/Console/Console.scss
+++ b/src/Console/Console.scss
@@ -9,7 +9,6 @@
             padding: 10px 10px 10px 40px;
             background: #fff;
             line-height: 20px;
-            border-bottom: 1px solid $gray-light;
             .icon-ban, .icon-info-circle {
                 display: inline-block;
                 color: $gray;
@@ -54,7 +53,6 @@
             bottom: 0;
             width: 100%;
             background: #fff;
-            border-top: 1px solid $gray-light;
             height: 40px;
             .buttons {
                 display: none;
diff --git a/src/Snippets/Snippets.hbs b/src/Snippets/Snippets.hbs
index 9eeb842..f44a80c 100644
--- a/src/Snippets/Snippets.hbs
+++ b/src/Snippets/Snippets.hbs
@@ -1,9 +1,8 @@
 {{#each snippets}}
-    <div class="eruda-section">
+    <div class="eruda-section eruda-run" data-idx="{{@index}}">
         <h2 class="eruda-name">{{name}}</h2>
         <div class="eruda-description">
             {{desc}}
         </div>
-        <div class="eruda-btn eruda-run" data-idx="{{@index}}">Run</div>
     </div>
 {{/each}}
diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss
index a65f5b2..40ec65a 100644
--- a/src/Snippets/Snippets.scss
+++ b/src/Snippets/Snippets.scss
@@ -10,23 +10,25 @@
             border-radius: $border-radius;
             box-shadow: $box-shadow;
             overflow: hidden;
-            .btn, .name {
+            cursor: pointer;
+            &:active {
+                .name {
+                    background: $gray-dark;
+                }
+                .description {
+                    background: $gray-light;
+                }
+            }
+            .name {
                 padding: $padding;
                 color: #fff;
                 background: $gray;
-                text-align: center;
-            }
-            .btn {
-                background: $blue;
-                cursor: pointer;
                 transition: background $anim-duration;
             }
-            .btn:active {
-                background: $blue-dark;
-            }
             .description {
                 background: #fff;
                 padding: $padding;
+                transition: background $anim-duration;
             }
         }
     }