touchstonejs-ui/less/components/Button.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

// 
// Button
// ==============================




// Base
// ------------------------------

.Button {
	.retina-1px-border-top-and-bottom( rgba(0,0,0,0.17) );
	.transition( color 160ms ); // animate variation if disabled state changed while visible
	background-color: white;
	border: none;
	color: @text-color;
	display: block;
	font-weight: normal;
	height: @item-height;
	line-height: @item-height;
	margin-bottom: @gutter-lg;
	outline: none;
	padding: 0 @padding-base-horizontal;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 100%;
	-webkit-appearance: none;

	// stack panel buttons closer to one another when in a row
	& + & {
		margin-top: -(@gutter-lg / 2);
	}

	// add active state
	&.Tappable-active {
		background-color: @item-bg-tap;
	}

	// add disabled state
	&[disabled] {
		color: @button-disabled-color;
		pointer-events: none;
	}

	// icons in buttons
	& > .icon-sm,
	& > .icon-md,
	& > .icon-lg {
		display: inline-block;
		vertical-align: middle;
	}

}


// variants

.Button--danger  { color: @app-danger; }
.Button--default { color: @text-color; }
.Button--info    { color: @app-info; }
.Button--primary { color: @app-primary; font-weight: @font-weight-bold; }
.Button--success { color: @app-success; }
.Button--warning { color: @app-warning; }




// Panel Button Groups
// ------------------------------

// stack buttons horizontally

.ButtonGroup {
	.display-flex();
	.retina-1px-border-top-and-bottom( rgba(0,0,0,0.17) ); // move the button borders to the group
	margin-bottom: @gutter-lg;

	 > .Button {
	 	border-left: 1px solid rgba(0,0,0,0.17);
	 	margin: 0;

	 	&:first-child {
	 		border-left: none;
	 	}

	 	// remove the borders - they're handled by the group
	 	&::before,
	 	&::after {
	 		display: none;
	 	}
	 }
}