TRI-293: add custom and mover handler + mover page poster

styles/base/cargo.scss

@@ -1,3 +1,4 @@
+@import "variables";
 .cargo {
 
   &--inline {
@@ -28,6 +29,13 @@
         border-color: var(--brand-primary);
       }
     }
+
+    &:disabled {
+      + label {
+        color: var(--brand-grey3);
+        cursor: not-allowed;
+      }
+    }
   }
 
   &__label {

styles/base/typograph.scss

@@ -25,13 +25,10 @@ html,
 body {
   max-width: 100vw;
   max-height: initial;
+  height: initial;
   overflow-x: hidden;
 }
 
-html {
-  overflow: hidden;
-}
-
 label {
   display: inline-block;
 
@@ -64,4 +61,12 @@ input, textarea {
   &.locate {
     background: white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat;
   }
+
+  &.loading {
+    background: white url(/static/img/svg/loader.svg) no-repeat calc(100% - 15px) center;
+  }
+
+  &.is-items {
+    background: url(/static/img/png/icon-arrow.svg) calc(100% - 15px) center no-repeat white;
+  }
 }

styles/create_poster/create_poster.scss

@@ -1,5 +1,7 @@
 @import "../base/variables";
 
+$row-gap: 40px;
+
 .poster {
   text-align: left;
   box-sizing: border-box;
@@ -49,7 +51,7 @@
     display: flex;
     padding: 40px 0;
     border-bottom: 1px solid #E6E6E6;
-    gap: 40px;
+    gap: $row-gap;
 
     @media (min-width: $screen-xl-min) {
       padding: 39px 0;
@@ -59,8 +61,8 @@
       display: block;
     }
 
-
     &--from-to {
+      flex-wrap: wrap;
 
       @media (max-width: $screen-md-max) {
         padding-top: 14px
@@ -74,7 +76,6 @@
         padding-top: 40px;
       }
 
-
       label {
         padding-left: 9px;
 
@@ -222,6 +223,7 @@
 
   &__col {
     flex: 1;
+    position: relative;
 
     @media (max-width: $screen-lg-max) {
       &:not(:last-child) {
@@ -229,6 +231,12 @@
         margin-bottom: 20px;
       }
     }
+
+    &--inner {
+      display: flex;
+      min-width: 100%;
+      gap: $row-gap;
+    }
   }
 
   &__grid {
@@ -286,6 +294,36 @@
     }
   }
 
+  &__towns-list {
+    display: none;
+    max-height: 200px;
+    width: 100%;
+    position: absolute;
+    background-color: var(--brand-white);
+    overflow: scroll;
+    overflow-x: hidden;
+    z-index: 100;
+
+    &.show {
+      display: block;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #FF613A;
+      border-radius: 20px;
+      border: 3px solid white;
+    }
+
+  }
+
+  &__locate {
+    appearance: none;
+  }
+
   .btn {
     margin: 0;