Merge branch 'next-lantia' of github.com:WoltLab/WCF into next-lantia

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / layout / form.scss

input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
input[type="url"],
select,
textarea {
	background-color: $wcfInputBackground;
	border: 1px solid $wcfInputBorder;
	color: $wcfInputText;
	outline: none;
	padding: 4px 8px;
	
	// input elements do not inherit font family, size and line-height from body
	font-family: $wcfFontFamily;
	@extend .wcfFontDefault;
	@extend .wcfLineHeight;
	
	&:focus,
	&:hover {
		background-color: $wcfInputBackgroundActive;
		border-color: $wcfInputBorderActive;
		color: $wcfInputTextActive;
	}
	
	&[disabled] {
		background-color: $wcfInputDisabledBackground !important;
		border-color: $wcfInputDisabledBorder !important;
		color: $wcfInputDisabledText !important;
	}
}

/* set placeholder color */
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
input[type="url"] {
	&::-webkit-input-placeholder { /* WebKit browsers */
		color: $wcfInputPlaceholderText;
	}
	&::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: $wcfInputPlaceholderText;
	}
	&:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: $wcfInputPlaceholderText;
	}
}

textarea[readonly] {
	background-color: $wcfInputDisabledBackground !important;
	border-color: $wcfInputDisabledBorder !important;
	color: $wcfInputDisabledText !important;
}

textarea {
	border-width: 1px;
	width: 100%;
	
	@extend .wcfFontDefault;
}

.selectDropdown {
	position: relative;
	
	&::after {
		content: $fa-var-caret-down;
		display: block;
		font-family: FontAwesome;
		font-size: 14px;
		pointer-events: none;
		position: absolute;
		right: 7px;
		top: 0px;
	}
	
	> select {
		padding-right: 18px;
		
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
}

dl {
	&:not(.plain) {
		display: block;
		
		&:not(:first-child) {
			margin-top: 10px;
		}
		
		&:not(:last-child) {
			margin-bottom: 10px;
		}
		
		> dt {
			display: block;
			
			&:not(:empty) {
				margin-bottom: 5px;
			}
		}
		
		> dd {
			display: block;
			
			> small:not(.innerError) {
				color: $wcfContentDimmedText;
				display: block;
				margin-top: 5px;
			}
			
			&.floated {
				display: flex;
				flex-wrap: wrap;
				
				> label {
					flex: 0 0 auto;
					margin: 0 10px 5px 0;
					
					&:last-child {
						margin-right: 0;
					}
				}
			}
			
			&:not(:last-child) {
				margin-bottom: 10px;
			}
		}
		
		&.wide > dt {
			display: none;
		}
		
		& + dl:not(.plain) {
			padding-top: 10px;
		}
	}
	
	&.dataList {
		@extend .clearfix;
		
		> dt {
			clear: right;
			color: rgba(128, 128, 128, 1);
			float: left;
			margin-right: 4px;
			text-align: left;
			
			&:after {
				content: ":";
			}
		}
		
		> dd {
			float: right;
			text-align: right;
			
			&:not(:last-child) {
				margin-bottom: 3px;
			}
		}
	}
	
	&.inlineDataList {
		@extend .wcfFontSmall;
		
		> dt {
			display: inline-block;
			
			&:after {
				content: ":";
				padding-left: 1px;
			}
		}
		
		> dd {
			display: inline-block;
			
			&:not(:last-of-type):after {
				content: ",";
				padding-left: 1px;
			}
		}
	}
	
	&.statsDataList {
		align-items: center;
		display: flex;
		flex-direction: row-reverse;
		flex-wrap: wrap;
		
		> dt {
			color: $wcfContentDimmedText;
			flex: 0 0 60%;
			margin-left: 5px;
			overflow: hidden;
			text-align: left;
			white-space: nowrap;
			
			@extend .wcfFontSmall;
		}
		
		> dd {
			flex: 0 0 auto;
			width: calc(40% - 5px); /* IE work-around */
			
			overflow: hidden;
			text-align: right;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	&.condensed {
		display: block;
		
		> dt,
		> dd {
			display: block;
			margin: 0;
			text-align: left;
			width: 100%;
		}
		
		> dd + dt {
			margin-top: 15px;
		}
		
		> dt:not(:empty) {
			margin-bottom: 5px;
		}
	}
}

.formSubmit {
	text-align: center;
	
	&:not(:first-child) {
		margin-top: 30px;
	}
	
	> :not(:first-child) {
		margin-left: 10px;
	}
}

.flexibleButtonGroup {
	display: flex;
	
	> li {
		flex: 0 0 auto;
		
		&:not(:last-child) {
			margin-right: 5px;
		}
		
		> input[type="radio"] {
			display: none;
			
			&:checked + label {
				cursor: default;
				
				> .icon {
					cursor: default !important;
				}
			}
			
			&:checked + label,
			& + label:hover {
				color: #fff;
				
				&.green {
					background-color: rgb(148, 170, 114);
					//background-color: rgb(92, 184, 92);
				}
				
				&.red {
					background-color: rgb(232, 151, 149);
					//background-color: rgb(217, 83, 79);
				}
				
				&.yellow {
					background-color: rgb(203, 172, 91);
					//background-color: rgb(240, 173, 78);
				}
				
				> .icon {
					color: #fff;
				}
			}
		}
		
		> label {
			background-color: rgb(242, 242, 242);
			cursor: pointer;
			padding: 5px 10px;
			
			&.green,
			&.green > .icon {
				color: rgb(54, 125, 54);
			}
			
			&.red,
			&.red > .icon {
				color: rgb(201, 48, 44);
			}
			
			&.yellow,
			&.yellow > .icon {
				color: rgb(236, 151, 31);
			}
			
			> .icon {
				cursor: pointer !important;
			}
		}
	}
}

.inputAddon {
	display: flex;
	
	&:not(:last-child) {
		margin-bottom: 5px;
	}
	
	> .inputPrefix {
		flex: 0 0 auto;
		
		&.button {
			border-radius: 0;
			margin-right: 5px;
		}
	}
	
	> .inputSuffix {
		flex: 0 0 auto;
		
		&.button {
			border-radius: 0;
			margin-left: 5px;
		}
		
		&:not(.button) {
			background-color: $wcfButtonBackground;
			border: 1px solid $wcfButtonBorder;
			color: $wcfButtonText;
			cursor: default;
			margin-left: 5px;
			padding: 3px 5px;
		}
	}
	
	input {
		flex: 1 auto;
	}
}

.inputAddonTextarea {
	flex-wrap: wrap;
	
	> .inputPrefix.button {
		border-bottom-width: 0;
		border-radius: 0;
	}
	
	> textarea {
		flex: 0 0 100%;
	}
}

.inputAddon input,
input {
	box-sizing: border-box;
	
	&.tiny {
		flex-grow: 0;
		width: 80px;
	}
	
	&.short {
		flex-grow: 0;
		min-width: 80px;
		width: 10%;
	}
	
	&.medium {
		flex-grow: 0;
		min-width: 150px;
		width: 30%;
	}
	
	&.long {
		min-width: 150px;
		width: 100%;
	}
}