From a577f4cfa2817f12a6325e06338f4e1342b47e8a Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <sjhobson@gmail.com>
Date: Mon, 17 Jul 2017 22:25:14 -0700
Subject: [PATCH] Selected example looks more editable, selected has arrow

---
 css/editable-css.css | 51 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/css/editable-css.css b/css/editable-css.css
index 5816c64be..5daf2f179 100644
--- a/css/editable-css.css
+++ b/css/editable-css.css
@@ -27,6 +27,10 @@ pre[class*='language-'] {
     overflow: hidden;
 }
 
+.example-choice-list {
+    padding-right: 2em;
+}
+
 .example-choice-list,
 .output {
     height: 230px;
@@ -62,7 +66,7 @@ pre[class*='language-'] {
     background-color: #fff;
     width: 45%;
     overflow: hidden;
-    box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, .1);
+    box-shadow: 2px 2px 5px -2px rgba(0, 0, 0, .2);
     padding: 1em;
 }
 
@@ -73,12 +77,14 @@ pre[class*='language-'] {
 
 .example-choice {
     position: relative;
+    z-index: 1;
     display: block;
     margin: .2em 0;
     width: 100%;
+    border: 1px solid transparent;
     font-size: 14px;
     cursor: pointer;
-    transition: background-color .2s ease-out;
+    transition: background-color .2s ease-out, border .2s ease-out;
 }
 
 .live .example-choice {
@@ -93,20 +99,36 @@ pre[class*='language-'] {
     background-color: #f5f5f5;
 }
 
-.example-choice {
-    border-left: 10px solid #9d9d9c;
+.example-choice:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -10px;
+    z-index: 1;
+    opacity: 0;
+    transition: all .2s ease-out;
+    transform: translateY(-50%);
+    border-left: 10px solid #9b9b9b;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+}
+
+.example-choice.selected:before {
+    opacity: 1;
+    right: -1.5em;
+}
+
+.example-choice.invalid:before {
+    border-color: #f8b83e;
 }
 
 .example-choice.selected {
     background-color: #fff;
-    border-left-color: #4d9f0c;
+    border: 1px solid rgba(0, 0, 0, .2);
+    border-top: 1px solid rgba(0, 0, 0, .3);
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
     box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, .2);
     cursor: text;
-    transition: background-color .2s ease-in;
-}
-
-.example-choice.invalid {
-    border-left: 10px solid #f8b83e;
 }
 
 .example-choice > code {
@@ -155,6 +177,15 @@ pre[class*='language-'] {
         height: auto;
     }
 
+    .example-choice-list {
+        padding-right: 1.5em;
+        margin-bottom: 1em;
+    }
+
+    .example-choice.selected:before {
+        transform: translateY(-50%) rotate(90deg);
+    }
+
     .output {
         position: relative;
         float: none;