сделал map
This commit is contained in:
@@ -1784,6 +1784,146 @@ button{
|
||||
.modal-form__buttons--two input{
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
.modal-map{
|
||||
margin: auto;
|
||||
|
||||
width: 1105px;
|
||||
|
||||
display: flex;
|
||||
|
||||
border-radius: 24px;
|
||||
border: none;
|
||||
}
|
||||
.modal-map__left{
|
||||
width: 600px;
|
||||
|
||||
padding: 24px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.modal-map__control{
|
||||
margin: 38px -12px -12px -12px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
.modal-map-control__item{
|
||||
margin: 12px;
|
||||
|
||||
padding: 2px;
|
||||
|
||||
width: calc(50% - 24px);
|
||||
|
||||
background: var(--background-9);
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
}
|
||||
.modal-map-control__item.active{
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.modal-map-control__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);
|
||||
}
|
||||
.modal-map-control-item__content{
|
||||
padding: 14px;
|
||||
|
||||
border-radius: 18px;
|
||||
|
||||
background: var(--background-white);
|
||||
}
|
||||
.modal-map-control-item__header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-map-control-item__circle{
|
||||
padding: 2px;
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: var(--background-9);
|
||||
position: relative;
|
||||
}
|
||||
.modal-map-control-item-circle__content{
|
||||
width: 16px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: var(--background-white);
|
||||
}
|
||||
.modal-map-control__item.active .modal-map-control-item__circle{
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.modal-map-control__item.active .modal-map-control-item__circle::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 12px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: var(--gradient-blue);
|
||||
}
|
||||
.modal-map-control-item__title{
|
||||
margin-left: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
.modal-map-control-item__description{
|
||||
margin-top: 16px;
|
||||
}
|
||||
.modal-map-control-item__time{
|
||||
font-family: var(--font-family);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
color: var(--text-black);
|
||||
|
||||
text-align: start;
|
||||
}
|
||||
.modal-map-control-item__price{
|
||||
margin-top: 8px;
|
||||
|
||||
font-family: var(--font-family);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 133%;
|
||||
color: var(--text-6);
|
||||
|
||||
text-align: start;
|
||||
}
|
||||
.modal-map__form{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.modal-map-form__hidden{
|
||||
|
||||
}
|
||||
.modal-map-form__button{
|
||||
margin-top: 88px;
|
||||
}
|
||||
.modal-map-form__sub-button{
|
||||
display: none;
|
||||
}
|
||||
.modal-map__right{
|
||||
padding: 16px 0px 16px 16px;
|
||||
}
|
||||
.modal-map__map{
|
||||
border: 2px solid var(--background-9);
|
||||
border-radius: 16px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.modal-map__map iframe{
|
||||
height: 650px;
|
||||
}
|
||||
/* modal */
|
||||
|
||||
/* toggle */
|
||||
|
||||
@@ -68,6 +68,22 @@
|
||||
.notification__title{
|
||||
padding-right: 96px;
|
||||
}
|
||||
.modal-form__buttons--two{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.modal-form__buttons--two button, .modal-form__buttons--two input{
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.modal-map__control{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.modal-map-control__item{
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
/* modal */
|
||||
|
||||
/* footer */
|
||||
|
||||
@@ -130,6 +130,30 @@ main{
|
||||
.modal-form-content__line--two .modal-form-content-line__element:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
.modal-map{
|
||||
width: 100%;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
border-radius: 0;
|
||||
}
|
||||
.modal-map__left, .modal-map__right{
|
||||
width: 100%;
|
||||
}
|
||||
.modal-map__map iframe {
|
||||
width: 100%;
|
||||
height: 528px;
|
||||
}
|
||||
.modal-map-form__button{
|
||||
display: none;
|
||||
}
|
||||
.modal-map-form__sub-button{
|
||||
margin-top: 64px;
|
||||
|
||||
padding: 0 24px;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
/* modal */
|
||||
|
||||
/* cabinet */
|
||||
|
||||
Reference in New Issue
Block a user