[feat] Forms styling.

src/stylesheets/application/_create-keys.scss

@@ -5,8 +5,7 @@
 }
 
 .create-keys {
-  @extend %item;
-  @extend %item-paddings;
+  padding-bottom: 20px;
 
   h1 {
     margin-bottom: 20px;
@@ -21,7 +20,8 @@
     @extend %btn-new;
 
     &[disabled] {
-      background-color: #079dd4;
+      cursor: default;
+      opacity: 0.7;
     }
 
     &.finalize {
@@ -48,11 +48,12 @@
 
   label {
     &:not(.radio) {
+      color: #b9c2cc;
       display: block;
-      margin-bottom: 10px;
-      text-transform: uppercase;
-      font-size: 12px;
-      font-weight: bold;
+      font-size: 15px;
+      font-weight: 500;
+      line-height: 1.2;
+      margin-bottom: 6px;
     }
   }
 
@@ -65,29 +66,24 @@
 
   input,
   textarea {
-    transition: 0.3s border-color;
-    width: 100%;
+    @include default-text-input-styles();
     margin-bottom: 20px;
-    border-radius: 3px;
-    box-sizing: border-box;
-    border: 1px solid #eee;
+    width: 100%;
+  }
 
-    &:focus {
-      border-color: #08b3f2;
+  #PlacesAutocomplete__root {
+    margin-bottom: 20px;
+    input {
+      margin-bottom: 0;
     }
   }
 
   textarea {
-    padding: 15px;
     height: 110px;
+    padding: 15px;
     resize: none;
   }
 
-  input {
-    padding: 0 10px;
-    height: $input-height;
-  }
-
   input[type="radio"] {
     display: none;
 

src/stylesheets/application/_main-title.scss

@@ -14,5 +14,8 @@
   @media screen and (max-width: $mobile-width) {
     -ms-flex-direction: column;
     flex-direction: column;
+    .search-input {
+      width: 100%;
+    }
   }
 }

src/stylesheets/application/_search.scss

@@ -1,28 +1,11 @@
 .search-input {
-  background-color: #fff;
+  @include default-text-input-styles();
+
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6McEf5GAAAARXRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lMU1RVWFlcXV5iY2tsdXZ4iYqLo6Spqqusra7Cw8TFysvM29zm5+jr8vP4+fzSh6raAAABM0lEQVR4AYWTeVeCQBTFr6AtuaTYkpUVlqZm0JIaLhjBfP+v1NxDyDCcA7+/3nLPecu8QULFGs/9MPTnE6uCPIa9EntWtgGN5lJkWDaR4WwnNHYWFM5DxsLXfqN22Ok7sXeR5ts/jHy0Er/1Tj9oJ77J+tEICqOIfZiIsalnXlUwNvifn/O50HA5bQWky45OoHHMTrsgY2nNkONFhscgX9K6Ro6eDH+C+NKqI0ddhn0QFjtAjhpb2wuOigQscVpQorzJScGYRYv65aLSVTvQcLhqI7YHQjJEhqHyWDC/+dxPUHjkc3tm4nYC6t/Sg3GFdgGX8ZHNeo1qtdGb0ZNEd4oiEBq6ouNlc95zRMW9+nHWaXptG3jQFTCs6YJfbzG1OL+m0EkVt2WKLUoUGxRxs91c/QFA1F3oKOgExAAAAABJRU5ErkJggg==);
   background-position: 15px 50%;
   background-repeat: no-repeat;
   background-size: 16px 16px;
-  border-radius: 3px;
-  border: 1px solid $base-border-color;
-  box-sizing: border-box;
-  color: #333;
   display: inline-block;
-  font-size: 16px;
-  height: 38px;
-  outline: none;
-  padding: 0 15px 0 40px;
-  transition: 0.15s border-color;
+  padding-left: 40px;
   width: 300px;
-
-  &:hover {
-    border-color: #8e959d;
-    color: $input-color;
-  }
-  &:focus {
-    border-color: $primary-color;
-    color: $input-color;
-  }
-
 }

src/stylesheets/helpers/_mixins.scss

@@ -8,3 +8,24 @@
     background-size: contain;
   }
 }
+
+@mixin default-text-input-styles() {
+  background-color: #fff;
+  border-radius: 3px;
+  border: 1px solid $base-border-color;
+  box-sizing: border-box;
+  color: #333;
+  font-size: 16px;
+  height: 38px;
+  outline: none;
+  padding: 0 15px;
+  transition: 0.15s border-color;
+  &:hover {
+    border-color: #8e959d;
+    color: $input-color;
+  }
+  &:focus {
+    border-color: $primary-color;
+    color: $input-color;
+  }
+}