From a7df03a57ad4df44a72546a8c961078c0555a40a Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Fri, 6 Nov 2020 12:59:28 +0100
Subject: [PATCH] nested dropdowns

---
 src/js/dropdown.js       | 28 ++++++++++++++++++++++++++++
 src/js/tabler.js         |  1 +
 src/scss/_variables.scss |  2 +-
 src/scss/ui/_legend.scss |  2 +-
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/js/dropdown.js

diff --git a/src/js/dropdown.js b/src/js/dropdown.js
new file mode 100644
index 000000000..662bed669
--- /dev/null
+++ b/src/js/dropdown.js
@@ -0,0 +1,28 @@
+// Nested dropdowns
+
+const selectors = '.dropdown, .dropup, .dropright, .dropleft',
+	dropdowns = document.querySelectorAll(selectors);
+
+let currentTarget = undefined;
+
+dropdowns.forEach(dropdown => {
+	dropdown.addEventListener('mousedown', (e) => {
+		e.stopPropagation();
+
+		if (e.target.dataset.toggle && e.target.dataset.toggle === 'dropdown') {
+			currentTarget = e.currentTarget;
+		}
+	});
+
+	dropdown.addEventListener('hide.bs.dropdown', (e) => {
+		e.stopPropagation();
+
+		const parent = currentTarget ? currentTarget.parentElement.closest(selectors) : undefined;
+
+		if (parent && parent === dropdown) {
+			e.preventDefault();
+		}
+
+		currentTarget = undefined;
+	});
+});
\ No newline at end of file
diff --git a/src/js/tabler.js b/src/js/tabler.js
index 2aa8a0192..8f6eeae31 100644
--- a/src/js/tabler.js
+++ b/src/js/tabler.js
@@ -2,6 +2,7 @@
 
 import './autosize';
 import './input-mask';
+import './dropdown';
 
 (function() {
 	/**
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 0a9f209ac..71b1c04de 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -455,7 +455,7 @@ $toast-border-color: $border-color !default;
 $toast-header-color: $text-muted !default;
 
 //progress
-$progress-bg: $light-mix !default;
+$progress-bg: $border-color !default;
 $progress-height: .5rem !default;
 
 //ribbons
diff --git a/src/scss/ui/_legend.scss b/src/scss/ui/_legend.scss
index f794c87ea..0e4c5388a 100644
--- a/src/scss/ui/_legend.scss
+++ b/src/scss/ui/_legend.scss
@@ -1,6 +1,6 @@
 .legend {
   display: inline-block;
-  background: $gray-300;
+  background: $border-color;
   width: .75em;
   height: .75em;
   border-radius: $border-radius;