CR

src/common/stylus/theme/default.styl

@@ -153,13 +153,18 @@ $switch-off-bgc := $color-white
 $switch-off-border-color := #e4e4e4
 
 // input
-$input-font-color = $color-dark-grey
-$input-bgc = $color-white
-$input-outline-color = $color-orange
-$input-clear-icon-color = $color-light-grey
+$input-color := $color-dark-grey
+$input-bgc := $color-white
+$input-outline-color := $color-orange
+$input-placeholder-color := $color-light-grey-s
+$input-clear-icon-color := $color-light-grey
 
 //textarea
-$textarea-outline-color = $color-orange
+$textarea-color := $color-dark-grey
+$textarea-bgc := $color-white
+$textarea-outline-color := $color-orange
+$textarea-placeholder-color := $color-light-grey-s
+$textarea-indicator-color := $color-light-grey-s
 
 // validator
-$validator-msg-def-color = #f5222d
+$validator-msg-def-color := #f5222d

src/components/input/input.vue

@@ -104,18 +104,20 @@
       position: relative
       font-size: $fontsize-large
       line-height: 1
-      color: $input-font-color
-      background-color: $input-bgc
       input
         width: 100%
         padding: 10px
         box-sizing: border-box
-        color: inherit
+        color: $input-color
         line-height: inherit
+        background-color: $input-bgc
         outline: none
         &:focus
           outline: $input-outline-color solid 1px
           outline-offset: -1px
+        &::-webkit-input-placeholder
+          color: $input-placeholder-color !important
+          text-overflow: ellipsis
     .cube-input-clear
       position: absolute
       right: 0

src/components/textarea/textarea.vue

 <template>
-  <div class="cube-textarea-outer-wrapper">
-    <div class="cube-textarea-inner-wrapper" :style="{width: width}" :class="{expanded: expanded}">
-      <textarea
-        class="cube-textarea"
-        v-model="textareaValue"
-        v-bind="$props"
-        :placeholder="placeholder"
-        :maxlength="maxlength"
-        :disabled="disabled"
-        @focus="handleFocus"
-        @blur="handleBlur">
-      </textarea>
-      <span v-show="expanded" class="cube-textarea-indicator">{{remain}}</span>
-    </div>
+  <div class="cube-textarea-wrapper" :class="{expanded: expanded}">
+    <textarea
+      class="cube-textarea"
+      v-model="textareaValue"
+      v-bind="$props"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      @focus="handleFocus"
+      @blur="handleBlur">
+    </textarea>
+    <span v-show="expanded" class="cube-textarea-indicator">{{remain}}</span>
   </div>
 </template>
 
@@ -53,10 +51,6 @@
       maxlength: {
         type: Number,
         default: 60
-      },
-      width: {
-        type: String,
-        default: '274px'
       }
     },
     computed: {
@@ -90,39 +84,36 @@
 <style lang="stylus" rel="stylesheet/stylus">
   @require "../../common/stylus/variable.styl"
 
-  .cube-textarea-outer-wrapper
-    text-align: center
-  .cube-textarea-inner-wrapper
+  .cube-textarea-wrapper
     position: relative
-    display: inline-block
     transition: height 200ms
     height: 34px
     &.expanded
       height: 74px
     textarea::-webkit-input-placeholder
-      color: $color-light-grey-s !important
+      color: $textarea-placeholder-color !important
       text-overflow: ellipsis
   .cube-textarea-indicator
     position: absolute
     bottom: 7px
     right: 10px
     line-height: 20px
-    color: $color-light-grey-s
+    color: $textarea-indicator-color
     font-size: $fontsize-medium
   .cube-textarea
     width: 100%
     height: 100%
     text-align: left
     padding: 7px 10px
-    resize: none
+    font-size: $fontsize-medium
+    line-height: 20px
     box-sizing: border-box
     border-radius: 2px
+    resize: none
     border: none
-    color: $color-grey
-    background-color: $color-background
+    color: $textarea-color
+    background-color: $textarea-bgc
     outline: none
-    font-size: $fontsize-medium
-    line-height: 20px
     &:focus
       outline: $textarea-outline-color solid 1px
       outline-offset: -1px