ADD: New dropdown menu component

3 files changed, 35 insertions, 3 deletions

diff --git a/src/base.less b/src/base.less
index f6bd606..6cba96c 100644
--- a/src/base.less
+++ b/src/base.less
@@ -45,3 +45,15 @@ a {
     vertical-align: -20%;
   }
 }
+
+// Caret
+.icon-caret {
+  border-top: .4rem solid currentColor;
+  border-right: .4rem solid transparent;
+  border-left: .4rem solid transparent;
+  display: inline-block;
+  height: 0;
+  margin: 0 .2rem;
+  vertical-align: middle;
+  width: 0;
+}
diff --git a/src/buttons.less b/src/buttons.less
index a21566b..260665a 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -135,15 +135,15 @@
   .btn {
     flex: 1 0 auto;
 
-    &:first-child:not(:last-child) {
+    &:first-of-type:not(:last-of-type) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
     }
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-of-type):not(:last-of-type) {
       border-radius: 0;
       margin-left: -.1rem;
     }
-    &:last-child:not(:first-child) {
+    &:last-of-type:not(:first-of-type) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       margin-left: -.1rem;
diff --git a/src/dropdowns.less b/src/dropdowns.less
new file mode 100644
index 0000000..605cefc
--- /dev/null
+++ b/src/dropdowns.less
@@ -0,0 +1,20 @@
+// Dropdown
+.dropdown {
+  position: relative;
+
+  .menu {
+    animation: slide-down .216s;
+    display: none;
+    left: 0;
+    min-width: 18rem;
+    position: absolute;
+    top: 100%;
+    transform: translateY(.5rem);
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+}