Skip to content

Commit 537c52f

Browse files
committed
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.
1 parent d4093cb commit 537c52f

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

sass/ui/_forms.scss

+32
Original file line numberDiff line numberDiff line change
@@ -390,3 +390,35 @@ label + {
390390
}
391391
}
392392

393+
/* Form Multi-picker Element (<select> multiple) */
394+
.multi-picker {
395+
position: relative;
396+
width: auto;
397+
display: inline-block;
398+
margin: 0 0 2px 1.2%;
399+
overflow: hidden;
400+
border: 1px solid darken($default-color, 5%);
401+
@include border-radius(4px);
402+
font-family: $font-family;
403+
font-weight: $font-weight-semibold;
404+
height: auto;
405+
&:first-child {
406+
margin-left: 0;
407+
}
408+
select[multiple] {
409+
position: relative;
410+
display: block;
411+
min-width: 100%;
412+
width: 100%;
413+
height: auto;
414+
padding: 6px 20px 6px 15px;
415+
color: $body-font-color;
416+
border: none;
417+
background: #fff;
418+
outline: none;
419+
-webkit-appearance: none;
420+
z-index: 99;
421+
cursor: pointer;
422+
@include font-size($norm);
423+
}
424+
}

0 commit comments

Comments
 (0)