mirror of https://github.com/ElemeFE/element
100 lines
2.4 KiB
CSS
100 lines
2.4 KiB
CSS
@charset "UTF-8";
|
|
@import "./input.css";
|
|
@import "./common/var.css";
|
|
|
|
@component-namespace el {
|
|
@b input-number {
|
|
display: inline-block;
|
|
width: 180px;
|
|
position: relative;
|
|
line-height: normal;
|
|
|
|
& .el-input {
|
|
display: block;
|
|
}
|
|
& .el-input__inner {
|
|
appearance: none;
|
|
padding-right: calc(var(--input-height) * 2 + 10);
|
|
}
|
|
@e increase, decrease {
|
|
height: auto;
|
|
border-left: var(--border-base);
|
|
width: var(--input-height);
|
|
line-height: calc(var(--input-height) - 2);
|
|
top: 1px;
|
|
text-align: center;
|
|
color: var(--color-light-silver);
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 1;
|
|
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
|
|
&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
|
|
border-color: var(--input-focus-border);
|
|
}
|
|
}
|
|
|
|
@when disabled {
|
|
color: var(--disabled-border-base);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
@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);
|
|
color: var(--disabled-border-base);
|
|
|
|
&:hover {
|
|
color: var(--disabled-border-base);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
@m large {
|
|
width: 200px;
|
|
|
|
& .el-input-number__increase, .el-input-number__decrease {
|
|
line-height: calc(var(--input-large-height) - 2);
|
|
width: var(--input-large-height);
|
|
font-size: var(--input-large-font-size);
|
|
}
|
|
& .el-input-number__decrease {
|
|
right: calc(var(--input-large-height) + 1px);
|
|
}
|
|
& .el-input__inner {
|
|
padding-right: calc(var(--input-large-height) * 2 + 10);
|
|
}
|
|
}
|
|
@m small {
|
|
width: 130px;
|
|
|
|
& .el-input-number__increase, .el-input-number__decrease {
|
|
line-height: calc(var(--input-small-height) - 2);
|
|
width: var(--input-small-height);
|
|
font-size: var(--input-small-font-size);
|
|
}
|
|
& .el-input-number__decrease {
|
|
right: calc(var(--input-small-height) + 1px);
|
|
}
|
|
& .el-input__inner {
|
|
padding-right: calc(var(--input-small-height) * 2 + 10);
|
|
}
|
|
}
|
|
@when without-controls {
|
|
& .el-input__inner {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|