feat: input-focused

JasKang · Jan 13, 2023 · da03a3b · da03a3b · vercel · Jan 13, 2023
1 parent 6fae868
commit da03a3b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/docs/components/input.md b/docs/components/input.md
@@ -18,5 +18,11 @@
     <template #before>before</template>
     <template #after>after</template>
   </EInput>
+  <EInput>
+    <template #after>after</template>
+  </EInput>
+  <EInput>
+    <template #before>after</template>
+  </EInput>
 </template>
 ```
diff --git a/src/input/index.css b/src/input/index.css
@@ -1,10 +1,16 @@
 .e-input {
   @apply inline-flex w-full items-stretch rounded-md  text-sm shadow-sm;
   &__input {
-    @apply flex w-full flex-1 items-center rounded-md border border-solid border-gray-300 px-3;
+    @apply flex w-full flex-1 items-center border border-solid border-gray-300 px-3 transition-all;
     &.is-focused {
       @apply z-10 border-indigo-500 ring-1 ring-indigo-500;
     }
+    &:last-child {
+      @apply rounded-r-md;
+    }
+    &:first-child {
+      @apply rounded-l-md;
+    }
   }
   &__prefix {
     @apply flex-initial pr-2;
@@ -23,9 +29,6 @@
   }
   &__before {
     @apply rounded-l-md border-r-0;
-    + .e-input__input {
-      @apply rounded-l-none;
-    }
   }
   &__after {
     @apply rounded-r-md border-l-0;