Skip to content

Commit

Permalink
Adding <select multiple> styles
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
jasontipton committed Nov 2, 2014
1 parent d4093cb commit 537c52f
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions sass/ui/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

0 comments on commit 537c52f

Please sign in to comment.