From 72877f326981d0ce3641a73ee6587ec502c2dc2b Mon Sep 17 00:00:00 2001
From: Sergio Crisostomo <sergiosbox@gmail.com>
Date: Thu, 28 Jan 2016 16:32:58 +0100
Subject: [PATCH] refactor styling of checkboxes

FF is hard to style when it comes to checkboxes. With this change we
have a label and a span doing the style job and the checkbox just
storing the state.
---
 views/builder/index.jade |  8 +++++++-
 views/css/builder.styl   |  8 ++------
 views/css/global.styl    | 34 +++++++++++++++++++---------------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/views/builder/index.jade b/views/builder/index.jade
index 9424ccd..eb1fc9e 100644
--- a/views/builder/index.jade
+++ b/views/builder/index.jade
@@ -18,10 +18,12 @@ block main
 
 					label
 						input(type="checkbox", name="minified", value="1")
+						span
 						| Download minified source code
 
 					label
 						input(type="checkbox", name="compat", value="1")
+						span
 						| Download with compat layer
 
 					if project != 'Core'
@@ -56,7 +58,9 @@ block main
 					- var hashRequested = hashDependencies.indexOf(file) != -1;
 					tr
 						td
-							input(type="checkbox", value=file, name="modules[]", data-provides="#{yaml.prov}", data-requires="#{yaml.req}", checked=hashRequested, class=hashRequested ? "activeChoice" : "")
+							label
+								input(type="checkbox", value=file, name="modules[]", data-provides="#{yaml.prov}", data-requires="#{yaml.req}", checked=hashRequested, class=hashRequested ? "activeChoice" : "")
+								span
 						td #{module}
 						td #{yaml.prov}
 						td #{yaml.desc}
@@ -66,10 +70,12 @@ block main
 			.save
 				label
 					input(type="checkbox", name="minified", value="1")
+					span
 					| Download minified source code
 
 				label
 					input(type="checkbox", name="compat", value="1")
+					span
 					| Download with compat layer
 
 				if project != 'Core'
diff --git a/views/css/builder.styl b/views/css/builder.styl
index 9320243..1374ebb 100644
--- a/views/css/builder.styl
+++ b/views/css/builder.styl
@@ -28,10 +28,6 @@
 		select
 			width 100%
 
-		input[type="checkbox"]
-			margin-right 0.5em
-			vertical-align bottom
-
 		input[type="submit"]
 			margin-top 0.5em
 			padding 0.5em
@@ -65,10 +61,10 @@
 			tr
 				border-bottom 1px solid #acaaa7
 				td
-					padding .3em
+					padding .4em
 
 					&:first-child
-						width 5%
+						width 3%
 					& + td
 						width 15%
 					& + td + td
diff --git a/views/css/global.styl b/views/css/global.styl
index 505de74..c1dce9e 100644
--- a/views/css/global.styl
+++ b/views/css/global.styl
@@ -151,16 +151,21 @@ label
 select:after
 	content "stocazzo"
 
-input[type="checkbox"]
-	height 1em
-	position relative
-	width 1em
-#builderOptions table input[type="checkbox"]
-	&:checked,
-	&.dependency
-		background #f4f1ed
-	&.activeChoice:checked
-		background #7d8aa5
+
+.builder
+	input[type="checkbox"] + span
+		border solid #e5e3df 1px
+		border-radius 3px
+		padding 1px 8px
+		margin-right 5px
+		font-size 13px
+	input[type="checkbox"]
+		display none
+
+		&.dependency + span
+			background #f4f1ed
+		&:checked + span, &.activeChoice:checked + span
+			background #7d8aa5
 
 input[type="submit"]
 	background #f4f1ed
@@ -367,7 +372,7 @@ a:focus .icon
 
 		a:focus, a:active
 			background-color #777571 !important
-			
+
 		hr
 			margin-top 2em
 			margin-bottom 2em
@@ -381,7 +386,7 @@ a:focus .icon
 			margin-left -0.2em
 		h4
 			font-weight 400
-		
+
 		ul
 			padding-left 2em
 			li
@@ -480,7 +485,7 @@ a:focus .icon
 	.about
 		background-color #ffffff
 		padding-top 0em
-		a	
+		a
 			font-weight 400
 	.cover
 		float right
@@ -505,7 +510,6 @@ a:focus .icon
 			font-weight 200
 		h3
 			color #575551
-			
+
 		p
 			padding-top 0.5em
-