File: /var/www/quadcode/frontend/src/style/widgets/popupModalLayoutTest/form-once.scss
.one-time-invitation-form {
color: #313236;
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
padding: 0px 43px;
border-radius: 20px;
@include breakpoint-down('tabL') {
gap: 12px;
}
@include breakpoint-down('tabM') {
padding: 32px 18px;
width: 100%;
max-width: 339px;
gap: 16px;
}
&__logo {
svg {
height: 32px;
width: auto;
}
}
&__text {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
&__title {
font-weight: 700;
font-size: 24px;
line-height: 29.23px;
@include breakpoint-down('tabL') {
font-size: 18px;
line-height: 19.8px;
}
}
&__description {
font-size: 14px;
line-height: 19.6px;
width: 295px;
padding-bottom: 12px;
@include breakpoint-down('tabL') {
font-size: 10px;
line-height: 12px;
width: 295px;
}
@include breakpoint-down('tabM') {
font-size: 12px;
line-height: 14px;
}
}
&__titleBlock {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
@include breakpoint-down('tabL') {
gap: 12px;
}
}
&__fields {
display: flex;
flex-direction: column;
gap: 16px;
@include breakpoint-down('tabL') {
gap: 12px;
}
@include breakpoint-down('tabM') {
gap: 12px;
}
}
&__buttonBlock {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
@include breakpoint-down('tabL') {
gap: 12px;
}
@include breakpoint-down('tabM') {
gap: 16px;
flex-direction: column-reverse;
}
button {
width: 100%;
padding: 16px 0px;
font-weight: 700;
font-size: 18px;
line-height: 19.8px;
@include breakpoint-down('tabL') {
padding: 16px 0px;
}
@include breakpoint-down('tabM') {
font-size: 14px;
line-height: 15.4px;
}
}
}
.captchaWrapper {
display: flex;
justify-content: center;
}
&--inmodal {
position: relative;
width: 722px;
gap: 16px;
background: #FFFFFFE5;
margin-top: 125px;
@include breakpoint-down('deskS') {
margin-top: 123px;
}
@include breakpoint-down('tabL') {
width: 100%;
margin-top: 20px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
width: 100%;
max-width: 100%;
}
.form__title {
font-size: 24px;
line-height: 29.23px;
@include breakpoint-down('tabL') {
font-size: 18px;
line-height: 19.8px;
}
@include breakpoint-down('tabM') {
font-size: 31px;
line-height: 31px;
}
}
.form__description {
font-size: 14px;
line-height: 19.6px;
width: 295px;
@include breakpoint-down('tabL') {
font-size: 10px;
line-height: 12px;
width: 295px;
padding-bottom: 12px;
}
@include breakpoint-down('tabM') {
display: none;
}
}
.form__buttonBlock {
gap: 16px;
@include breakpoint-down('tabL') {
gap: 12px;
}
@include breakpoint-down('tabM') {
gap: 16px;
}
button {
font-size: 30px;
line-height: 33.2px;
}
}
}
&-error {
@include breakpoint-down('tabM') {
padding: 22px !important;
}
}
}