Differential D8039 Diff 29748 landing/subscription-form.css

Changeset View

Standalone View

landing/subscription-form.css

	form {			form {
	display: flex;			display: flex;
	}			}

	.button {			.button {
	cursor: pointer;			cursor: pointer;
	border: none;			border: none;
	padding: 16px 32px;			padding: 17px 32px; /* We have 17 to compensate for no border */
	border-radius: 4px;			border-radius: 4px;
	color: var(--white-100);			color: var(--white-100);
	background: var(--violet-dark-60);			background: var(--violet-dark-60);
	min-width: 184px;			min-width: 184px;
				display: flex;
				justify-content: center;
				align-items: center;
	}			}

	.buttonSuccess {			.buttonSuccess {
	background-color: var(--success-dark-90);			background-color: var(--success-dark-90);
	}			}

	.buttonFailure {			.buttonFailure {
	background-color: var(--error-dark-50);			background-color: var(--error-dark-50);
	}			}

	.button:hover {			.button:hover {
	background-color: var(--violet-dark-80);			background-color: var(--violet-dark-80);
	}			}

	.buttonSuccess:hover {			.buttonSuccess:hover {
	background-color: var(--success-dark-90);			background-color: var(--success-dark-90);
	}			}

	.buttonFailure:hover {			.buttonFailure:hover {
	background: var(--error-dark-50);			background: var(--error-dark-50);
	}			}

				div.inputContainer {
				display: flex;
				flex: 1;
				flex-direction: column;
				}

	input.emailInput {			input.emailInput {
	flex: 1;			flex: 1;
	padding: 16px 24px;			padding: 16px 24px;
	background-color: transparent;			background-color: transparent;
	color: var(--white-100);			color: var(--white-100);
	border: 1px solid var(--white-80);			border: 1px solid var(--white-80);
	border-radius: 4px;			border-radius: 4px;
	outline: none;			outline: none;
	transition: 300ms;			transition: 300ms;
	margin-right: 12px;			margin-right: 12px;
	}			}

	input.emailInput:focus {			input.emailInput:focus {
	border: 1.5px solid var(--white-100);			border: 1.5px solid var(--white-100);
	transition: 300ms;			transition: 300ms;
	}			}

	input.emailInputFailure {			input.emailInputFailure {
	border: 1px solid var(--error-dark-50);			border: 1px solid var(--error-dark-50);
	}			}

				p.feedbackText {
				margin-top: 8px;
				}

				p.feedbackTextSuccess {
				color: var(--success-dark-50);
				}

				p.feedbackTextFailure {
				color: var(--error-dark-50);
				}

	@media (max-width: 1099px) {			@media (max-width: 1099px) {
	form {			form {
	display: block;			display: block;
	}			}
	.button {			.button {
	width: 100%;			width: 100%;
	height: 50px;			height: 50px;
				margin-top: 8px;
	}			}

	input.emailInput {			input.emailInput {
	width: 100%;			width: 100%;
	height: 50px;			height: 50px;
	margin-bottom: 16px;			margin-bottom: 8px;
				}

				p.feedbackText {
				text-align: center;
				margin-top: 0;
	}			}
	}			}