Input: el-input styles should override el-textarea

pull/9504/head
Leopoldthecoder 2018-01-28 14:44:53 +08:00 committed by 杨奕
parent bbe6e62ee1
commit 86f8ff1160
4 changed files with 52 additions and 52 deletions

View File

@ -254,7 +254,7 @@ Use `list-type` to change the fileList style.
:on-remove="handleRemove"> :on-remove="handleRemove">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny"> <el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
<script> <script>

View File

@ -247,7 +247,7 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
:on-remove="handleRemove"> :on-remove="handleRemove">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny"> <el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
<script> <script>

View File

@ -254,7 +254,7 @@
:on-remove="handleRemove"> :on-remove="handleRemove">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
</el-upload> </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny"> <el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
<script> <script>

View File

@ -1,6 +1,55 @@
@import "mixins/mixins"; @import "mixins/mixins";
@import "common/var"; @import "common/var";
@include b(textarea) {
display: inline-block;
width: 100%;
vertical-align: bottom;
font-size: $--font-size-base;
@include e(inner) {
display: block;
resize: vertical;
padding: 5px 15px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-size: inherit;
color: $--input-color;
background-color: $--input-fill;
background-image: none;
border: $--input-border;
border-radius: $--input-border-radius;
transition: $--border-transition-base;
&::placeholder {
color: $--input-placeholder-color;
}
&:hover {
border-color: $--input-hover-border;
}
&:focus {
outline: none;
border-color: $--input-focus-border;
}
}
@include when(disabled) {
.el-textarea__inner {
background-color: $--input-disabled-fill;
border-color: $--input-disabled-border;
color: $--input-disabled-color;
cursor: not-allowed;
&::placeholder {
color: $--input-disabled-placeholder-color;
}
}
}
}
@include b(input) { @include b(input) {
position: relative; position: relative;
font-size: $--font-size-base; font-size: $--font-size-base;
@ -249,55 +298,6 @@
} }
} }
@include b(textarea) {
display: inline-block;
width: 100%;
vertical-align: bottom;
font-size: $--font-size-base;
@include e(inner) {
display: block;
resize: vertical;
padding: 5px 15px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-size: inherit;
color: $--input-color;
background-color: $--input-fill;
background-image: none;
border: $--input-border;
border-radius: $--input-border-radius;
transition: $--border-transition-base;
&::placeholder {
color: $--input-placeholder-color;
}
&:hover {
border-color: $--input-hover-border;
}
&:focus {
outline: none;
border-color: $--input-focus-border;
}
}
@include when(disabled) {
.el-textarea__inner {
background-color: $--input-disabled-fill;
border-color: $--input-disabled-border;
color: $--input-disabled-color;
cursor: not-allowed;
&::placeholder {
color: $--input-disabled-placeholder-color;
}
}
}
}
/** disalbe default clear on IE */ /** disalbe default clear on IE */
.el-input__inner::-ms-clear { .el-input__inner::-ms-clear {
display: none; display: none;