From 672d91e6c2baeef15943dadcbeeb6bffae434211 Mon Sep 17 00:00:00 2001
From: Michal Budzynski <budziq@gmail.com>
Date: Fri, 23 Jun 2017 13:18:06 +0200
Subject: [PATCH] Hide theme selector popup on interaction outside of it Also
 set cursor to pointer on theme selector items.

---
 src/theme/book.css                |  1 +
 src/theme/book.js                 | 11 ++++++++++-
 src/theme/stylus/theme-popup.styl |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 9fb4c5d1..362dd8bc 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -273,6 +273,7 @@ table thead td {
   padding: 2px 10px;
   line-height: 25px;
   white-space: nowrap;
+  cursor: pointer;
 }
 .theme-popup .theme:hover:first-child,
 .theme-popup .theme:hover:last-child {
diff --git a/src/theme/book.js b/src/theme/book.js
index c6161d91..50564d32 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -101,11 +101,20 @@ $( document ).ready(function() {
 
             $('.theme').click(function(){
                 var theme = $(this).attr('id');
-
                 set_theme(theme);
             });
         }
+    });
 
+    // Hide theme selector popup when clicking outside of it
+    $(document).click(function(event){
+        var popup = $('.theme-popup');
+        if(popup.length) {
+            var target = $(event.target);
+            if(!target.closest('.theme').length && !target.closest('#theme-toggle').length) {
+                popup.remove();
+            }
+        }
     });
 
     function set_theme(theme) {
diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl
index dbd0d430..002d97c4 100644
--- a/src/theme/stylus/theme-popup.styl
+++ b/src/theme/stylus/theme-popup.styl
@@ -12,6 +12,7 @@
         padding: 2px 10px
         line-height: 25px
         white-space: nowrap
+        cursor: pointer
 
         &:hover:first-child,
         &:hover:last-child {