Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
malwaredllc
GitHub Repository: malwaredllc/byob
Path: blob/master/web-gui/buildyourownbotnet/assets/less/neon-less/buttons.less
1293 views
// Core styles
.btn {
	outline: 0 !important;
	
	&:active {
		.box-shadow(none);
	}

	&.btn-icon {
		position: relative;
		
		i {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
		}
	}
}

// Alternate buttons
// --------------------------------------------------

.btn-default {
	.button-variant(@btn-default-color; @secondary_background_color; @btn-default-border);
}

.btn-primary {
	.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

.btn-blue {
	.button-variant(#FFF, #0072bc, #0072bc);
}

.btn-red {
	.button-variant(#FFF, #d42020, #d42020);
}

.btn-orange {
	.button-variant(#FFF, #ff9600, #ff9600);
}

.btn-gold {
	.button-variant(#846e20, #fcd036, #fcd036);
}

.btn-black {
	.button-variant(#FFF, #000000, #000000);
}

.btn-white {
	.button-variant(@main_color, #FFF, #FFF);
	border-color: @default !important;
}

.btn-warning {
	.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}

.btn-danger {
	.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

.btn-success, .btn-green {
	.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}

.btn-info {
	.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
	margin-top: 5px;
}

// Base styles
// --------------------------------------------------

.bs-example {
	
	> .btn, 
	> .make-switch, 
	> .btn-group {
		margin-top: 4px;
		margin-bottom: 4px;
		margin-right: 9px;
	}
	
	&.bs-baseline-top {
		
		.btn, .btn-group {
			vertical-align: top !important;
		}
	}
}


// Button Variant Exented
.button-variant(@color; @background; @border) {

	&:hover,
	&:focus,
	&.focus {
		color: @color !important;
	}
	
	&.btn-icon {
		@padd: 39px;
		
		position: relative;
		padding-right: @padd;
		border: none;
	
	i {
		background-color: darken(@background, 8%);
		font-size: @font-size-base;
		.button-size(@padding-base-vertical; 6px; @font-size-base; @line-height-base; @border-radius-base);
		.rounded(0 @border-radius-base @border-radius-base 0);
	}
		
		&.icon-left {
			padding-right: @padding-base-horizontal;
			padding-left: @padd;

			i {
				float: left;
				right: auto;
				left: 0;
				.rounded(~"@{border-radius-base} 0 0 @{border-radius-base} !important");
			}
		}
		
		&.btn-lg {
			@padd: 55px;
			padding-right: @padd;
			
			&.icon-left {
				padding-right: @padding-large-horizontal;
				padding-left: @padd;
			}
			
			i {
				.button-size(@padding-large-vertical; 10px; @font-size-large; @line-height-large; @border-radius-large);
			}
		}
		
		&.btn-sm {
			@padd: 36px;
			padding-right: @padd;
			
			&.icon-left {
				padding-right: @padding-small-horizontal;
				padding-left: @padd;
			}
			
			i {
				.button-size(@padding-small-vertical; 6px; @font-size-small; @line-height-small; @border-radius-small);
			}
		}
		
		&.btn-xs {
			@padd: 32px;
			@padding-small-vertical: 2px;
			
			padding-right: @padd;
			
			&.icon-left {
				padding-right: @padding-small-horizontal;
				padding-left: @padd;
			}
			
			i {
				.button-size(@padding-small-vertical; 6px; @font-size-small - 1; @line-height-small; @border-radius-small);
			}
		}
	}
}