Merge pull request #59 from freifunk-gluon/form-fields

luci-theme: fix centering of form fields

gluon/gluon-luci-theme/sass/cascade.scss

@@ -96,9 +96,12 @@ html {
   position:relative;
 }
 
-body {
+body, input, select, option {
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 12pt;
+}
+
+body {
   color: rgb(77, 78, 83);
   line-height: 1.5em;
   margin: 0;
@@ -369,29 +372,26 @@ input:-ms-input-placeholder {
 }
 
 input[type=checkbox] {
-  -moz-appearance:none;
-  -webkit-appearance:none;
-  -o-appearance:none;
-  appearance: none;
-  width: 2em;
-  height: 2em;
-  margin: 0;
+  display: none;
 
-  &:checked {
-    position: relative;
+  & + label {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+  }
 
-    &::after {
-      content: '✔';
-      color: $ffmagenta;
-      vertical-align: middle;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      margin-top: -0.5em;
-      width: 100%;
-      text-align: center;
-      font-size: 1.7em;
-    }
+  &:checked + label:after {
+    content: '✔';
+    color: $ffmagenta;
+    vertical-align: middle;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -0.5em;
+    width: 100%;
+    text-align: center;
+    font-size: 1.7em;
   }
 }
 
@@ -404,7 +404,8 @@ input[type=button] {
 
 select,
 input,
-textarea {
+textarea,
+input[type=checkbox] + label {
   color: darken($ffzusatz, 30);
   border: none;
   background: lighten($ffyellow, 30);
@@ -632,7 +633,7 @@ table.cbi-section-table .cbi-section-table-cell {
 div.cbi-value {
   display: flex;
   flex-direction: row;
-  margin-bottom: 0.8em;
+  margin-bottom: 0.5em;
 }
 
 .cbi-value-title {
@@ -644,6 +645,12 @@ div.cbi-value {
 
 div.cbi-value-field {
   flex: 3;
+  position: relative;
+
+  input, select, input + label {
+    position: relative;
+    top: -0.39em;
+  }
 }
 
 div.cbi-value-description {