Add the new variable `FileProcessorFormField::$bigPreview` with getter and setter.

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

button {
	all: unset;

	box-sizing: border-box;
	min-width: 0;
	-webkit-user-select: none;
	user-select: none;

	&:focus-visible {
		outline: 5px auto -webkit-focus-ring-color;
	}

	&:not([disabled]) {
		cursor: pointer;
	}
}

input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button {
	// a.button is required to override link formatting, such as drop-down buttons
	align-items: center;
	background-color: var(--wcfButtonBackground);
	border-radius: var(--wcfBorderRadius);
	border-width: 0;
	color: var(--wcfButtonText);
	// `0.25em` is the average width of a space that previously separated elements.
	column-gap: 0.25em;
	cursor: pointer;
	display: inline-flex;
	font-weight: 400;
	justify-content: center;
	margin: 0;
	padding: 8px 18px;
	text-align: center;
	text-decoration: none;

	// input elements do not inherit font family, size and line-height from body
	font-family: var(--wcfFontFamily);
	@include wcfFontDefault;
	@include wcfLineHeight;

	// removes UA styling enforced by Safari on iOS
	-webkit-appearance: none;

	@include userSelectNone;

	.icon {
		color: inherit;
	}

	&.active {
		background-color: var(--wcfButtonBackgroundActive);
		color: var(--wcfButtonTextActive);
		text-decoration: none;
	}

	&.small {
		padding: 6px 8px;

		@include wcfFontSmall;
	}

	small {
		color: inherit;
	}
}

@media (pointer: coarse) {
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.button,
	a.button {
		padding: 10px 18px;

		&.small {
			padding: 8px;
		}
	}
}

input[type="button"].buttonPrimary,
input[type="submit"],
.button.buttonPrimary,
a.button.buttonPrimary {
	// a.button is required to override link formatting, such as dropdown buttons
	background-color: var(--wcfButtonPrimaryBackground);
	color: var(--wcfButtonPrimaryText);

	&.active {
		background-color: var(--wcfButtonPrimaryBackgroundActive);
		color: var(--wcfButtonPrimaryTextActive);
	}
}

/* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
html:not(.touch) {
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.button,
	a.button {
		&:hover {
			background-color: var(--wcfButtonBackgroundActive);
			color: var(--wcfButtonTextActive);
			text-decoration: none;
		}
	}

	input[type="button"].buttonPrimary,
	input[type="submit"],
	.button.buttonPrimary,
	a.button.buttonPrimary {
		// a.button is required to override link formatting, such as dropdown buttons
		&:hover {
			background-color: var(--wcfButtonPrimaryBackgroundActive);
			color: var(--wcfButtonPrimaryTextActive);
		}
	}
}

/* disabled state */
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button {
	&:disabled,
	&.disabled {
		background-color: var(--wcfButtonDisabledBackground) !important;
		color: var(--wcfButtonDisabledText) !important;
		cursor: not-allowed !important;
		pointer-events: none;
	}
}

/* force active state for buttons toggling a dropdown */
.dropdownOpen {
	> input[type="button"],
	> input[type="reset"],
	> input[type="submit"],
	> .button,
	> a.button {
		background-color: var(--wcfButtonBackgroundActive);
		color: var(--wcfButtonTextActive);
	}

	> input[type="button"].buttonPrimary,
	> input[type="submit"],
	> .button.buttonPrimary,
	> a.button.buttonPrimary {
		background-color: var(--wcfButtonPrimaryBackgroundActive);
		color: var(--wcfButtonPrimaryTextActive);
	}
}

.buttonList {
	@include inlineList;

	&.smallButtons .button {
		padding: 6px 8px;

		@include wcfFontSmall;
	}

	/* members list */
	&.letters {
		margin-bottom: -10px;

		> li {
			flex: 0 0 auto;
			margin-bottom: 10px;
			width: 10%;

			&.lettersReset {
				width: auto;
			}

			> a {
				display: block;
				min-width: -moz-min-content;
				min-width: -webkit-min-content;
				min-width: min-content;
				text-align: center;
			}
		}
	}
}

.buttonList.iconList a {
	color: var(--wcfButtonText);
}

.buttonGroupNavigation > ul {
	@include inlineList;
}

.buttonGroup {
	margin-bottom: -1px;

	@include inlineList;

	> li {
		display: flex;
		margin-bottom: 1px;

		&:not(:last-child) {
			margin-right: 1px;
		}

		&:first-child .button {
			border-top-left-radius: var(--wcfBorderRadius);
			border-bottom-left-radius: var(--wcfBorderRadius);
		}

		&:last-child .button {
			border-top-right-radius: var(--wcfBorderRadius);
			border-bottom-right-radius: var(--wcfBorderRadius);
		}

		.button {
			border-radius: 0;
			border-width: 0;
		}
	}
}