gate-dashboard-program/static/assets/less/xenon-less/buttons.less

.btn {
	outline: none;
	border: 1px solid transparent;
	margin-bottom: @base-padding;
	
	&.text-left {
		text-align: left;
	}
	
	&.text-right {
		text-align: right;
	}
	
	&:active, &:focus {
		outline: none !important;
	}
	
	// Active
	&:active,
	&.active {
		.box-shadow(inset 0 0 5px 2px fade(#000, 8%));
	}
	
	// Spacing between buttons
	+ .btn {
		margin-left: @base-padding/2;
		
		&.btn-block {
			margin-left: 0;
		}
	}
	
	// Single Button (no margin)
	&.btn-single {
		margin-bottom: 0;
	}
	
	// Icon
	&.btn-icon {
		line-height: 1;
		
		i {
			vertical-align: middle;
			display: inline-block;
			padding: 5px 0;
		}
		
		span {
			display: inline-block;
		}
	}
	
	// Standalone Icon
	&.btn-icon-standalone {
		padding: 0;
		border: 0;
		line-height: 1;
		
		i, span {
			display: block;
			padding: 12px @padding-base-horizontal;
		}
		
		i {
			border-right: 1px solid transparent;
			float: left;
		}
		
		span {
			padding-left: 45px + @base-padding;
			padding-right: @base-padding + 3;
		}
		
		&.btn-icon-standalone-right {
			
			i {
				float: right;
				border-left: 1px solid transparent;
				border-right: 0;
			}
			
			span {
				padding-left: @base-padding + 3;
				padding-right: 45px + @base-padding;
			}
		}
		
		// Sizes
		&.btn-lg {
			
			i, span {
				padding: 15px @padding-large-horizontal;
			}
			
			span {
				padding-left: @base-padding + 65;
			}
			
			&.btn-icon-standalone-right {
				
				span {
					padding-left: @base-padding + 7;
					padding-right: @base-padding + 65;
				}
			}
		}
		
		&.btn-sm {
			
			i, span {
				padding: 8px @padding-small-horizontal;
			}
			
			span {
				padding-left: @base-padding + 40;
			}
			
			&.btn-icon-standalone-right {
				
				span {
					padding-left: @base-padding + 2;
					padding-right: @base-padding + 40;
				}
			}
		}
		
		&.btn-xs {
			
			i, span {
				padding: 5px @padding-xs-horizontal;
			}
			
			span {
				padding-left: @base-padding + 24;
			}
			
			&.btn-icon-standalone-right {
			
				span {
					padding-left: @base-padding;
					padding-right: @base-padding + 24;
				}
			}
		}
	}
	
	
	// Colors
	&.btn-secondary { .xenon-btn-style(@secondary-color, #FFF); }
	&.btn-purple { .xenon-btn-style(@xe-purple, #FFF); }
	&.btn-orange { .xenon-btn-style(@xe-orange, #FFF); }
	&.btn-pink { .xenon-btn-style(@xe-pink, #FFF); }
	&.btn-turquoise { .xenon-btn-style(@xe-turquoise, #FFF); }
	&.btn-blue { .xenon-btn-style(@xe-blue, #FFF); }
	&.btn-red { .xenon-btn-style(@xe-red, #FFF); }
	&.btn-gray { .xenon-btn-style(@xe-gray, #333); }
	&.btn-black { .xenon-btn-style(@xe-black, #FFF); &:hover { background-color: lighten(@xe-black, 10%); } }
	
	&.btn-white { 
		.xenon-btn-style(#FFF, #333);
		border: 1px solid @default-border-color;
	}
	
	
	// Standalone Styles
	&.btn-primary { .xenon-btn-icon-standalone(@main-color; -5%; -10%); }
	&.btn-secondary { .xenon-btn-icon-standalone(@secondary-color; 2%; 4%); }
	&.btn-info { .xenon-btn-icon-standalone(@brand-info; 4%; 8%); }
	&.btn-danger { .xenon-btn-icon-standalone(@brand-danger; 4%; 8%); }
	&.btn-warning { .xenon-btn-icon-standalone(@brand-warning; 3%; 5%); }
	&.btn-red { .xenon-btn-icon-standalone(@xe-red; 4%; 6%); }
	&.btn-purple { .xenon-btn-icon-standalone(@xe-purple; 4%; 11%, 9%); }
	&.btn-blue { .xenon-btn-icon-standalone(@xe-blue; 4%; 6%); }
	&.btn-white { .xenon-btn-icon-standalone(#FFF; 4%; 10%; 12%); }
	&.btn-gray { .xenon-btn-icon-standalone(@xe-gray; 4%; 10%; 12%); }
	&.btn-black { .xenon-btn-icon-standalone(@xe-black;-5%; -10%; -12%); }
	
	// Button Group
	.btn-group & {
		
		&.btn-purple:hover { border-color: darken(@xe-purple, 15%); }
		&.btn-red:hover { border-color: darken(@xe-red, 15%); }
		&.btn-blue:hover { border-color: darken(@xe-blue, 15%); }
		&.btn-white:hover { border-color: darken(#FFF, 15%); }
		&.btn-gray:hover { border-color: darken(@xe-gray, 15%); }
		&.btn-black:hover { border-color: lighten(@xe-black, 15%); }
	}
}

.btn-unstyled {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	height: auto;
	line-height: 1;
	
	&:active, &:focus {
		background: none;
		.box-shadow(none);
	}
}