From 6fd32fb84b8537e4e2cd4c10888776c041cf6833 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sun, 23 Apr 2023 16:42:58 +1000
Subject: [PATCH] support small

---
 resources/js/components/SMInput.vue | 42 ++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index e85e4b0..f7fe6cd 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -1,6 +1,6 @@
 <template>
     <SMControl
-        :class="['control-type-input', { 'input-active': active }]"
+        :class="['control-type-input', { 'input-active': active }, props.size]"
         :invalid="feedbackInvalid">
         <div v-if="slots.prepend" class="input-control-prepend">
             <slot name="prepend"></slot>
@@ -199,6 +199,11 @@ const props = defineProps({
         default: null,
         required: false,
     },
+    size: {
+        type: String,
+        default: "",
+        required: false,
+    },
 });
 
 const slots = useSlots();
@@ -628,5 +633,40 @@ const handleMediaSelect = async (event) => {
             }
         }
     }
+
+    &.small {
+        &.input-active {
+            .control-row .control-item .control-label {
+                transform: translate(16px, 6px) scale(0.7);
+            }
+        }
+
+        .control-row {
+            .control-item {
+                .control-label {
+                    transform: translate(16px, 10px) scale(1);
+                }
+
+                .input-control {
+                    padding: 16px 8px 4px 14px;
+                }
+            }
+
+            .input-control-append {
+                .button {
+                    .button-label {
+                        padding: 7px 16px 15px 16px;
+
+                        ion-icon {
+                            height: 16px;
+                            width: 16px;
+                        }
+                    }
+
+                    padding: 0;
+                }
+            }
+        }
+    }
 }
 </style>