elemental/less/mixins/buttons.less

React UI Framework

//
// Button variants
// ==============================

// Inspired by https://github.com/twbs/bootstrap


// Fill

.button-variant(@color; @background) {
	#gradient .vertical(lighten(@background, 5%), darken(@background, 5%));
	background-color: @background;
	border-color: darken(@background, 5%) darken(@background, 10%) darken(@background, 15%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: @color;
	font-weight: 400;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

	&:hover,
	&:focus,
	&.focus {
		#gradient .vertical(lighten(@background, 10%), @background);
		border-color: @background darken(@background, 5%) darken(@background, 10%);
		box-shadow: 0 1px 0 rgba(0,0,0,0.1);
		color: @color;
		outline: none;
	}
	&:focus,
	&.focus {
		box-shadow: 0 0 0 3px fade(@background, 25%);
	}
	&:active,
	&.active {
		background-color: darken(@background, 4%);
		background-image: none;
		border-color: darken(@background, 15%) darken(@background, 10%) darken(@background, 5%);
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	}
}


// Default

.button-default-variant(@color) {
	#gradient .vertical(#fafafa, #eaeaea);
	border: 1px solid @input-border-color;
	border-color: @input-border-color darken(@input-border-color, 6%) darken(@input-border-color, 12%);
	color: @color;


	&:hover {
		#gradient .vertical(lighten(@color, 4%), darken(@color, 4%));
		border-color: darken(@color, 6%) darken(@color, 12%) darken(@color, 18%);
		box-shadow: 0 1px 0 rgba(0,0,0,0.1);
		color: white;
	}
	&:focus {
		border-color: darken(@color, 6%) darken(@color, 12%) darken(@color, 18%);
		box-shadow: 0 0 0 3px fade(@color, 25%);
		color: white;
		color: @color;
		outline: none;
	}
	&:hover:focus {
		color: white;
	}
	&:active {
		background-color: darken(@color, 4%);
		background-image: none;
		border-color: darken(@color, 18%) darken(@color, 12%) darken(@color, 6%);
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
		color: white;
	}

	&.disabled,
	&[disabled] {
		background-color: @button-default-disabled-bg;
	}
}


// Hollow

.button-hollow-variant(@color; @border) {
	background: none;
	border-color: @border;
	color: @color;

	&:hover,
	&:focus {
		background-color: mix(@border, @body-bg, 8%);
		background-image: none;
		border-color: darken(@border, 10%);
		color: @color;
		outline: none;
	}
	&:focus,
	&.focus {
		box-shadow: 0 0 0 3px fade(@border, 10%);
	}
	&:active {
		background-color: fade(@border, 20%);
		border-color: darken(@border, 20%);
		box-shadow: none;
	}
}



// Link

.button-link-variant(@color; @hover-color; @hover-decoration) {
	color: @color;
	font-weight: normal;

	&,
	&:active,
	&.active,
	&[disabled],
	fieldset[disabled] & {
		.box-shadow(none);
		background-color: transparent;
	}
	&,
	&:hover,
	&:focus,
	&:active {
		border-color: transparent;
		outline: none;
	}
	&:hover,
	&:focus {
		background-color: transparent;
		color: @hover-color;
		text-decoration: @hover-decoration;
	}
}