File: //var/www/quadcode-jobs/resources/sass/components/_data.scss
.data {
margin-top: 9%;
&__title {
font-size: 36px;
margin-bottom: 40px;
@include breakpoint-down('sm') {
font-size: 24px;
line-height: 32px;
}
}
&__desc {
margin-bottom: 40px;
}
&__col {
margin-bottom: 60px;
padding-bottom: 30px;
border-bottom: 1px solid #E5E5E7;
&:last-of-type {
border-bottom: 0;
}
}
&__form {
width: 100%;
max-width: 650px;
position: relative;
&-error {
display: none;
}
}
&__input {
background: var(--input-background, #f8fafb);
border: 1px solid var(--input-border-color, transparent);
border-radius: var(--input-border-radius);
box-shadow: none;
color: var(--input-text-color, var(--color-text-primary));
font-family: Proxima Nova, sans-serif;
font-size: var(--typo-base);
padding: 1.5rem 2rem;
width: 100%;
}
&__control {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 30px;
@include breakpoint-down('sm') {
flex-direction: column-reverse;
}
}
&__button {
margin: 0;
height: 60px;
user-select: none;
@include breakpoint-down('sm') {
margin-top: 30px;
}
&.disable {
pointer-events: none;
background: #b2b2b2b2;
box-shadow: 0 14px 18px -20px rgba(178, 178, 178, 0.7);
&:hover {
filter: none;
}
}
}
&__fields {
position: relative;
}
&__form-error {
position: absolute;
left: 32px;
top: -9px;
padding: 0 1.5rem;
background: linear-gradient(var(--color-app-background), var(--color-app-background) 50%, var(--input-background, #F8FAFB) 50.01%);
color: var(--color-highlight);
font-size: var(--typo-caption);
}
&__success {
display: none;
color: #1d9f3c;
}
}