You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
2.4 KiB
158 lines
2.4 KiB
.subscribe__container {
|
|
min-height: 30svh;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4em;
|
|
&>div:nth-child(1) {
|
|
& label {
|
|
font-size: 1.6rem;
|
|
line-height: 1.2;
|
|
color: var(--clr-grey-600);
|
|
}
|
|
}
|
|
|
|
|
|
& .field_with_errors {
|
|
--border: var(--clr-error);
|
|
}
|
|
|
|
& + .field,
|
|
& + .input__fields-two {
|
|
margin-top: 1.2em;
|
|
}
|
|
|
|
|
|
&:has(input[type=submit]) {
|
|
margin: 2em 0;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
input[type=submit] {
|
|
font-family: var(--ff-base);
|
|
font-size: 1.6rem;
|
|
background-color: var(--clr-grey-800);
|
|
color: var(--clr-white-200);
|
|
padding: 1em 1.2em;
|
|
border: none;
|
|
appearance: none;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.material__input {
|
|
display: flex;
|
|
font-family: var(--ff-base);
|
|
border: 1px solid var(--clr-border);
|
|
font-size: 1.6rem;
|
|
letter-spacing: 0.00625em;
|
|
border: none !important;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
height: 100%;
|
|
appearance: none;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
}
|
|
|
|
textarea.material__input {
|
|
resize: none;
|
|
}
|
|
|
|
.input-box {
|
|
display: flex;
|
|
height: 46px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
margin: 0;
|
|
overflow: visible;
|
|
-webkit-box-align: baseline;
|
|
--outline: var(--clr-action);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--clr-border);
|
|
|
|
& .field_with_errors {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&:has(textarea) {
|
|
padding: 0 0 0 8px;
|
|
height: auto;
|
|
|
|
& textarea {
|
|
line-height: 1.2;
|
|
margin: 1px 0;
|
|
padding: 8px 16px 8px 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border-color: var(--clr-grey-500);
|
|
}
|
|
|
|
&:focus-within {
|
|
outline: 2px solid var(--outline);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
&:has(.field_with_errors) {
|
|
--outline: var(--clr-error);
|
|
|
|
&:hover {
|
|
border-color: var(--clr-error);
|
|
}
|
|
}
|
|
}
|
|
|
|
p[role="alert"] {
|
|
margin: 4px 0 0 0;
|
|
color: var(--clr-error);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
ul.errors {
|
|
color: var(--clr-error);
|
|
margin: 0 0 1.2em 0;
|
|
}
|
|
|
|
p[role="tooltip"] {
|
|
margin: 4px 0 0 0;
|
|
color: var(--clr-grey-500);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
|
|
.form__errors {
|
|
margin: 0 0 1.2em 0;
|
|
color: var(--clr-error);
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
.input__fields-two {
|
|
display: grid;
|
|
gap: 2em;
|
|
grid-template-columns: 1fr 2fr;
|
|
|
|
& .field + .field {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.input__fields-two + .field {
|
|
margin-top: 1.2em;
|
|
}
|