закончил inputs
This commit is contained in:
Kirill Pet
@@ -476,6 +476,424 @@ button{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.label-name{
|
||||
margin-bottom: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
color: var(--text-black);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-input__error{
|
||||
margin-top: 4px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 133%;
|
||||
|
||||
color: #f60909;
|
||||
|
||||
display: none;
|
||||
}
|
||||
.form-input__error--absolute{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
}
|
||||
.modal-form__content.check .form__input:invalid{
|
||||
border-color: #f60909;
|
||||
}
|
||||
.modal-form__content.check .form__input:invalid + .form-input__error{
|
||||
display: block;
|
||||
}
|
||||
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
|
||||
display: block;
|
||||
}
|
||||
.form-input__phone{
|
||||
padding: 12px 16px 12px ;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--text-black);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input__phone.focus{
|
||||
outline: 1px solid var(--text-black);
|
||||
}
|
||||
.form-input-phone__icon{
|
||||
height: 16px;
|
||||
width: 28px;
|
||||
|
||||
background-size: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input-phone__icon::after{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
|
||||
width: 8px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
background-image: url(../img/svg/main/triangle-grey.svg);
|
||||
}
|
||||
.form-input-phone__code{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-phone__code::before{
|
||||
content: '+';
|
||||
}
|
||||
.form-input-phone__input{
|
||||
margin-left: 6px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.form-input-phone__list{
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 8px;
|
||||
|
||||
width: 280px;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
transition: opacity .2s ease-out;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.form-input-phone__list.active{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.form-input-phone-list__search{
|
||||
width: 100%;
|
||||
|
||||
padding: 12px 16px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
border-left: 1px solid var(--background-black);
|
||||
border-right: 1px solid var(--background-black);
|
||||
border-top: 1px solid var(--background-black);
|
||||
border-radius: 20px 20px 0 0;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.form-input-phone-list__search::placeholder{
|
||||
color: var(--text-6);
|
||||
}
|
||||
.form-input-phone-list__content{
|
||||
width: 100%;
|
||||
max-height: 224px;
|
||||
|
||||
padding: 24px 16px;
|
||||
|
||||
border: 1px solid var(--background-black);
|
||||
border-top: none;
|
||||
border-radius: 0 0 20px 20px;
|
||||
|
||||
background: var(--background-white);
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-input-phone-list__item{
|
||||
margin-top: 14px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-input-phone-list__item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-input-phone-list-item__icon{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
.form-input-phone-list-item__name{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-phone-list-item__code{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-phone-list-item__code::before{
|
||||
content: '+';
|
||||
}
|
||||
.form-input__two{
|
||||
padding: 2px;
|
||||
|
||||
display: flex;
|
||||
|
||||
border-radius: 20px;
|
||||
background: var(--gradient-turquoise);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input-two__oval{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
||||
width: 50%;
|
||||
height: calc(100% - 4px);
|
||||
|
||||
border-radius: 18px;
|
||||
|
||||
background: var(--background-white);
|
||||
transition: left .2s ease-out;
|
||||
}
|
||||
.form-input-two__button{
|
||||
width: 50%;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
.form-input-two__input{
|
||||
display: none;
|
||||
}
|
||||
.form-input__radio{
|
||||
padding: 16px;
|
||||
}
|
||||
.form-input-radio__item{
|
||||
margin-top: 14px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.form-input-radio__item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-input-radio__circle{
|
||||
padding: 2px;
|
||||
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--gradient-blue);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.form-input-radio__item.active .form-input-radio__circle::before{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
||||
width: 12px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.form-input-radio-circle__content{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.form-input-radio__title{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.form-input-radio__input{
|
||||
display: none;
|
||||
}
|
||||
.form-input__list{
|
||||
position: relative;
|
||||
}
|
||||
.form-input__list::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 21.5px;
|
||||
right: 19.5px;
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
background-image: url(../img/svg/main/arrow-black.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
.form-input-list__input{
|
||||
width: 100%;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 12px 16px;
|
||||
padding-right: 40px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
|
||||
border: 1px solid var(--text-black);
|
||||
}
|
||||
|
||||
.form-input-list__input::placeholder{
|
||||
color: var(--text-grey);
|
||||
}
|
||||
.form-input-list__block-content{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
max-height: 192px;
|
||||
height: 0;
|
||||
|
||||
border-radius: 20px;
|
||||
background-color: var(--background-white);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: height .2s ease-out;
|
||||
}
|
||||
.form-input-list__block-content.active{
|
||||
border: 1px solid var(--background-black);
|
||||
}
|
||||
.form-input-list__content{
|
||||
margin: 8px 16px;
|
||||
|
||||
max-height: 176px;
|
||||
|
||||
padding-right: 16px;
|
||||
|
||||
overflow-y: auto;
|
||||
}
|
||||
.form-input-list__content::-webkit-scrollbar{
|
||||
border-radius: 8px;
|
||||
width: 4px;
|
||||
background: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
.form-input-list__content::-webkit-scrollbar-thumb{
|
||||
border-radius: 8px;
|
||||
background: var(--background-9);
|
||||
}
|
||||
.form-input-list__content
|
||||
.form-input-list__item{
|
||||
margin-top: 16px;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.form-input-list__item:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-input-list__item.active{
|
||||
background: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
.form-input-list-item__text{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.form-input-list-item__box{
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
padding: 2px;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.form-input-list-item-box__content{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.form-input-list__item.active .form-input-list-item-box__content{
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
|
||||
/* .form-input-radio__ */
|
||||
/* form */
|
||||
|
||||
|
||||
@@ -1212,24 +1630,26 @@ button{
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.notification{
|
||||
.modal-form{
|
||||
width: 600px;
|
||||
|
||||
padding: 24px;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.notification--white{
|
||||
.modal-form--white{
|
||||
border: 1px solid var(--background-black);
|
||||
background: var(--background-white);
|
||||
}
|
||||
.notification--green-gradient{
|
||||
.modal-form--green-gradient{
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.notification--width-584{
|
||||
.modal-form--width-584{
|
||||
width: 584px;
|
||||
}
|
||||
.notification__close{
|
||||
.modal-form__close{
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
@@ -1246,13 +1666,13 @@ button{
|
||||
|
||||
transition: opacity .2s ease-out;
|
||||
}
|
||||
.notification__close--white{
|
||||
.modal-form__close--white{
|
||||
background-image: url(../img/svg/main/white-x.svg);
|
||||
}
|
||||
.notification__close:hover{
|
||||
.modal-form__close:hover{
|
||||
opacity: .8;
|
||||
}
|
||||
.notification__title{
|
||||
.modal-form__title{
|
||||
padding-right: 50px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
@@ -1262,50 +1682,69 @@ button{
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.notification__text--center{
|
||||
.modal-form__text--center{
|
||||
text-align: center;
|
||||
}
|
||||
.notification__text--center-pc{
|
||||
.modal-form__text--center-pc{
|
||||
text-align: center;
|
||||
}
|
||||
.notification__title--green-gradient{
|
||||
.modal-form__title--green-gradient{
|
||||
background: var(--gradient-blue);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.notification__title--white{
|
||||
.modal-form__title--white{
|
||||
color: var(--text-white);
|
||||
}
|
||||
.notification__element{
|
||||
.modal-form__element{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.notification__element--center{
|
||||
.modal-form__element--center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.notification__element--top-40{
|
||||
.modal-form__element--top-40{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.notification__text{
|
||||
.modal-form__text{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-black);
|
||||
}
|
||||
.notification__text--weight-500{
|
||||
.modal-form__text--weight-500{
|
||||
font-weight: 500;
|
||||
}
|
||||
.notification__text--white{
|
||||
.modal-form__text--white{
|
||||
color: var(--text-white);
|
||||
}
|
||||
.notification__img{
|
||||
.modal-form__img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
|
||||
object-fit: contain;
|
||||
}
|
||||
.modal-form__content{
|
||||
margin-top: 40px;
|
||||
}
|
||||
.modal-form-content__line{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.modal-form-content__line:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.modal-form-content__line--two{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.modal-form-content__line--two .modal-form-content-line__element{
|
||||
width: calc(50% - 12px);
|
||||
}
|
||||
.modal-form__buttons{
|
||||
margin-top: 32px;
|
||||
}
|
||||
/* modal */
|
||||
|
||||
/* toggle */
|
||||
|
||||
Reference in New Issue
Block a user