Merge pull request #129 from picturepan2/feature/dropdowns v0.1.31

Feature/dropdowns

8 files changed, 203 insertions, 100 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..af61541
--- /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: @control-min-width;
+    position: absolute;
+    top: 100%;
+    transform: translateY(.5rem);
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+}
diff --git a/src/forms.less b/src/forms.less
index cd26924..131fbc5 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -4,7 +4,7 @@
 }
 // Form element: Input boxes
 .form-input {
-  -webkit-appearance: none;
+  appearance: none;
   background: #fff;
   background-image: none;
   border: .1rem solid @control-color;
@@ -64,6 +64,11 @@
   &.is-danger {
     border-color: @control-color-danger;
   }
+
+  // Input types
+  &[type=file] {
+    height: auto;
+  }
 }
 
 // Form element: Input note
@@ -96,9 +101,15 @@
   border-radius: .3rem;
   font-size: 1.4rem;
   line-height: 1.6rem;
+  min-width: @control-min-width;
   outline: 0;
   padding: .5rem .8rem;
   vertical-align: middle;
+  &[multiple] {
+    option {
+      padding: .2rem .4rem;
+    }
+  }
   &:not([multiple]) {
     background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
     height: 3.2rem;
@@ -118,6 +129,7 @@
     height: 2.4rem;
     padding: .4rem 2rem .4rem .6rem;
   }
+
   &.select-lg {
     font-size: 1.6rem;
     height: 4.2rem;
diff --git a/src/labels.less b/src/labels.less
index 223a4b3..6bdf02c 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -6,6 +6,14 @@
   white-space: nowrap;
 
   &.label-primary {
-    .toast-variant(@core-color);
+    .label-variant(@core-color);
+  }
+
+  &.label-success {
+    .label-variant(@control-color-success);
+  }
+
+  &.label-danger {
+    .label-variant(@control-color-danger);
   }
 }
diff --git a/src/media.less b/src/media.less
index 5f668fc..d4d2f89 100644
--- a/src/media.less
+++ b/src/media.less
@@ -4,6 +4,7 @@
   height: auto;
   max-width: 100%;
 }
+
 .video-responsive {
   height: 0;
   overflow: hidden;
@@ -26,6 +27,16 @@
     width: 100%;
   }
 }
+
 .video-responsive-4-3 {
   padding-bottom: 75%; /* 4:3 */
 }
+
+.figure {
+  margin: 0 0 @layout-gutter 0;
+
+  .figure-caption {
+    color: @core-meta-color;
+    margin-top: @layout-gutter;
+  }
+}
diff --git a/src/normalize.less b/src/normalize.less
index 1cef7e9..9b77e0e 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -1,11 +1,15 @@
-/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /**
  * 1. Change the default font family in all browsers (opinionated).
  * 2. Correct the line height in all browsers.
- * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
  */
 
+/* Document
+   ========================================================================== */
+
 html {
   font-family: sans-serif; /* 1 */
   line-height: 1.15; /* 2 */
@@ -13,6 +17,9 @@ html {
   -webkit-text-size-adjust: 100%; /* 3 */
 }
 
+/* Sections
+   ========================================================================== */
+
 /**
  * Remove the margin in all browsers (opinionated).
  */
@@ -21,69 +28,73 @@ body {
   margin: 0;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
-
 /**
  * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
  */
 
 article,
 aside,
-details, /* 1 */
-figcaption,
-figure,
 footer,
 header,
-main, /* 2 */
-menu,
 nav,
-section,
-summary { /* 1 */
+section {
   display: block;
 }
 
 /**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
  * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
  */
 
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
 }
 
 /**
- * Add the correct display in iOS 4-7.
+ * Add the correct margin in IE 8.
  */
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
+figure {
+  margin: 1em 40px;
 }
 
 /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
  */
 
-progress {
-  vertical-align: baseline;
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-template, /* 1 */
-[hidden] {
-  display: none;
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
-/* Links
+/* Text-level semantics
    ========================================================================== */
 
 /**
@@ -106,9 +117,6 @@ a:hover {
   outline-width: 0;
 }
 
-/* Text-level semantics
-   ========================================================================== */
-
 /**
  * 1. Remove the bottom border in Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -139,21 +147,23 @@ strong {
 }
 
 /**
- * Add the correct font style in Android 4.3-.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-dfn {
-  font-style: italic;
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
+ * Add the correct font style in Android 4.3-.
  */
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+dfn {
+  font-style: italic;
 }
 
 /**
@@ -198,61 +208,44 @@ sup {
    ========================================================================== */
 
 /**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
+ * Add the correct display in IE 9-.
  */
 
-svg:not(:root) {
-  overflow: hidden;
+audio,
+video {
+  display: inline-block;
 }
 
-/* Grouping content
-   ========================================================================== */
-
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * Add the correct display in iOS 4-7.
  */
 
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+audio:not([controls]) {
+  display: none;
+  height: 0;
 }
 
 /**
- * Add the correct margin in IE 8.
+ * Remove the border on images inside links in IE 10-.
  */
 
-figure {
-  margin: 1em 40px;
+img {
+  border-style: none;
 }
 
 /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
+ * Hide the overflow in IE.
  */
 
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+svg:not(:root) {
+  overflow: hidden;
 }
 
 /* Forms
    ========================================================================== */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
@@ -261,19 +254,13 @@ input,
 optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }
 
 /**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
@@ -356,6 +343,16 @@ legend {
 }
 
 /**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
  * Remove the default vertical scrollbar in IE.
  */
 
@@ -394,7 +391,7 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  */
 
 [type="search"]::-webkit-search-cancel-button,
@@ -403,15 +400,6 @@ textarea {
 }
 
 /**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
@@ -419,4 +407,55 @@ textarea {
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
-}
\ No newline at end of file
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/src/variables.less b/src/variables.less
index 1fe2f86..2298e32 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -11,6 +11,7 @@
 
 // Sizes
 @layout-gutter: 1rem;
+@control-min-width: 18rem;
 
 // Colors
 @core-color: #5764c6;