feat(VsInputWrapper): update label, message style (#153)

pubg · Apr 4, 2024 · 44e0292 · 44e0292
1 parent 0a195c8
commit 44e0292
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.scss b/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.scss
@@ -2,17 +2,22 @@
 
 .vs-input-wrapper {
     .vs-label {
+        display: flex;
+        align-items: center;
+        min-height: 1.5rem;
         color: var(--vs-font-color);
-        font-size: 1rem;
-        line-height: 2rem;
+        font-size: 0.9rem;
 
         &.disabled {
             @include disabled;
         }
     }
 
     .required-star {
+        position: relative;
+        top: 0.2rem;
         color: var(--vs-red-600);
+        margin-left: 0.15rem;
 
         &.disabled {
             @include disabled;
@@ -25,4 +30,15 @@
         padding: 0;
         min-width: 0;
     }
+
+    .vs-messages {
+        display: flex;
+        align-items: center;
+        min-height: 1.2rem;
+        margin-bottom: 0.2rem;
+
+        .message-item + .message-item {
+            margin-left: 1rem;
+        }
+    }
 }
diff --git a/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue b/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue
@@ -5,22 +5,27 @@
                 :is="groupLabel ? 'legend' : 'label'"
                 v-if="!noLabel"
                 :for="groupLabel ? undefined : id || undefined"
-                :class="textGlowByState"
+                :class="['vs-label', textGlowByState]"
             >
                 <slot name="label">
-                    <span :class="['vs-label', { disabled }]">{{ label }}</span>
+                    <span :class="{ disabled }">{{ label }}</span>
                 </slot>
-                <i :class="['required-star', { disabled }]" v-if="required">*</i>
+                <i v-if="required" :class="['required-star', { disabled }]">*</i>
             </component>
 
             <slot />
         </component>
 
-        <slot name="messages">
-            <div class="vs-messages" v-if="!noMessage">
-                <vs-message v-for="(message, index) in messages" :key="`${index}-${message.text}`" :message="message" />
-            </div>
-        </slot>
+        <div class="vs-messages" v-if="!noMessage">
+            <slot name="messages">
+                <vs-message
+                    class="message-item"
+                    v-for="(message, index) in messages"
+                    :key="`${index}-${message.text}`"
+                    :message="message"
+                />
+            </slot>
+        </div>
     </div>
 </template>
 

diff --git a/packages/vlossom/src/components/vs-message/VsMessage.scss b/packages/vlossom/src/components/vs-message/VsMessage.scss
@@ -2,10 +2,11 @@
     display: flex;
     align-items: center;
     color: var(--vs-line-color);
+    font-size: 0.8rem;
 
     .message-icon {
         position: relative;
-        top: 0.1rem;
-        margin-right: 0.4rem;
+        top: 0.05rem;
+        margin-right: 0.3rem;
     }
 }
diff --git a/packages/vlossom/src/components/vs-message/VsMessage.vue b/packages/vlossom/src/components/vs-message/VsMessage.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="['vs-message', colorClass]">
-        <vs-icon class="message-icon" :icon="icon" />
+        <vs-icon class="message-icon" :icon="icon" size="0.9rem" />
         <span class="message-text">{{ message.text }}</span>
     </div>
 </template>