index.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. .basic-number--left.el-input-number{
  2. height: 32px;
  3. .el-input__inner{
  4. text-align: left;
  5. }
  6. }
  7. .el-input-number{
  8. &.basic-number--left{
  9. height: 32px;
  10. .el-input__inner{
  11. text-align: left;
  12. }
  13. }
  14. &.basic-number--unit{
  15. position: relative;
  16. .el-input__inner{
  17. text-align: left;
  18. padding-right: 24px;
  19. }
  20. &::after{
  21. content: attr(data-unit);
  22. position: absolute;
  23. right: 4px;
  24. top: 2px;
  25. height: @formItemLineHeight;
  26. color: @info;
  27. }
  28. }
  29. &.basic-number-standard {
  30. .el-input-number__decrease {
  31. left: auto;
  32. right: 32px;
  33. // 按钮30px+右边框1px+左边竖线1px
  34. background: inherit;
  35. border: none;
  36. }
  37. .el-input-number__increase {
  38. background: inherit;
  39. border: none;
  40. &::before {
  41. content: '';
  42. position: absolute;
  43. left: 0;
  44. top: 8px;
  45. bottom: 8px;
  46. width: 1px;
  47. background: var(--el-border-color-base);
  48. }
  49. }
  50. .el-input__inner {
  51. padding: 0 61px 0 15px;
  52. // 61px = 右侧两个按钮2*30+中间竖线1px,15px为默认的左边间距
  53. }
  54. &.el-input-number--large {
  55. .el-input-number__decrease {
  56. right: 40px;
  57. // 按钮38px+右边框1px+左边竖线1px
  58. }
  59. .el-input__inner {
  60. padding: 0 77px 0 15px;
  61. // 77px = 右侧两个按钮2*38+中间竖线1px,15px为默认的左右边间距
  62. }
  63. }
  64. }
  65. &.basic-number--no-controls{
  66. .el-input__inner {
  67. // no-controls 的padding权重需要比 basic-number-standard 的高
  68. padding: 0 15px 0 15px;
  69. }
  70. }
  71. }