added key shortcuts' list dropdown in view option bar

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>

1 files changed, 38 insertions, 0 deletions

diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
index 442a5183..ed314fc9 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
@@ -51,3 +51,41 @@
     border-color: #616161;
 }
 
+.viewOptions .shortKeys{
+    float: right;
+    margin-right:30px;
+    border: 1px solid #616161;
+    border-radius: 6px;
+    padding-left: 5px;
+    padding-right: 5px;
+    cursor:pointer;
+    position:relative;
+}
+
+.viewOptions .shortKeys .dropdownArrow{
+    font-size: 0.7em;
+    color:#d1d1d1;
+}
+
+.viewOptions .shortKeys .list{
+    position:absolute;
+    border: 1px solid #616161;
+    bottom: 16px;
+    left: -2px;
+    opacity: 1;
+    white-space: nowrap;
+    padding:5px;
+    background-color: #313131;
+}
+
+.viewOptions .shortKeys .list div{
+    display: block;
+}
+
+.viewOptions .shortKeys .hide{
+    visibility: hidden;
+}
+
+.viewOptions .shortKeys .show{
+    visibility: visible;
+}
\ No newline at end of file