Generic Button Styles

config-mixins.styl

/* ==========================================================================
   Mixins
   ========================================================================== */

transition(arguments)
	-webkit-transition arguments
	-moz-transition arguments
	-o-transition arguments
	transition arguments

border-radius(arguments)
	-webkit-border-radius arguments
	-moz-border-radius arguments
	border-radius arguments

user-select(arguments)
	-webkit-user-select arguments
	-moz-user-select arguments
	-ms-user-select arguments
	-o-user-select arguments
	user-select arguments

background-size(arguments)
	-webkit-background-size arguments
	-moz-background-size arguments
	-o-background-size arguments
	background-size arguments
	if arguments[0] == cover
		-ms-behavior url('/assets/polyfill/backgroundsize.min.htc')

placeholder(color)
	&::-webkit-input-placeholder
		color color
		opacity 1

	&:-moz-placeholder
		color color
		opacity 1

	&::-moz-placeholder
		color color
		opacity 1

	&:-ms-input-placeholder
		color color
		opacity 1

transform(arguments)
	-ms-transform arguments
	-webkit-transform arguments
	transform arguments

appearance(arguments)
	-moz-appearance arguments
	-webkit-appearance arguments
	appearance arguments // "none" removes iPhone default


box-shadow(arguments)
	-webkit-box-shadow arguments
	box-shadow arguments

font-smoothing(arguments)
	-webkit-font-smoothing arguments
	-moz-font-smoothing arguments
	-o-font-smoothing arguments
	font-smoothing arguments

module-btn.styl

.btn
	border 0
	padding 10px
	display inline-block
	text-decoration none
	cursor pointer
	appearance(none)
	outline none
	font-size 18px
	line-height 1
	font-weight bold
	text-transform uppercase
	background $color-white
	text-align center
	font-family $font-header
	border 2px solid $color-font
	border-radius(0) // For iPhone reset
	// For <buttons> & <input type=submit />'s
	font-smoothing(antialiased)