Blame view
public/css/blocks/modals/city.css
2.23 KB
b80175387 Начальный проект ... |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
.modal-city { width: 100%; padding: 30px 280px 14px 240px; left: 0; top: 64px; border-radius: 0; } .modal-city--hidden { display: none; } .modal-city-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .modal-city-top__title { font-weight: 700; font-size: 48px; line-height: 100%; color: #333B49; margin-right: 60px; } .modal-city-top__close { position: relative; cursor: pointer; } .modal-city-top__close:after { position: absolute; content: ""; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_314_27095)'%3E%3Cpath d='M4 40L0 36L16 20L0 4L4 0L20 16L36 0L40 4L24 20L40 36L36 40L20 24L4 40Z' fill='%23636B78'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_314_27095'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; width: 40px; height: 40px; top: -20px; right: -530px; } .modal-city-search:after { right: 20px; } .modal-city-content { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 14px; line-height: 16px; color: #283C50; height: 700px; } .modal-city-content > :not(:last-child) { margin-bottom: 30px; } .city-content-column { max-width: 220px; width: 100%; } .city-main { max-width: 218px; width: 100%; } .city-main > :not(:first-child) { margin-top: 13px; } .city-main__item { cursor: pointer; } .city-main__item--active { color: #F5851A; } .modal-city-block { position: relative; max-width: 230px; width: 100%; margin-right: 50px; } .modal-city-block > :not(:last-child) { margin-bottom: 8px; } .modal-city-block__name { padding-left: 26px; cursor: pointer; } .modal-city-block__letter { position: absolute; top: 0; left: 0; color: #828CA0; } .modal-city-overlay { top: 64px; } .modal-city-overlay--hidden { display: none; } |