feat(search): Apply custom styling to checkboxes #286

app/scss/_filters.scss

@@ -1,10 +1,20 @@
 /* Filters -------------- */
 
+// reset default list styles
+.hsg-search-inputs-vertical,
+.filter-subsections {
+  list-style-type: none;
+  padding-left: 0;
+}
+
 .hsg-search-inputs-vertical {
   @extend .c-inputs-stacked;
   margin: 1rem 0;
   .hsg-search-input-label {
-    @extend .c-input;
+    //@extend .c-input;
+    display: block;
+    cursor: pointer;
+    font-weight: $font-normal;
   }
 }
 
@@ -16,25 +26,6 @@
     display: inline-block;
     margin-right: $margin-horizontal-base;
   }
-
-  input[type="checkbox"] {
-    cursor: pointer;
-    margin: 0;
-    width: 12px;
-    height: 14px;
-    position: relative;
-    left: 0;
-    vertical-align: middle;
-  }
-
-  label {
-    width: auto;
-    margin: 0 0 0 5px;
-    position: relative;
-    left: 0;
-    display: inline-block;
-    vertical-align: middle;
-  }
 }
 
 // Elements in sidebar on search result page
@@ -53,3 +44,40 @@
 .filter-subsections {
   margin-left: 2.7rem;
 }
+
+[type=checkbox],
+[type=radio] {
+  position: absolute;
+  left: -999em;
+}
+
+[type=checkbox]:checked + label::before,
+[type=radio]:checked + label::before {
+  background-color: $color-primary-darker;
+  box-shadow: 0 0 0 1px $color-primary-darker;
+}
+
+[type=checkbox] + label::before,
+[type=radio] + label::before {
+  cursor: pointer;
+  background: $color-white;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px $color-gray-lighter;
+  content: '\00a0';
+  display: inline-block;
+  height: $checkbox-size;
+  line-height: $checkbox-size;
+  margin-right: 0.6em;
+  text-indent: 0.15em;
+  vertical-align: middle\0;
+  width: $checkbox-size;
+}
+
+// TODO: Fix background-image with svg instead of png for Firefox, works only in Webkit yet
+[type=checkbox]:checked + label::before,
+[type=checkbox]:checked:disabled + label::before {
+  background-image: url(../images/checked.png);
+  //background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 216 146'><path fill='#fff' d='M168.86 37.966l-11.08-11.08c-1.52-1.52-3.367-2.28-5.54-2.28-2.172 0-4.02.76-5.54 2.28L93.254 80.414 69.3 56.38c-1.52-1.522-3.367-2.282-5.54-2.282-2.172 0-4.02.76-5.54 2.28L47.14 67.46c-1.52 1.522-2.28 3.37-2.28 5.542 0 2.172.76 4.02 2.28 5.54l29.493 29.493 11.08 11.08c1.52 1.52 3.368 2.28 5.54 2.28 2.173 0 4.02-.76 5.54-2.28l11.082-11.08L168.86 49.05c1.52-1.52 2.283-3.37 2.283-5.54 0-2.174-.76-4.02-2.28-5.54z'></path></svg>");
+  background-position: 50%;
+  background-repeat: no-repeat;
+}

app/scss/_variables.scss

@@ -113,6 +113,7 @@ $border-radius:     .3rem; //(3px)
 $box-shadow:        0 0 2px rgba(#000, 0.3);
 $focus-shadow:      0 0 3px $color-focus, 0 0 7px $color-focus;
 $grid-margins:      3rem;
+$checkbox-size:     1.8rem;
 
 // Borders
 $default-border-style: 1px solid $color-gray-lighter;