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