From 537c52f52ec95c36f59c97eed4100d4c7b70d662 Mon Sep 17 00:00:00 2001
From: Jason Tipton <jason@frontlinedev.com>
Date: Sun, 2 Nov 2014 01:53:18 -0400
Subject: [PATCH] Adding <select multiple> styles

I am using Gumby in a new project and while updating HTML elements such as radio buttons, check boxes, and select elements I found that multi selects were not part of the Gumby UI demo.  I checked the CSS files and found no styling other than '.picker select'.  Prefacing the <select> elements with the 'picker' class triggers Gumby's design updates to the select (making multi-selects appear like drop down selects) so instead I think a new class of 'multi-picker' could help and be used as the wrapper for multi-selects instead of 'picker'.

Select "Picker" Example:
<div class="picker">
    <select>
        <option value="#" disabled="">Favorite Dalek phrase...</option>
        <option>EXTERMINATE</option>
        <option>EXTERMINATE</option>
        <option>EXTERMINATE</option>
    </select>
</div>

Select "Multi-Picker" Example:
<div class="multi-picker">
    <select multiple="multiple">
        <option value="#" disabled="">Favorite Dalek phrase...</option>
        <option>EXTERMINATE</option>
        <option>EXTERMINATE</option>
        <option>EXTERMINATE</option>
    </select>
</div>

The proposed styles attempt to use many of the same styles already used in Gumby's UI for <select> differing only where needed such as background-image/color, padding, etc.
---
 sass/ui/_forms.scss | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/sass/ui/_forms.scss b/sass/ui/_forms.scss
index 32250b8..65638cb 100644
--- a/sass/ui/_forms.scss
+++ b/sass/ui/_forms.scss
@@ -390,3 +390,35 @@ label + {
   }
 }
 
+/* Form Multi-picker Element (<select> multiple) */
+.multi-picker {
+  position: relative;
+  width: auto;
+  display: inline-block;
+  margin: 0 0 2px 1.2%;
+  overflow: hidden;
+  border: 1px solid darken($default-color, 5%);
+  @include border-radius(4px);
+  font-family: $font-family;
+  font-weight: $font-weight-semibold;
+  height: auto;
+  &:first-child {
+    margin-left: 0;
+  }
+  select[multiple] {
+    position: relative;
+    display: block;
+    min-width: 100%;
+    width: 100%;
+    height: auto;
+    padding: 6px 20px 6px 15px;
+    color: $body-font-color;
+    border: none;
+    background: #fff;
+    outline: none;
+    -webkit-appearance: none;
+    z-index: 99;
+    cursor: pointer;
+    @include font-size($norm);
+  }
+}