settings.scss in sail-3.2.1

- old
+ new

@@ -16,17 +16,17 @@
     margin: 1rem .75rem;
     display: inline-block;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     padding: 10px;
     z-index: 2;
-    width: 25rem;
+    width: 90%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     @extend .rounded;
 
-    @media (min-width: 992px) { width: 44%; }
+    @media (min-width: 768px) { width: 44%; }
     @media (min-width: 1200px) { width: 21%; }
 
     h3 {
       margin-left: 25px;
 
@@ -85,11 +85,10 @@
     }
 
     .value-input {
       width: 98%;
       margin-bottom: 10px;
-      height: 20px;
       font-size: 22px;
       text-align: center;
       border: none;
       border-bottom: 2px solid $aluminium;
       @extend .border-transition;
@@ -236,34 +235,41 @@
       }
     }
   }
 
   #search-container {
+    @media (max-width: 991px) { margin-top: 10px; }
+
     #search-form {
       text-align: center;
 
       #query {
         height: 50px;
         width: 100%;
         border: 3px solid transparent;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
         font-size: 18px;
         text-align: center;
+        text-overflow: ellipsis;
         @extend .rounded;
         @extend .border-transition;
       }
     }
 
     .offset-container {
       float: left;
-      width: 25%;
+      width: 3.5%;
       height: 50px;
+
+      @media (min-width: 992px) { width: 25%; }
     }
 
     .inner-container {
-      width: 50%;
+      width: 90%;
       float: left;
+
+      @media (min-width: 992px) { width: 50%; }
     }
 
     .search-button {
       float: left;
       border: 3px solid transparent;
@@ -273,28 +279,40 @@
       background: white;
 
       img {
         height: 100%;
       }
+
+      @media (max-width: 991px) {
+        position: relative;
+        top: 10px;
+        left: 33vw;
+      }
+
+      @media (max-width: 767px) { left: 20vw; }
+      @media (max-width: 413px) { left: 16vw; }
     }
 
     #btn-order {
       margin: 0 0 0 15px;
       height: 58px;
     }
 
     #sort-menu {
       background: white;
       position: absolute;
-      right: 18%;
+      right: 30%;
       top: 165px;
+      z-index: 2;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
       @extend .rounded;
       @extend .fade-in;
       padding: 10px;
 
-      @media (min-width: 1980px) { right: 22%; }
+      @media (min-width: 768px) { right: 41%; }
+      @media (min-width: 1024px) { right: 18%; }
+      @media (min-width: 1200px) { right: 22%; }
 
       button {
         outline: none;
         border: none;
         width: 100%;
@@ -339,9 +357,14 @@
       color: $dark_green;
     }
 
     &.alert {
       color: $bright_red;
+    }
+
+    @media (max-width: 767px) {
+      width: 85%;
+      left: 1.5%;
     }
   }
 
   #progress-container {
     text-align: center;