Fix #81 missing top checkboxes on Firefox

- Use position: absolute on inputs instead of float
- Unify mixins to check for checkboxes and radioes
- Improve checkbox layout in few places

README.md

@@ -73,6 +73,8 @@ Latest (master):
 * Fixed #69: fixed "remember me" checkbox layout on login page
 * Fixed #78: files not visible on list in wiki when there is a lot of them
 * Updated dependencies
+* Fixed #81: top watchers checkboxes were not visible on Firefox
+* Removed `checkbox` and `radio` mixins in favour of `check`
 
 v1.8.0 (2016-11-20):
 

src/sass/_variables.scss

@@ -330,6 +330,10 @@ $label-space:                   10px !default;
 $legend-color:                  $gray-dark !default;
 $legend-border-color:           #e5e5e5 !default;
 
+$check-input-gutter:            20px !default;
+$check-input-margin-vertical:   3px !default;
+$check-input-margin-horizontal: 8px !default;
+
 $check-list-max-height:         20 * $line-height-computed;
 $check-list-offset-top:         $input-padding-vertical + 1px;
 

src/sass/components/_elements.scss

@@ -190,7 +190,7 @@ a.collapsible.collapsed,
   overflow: auto;
 
   label {
-    @include checkbox;
+    @include check;
     display: block;
   }
 }
@@ -244,6 +244,23 @@ a.collapsible.collapsed,
 }
 
 
+//== Users selection list
+//
+
+#principals {
+  label {
+    @include check;
+    display: block;
+  }
+}
+
+.roles-selection {
+  label {
+    @include check-inline;
+  }
+}
+
+
 //== Subtitle paragraph (can be seen on activity list)
 //
 

src/sass/components/_forms.scss

@@ -303,7 +303,6 @@ em.info {
       margin-left: 0;
       padding-left: 16px;
       float: none;
-      clear: left;
       text-align: left;
       cursor: pointer;
     }
@@ -363,7 +362,7 @@ label[for=issue_description] + a {
 //
 
 label[for=closed] {
-  @include checkbox;
+  @include check;
   display: block;
   margin-bottom: $line-height-computed / 2;
 }
@@ -580,13 +579,7 @@ label[for=closed] {
 
     label {
       display: inline-block;
-      margin-right: $padding-base-horizontal;
+      margin-right: $check-input-margin-horizontal;
-
-      input[type="checkbox"],
-      input[type="radio"] {
-        margin-left: -20px;
-        float: left;
-      }
     }
   }
 }

src/sass/components/_login.scss

@@ -17,7 +17,7 @@
     font-weight: $font-weight-bold;
 
     &[for="autologin"] {
-      @include checkbox;
+      @include check;
       margin-bottom: $line-height-computed;
     }
 

src/sass/components/_simple-list.scss

@@ -105,9 +105,7 @@
   }
 
   label {
-    @include checkbox;
+    @include check-inline;
-    display: inline-block;
-    margin-right: 5px;
   }
 
   p:last-child {

src/sass/components/_tabs.scss

@@ -158,7 +158,7 @@ div.tabs:not(#main-menu) {
     }
 
     label {
-      @include checkbox;
+      @include check;
       display: block;
       margin-bottom: 3px;
     }

src/sass/mixins/_forms.scss

@@ -40,28 +40,28 @@
   }
 }
 
-@mixin checkbox() {
-  @include check;
-}
-
-@mixin radio() {
-  @include check;
-}
-
 @mixin check() {
   @extend %clearfix;
-  padding-left: 20px;
+  position: relative;
+  padding-left: $check-input-gutter;
   text-align: left;
   font-weight: $font-weight-normal;
 
   input[type="checkbox"],
   input[type="radio"] {
+    position: absolute;
     width: auto;
-    margin-left: -20px;
+    margin-top: $check-input-margin-vertical;
-    float: left;
+    margin-left: -$check-input-gutter;
   }
 }
 
+@mixin check-inline() {
+  @include check;
+  display: inline-block;
+  margin-right: $check-input-margin-horizontal;
+}
+
 @mixin check-list() {
   @include check;
   display: block;
@@ -72,9 +72,4 @@
   @media screen and (min-width: $screen-sm-min) {
     margin: 0;
   }
-
-  input[type="checkbox"],
-  input[type="radio"] {
-    top: -1px;
-  }
 }