Unify styles for checkbox/radio lists

src/sass/_variables.scss

@@ -329,7 +329,8 @@ $label-space:                   10px !default;
 $legend-color:                  $gray-dark !default;
 $legend-border-color:           #e5e5e5 !default;
 
-$list-max-height:               10 * $line-height-computed;
+$check-list-max-height:         20 * $line-height-computed;
+$check-list-offset-top:         $input-padding-vertical + 1px;
 
 //== Top
 //

src/sass/components/_forms.scss

@@ -542,86 +542,50 @@ label[for=closed] {
 }
 
 
-#watchers_form {
-  overflow: hidden;
-
-  .search_for_watchers {
-    display: block;
-  }
-
-  #watchers_inputs {
-    display: block;
-    max-width: 64em;
-    margin-top: $input-padding-vertical + 1px;
-    margin-bottom: $line-height-computed / 2;
-    overflow: auto;
-    columns: 18em 3;
-  }
+#watchers_inputs {
+  display: block;
+  max-width: 64em;
+  max-height: $check-list-max-height;
+  margin-bottom: $line-height-computed / 2;
+  padding-top: $check-list-offset-top;
+  overflow: auto;
+  columns: 18em 3;
 
   label.floating {
-    @include checkbox;
-    display: block;
-    width: auto;
-    margin: 0;
-    float: none;
-
-    input[type="checkbox"] {
-      top: -1px;
-    }
+    @include check-list;
   }
 }
 
 
-//== Custom fields
+//== List of custom field values
 //
 
 .check_box_group {
   display: block;
+  width: 90%;
+  max-height: $check-list-max-height;
+  padding-top: $check-list-offset-top;
   overflow-y: auto;
 
   label {
-    display: block;
-    width: auto;
-    margin-bottom: 0;
-    margin-left: 0;
-    float: none;
-    font-weight: normal;
-    text-align: left;
+    @include check-list;
   }
 
-  // Custom logic (boolean) field displayed as radio buttons
+  // Boolean field displayed as inline radio buttons
   &.bool_cf {
+    overflow: initial;
+
     label {
-      @extend %clearfix;
       display: inline-block;
-      margin-right: 10px;
-      padding-left: 20px;
-      user-select: none;
+      margin-right: $padding-base-horizontal;
 
       input[type="checkbox"],
       input[type="radio"] {
-        top: 0;
         margin-left: -20px;
         float: left;
       }
     }
   }
-
-  // Custom list field displayed as checkboxes
-  &.list_cf {
-    width: 90%;
-    max-height: $list-max-height;
-    padding-top: $input-padding-vertical + 1px;
-
-    label {
-      @include checkbox;
-      margin-top: 0;
-
-      input[type="checkbox"] {
-        top: -1px;
-      }
-    }
-  }
 }
 
 

src/sass/components/_responsive.scss

@@ -138,10 +138,8 @@
     }
 
     .splitcontentleft {
-      margin-bottom: $line-height-computed;
       padding-right: 0;
       float: none;
-
     }
 
     .splitcontentright {

src/sass/mixins/_forms.scss

@@ -41,12 +41,40 @@
 }
 
 @mixin checkbox() {
+  @include check;
+}
+
+@mixin radio() {
+  @include check;
+}
+
+@mixin check() {
   @extend %clearfix;
   padding-left: 20px;
-  user-select: none;
+  text-align: left;
+  font-weight: $font-weight-normal;
 
-  input[type="checkbox"] {
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: auto;
     margin-left: -20px;
     float: left;
   }
 }
+
+@mixin check-list() {
+  @include check;
+  display: block;
+  width: auto;
+  margin: $btn-padding-vertical 0;
+  float: none;
+
+  @media screen and (min-width: $screen-sm-min) {
+    margin: 0;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    top: -1px;
+  }
+}