add better styles to filter-request-types

1 files changed, 46 insertions, 12 deletions

diff --git a/app/assets/stylesheets/responsive/_search_style.scss b/app/assets/stylesheets/responsive/_search_style.scss
index 012567312..9526bc05b 100644
--- a/app/assets/stylesheets/responsive/_search_style.scss
+++ b/app/assets/stylesheets/responsive/_search_style.scss
@@ -59,18 +59,6 @@ input.use-datepicker[type=text] {
     }
     li {
         display: inline-block;
-        &:after {
-            content:' | ';
-            display: inline-block;
-            color: #ccc; //Unsupported browsers will ignore the rgba declaration below
-            color: rgba(0,0,0,0.1);
-        }
-        &:last-child {
-            &:after {
-                content: '';
-            }
-        }
-
     }
 }
 
@@ -85,3 +73,49 @@ input.use-datepicker[type=text] {
     margin-bottom: 0.3em;
 }
 
+.filter-request-types {
+  display: block;
+  margin-bottom: 1em;
+  @include respond-min( 20em ){
+    display: inline-block;
+  }
+  ul {
+    border: 1px solid #e9e9e9;
+    border-radius: 3px;
+    width: 100%;
+    font-size: 0;
+    @include respond-min( 20em ){
+      border-right: 0;
+    }
+  }
+  li {
+    width: 100%;
+    text-align: center;
+    display: block;
+    font-size: 16px;
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid #e9e9e9;
+    @include respond-min( 20em ){
+      width: auto;
+      display: inline-block;
+      border-right: 1px solid #e9e9e9;
+      border-bottom: 0;
+      width: 50%;
+      &:nth-child(1),
+      &:nth-child(2) {
+        border-bottom: 1px solid #e9e9e9;
+      }
+    }
+
+    @include respond-min( 44em ){
+      width: auto;
+        &:nth-child(n) {
+          border-bottom: 0;
+        }
+    }
+  }
+  a {
+    display: block;
+  }
+
+}