Use prettier for SCSS (#3895)

[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"] {
	&::-webkit-input-placeholder {
		/* WebKit browsers */
		color: $wcfInputPlaceholder;
	}
	&::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: $wcfInputPlaceholder;
	}
	&:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: $wcfInputPlaceholder;
	}

	&:focus,
	&:hover {
		&::-webkit-input-placeholder {
			/* WebKit browsers */
			color: $wcfInputPlaceholderActive;
		}
		&::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: $wcfInputPlaceholderActive;
		}
		&:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: $wcfInputPlaceholderActive;
		}
	}

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

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

/* prevent iOS from zooming when focusing inputs */
.iOS {
	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;
	}
}

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

	@include wcfFontDefault;

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

input[disabled],
textarea[disabled] {
	-webkit-text-fill-color: $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 {
	text-align: center;

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

	@include screen-xs {
		> .button,
		> button,
		> input {
			display: block;
			padding: 7px 10px;
			width: 100%;

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

	@include screen-sm-up {
		/* the `margin-bottom` styles are required to deal with buttons wrapping
		   into the next row, also requires some changes to `.dialogFormSubmit`! */
		margin-bottom: -10px;

		> button,
		> input[type="button"],
		> input[type="reset"],
		> input[type="submit"],
		> .button,
		> a.button {
			margin-bottom: 10px;
		}

		> :not(:first-child) {
			margin-left: 10px;
		}
	}
}

.inputAddon {
	display: flex;

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

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

		&.button {
			border-radius: 0;
		}

		&:not(.button) {
			background-color: $wcfButtonBackground;
			border: 1px solid $wcfInputBorder;
			color: $wcfButtonText;
			cursor: default;
			padding: 3px 5px;
		}
	}

	> .inputPrefix {
		border-right-width: 0 !important;
	}

	> .inputSuffix {
		&.button {
			margin-left: 5px;
		}

		&:not(.button) {
			border-left-width: 0 !important;
		}
	}

	input {
		flex: 1 auto;

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

.inputAddonTextarea {
	flex-wrap: wrap;

	> .inputPrefix.button {
		border-bottom-width: 0;
		border-radius: 0;
	}

	> textarea {
		flex: 0 0 100%;
	}

	> .redactor-box {
		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 {
	dt {
		color: rgba(204, 0, 1, 1) !important;
	}

	input,
	select,
	textarea {
		border-color: rgba(204, 0, 1, 1) !important;
	}
}

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

	select {
		width: 100%;
	}
}

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

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

	@include screen-xs {
		flex-direction: column;
	}
}

.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%;
	}
}