Merge pull request #119 from solfacil/style/remove-input-arrows

feat: Removendo setas do Input (type: Number)
solfacil · Jan 24, 2022 · d04a6d1 · d04a6d1
2 parents 293d650 + 736beb2
commit d04a6d1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/src/assets/scss/_input-text.scss b/src/assets/scss/_input-text.scss
@@ -17,6 +17,14 @@
     &.hasIconVisibility {
       @apply pr-8;
     }
+
+    &.no-arrows[type='number'] {
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
 
   .icon {

diff --git a/src/components/Input/Input.vue b/src/components/Input/Input.vue
@@ -18,6 +18,7 @@
           'is-icon': $slots['icon'],
           search: inputType === 'search',
           hasIconVisibility: controlVisibility,
+          'no-arrows': noArrows,
         }"
         data-testid="input"
         :disabled="disabled"
@@ -164,6 +165,14 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /** Remove arrows of input number
+        https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button#changing_the_cursor_in_the_spin_controls
+    **/
+    noArrows: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: (instance) => ({