new indent styles working better on small screens

1 files changed, 15 insertions, 8 deletions

diff --git a/app/assets/stylesheets/responsive/_search_style.scss b/app/assets/stylesheets/responsive/_search_style.scss
index 3a952865d..7aad215e1 100644
--- a/app/assets/stylesheets/responsive/_search_style.scss
+++ b/app/assets/stylesheets/responsive/_search_style.scss
@@ -84,11 +84,24 @@ input.use-datepicker[type=text] {
     border-radius: 3px;
     width: 100%;
     font-size: 0;
+    border-bottom: 0;
     @include respond-min( 20em ){
       border-right: 0;
     }
+    @include respond-min( 44em ){
+      border-bottom: 1px solid #ccc;
+    }
   }
- a, span {
+  li {
+    width: 100%;
+    @include respond-min( 20em ){
+      width: 50%;
+    }
+    @include respond-min( 44em ){
+      width: auto;
+    }
+  }
+  a, span {
     width: 100%;
     text-align: center;
     display: block;
@@ -96,11 +109,9 @@ input.use-datepicker[type=text] {
     padding: 0.5em 0.75em;
     border-bottom: 1px solid #ccc;
     @include respond-min( 20em ){
-      width: auto;
       display: inline-block;
       border-right: 1px solid #ccc;
       border-bottom: 0;
-      width: 50%;
       &:nth-child(1),
       &:nth-child(2) {
         border-bottom: 1px solid #ccc;
@@ -108,21 +119,17 @@ input.use-datepicker[type=text] {
     }
 
     @include respond-min( 44em ){
-      width: auto;
         &:nth-child(n) {
           border-bottom: 0;
         }
     }
   }
-  a, span {
-    display: block;
-  }
   span {
     background-color: #f4f4f4;
     //older browsers will just see a flat background, new browsers will see an indent
     -webkit-box-shadow: inset 0 2px 5px 1px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: inset 0 2px 5px 1px rgba(0, 0, 0, 0.1);
-         -o-box-shadow: inset 0 2px 5px 1px rgba(0, 0, 0, 0.1)
+         -o-box-shadow: inset 0 2px 5px 1px rgba(0, 0, 0, 0.1);
             box-shadow: inset 0 2px 5px 1px rgba(0, 0, 0, 0.1);
   }
 }