сделал map

cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent b5879bd12e
commit 0911744f6f
  1. 140
      assets/css/gp-style-core.css
  2. 16
      assets/css/gp-style-mobile.css
  3. 24
      assets/css/gp-style-tablet.css
  4. 329
      notification-map.html

@ -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 */

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save