fix(field-item): align headings and content vertically (#529)

* fix(field-item): align headings and content vertically

#528

* fix(field-item & input-item): bolder font weight in android devices

* style: add variables for field-item font-weight in android devices

components/_style/mixin/theme.components.styl

@@ -182,6 +182,7 @@ field-footer-gap = v-gap-md
 field-title-color = color-text-base
 field-title-font-size = font-caption-large
 field-title-font-weight = font-weight-medium
+field-title-font-weight-android = bold
 field-brief-color = color-text-caption
 field-brief-font-size = font-minor-large
 field-action-color = color-text-caption
@@ -223,6 +224,7 @@ image-viewer-zindex = 1001
 input-item-height = 100px
 input-item-font-size = font-caption-normal
 input-item-font-weight = font-weight-medium
+input-item-font-weight-android = bold
 input-item-title-latent-font-size = font-body-normal
 input-item-font-size-large = 80px
 input-item-font-size-error = font-minor-large

components/field/item.vue

@@ -1,11 +1,12 @@
 <template>
   <div
     class="md-field-item"
-    :class="{
-      'is-solid': solid,
-      'is-disabled': currentDisabled,
-      'is-align-right': alignRight
-    }"
+    :class="[
+      solid ? 'is-solid' : '',
+      currentDisabled ? 'is-disabled' : '',
+      alignRight ? 'is-align-right' : '',
+      inputEnv
+    ]"
     @click="$_onClick"
   >
     <div class="md-field-item-content">
@@ -31,6 +32,7 @@
 </template>
 
 <script>import Icon from '../icon'
+import {isIOS, isAndroid} from '../_util'
 
 export default {
   name: 'md-field-item',
@@ -85,6 +87,16 @@ export default {
   },
 
   computed: {
+    inputEnv() {
+      /* istanbul ignore next */
+      if (isIOS) {
+        return 'is-ios'
+      } else if (isAndroid) {
+        return 'is-android'
+      } else {
+        return 'is-browser'
+      }
+    },
     currentDisabled() {
       return this.rootField.disabled || this.disabled
     },
@@ -119,7 +131,6 @@ export default {
   flex-shrink 0
   margin-right field-item-title-gap
   font-size field-item-font-size
-  line-height 1.2
 
 .md-field-item-left
   flex-shrink 0
@@ -136,7 +147,6 @@ export default {
   color field-item-color
   font-size field-item-font-size
   font-weight field-item-font-weight
-  line-height 1.2
 
 .md-field-item-placeholder
   color field-item-placeholder-color
@@ -171,4 +181,7 @@ export default {
   &.is-align-right
     .md-field-item-control
       text-align right
+  &.is-android
+    .md-field-item-control
+      font-weight field-title-font-weight-android
 </style>

components/input-item/index.vue

@@ -11,7 +11,6 @@
       isDisabled ? 'is-disabled': '',
       isAmount ? 'is-amount': '',
       clearable ? 'is-clear' : '',
-      inputEnv,
       align,
       size
     ]"
@@ -118,7 +117,7 @@
 import FieldItem from '../field-item'
 import NumberKeyboard from '../number-keyboard'
 import {getCursorsPosition, setCursorsPosition} from './cursor'
-import {noop, isIOS, isAndroid, randomId} from '../_util'
+import {noop, randomId} from '../_util'
 import {formatValueByGapRule, formatValueByGapStep, trimValue} from '../_util/formate-value'
 
 export default {
@@ -248,16 +247,6 @@ export default {
   },
 
   computed: {
-    inputEnv() {
-      /* istanbul ignore next */
-      if (isIOS) {
-        return 'is-ios'
-      } else if (isAndroid) {
-        return 'is-android'
-      } else {
-        return 'is-browser'
-      }
-    },
     inputType() {
       let inputType = this.type || 'text'
       if (inputType === 'bankCard' || inputType === 'phone' || inputType === 'digit') {
@@ -678,7 +667,6 @@ export default {
   &.is-amount
     .md-input-item-input,
     .md-input-item-fake
-      padding-top 5px
       font-family font-family-number
     &.large
       .md-input-item-input,
@@ -709,6 +697,9 @@ export default {
   &.is-android
     .md-input-item-fake::after
       border-right solid 4px color-text-base
+    .md-input-item-input,
+    .md-input-item-fake
+      font-weight input-item-font-weight-android
 
 @-webkit-keyframes keyboard-cursor
   0%