Merge pull request #5987 from WoltLab/acp-dahsboard-box-hight

[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="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
	margin: 0; /* safari fix */
	@include input;
}

/* set placeholder color */
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"] {
	&::placeholder {
		color: var(--wcfInputPlaceholder);

		&:focus,
		&:hover {
			color: var(--wcfInputPlaceholderActive);
		}
	}

	&[disabled],
	&[readonly] {
		background-color: var(--wcfInputDisabledBackground) !important;
		border-color: var(--wcfInputDisabledBorder) !important;
		color: var(--wcfInputDisabledText) !important;
	}
}

textarea::placeholder {
	color: var(--wcfInputPlaceholder);

	&:focus,
	&:hover {
		color: var(--wcfInputPlaceholderActive);
	}
}

input[type="search"],
input[type="text"] {
	-webkit-appearance: none;
}

@media (pointer: coarse) {
	input[type="date"],
	input[type="datetime"],
	input[type="email"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="url"],
	select,
	textarea {
		font-size: 16px;
		padding: 6px 8px;
	}
}

textarea {
	border-width: 1px;
	font-weight: 400;
	resize: vertical;
	vertical-align: top;
	width: 100%;

	@include wcfFontDefault;

	&[disabled],
	&[readonly] {
		background-color: var(--wcfInputDisabledBackground) !important;
		border-color: var(--wcfInputDisabledBorder) !important;
		color: var(--wcfInputDisabledText) !important;
	}
}

input[disabled],
textarea[disabled] {
	-webkit-text-fill-color: var(--wcfInputDisabledText); /* override safari font color change */
	-webkit-opacity: 1; /* override mobile safari opacity change affecting text color */
}

select {
	// The width is determined by the browser based upon the longest <option> contained,
	// but this can cause the <select> to overflow the parent container. This is acceptable
	// to some extent, but on mobile it can cause the entire site to have a horizontal
	// scrollbar instead. Setting a `max-width` will cause the browser to respect the page
	// boundaries and nicely wrap the displayed value instead.
	max-width: 100%;

	&.fullWidth {
		width: 100%;
	}
}

.formSubmit {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;

	&:not(:first-child) {
		margin-top: 30px;
	}
}

@include screen-xs {
	.formSubmit {
		input[type="button"],
		input[type="reset"],
		input[type="submit"],
		.button,
		a.button {
			flex: 1;
		}
	}
}

.formSubmit.formSubmit.formSubmit + .section {
	/* Intentional selector to overwrite existing selector. */
	margin-top: 20px;
}

.inputAddon {
	column-gap: 5px;
	display: flex;

	&:not(:last-child) {
		margin-bottom: 5px;
	}

	> .inputPrefix,
	> .inputSuffix {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
	}

	input {
		flex: 1 auto;

		& + .inputPrefix {
			margin-left: 5px;
		}
	}
}

.inputAddonTextarea {
	column-gap: 0;
	flex-wrap: wrap;
	row-gap: 5px;

	> textarea {
		flex: 0 0 100%;
	}

	> .ck.ck-editor {
		flex: 0 0 100%;
		margin-top: 0 !important;
	}
}

.inputAddon input,
input {
	&.tiny {
		flex-grow: 0;
		width: 80px;
	}

	&.long {
		width: 100%;
	}

	@include screen-xs {
		&.short {
			flex-grow: 0;
			width: 150px;
		}

		&.medium {
			width: 100%;
		}
	}

	@include screen-sm-up {
		&.short {
			flex-grow: 0;
			min-width: 80px;
			width: 10%;
		}

		&.medium {
			flex-grow: 0;
			min-width: 150px;
			width: 30%;
		}
	}
}

.formError {
	--color-error: #c00;

	dt {
		color: var(--color-error) !important;
	}

	input,
	select,
	textarea {
		border-color: var(--color-error) !important;
	}
}

html[data-color-scheme="dark"] .formError {
	--color-error: #ff4747;
}

.formSuccess {
	--color-success: rgb(46, 139, 87);

	dt {
		color: var(--color-success) !important;
	}

	input,
	select,
	textarea {
		border-color: var(--color-success) !important;
	}
}

/* grid-based form controls */
.formGrid {
	dt {
		display: none;
	}

	select {
		width: 100%;
	}
}

.formFieldRequired,
.customOptionRequired {
	color: rgba(204, 0, 1, 1) !important;
}

.formFieldRequiredNotice {
	color: var(--wcfContentDimmedText);
	margin-top: 20px;
	@include wcfFontSmall;
}

html[data-color-scheme="dark"] :is(.formFieldRequired, .customOptionRequired) {
	color: #ff4444 !important;
}

/* password strength estimator */
.inputAddonPasswordStrength {
	align-items: flex-start;

	input.medium {
		align-self: stretch;
	}

	@include screen-xs {
		flex-wrap: wrap;

		input:is(.medium, .long) {
			width: auto;
		}
	}
}

.passwordStrengthRating {
	flex: 0 0 auto;

	@include screen-sm-up {
		margin-left: 10px;
	}

	@include screen-xs {
		margin-top: 5px;
		width: 100%;
	}
}

.passwordStrengthScore {
	background-color: rgb(224, 224, 224);
	border-radius: 3px;
	display: block;
	height: 10px;
	overflow: hidden;
	position: relative;

	&::before {
		background-color: transparent;
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		top: 0;
		transition:
			background-color 0.12s linear,
			width 0.12s linear;
		width: 0;
	}

	&[data-score="0"]::before {
		background-color: #dd2c00;
		width: 5%;
	}
	&[data-score="1"]::before {
		background-color: #ff9100;
		width: 20%;
	}
	&[data-score="2"]::before {
		background-color: #cddc39;
		width: 50%;
	}
	&[data-score="3"]::before {
		background-color: #64dd17;
		width: 85%;
	}
	&[data-score="4"]::before {
		background-color: #2e7d32;
		width: 100%;
	}
}