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;