Small style optimization

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / button.less

/* default values */
button,
input[type='reset'],
input[type='submit'],
input[type='button'],
.button {
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	display: inline-block;
	margin: 0 2px;
	padding: 5px 13px;
	position: relative;
	
	.borderRadius(15px);
}

/* normal state */
.button,
input[type='reset']:not([disabled]),
input[type='submit']:not([disabled]),
input[type='button']:not([disabled]),
button:not([disabled]) {
	background-color: @wcfButtonBackgroundColor;
	border-color: @wcfButtonBorderColor;
	color: @wcfButtonColor;
	text-decoration: none;
	
	.textShadow(@wcfButtonBackgroundColor);
}

/* primary */
.button.buttonPrimary,
input[type='submit']:not([disabled]),
input[type='button']:not([disabled]).buttonPrimary,
button:not([disabled]).buttonPrimary {
	background-color: @wcfButtonPrimaryBackgroundColor;
	border-color: @wcfButtonPrimaryBorderColor;
	color: @wcfButtonPrimaryColor;
	font-weight: bold;
	
	.textShadow(@wcfButtonPrimaryBackgroundColor);
	
	.icon {
		color: @wcfButtonPrimaryColor;
	}
}

/* hover */
.button:hover,
input[type='reset']:not([disabled]):hover,
input[type='submit']:not([disabled]):hover,
input[type='button']:not([disabled]):hover,
button:not([disabled]):hover {
	background-color: @wcfButtonHoverBackgroundColor;
	border-color: @wcfButtonHoverBorderColor;
	color: @wcfButtonHoverColor;
	text-decoration: none;
	z-index: 100;
	
	.textShadow(@wcfButtonHoverBackgroundColor);
	
	.icon {
		color: @wcfButtonHoverColor;
	}
}

/* primary hover */
.button.buttonPrimary:hover,
input[type='submit']:not([disabled]):hover,
input[type='button']:not([disabled]).buttonPrimary:hover,
button:not([disabled]).buttonPrimary:hover {
	background-color: @wcfButtonPrimaryHoverBackgroundColor;
	border-color: @wcfButtonPrimaryHoverBorderColor;
	color: @wcfButtonPrimaryHoverColor;
	
	.textShadow(@wcfButtonPrimaryHoverBackgroundColor);
	
	.icon {
		color: @wcfButtonPrimaryHoverColor;
	}
}

/* disabled state */
input[type='reset']:disabled,
input[type='submit']:disabled,
input[type='button']:disabled,
button:disabled {
	background-color: @wcfButtonBackgroundColor;
	border-color: @wcfButtonBorderColor;
	color: lighten(@wcfButtonColor, 10%);
	cursor: not-allowed;
	text-decoration: none;
	
	.textShadow(@wcfButtonBackgroundColor);
}

/* active (permanently) */
.button.active,
input[type='button'].active,
button.active,
.button.active:hover,
input[type='button'].active:hover,
button.active:hover {
	background-color: @wcfButtonColor;
	border-color: darken(@wcfButtonColor, 5%);
	color: @wcfButtonBackgroundColor;
	
	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1), 1px);
	.textShadow(@wcfButtonColor);
	
	.icon {
		color: @wcfButtonBackgroundColor;
		
		.textShadow(@wcfButtonColor);
	}
}

/* button list */
.buttonList {
	> li {
		display: inline-block;
		
		> .button {
			margin: 0;
		}
	}
}

/* button group */
.buttonGroup {
	> li {
		display: inline-block;
		
		> .button {
			margin: 0 0 0 -1px;
			
			.borderRadius(0);
		}
		
		&:first-child {
			> .button {
				border-top-left-radius: 15px;
				border-bottom-left-radius: 15px;
			}
		}
		
		&:last-child {
			> .button {
				border-top-right-radius: 15px;
				border-bottom-right-radius: 15px;
			}
		}
	}
}

/* sidebar buttons */
.sidebar {
	button,
	input[type='reset'],
	input[type='submit'],
	input[type='button'],
	.button {
		font-size: @wcfSmallFontSize;
		padding: 5px 11px;
	}
}

/* small buttons */
button.small,
.button.small {
	font-size: @wcfSmallFontSize;
	min-height: 13px;
	padding: 5px 11px;
	
	.borderRadius(3px);
}

/* button icons */
.button > .icon {
	margin: -1px -5px;
	
	+ span {
		margin-left: 6px;
	}
}