dropdowns page

pages/_includes/ui/dropdown-menu.html

-{% assign items = include.items | default: "Action|Another action|Something else|-|Separated link" | split: "|" %}
-<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}">
-	{% for item in items %}
-	{% if item == '-' %}
-	<div class="dropdown-divider"></div>
-	{% else %}
-	<a class="dropdown-item" href="javascript:void(0)">{{ item }}</a>
-	{% endif %}
-	{% endfor %}
+<div class="dropdown-menu{% if include.right %} dropdown-menu-right{% endif %}{% if include.show %} position-relative d-inline-block{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.dark %} bg-dark text-white{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+   {% if include.check or include.radio %}
+      {% for i in (1..3) %}
+      <label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
+      {% endfor %}
+   {% elsif include.type == 'text' %}
+
+   {% else %}
+      {% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
+      <a class="dropdown-item" href="#">
+         {% if include.icons %}{% include ui/icon.html icon="settings" %} {% endif %}
+         Action
+         {% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
+      </a>
+      <a class="dropdown-item" href="#">
+         {% if include.icons %}{% include ui/icon.html icon="edit" %} {% endif %}Another action
+      </a>
+      {% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" %} {% endif %}Active action</a>{% endif %}
+      {% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" %} {% endif %}Disabled action</a>{% endif %}
+      {% if include.separated %}
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" %} {% endif %}Separated link</a>
+      {% endif %}
+   {% endif %}
 </div>

pages/dropdowns.html

+---
+title: Dropdowns
+page-title: Dropdowns
+---
+
+{% include_cached ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
+{% include_cached ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}

scss/_variables.scss

@@ -238,6 +238,12 @@ $card-shadow-hover: rgba($dark, .08) 0 2px 12px 0 !default;
 $close-font-weight: 400 !default;
 $close-font-size: 1.5rem !default;
 
+//dropdown
+$dropdown-item-padding-x: 1rem !default;
+$dropdown-font-size: $h5-font-size !default;
+$dropdown-divider-bg: $border-color !default;
+$dropdown-padding-y: .5rem !default;
+
 //nav
 $nav-link-padding-y: .25rem !default;
 

scss/ui/_dropdowns.scss

-.dropdown-divider {
-  border-color: $border-color;
+.dropdown-menu {
+  min-width: 12rem;
+  box-shadow: $box-shadow;
+
+  .icon {
+    width: 1em;
+    margin-right: .5rem;
+    color: inherit;
+    opacity: .5;
+    text-align: center;
+    stroke-width: 2px;
+  }
+}
+
+.dropdown-header {
+  @extend .subheader;
+  padding-bottom: .25rem;
+  pointer-events: none;
 }
 
 .dropdown-menu-scrollable {
@@ -8,57 +24,38 @@
   overflow-x: hidden;
 }
 
-.dropdown-menu {
-  min-width: 12rem;
-  box-shadow: $box-shadow;
-}
 
 .dropdown-item {
   color: inherit;
+  display: flex;
+  align-items: center;
+  margin: 0;
 }
 
 .dropdown-menu-arrow {
   margin-top: .75rem;
 
   &::before {
-    position: absolute;
-    top: -6px;
-    left: 12px;
-    display: inline-block;
     content: "";
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid $border-color;
-    border-bottom-color: rgba(0, 0, 0, .2);
-    border-left: 5px solid transparent;
-  }
-
-  &::after {
     position: absolute;
-    top: -5px;
+    top: -4px;
     left: 12px;
-    display: inline-block;
-    content: "";
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid #fff;
-    border-left: 5px solid transparent;
+    display: block;
+    background: inherit;
+    width: 14px;
+    height: 14px;
+    transform: rotate(45deg);
+    transform-origin: center;
+    border: 1px solid;
+    border-color: inherit;
+    z-index: -1;
+    clip: rect(0px, 9px, 9px, 0px);
   }
 
   &.dropdown-menu-right {
-    &::before,
-    &::after {
+    &::before {
       right: 12px;
       left: auto;
     }
   }
 }
-
-.dropdown-icon {
-  display: inline-block;
-  width: 1em;
-  margin-right: .5rem;
-  margin-left: -.5rem;
-  color: $text-muted;
-  text-align: center;
-  vertical-align: -1px;
-  stroke-width: 1.75px;
-}