bootstrap-less-port/less/_buttons.less

A Less port of Bootstrap v4

//
// Base styles
//

.btn {
	display: inline-block;
	// LESS PORT: Less doesn’t strip “empty” property values so we have to check for a value first.
	& when not (@btn-font-family = ~"") { font-family: @btn-font-family; }
	font-weight: @btn-font-weight;
	color: @body-color;
	text-align: center;
	& when not (@link-decoration = none) { text-decoration: none; }
	// LESS PORT: Less doesn’t strip “empty” property values so we have to check for a value first.
	& when not (@btn-white-space = ~"") { white-space: @btn-white-space; }
	vertical-align: middle;
	user-select: none;
	background-color: transparent;
	border: @btn-border-width solid transparent;
	#button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-line-height, @btn-border-radius);
	#transition(@btn-transition);

	#hover({
		color: @body-color;
		text-decoration: none;
	});

	&:focus,
	&.focus {
		outline: 0;
		box-shadow: @btn-focus-box-shadow;
	}

	// Disabled comes first so active can properly restyle
	&.disabled,
	&:disabled {
		opacity: @btn-disabled-opacity;
		#box-shadow(none);
	}

	&:not(:disabled):not(.disabled) {
		& when (@enable-pointer-cursor-for-buttons) { cursor: pointer; }

		&:active,
		&.active {
			#box-shadow(@btn-active-box-shadow);

			&:focus {
				#box-shadow(@btn-focus-box-shadow, @btn-active-box-shadow);
			}
		}
	}
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
	pointer-events: none;
}


//
// Alternate buttons
//

//@each $color, $value in $theme-colors {
//  .btn-#{$color} {
//    @include button-variant($value, $value);
//  }
//}
each(@theme-colors, #(@value, @color) {
	.btn-@{color} {
		#button-variant(@value, @value);
	}
});

//@each $color, $value in $theme-colors {
//  .btn-outline-#{$color} {
//    @if $color == "light" {
//      @include button-outline-variant($value, $gray-900);
//    } @else {
//      @include button-outline-variant($value, $white);
//    }
//  }
//}
each(@theme-colors, #(@value, @color) {
	.btn-outline-@{color} {
		#button-outline-variant(@value);
	}
});


//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
	font-weight: @font-weight-normal;
	color: @link-color;
	text-decoration: @link-decoration;

	#hover({
		color: @link-hover-color;
		text-decoration: @link-hover-decoration;
	});

	&:focus,
	&.focus {
		text-decoration: @link-hover-decoration;
	}

	&:disabled,
	&.disabled {
		color: @btn-link-disabled-color;
		pointer-events: none;
	}

	// No need for an active state here
}


//
// Button Sizes
//

.btn-lg {
	#button-size(@btn-padding-y-lg, @btn-padding-x-lg, @btn-font-size-lg, @btn-line-height-lg, @btn-border-radius-lg);
}

.btn-sm {
	#button-size(@btn-padding-y-sm, @btn-padding-x-sm, @btn-font-size-sm, @btn-line-height-sm, @btn-border-radius-sm);
}


//
// Block button
//

.btn-block {
	display: block;
	width: 100%;

	// Vertically space out multiple block buttons
	+ .btn-block {
		margin-top: @btn-block-spacing-y;
	}
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
	&.btn-block {
		width: 100%;
	}
}