Андрей Ларионов / Vekprom_laravel

Blame view

public/scss/blocks/modals/city.scss 2.27 KB
edit raw normal view history
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
112
113
114
115
116
117
118
119
120
121
 
  @import "../../vars";
  @import "../../mixins";
  
  .modal-city {
      width: 100%;
      padding: 30px 280px 14px 240px;
      left: 0;
      top: 64px;
      border-radius: 0;
      // height: 900px;
  
      &--hidden {
          display: none
      }
  }
  
  .modal-city-top {
      display: flex;
      align-items: center;
  
      &__title {
          font-weight: 700;
          font-size: 48px;
          line-height: 100%;
          color: $vmainGrey;
          margin-right: 60px;
      }
  
      &__close {
          position: relative;
          cursor: pointer;
  
          &: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: flex;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: 14px;
      line-height: 16px;
      color: #283C50;
      height: 700px;
  
      > :not(:last-child) {
              margin-bottom: 30px;
          }
  }
  
  .city-content-column {
      max-width: 220px;
      width: 100%;
        
  }
  
   .city-main {
      max-width: 218px;
      width: 100%;
  
       > :not(:first-child) {
           margin-top: 13px;
       }
  
       &__item {
           cursor: pointer;
  
           &--active {
               color: $vactiveOrange;
           }
       }
   }
   
   .modal-city-block {
      position: relative;
      max-width: 230px;
      width: 100%;
      margin-right: 50px;
  
      > :not(:last-child) {
          margin-bottom: 8px;
      }
  
      &__name {
         padding-left: 26px;
         cursor: pointer; 
      }
  
      &__letter {
          position: absolute;
          top: 0;
          left: 0;
          color: #828CA0;
      }
   }
  
   .modal-city-overlay {
      top: 64px;
  
      &--hidden {
          display: none;
      }
   }