nested dropdowns

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;
+	});
+});

src/js/tabler.js

@@ -2,6 +2,7 @@
 
 import './autosize';
 import './input-mask';
+import './dropdown';
 
 (function() {
 	/**

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

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;