Merge branch 'next' into next-lantia

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

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	background-color: $wcfButtonBackground;
	border: 1px solid $wcfButtonBorder;
	border-radius: 3px;
	color: $wcfButtonText !important;
	cursor: pointer;
	display: inline-block;
	padding: 5px 10px;
	transition-duration: .2s;
	transition-property: background-color, border-color, color;
	transition-timing-function: linear;
	
	.icon {
		color: $wcfButtonText;
		transition: color .2s linear;
	}
	
	&:hover {
		background-color: $wcfButtonBackgroundActive;
		border-color: $wcfButtonBorderActive;
		color: $wcfButtonTextActive !important;
		
		.icon {
			color: $wcfButtonTextActive;
		}
	}
	
	&.small {
		font-size: .85rem;
		padding: 4px 7px;
	}
}

button.buttonPrimary,
input[type="button"].buttonPrimary,
input[type="submit"],
.button.buttonPrimary {
	background-color: $wcfButtonBackgroundAccent;
	border-color: $wcfButtonBorderAccent;
	color: $wcfButtonTextAccent !important;
	
	.icon {
		color: $wcfButtonTextAccent;
	}
	
	&:hover {
		background-color: $wcfButtonBackgroundAccentActive;
		border-color: $wcfButtonBorderAccentActive;
		color: $wcfButtonTextAccentActive;
		
		.icon {
			color: $wcfButtonTextAccentActive;
		}
	}
}

.buttonList {
	@extend .inlineList;
	
	&.smallButtons .button {
		font-size: .85rem;
		padding: 4px 7px;
	}
	
	/* members list */
	&.letters {
		margin-bottom: -10px;
		
		> li {
			flex: 0 0 10%;
			margin-bottom: 10px;
			
			> a {
				display: block;
				text-align: center;
			}
		}
	}
}

.buttonGroupNavigation > ul {
	@extend .inlineList;
}

.buttonGroup {
	@extend .inlineList;
	
	> li {
		&:not(:last-child) {
			border-right: 1px solid $wcfButtonBackgroundAccentActive;
			margin-right: 0;
		}
		
		&:first-child .button {
			border-bottom-left-radius: 3px;
			border-top-left-radius: 3px;
		}
		
		&:last-child .button {
			border-bottom-right-radius: 3px;
			border-top-right-radius: 3px;
		}
		
		.button {
			border-radius: 0;
		}
	}
}