almost complete wifi page redesign

html_orig/sass/form/_form_elements.scss

@@ -16,6 +16,47 @@
 	}
 }
 
+.Row.checkbox {
+	$h: 27px;
+	line-height: $h;
+
+	.box {
+		width: $h;
+		height: $h;
+		border: 1px solid #808080;
+		border-radius: 3px;
+		background: $c-form-field-bg;
+		display: inline-block;
+		position: relative;
+		cursor: pointer;
+		color: $c-form-highlight-a;
+
+		&::before {
+			font-weight: bold;
+			position: absolute;
+			content: '×';
+			left: 0; top: 0; right: 0; bottom: 0;
+			line-height: $h - 1px;
+			text-align: center;
+			font-size: $h;
+			vertical-align: middle;
+			display: none;
+		}
+
+		&.checked::before {
+			display: block;
+		}
+	}
+}
+
+.Row.range {
+	.display {
+		margin-left: 1ex;
+	}
+
+	label .display { font-weight: normal; }
+}
+
 //#{$all-text-inputs} {
 //	@include can-select();
 //}

html_orig/sass/form/_form_layout.scss

@@ -5,13 +5,18 @@ form { @include naked(); }
 	width: $form-field-w;
 }
 
+input[type="number"] {
+	width: $form-field-w/2;
+}
+
 form .Row {
 	vertical-align: middle;
-	margin: 14px auto;
+	margin: 12px auto;
 	text-align: left;
 
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 
 	&:first-child {
 		margin-top: 0;
@@ -30,6 +35,7 @@ form .Row {
 	}
 
 	&.buttons {
+		margin: 16px auto;
 		input, .button {
 			margin-right: dist(-1);
 		}
@@ -80,34 +86,39 @@ form .Row {
 		align-self: flex-start;
 
 		@include noselect;
+		@include nowrap;
 	}
 
-	.checkbox-wrap {
-		display: inline-block;
-		width: $form-label-w;
-		padding: $form-label-gap;
-		text-align: right;
-		align-self: flex-start;
+	//.checkbox-wrap {
+	//	display: inline-block;
+	//	width: $form-label-w;
+	//	padding: $form-label-gap;
+	//	text-align: right;
+	//	align-self: flex-start;
+	//
+	//	input[type=checkbox] {
+	//		margin: auto;
+	//		width: auto;
+	//		height: auto;
+	//	}
+	//
+	//	& + label {
+	//		width: $form-field-w;
+	//		padding-left: 0;
+	//		text-align: left;
+	//		cursor: pointer;
+	//	}
+	//}
 
-		input[type=checkbox] {
-			margin: auto;
-			width: auto;
-			height: auto;
-		}
-
-		& + label {
-			width: $form-field-w;
-			padding-left: 0;
-			text-align: left;
-			cursor: pointer;
-		}
+	input[type="range"] {
+		width: 200px;
 	}
 
 	// special phone style
 	@include media($phone) {
 		flex-direction: column;
 
-		&.buttons, &.centered {
+		&.buttons, &.centered, &.checkbox {
 			flex-direction: row;
 		}
 
@@ -139,7 +150,7 @@ form .Row {
 			}
 		}
 
-		#{$all-text-inputs}, textarea {
+		#{$all-text-inputs}, input[type="range"], textarea {
 			width: 100%;
 		}
 	}

html_orig/sass/form/_index.scss

@@ -9,5 +9,5 @@
 	}
 }
 
-//@import 'form_layout';
+@import 'form_layout';
 //@import 'select';