Stylus Dropdown

module-dropdown.styl

/* ==========================================================================
   Dropdown
   ========================================================================== */

.dropdown
	border 1px solid $color-black
	overflow hidden
	background $color-white url("../img/arrow-select.png") no-repeat right 50%
	width 100%
	position relative

.dropdown__select
	display block
	font-weight 300
	font-size 12px
	font-family $font-default
	border 0
	padding 10px
	box-shadow none
	background transparent
	background-image none
	outline none
	cursor pointer
	appearance(none)
	width 100%
	&:focus
		outline none

	// Firefox hack to remove outline - http://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002
	&:-moz-focusring
		color transparent
		text-shadow 0 0 0 $color-black

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
	.dropdown
		background $color-white url("../img/arrow-select@2x.png") no-repeat right 50%
		background-size(19px 5px)


// Firefox fix to hide select arrow (v30.0)
@-moz-document url-prefix()
	.dropdown-select
		width 110%