Newer
Older
vue-demo / vue-client / static / css / forms.css
Mark George on 27 Aug 2021 519 bytes Add project
form {
	display: grid;
}

form.twocol {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-gap: 1em 0.5em;
}

label {
	grid-column: 1 / 2;
	text-align: right;
}

input, select, textarea {
	grid-column: 2 / 3;
}

button {
	grid-column: 1 / 3;
}

textarea {
	height: 4em;
	resize: vertical;
}


@media screen and (max-width: 600px) {
	form {
		grid-template-columns: 1fr;
		grid-gap: 0em;
	}

	label {
		text-align: left;
	}

	input, button, select, textarea {
		grid-column: 1 / 2;
		margin-bottom: 1em;
	}
}