Button framework на stylus

//-//////////////////////////////////////////////////////////
//- Mixins
//-//////////////////////////////////////////////////////////
button-style(color, color-hover, background, background-hover, border, border-hover)
	&
	&:visited
		color color
		background-color background
		if border
			border-color border

	&:focus
	&:hover
	&:active
		if color-hover
			color color-hover
		else
			color color

		if background-hover
			background-color background-hover
		else
			background-color background - 10%

		if border-hover
			border-color border-hover
		else
			if border
				border-color border - 25%

	&:active
		background-image none

	&.button
		&_disabled
		&[disabled]
			&
			&:hover
			&:focus
			&:active
				color color
				background-color background
				border-color border

button-size(padding, font-size, line-height)
	padding padding
	font-size font-size
	if line-height
		line-height line-height

//-//////////////////////////////////////////////////////////
//- Base style
//-//////////////////////////////////////////////////////////
.button
	display inline-block
	margin-bottom 0
	font-weight normal
	text-align center
	vertical-align middle
	touch-action manipulation
	cursor pointer
	background-image none
	border-color transparent
	border-style solid
	border-width 0
	border-radius 0
	white-space nowrap
	line-height normal
	-webkit-user-drag none
	-webkit-user-select none
	-moz-user-select none
	-ms-user-select none
	user-select none
	box-sizing border-box
	text-decoration none
	background-color transparent
	padding 0
	transition 125ms all ease-in-out

	&__icon
	&__text
		display inline-block
		vertical-align middle
		line-height 1

	&__icon + &__text
	&__text + &__icon
		margin-left 8px

	&__icon
		fill currentColor

	&:focus
	&:active:focus
		outline thin dotted
		outline 5px auto -webkit-focus-ring-color
		outline-offset -2px

	&:hover
	&:focus
		color #333333
		text-decoration none

	&:active
	&_active
		outline 0
		background-image none
		box-shadow inset 0 3px 5px rgba(0 0 0 0.125)

	&_disabled
	&[disabled]
		&
		&:hover
		&:focus
		&:active
			opacity 0.65
			box-shadow none
			outline none

	a&_disabled
		pointer-events none

//- Block button
.button_block
	display: block;
	width: 100%;

	& + &
		// margin-top: 10px;

	input[type="submit"]&
	input[type="reset"]&
	input[type="button"]&
		width: 100%;


//-//////////////////////////////////////////////////////////
//- Button sizes
//-//////////////////////////////////////////////////////////

.button
.button_size_normal
	button-size(
		padding: 18px 20px,
		font-size: 18px,
		line-height: 1.4
	)

.button_size_extra-large
	button-size(
		padding: 26px 32px,
		font-size: 22px,
		line-height: 1.4
	)

.button_size_large
	button-size(
		padding: 22px 28px,
		font-size: 20px,
		line-height: 1.4
	)

.button_size_small
	button-size(
		padding: 10px 18px,
		font-size: 16px,
		line-height: 1.4
	)

.button_size_extra-small
	button-size(
		padding: 6px 12px,
		font-size: 14px,
		line-height: 1.4
	)


//-//////////////////////////////////////////////////////////
//- Styles and colors
//-//////////////////////////////////////////////////////////

// Ghost
.button_style_ghost
	border-width 1px

.button_style_ghost.button_color_white
	button-style(
		color: #fff,
		color-hover: #333,
		background: transparent,
		background-hover: #fff,
		border: #fff,
		border-hover: #fff
	)

.button_style_ghost.button_color_red
	button-style(
		color: #f05050,
		color-hover: #fff,
		background: transparent,
		background-hover: #f05050,
		border: #f05050,
		border-hover: #f05050
	)

// Solid
.button_style_solid.button_color_light-green
	button-style(
		color: #545454,
		color-hover: false,
		background: #dcefd6,
		background-hover: false,
		border: false,
		border-hover: false
	)

.button_style_solid.button_color_green
	button-style(
		color: #fff,
		color-hover: false,
		background: #52ae32,
		background-hover: false,
		border: false,
		border-hover: false
	)

// Transparent
.button_style_transparent.button_color_white
	button-style(
		color: #fff,
		color-hover: false,
		background: transparent,
		background-hover: false,
		border: false,
		border-hover: false
	)