form-number-input.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. /* Bootstrap Touchspin */
  2. .bootstrap-touchspin.input-group {
  3. width: 8.4rem;
  4. align-items: center; }
  5. .bootstrap-touchspin.input-group .form-control {
  6. padding: 5px;
  7. height: auto;
  8. border: 0;
  9. background-color: #f8f8f8;
  10. border-radius: 0.357rem !important;
  11. text-align: center;
  12. font-weight: 500; }
  13. .bootstrap-touchspin.input-group .form-control:focus {
  14. z-index: 1;
  15. box-shadow: none; }
  16. .bootstrap-touchspin.input-group > .input-group-btn:first-child {
  17. left: 12px !important;
  18. position: inherit; }
  19. .bootstrap-touchspin.input-group > .input-group-btn:last-child {
  20. right: 12px !important;
  21. position: inherit; }
  22. .bootstrap-touchspin .bootstrap-touchspin-injected {
  23. margin: 0 !important; }
  24. .bootstrap-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-down,
  25. .bootstrap-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-up {
  26. padding: 0;
  27. min-width: 20px;
  28. min-height: 20px;
  29. border-radius: 0.357rem !important; }
  30. .bootstrap-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-down i,
  31. .bootstrap-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-down svg,
  32. .bootstrap-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-up i,
  33. .bootstrap-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-up svg {
  34. height: 0.8rem;
  35. width: 0.8rem;
  36. font-size: 0.8rem;
  37. position: relative;
  38. top: -1px; }
  39. .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-down,
  40. .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-up {
  41. background-color: rgba(34, 41, 47, 0.5) !important;
  42. cursor: default;
  43. opacity: 0.5; }
  44. .bootstrap-touchspin.input-group-lg {
  45. width: 9.375rem; }
  46. .bootstrap-touchspin.input-group-lg .touchspin.form-control {
  47. height: auto !important; }
  48. .bootstrap-touchspin.input-group-lg .bootstrap-touchspin-down,
  49. .bootstrap-touchspin.input-group-lg .bootstrap-touchspin-up {
  50. min-width: 24px;
  51. min-height: 24px; }
  52. .bootstrap-touchspin.input-group-lg .bootstrap-touchspin-down i,
  53. .bootstrap-touchspin.input-group-lg .bootstrap-touchspin-down svg,
  54. .bootstrap-touchspin.input-group-lg .bootstrap-touchspin-up i,
  55. .bootstrap-touchspin.input-group-lg .bootstrap-touchspin-up svg {
  56. height: 1rem;
  57. width: 1rem;
  58. font-size: 1rem;
  59. top: 0; }
  60. .bootstrap-touchspin.input-group-sm {
  61. width: 6.25rem; }
  62. .bootstrap-touchspin.input-group-sm .touchspin.form-control {
  63. height: auto !important; }
  64. .bootstrap-touchspin.input-group-sm .bootstrap-touchspin-injected .bootstrap-touchspin-down,
  65. .bootstrap-touchspin.input-group-sm .bootstrap-touchspin-injected .bootstrap-touchspin-up {
  66. min-width: 16px;
  67. min-height: 16px; }
  68. .bootstrap-touchspin.input-group-sm .bootstrap-touchspin-injected .bootstrap-touchspin-down i,
  69. .bootstrap-touchspin.input-group-sm .bootstrap-touchspin-injected .bootstrap-touchspin-down svg,
  70. .bootstrap-touchspin.input-group-sm .bootstrap-touchspin-injected .bootstrap-touchspin-up i,
  71. .bootstrap-touchspin.input-group-sm .bootstrap-touchspin-injected .bootstrap-touchspin-up svg {
  72. height: 0.6rem;
  73. width: 0.6rem;
  74. font-size: 0.6rem;
  75. top: -3px; }
  76. /* Number Type Input Box Scss for Touchspin - Remove arrow for firefox */
  77. .bootstrap-touchspin.input-group input[type='number'] {
  78. -moz-appearance: textfield; }
  79. .dark-layout .bootstrap-touchspin.input-group .form-control {
  80. background-color: #161d31; }
  81. .dark-layout .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-down,
  82. .dark-layout .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-injected .bootstrap-touchspin-up,
  83. .dark-layout .bootstrap-touchspin.disabled-touchspin .bootstrap-touchspin-injected .disabled-max-min {
  84. background-color: #b8c2cc !important;
  85. opacity: 1; }
  86. .dark-layout .bootstrap-touchspin .bootstrap-touchspin-injected .disabled-max-min {
  87. background-color: #b8c2cc !important;
  88. opacity: 1; }