github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix input-number style

pull/557/head
baiyaaaaa 2016-10-20 23:33:09 +08:00
parent 831f72bbeb
commit d918b434c5
3 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/input-number/src/input-number.vue
View File

@ -9,7 +9,6 @@
v-model.number="currentValue" v-model.number="currentValue"
:disabled="disabled" :disabled="disabled"
:size="size" :size="size"
:number="true"
:class="{ :class="{
'is-active': inputActive 'is-active': inputActive
}"> }">

34
packages/theme-default/src/input-number.css
View File

@ -4,16 +4,14 @@
@component-namespace el { @component-namespace el {
@b input-number { @b input-number {
display: block; display: inline-block;
overflow: hidden; overflow: hidden;
width: 180px;
position: relative;
& .el-input__inner { & .el-input__inner {
appearance: none; appearance: none;
} }
& .el-input {
float: left;
margin-right: calc(-(var(--input-height) + 1px) * 2);
}
@e increase, decrease { @e increase, decrease {
height: 100%; height: 100%;
border-left: var(--border-base); border-left: var(--border-base);
@ -23,8 +21,7 @@
text-align: center; text-align: center;
color: #99A9BF; color: #99A9BF;
cursor: pointer; cursor: pointer;
float: left; position: absolute;
position: relative;
&:hover { &:hover {
color: var(--color-primary); color: var(--color-primary);
@ -36,6 +33,13 @@
} }
} }
@e increase {
right: 0;
}
@e decrease {
right: calc(var(--input-height) + 1px);
}
@when disabled { @when disabled {
& .el-input-number__increase, .el-input-number__decrease { & .el-input-number__increase, .el-input-number__decrease {
border-color: var(--disabled-border-base); border-color: var(--disabled-border-base);
@ -48,24 +52,28 @@
} }
} }
@when large { @when large {
& .el-input { width: 200px;
margin-right: calc(-(var(--input-large-height) + 1px) * 2);
}
& .el-input-number__increase, .el-input-number__decrease { & .el-input-number__increase, .el-input-number__decrease {
line-height: var(--input-large-height); line-height: var(--input-large-height);
width: var(--input-large-height); width: var(--input-large-height);
font-size: var(--input-large-font-size); font-size: var(--input-large-font-size);
} }
& .el-input-number__decrease {
right: calc(var(--input-large-height) + 1px);
}
} }
@when small { @when small {
& .el-input { width: 130px;
margin-right: calc(-(var(--input-small-height) + 1px) * 2);
}
& .el-input-number__increase, .el-input-number__decrease { & .el-input-number__increase, .el-input-number__decrease {
line-height: var(--input-small-height); line-height: var(--input-small-height);
width: var(--input-small-height); width: var(--input-small-height);
font-size: var(--input-small-font-size); font-size: var(--input-small-font-size);
} }
& .el-input-number__decrease {
right: calc(var(--input-small-height) + 1px);
}
} }
} }
} }

4
packages/theme-default/src/slider.css
View File

@ -24,10 +24,6 @@
@e input { @e input {
float: right; float: right;
margin-top: 7px; margin-top: 7px;
& .el-input {
width: 130px;
}
} }
@e bar { @e bar {