feat(search): Apply styling to date component #288

* create adaptive styling for date/time panels: 50/50 layout on
screensizes, that allow panels to be floated next to each other, full
width otherwise, same applies if component is placed inside the sidebar.
* refactor variables for breakpoints: add min max breakpoints
* add grid class for 50/50 layout
* add headline classes

app/scss/_base.scss

@@ -17,13 +17,14 @@ body {
 
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: $font-sans;
   font-weight: $font-bold;
   line-height: $heading-line-height;
 }
 
-h1 {
+h1, .h1 {
   font-size: $h1-font-size-xs;
   font-weight: $font-bold;
   @media screen and (min-width: $screen-xs-min) {
@@ -34,7 +35,7 @@ h1 {
   }
 }
 
-h2 {
+h2, .h2 {
   font-size: $h2-font-size-xs;
   @media screen and (min-width: $screen-xs-min) {
     font-size: $h2-font-size-sm;
@@ -44,28 +45,28 @@ h2 {
   }
 }
 
-h3 {
+h3, .h3 {
   font-size: $h3-font-size-sm;
   @media screen and (min-width: $screen-sm-min) {
     font-size: $h3-font-size;
   }
 }
 
-h4 {
+h4, .h4 {
   font-size: $h4-font-size-sm;
   @media screen and (min-width: $screen-sm-min) {
     font-size: $h4-font-size;
   }
 }
 
-h5 {
+h5, .h5 {
   font-size: $h5-font-size-sm;
   @media screen and (min-width: $screen-sm-min) {
     font-size: $h5-font-size;
   }
 }
 
-h6 {
+h6, .h6 {
   font-size: $h6-font-size;
   text-transform: uppercase;
 }

app/scss/_filters.scss

@@ -45,6 +45,19 @@
   margin-left: 2.7rem;
 }
 
+aside {
+  .hsg-section {
+      border-bottom: $default-border-style;
+    }
+  .hsg-section:not(:first-of-type) {
+      padding: 0 0 2rem 0;
+  }
+
+  .hsg-sidebar-title {
+    margin: 1rem 0;
+  }
+}
+
 [type=checkbox],
 [type=radio] {
   position: absolute;
@@ -84,31 +97,54 @@
 
 // Date Filters
 
+.hsg-panel-body legend.h3 {
+  border-bottom: none;
+}
+
+.hsg-form-hint {
+    color: $color-gray-light;
+}
+
+.hsg-panel-body {
+  fieldset:not(:last-of-type) {
+    margin-bottom: 2.5rem;
+  }
+}
+
 .hsg-form-group {
+  clear: none;
+  float: left;
+  label {
+    cursor: pointer;
+  }
+
   &-day,
   &-month,
   &-year {
-    clear: none;
-    float: left;
     margin-right: 1.5rem;
     width: 5rem;
   }
 }
+.hsg-time-input-group {
+  position: absolute;
+  bottom: 15px;
+  left: 107px;
+}
 
 input[type="number"] {
   appearance: textfield;
   border: $default-border-style;
   border-radius: 0;
   box-sizing: border-box;
-  color: $color-gray-lighter;
   display: block;
   font-size: $small-font-size;
   height: 4.4rem;
   line-height: 1.3;
   margin: 0.2em 0;
   max-width: 46rem;
-  padding: 1rem 0.7em;
+  padding: 1rem 0.4em;
   width: 100%;
+  text-align: center;
 }
 
 input[type=number]::-webkit-inner-spin-button,
@@ -129,3 +165,38 @@ input[type=number]::-webkit-outer-spin-button {
 [type=radio]:checked + label::before {
   box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary-darker;
 }
+
+// Panels in date filter
+#dateFilter {
+  .hsg-width-one-half {
+    padding: 0;
+    width: 100%;
+    @media screen and (min-width: $small-screen-min) {
+      width: 48%;
+      float: left;
+      position: relative;
+      min-height: 1px;
+      &:first-of-type {
+        margin-right: 4%;
+      }
+    }
+  }
+}
+
+aside #dateFilter .hsg-width-one-half {
+  padding: 0;
+  width: 100%;
+  @media screen and (min-width: $small-screen-min) and (max-width: $large-screen)  {
+    width: 48%;
+    float: left;
+    position: relative;
+    min-height: 1px;
+    &:first-of-type {
+      margin-right: 4%;
+    }
+  }
+  @media screen and (min-width: $large-screen-min)  {
+    padding: 0;
+    width: 100%;
+  }
+}

app/scss/_hsg-grid.scss

@@ -138,6 +138,12 @@ footer {
   @extend .col-lg-12;
 }
 
+.hsg-width-one-half {
+  @extend .col-xs-12;
+  @extend .col-md-6;
+  @extend .col-lg-6;
+}
+
 .hsg-width-two-thirds {
   @extend .col-md-12;
   @extend .col-lg-8;

app/scss/_variables.scss

@@ -95,10 +95,13 @@ $hsg-link-color-hover:       $color-primary-darkest;
 // Mobile First Breakpoints
 $xs-screen:         480px;
 $xs-screen-min:     481px;
-$small-screen:      601px;
-$sm-screen:         841px;
+$small-screen:      600px;
+$small-screen-min:  601px;
+$sm-screen:         840px;
+$sm-screen-min:     841px;
 $medium-screen:     961px;
-$large-screen:     1281px;
+$large-screen:     1280px;
+$large-screen-min: 1281px;
 $xlarge-screen:    1441px;
 $xxlarge-screen:   1601px;