You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
3.6 KiB

  1. .input-number {
  2. position: relative;
  3. display: flex; }
  4. .input-number input[type=number]::-webkit-inner-spin-button,
  5. .input-number input[type=number]::-webkit-outer-spin-button {
  6. -webkit-appearance: none;
  7. margin: 0; }
  8. .input-number input[type=number] {
  9. -moz-appearance: textfield;
  10. width: auto;
  11. text-align: center; }
  12. .input-number input {
  13. border-radius: 0;
  14. border-left: 1px solid transparent;
  15. border-right: 1px solid transparent; }
  16. .input-number .is-up,
  17. .input-number .is-down {
  18. width: 32px;
  19. display: inline-flex;
  20. align-items: center;
  21. justify-content: center;
  22. vertical-align: middle;
  23. cursor: pointer;
  24. color: #111113;
  25. font-size: 0.875em;
  26. text-decoration: none;
  27. text-align: center;
  28. -webkit-user-select: none;
  29. user-select: none;
  30. border: 1px solid rgba(17, 17, 19, 0.1); }
  31. .input-number .is-up:hover,
  32. .input-number .is-down:hover {
  33. background-color: rgba(17, 17, 19, 0.04); }
  34. .input-number .is-up {
  35. border-left-color: transparent;
  36. border-top-right-radius: 4px;
  37. border-bottom-right-radius: 4px;
  38. margin-left: -1px; }
  39. .input-number .is-up:hover {
  40. border-radius: 4px; }
  41. .input-number .is-down {
  42. border-right-color: transparent;
  43. border-top-left-radius: 4px;
  44. border-bottom-left-radius: 4px;
  45. margin-right: -1px; }
  46. .input-number .is-down:hover {
  47. border-radius: 4px; }
  48. .input-number .input-number-input input {
  49. border-left: 1px solid rgba(17, 17, 19, 0.1);
  50. border-right: 1px solid transparent; }
  51. .input-number input:hover,
  52. .input-number .input-number-input input:hover {
  53. border: 1px solid rgba(17, 17, 19, 0.2); }
  54. .input-number input:hover,
  55. .input-number .input-number-input input:hover {
  56. border: 1px solid rgba(17, 17, 19, 0.2); }
  57. .input-number input:focus,
  58. .input-number .input-number-input input:focus {
  59. border: 1px solid rgba(21, 141, 247, 0.5); }
  60. .input-number input.is-error,
  61. .input-number .input-number-input input.is-error {
  62. border: 1px solid rgba(238, 36, 85, 0.5); }
  63. .input-number input.is-error:focus,
  64. .input-number .input-number-input input.is-error:focus {
  65. border-color: rgba(238, 36, 85, 0.75); }
  66. .input-number input.is-success,
  67. .input-number .input-number-input input.is-success {
  68. border: 1px solid rgba(32, 188, 113, 0.5); }
  69. .input-number input.is-success:focus,
  70. .input-number .input-number-input input.is-success:focus {
  71. border-color: rgba(32, 188, 113, 0.75); }
  72. .input-number input.is-warning,
  73. .input-number .input-number-input input.is-warning {
  74. border: 1px solid rgba(255, 105, 81, 0.5); }
  75. .input-number input.is-warning:focus,
  76. .input-number .input-number-input input.is-warning:focus {
  77. border-color: rgba(255, 105, 81, 0.75); }
  78. .input-number .input-number-nav {
  79. position: relative;
  80. width: 24px;
  81. margin-left: -1px; }
  82. .input-number .input-number-nav .is-up,
  83. .input-number .input-number-nav .is-down {
  84. margin: 0;
  85. position: absolute;
  86. cursor: pointer;
  87. width: 24px;
  88. height: 50%;
  89. line-height: 20px;
  90. border: none; }
  91. .input-number .input-number-nav .is-up {
  92. border-top-left-radius: 0;
  93. border-bottom-right-radius: 0;
  94. top: 0;
  95. right: 0;
  96. border-top: 1px solid rgba(17, 17, 19, 0.1);
  97. border-right: 1px solid rgba(17, 17, 19, 0.1); }
  98. .input-number .input-number-nav .is-down {
  99. border-top-right-radius: 0;
  100. border-bottom-right-radius: 4px;
  101. border-right: 1px solid rgba(17, 17, 19, 0.1);
  102. border-bottom: 1px solid rgba(17, 17, 19, 0.1);
  103. right: 0;
  104. bottom: 0; }