index.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .rc-input-number {
  2. display: inline-block;
  3. height: 26px;
  4. margin: 0;
  5. padding: 0;
  6. font-size: 12px;
  7. line-height: 26px;
  8. vertical-align: middle;
  9. border: 1px solid #d9d9d9;
  10. border-radius: 4px;
  11. transition: all 0.3s;
  12. }
  13. .rc-input-number-focused {
  14. border-color: #1890ff;
  15. box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  16. }
  17. .rc-input-number-out-of-range input {
  18. color: red;
  19. }
  20. .rc-input-number-handler {
  21. display: block;
  22. height: 12px;
  23. overflow: hidden;
  24. line-height: 12px;
  25. text-align: center;
  26. touch-action: none;
  27. }
  28. .rc-input-number-handler-active {
  29. background: #ddd;
  30. }
  31. .rc-input-number-handler-up-inner,
  32. .rc-input-number-handler-down-inner {
  33. color: #666666;
  34. -webkit-user-select: none;
  35. user-select: none;
  36. }
  37. .rc-input-number:hover {
  38. border-color: #1890ff;
  39. }
  40. .rc-input-number:hover .rc-input-number-handler-up,
  41. .rc-input-number:hover .rc-input-number-handler-wrap {
  42. border-color: #1890ff;
  43. }
  44. .rc-input-number-disabled:hover {
  45. border-color: #d9d9d9;
  46. }
  47. .rc-input-number-disabled:hover .rc-input-number-handler-up,
  48. .rc-input-number-disabled:hover .rc-input-number-handler-wrap {
  49. border-color: #d9d9d9;
  50. }
  51. .rc-input-number-input-wrap {
  52. height: 100%;
  53. overflow: hidden;
  54. }
  55. .rc-input-number-input {
  56. width: 100%;
  57. height: 100%;
  58. padding: 0;
  59. color: #666666;
  60. line-height: 26px;
  61. text-align: center;
  62. border: 0;
  63. border-radius: 4px;
  64. outline: 0;
  65. transition: all 0.3s ease;
  66. transition: all 0.3s;
  67. -moz-appearance: textfield;
  68. }
  69. .rc-input-number-handler-wrap {
  70. float: right;
  71. width: 20px;
  72. height: 100%;
  73. border-left: 1px solid #d9d9d9;
  74. transition: all 0.3s;
  75. }
  76. .rc-input-number-handler-up {
  77. padding-top: 1px;
  78. border-bottom: 1px solid #d9d9d9;
  79. transition: all 0.3s;
  80. }
  81. .rc-input-number-handler-up-inner:after {
  82. content: '+';
  83. }
  84. .rc-input-number-handler-down {
  85. transition: all 0.3s;
  86. }
  87. .rc-input-number-handler-down-inner:after {
  88. content: '-';
  89. }
  90. .rc-input-number-handler-down-disabled,
  91. .rc-input-number-handler-up-disabled {
  92. opacity: 0.3;
  93. }
  94. .rc-input-number-handler-down-disabled:hover,
  95. .rc-input-number-handler-up-disabled:hover {
  96. color: #999;
  97. border-color: #d9d9d9;
  98. }
  99. .rc-input-number-disabled .rc-input-number-input {
  100. background-color: #f3f3f3;
  101. cursor: not-allowed;
  102. opacity: 0.72;
  103. }
  104. .rc-input-number-disabled .rc-input-number-handler {
  105. opacity: 0.3;
  106. }
  107. .rc-input-number-disabled .rc-input-number-handler:hover {
  108. color: #999;
  109. border-color: #d9d9d9;
  110. }