/home/bdqbpbxa/demo-subdomains/adaptiq.goodface.com.ua/frontend/css/ui-components/form-elements.css
.double-input-box {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.double-input-box .input-box {
width: calc(50% - 8px);
}
.double-input-box .input-box+.input-box {
margin-left: var(--margin-betwen-text);
}
.input-box {
margin-bottom: var(--margin-betwen-content);
}
.input-box {
position: relative;
}
.input-box:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background-color: var(--white);
transition: transform 0.3s cubic-bezier(.645, .045, .355, 1);
transform: scaleX(0);
-webkit-transform-origin: right;
transform-origin: right;
}
.input-box.-filled:before {
transform: scaleX(1);
transform-origin: left;
transition-delay: 0.1s;
}
.input-box input,
.input-box textarea {
display: block;
width: 100%;
height: 40px;
min-height: 40px;
overflow: hidden;
background: rgba(0, 0, 0, 0);
border: none;
padding: 0 24px 16px 0;
border-bottom: 1px solid var(--dark-grey);
color: var(--white);
font-family: 'PolySans', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.01em;
transition: color 0.4s, border 0.4s;
}
.input-box input::placeholder,
.input-box textarea::placeholder {
color: var(--grey) !important;
}
.input-box textarea {
min-height: 96px;
}
.input-box:after {
content: '';
position: absolute;
right: 0;
top: 6px;
display: block;
width: 16px;
height: 16px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ4Ml8xNDQ1MCkiPgo8Y2lyY2xlIG9wYWNpdHk9IjAuMTYiIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI0VEM0I0NCIvPgo8cGF0aCBkPSJNNy41NDI1IDQuNDk4MjdMOC4wMDA5OCAxMEw4LjQ1OTQ1IDQuNDk4MjdDOC40ODE4MSA0LjIzMDA1IDguMjcwMTMgNCA4LjAwMDk4IDRDNy43MzE4MiA0IDcuNTIwMTUgNC4yMzAwNSA3LjU0MjUgNC40OTgyN1oiIHN0cm9rZT0iI0VEM0I0NCIvPgo8Y2lyY2xlIGN4PSI4IiBjeT0iMTIiIHI9IjEiIGZpbGw9IiNFRDNCNDQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF80ODJfMTQ0NTAiPgo8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI4IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
.input-box input::placeholder,
.input-box textarea::placeholder {
color: inherit;
}
/* .input-box input:focus,
.input-box textarea:focus,
.input-box input:hover,
.input-box textarea:hover {
border-color: var(--white);
} */
.input-box.-file-input label {
border-radius: 100px;
height: 56px;
width: fit-content;
min-width: 240px;
padding: 10px 24px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 16px;
text-align: center;
letter-spacing: 0.01em;
color: var(--background-dark);
cursor: pointer;
border: 1px solid var(--grey);
background: rgba(0, 0, 0, 0);
transition: background 0.4s, color 0.4s, border 0.4s;
}
.input-box.-file-input label:after {
content: '';
margin-left: 8px;
display: block;
width: 16px;
height: 16px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzYwMV8xNDUyOSkiPgo8Y2lyY2xlIG9wYWNpdHk9IjAuMzIiIGN4PSI4LjUiIGN5PSI4IiByPSI4IiBmaWxsPSIjQkJCQkJCIi8+CjxwYXRoIGQ9Ik04LjUgNFYxMk00LjUgOEgxMi41IiBzdHJva2U9IiMxMTExMTEiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82MDFfMTQ1MjkiPgo8cmVjdCB4PSIwLjUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjgiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
pointer-events: none;
transition: transform 0.4s, background 0.4s;
}
.input-box.-file-input input {
display: none;
}
.input-box.-file-input.-file-uploaded label:after {
transform: rotate(45deg);
}
.input-box.-file-input.-invalid label {
color: var(--red);
border-color: var(--red);
}
.input-box.-file-input.-invalid:after {
display: none;
}
.input-box.-file-input {
display: flex;
justify-content: flex-start;
align-items: center;
}
.input-box.-file-input .fileName {
margin-left: var(--margin-betwen-text);
max-width: 55%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
transition: opacity 0.4s, margin 0.4s;
opacity: 0;
}
.input-box.-file-uploaded .fileName {
opacity: 1;
}
.input-box.-invalid input,
.input-box.-invalid textarea {
border-color: var(--red) !important;
color: var(--red) !important;
}
.input-box.-invalid:after {
opacity: 1 !important;
}
.--checkbox {
width: 100%;
padding-right: 30px;
}
.--checkbox input {
display: none;
}
.--checkbox .visible-part {
position: relative;
display: flex;
align-items: flex-start;
padding-left: 25px;
width: fit-content;
cursor: pointer;
user-select: none;
color: var(--grey);
}
.--checkbox .visible-part a {
color: var(--white);
transition: color 0.4s;
}
.--checkbox .visible-part:before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: 4px;
left: 0;
width: 16px;
height: 16px;
border: 1px solid var(--dark-grey);
transition: background 0.4s, border 0.4s;
}
.--checkbox .visible-part:after {
content: "";
position: absolute;
left: 0px;
top: 4px;
width: 16px;
height: 16px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgOEw3IDEyTDEyIDQiIHN0cm9rZT0iIzExMTExMSIgc3Ryb2tlLXdpZHRoPSIxLjI1IiBzdHJva2UtbGluZWpvaW49ImJldmVsIi8+Cjwvc3ZnPgo=');
opacity: 0;
transition: opacity 0.4s;
}
.--checkbox.-checked .visible-part:after {
opacity: 1;
}
.--checkbox.-checked .visible-part:before {
background: var(--white);
border-color: var(--white);
}
.form {
position: relative;
}
.thank-window {
position: absolute;
opacity: 0;
pointer-events: none;
left: 0;
top: 0;
transition: opacity 0.4s;
}
.thank-window .title {
color: var(--white);
}
.thank-window .text {
color: var(--grey);
margin-top: var(--margin-betwen-text);
}
.thank-window .text+.text {
margin-top: 55px;
}
.thank-window a {
font-weight: bold;
color: var(--white);
transition: opacity 0.4s;
}
.form form {
transition: opacity 0.4s;
}
.form.-sended .thank-window {
opacity: 1;
pointer-events: auto;
}
.form.-sended form {
opacity: 0;
pointer-events: none;
}
.form.-black .thank-window .title {
color: var(--background-dark);
}
.form.-black .thank-window .text {
color: var(--dark-grey);
}
.form.-black .thank-window a {
font-weight: bold;
color: var(--red);
transition: opacity 0.4s;
}
.form.-black .input-box input,
.form.-black .input-box textarea {
color: var(--background-dark);
border-color: var(--grey);
}
.form.-black .input-box input::placeholder,
.form.-black .input-box textarea::placeholder {
color: var(--background-dark) !important;
}
.form.-black .--checkbox .visible-part {
color: var(--dark-grey);
}
.form.-black .--checkbox .visible-part a {
color: var(--red);
font-weight: 600;
transition: opacity 0.4s;
}
.form.-black .--checkbox .visible-part:before {
border: 1px solid var(--grey);
}
.form.-black .--checkbox.-checked .visible-part:before {
background: var(--text-dark);
border-color: var(--text-dark);
}
.form.-black .--checkbox .visible-part:after {
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgOEw3IDEyTDEyIDQiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVqb2luPSJiZXZlbCIvPgo8L3N2Zz4K');
}
.vacancy-title {
position: absolute;
opacity: 0;
pointer-events: none;
}
@media screen and (max-width: 760px) {
.input-box.-file-input {
flex-direction: column;
}
.input-box.-file-input label {
width: 100%;
}
.input-box.-file-input .fileName {
margin: 0;
width: 100%;
max-width: 100%;
}
.input-box.-file-input.-file-uploaded .fileName {
margin-top: 16px;
}
.submit {
width: 100%;
}
.double-input-box {
flex-direction: column;
}
.double-input-box .input-box {
width: 100%;
}
.double-input-box .input-box+.input-box {
margin-left: 0;
}
}