From 0a087d3956ee75ffb13b66b4cb3fbe126e0b8660 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 25 Jul 2022 16:48:37 +0800
Subject: [PATCH] refactor: basic components styles

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../components/src/components/alert/Alert.vue | 69 ++++++++--------
 .../src/components/button/Button.vue          | 80 ++++++++++---------
 .../components/src/components/card/Card.vue   | 22 ++---
 .../src/components/checkbox/CheckBox.vue      |  8 +-
 .../components/src/components/input/Input.vue | 56 ++++++-------
 .../src/components/menu/MenuItem.vue          | 20 ++---
 .../components/src/components/modal/Modal.vue | 67 +++++++++-------
 .../components/src/components/radio/Radio.vue | 20 ++---
 .../src/components/select/Select.vue          | 54 ++++++-------
 .../components/src/components/space/Space.vue |  4 +-
 .../src/components/switch/Switch.vue          | 52 ++++++------
 .../components/src/components/tabs/Tabbar.vue | 72 ++++++++---------
 .../components/src/components/tag/Tag.vue     | 37 +++++----
 .../src/components/textarea/Textarea.vue      | 35 ++++----
 14 files changed, 306 insertions(+), 290 deletions(-)

diff --git a/packages/components/src/components/alert/Alert.vue b/packages/components/src/components/alert/Alert.vue
index 2f6d8fd67..317b69d71 100644
--- a/packages/components/src/components/alert/Alert.vue
+++ b/packages/components/src/components/alert/Alert.vue
@@ -74,57 +74,58 @@ const handleClose = () => {
 
 <style lang="scss" scoped>
 .alert-wrapper {
-  @apply flex;
-  @apply flex-col;
-  @apply box-border;
-  @apply border;
-  @apply rounded-base;
+  @apply flex
+  flex-col
+  box-border
+  border
+  rounded-base;
   padding: 12px 16px;
 
   .alert-header {
     @apply flex;
 
     .alert-icon {
-      @apply self-center;
-      @apply mr-3;
-      @apply text-lg;
+      @apply self-center
+      mr-3
+      text-lg;
     }
 
     .alert-title {
-      @apply self-center;
-      @apply mr-3;
-      @apply flex-1;
-      @apply font-medium;
-      @apply text-base;
+      @apply self-center
+      mr-3
+      flex-1
+      font-medium
+      text-base;
     }
 
     .alert-close {
-      @apply self-center;
-      @apply cursor-pointer;
-      @apply rounded-full;
-      @apply p-0.5;
+      @apply self-center
+      cursor-pointer
+      rounded-full
+      p-0.5;
 
       &:hover {
-        @apply transition-all;
-        @apply bg-gray-300;
-        @apply text-white;
+        @apply transition-all
+        bg-gray-300
+        text-white;
       }
     }
   }
 
   .alert-description {
-    @apply text-sm;
-    @apply mt-2;
+    @apply text-sm
+    mt-2;
   }
 
   .alert-actions {
-    @apply border-t;
-    @apply mt-3 pt-2;
+    @apply border-t
+    mt-3
+    pt-2;
   }
 
   &.alert-default {
-    @apply bg-gray-50;
-    @apply border-gray-300;
+    @apply bg-gray-50
+    border-gray-300;
 
     .alert-icon,
     .alert-description {
@@ -138,8 +139,8 @@ const handleClose = () => {
   }
 
   &.alert-success {
-    @apply bg-green-50;
-    @apply border-green-300;
+    @apply bg-green-50
+    border-green-300;
 
     .alert-icon,
     .alert-description {
@@ -153,8 +154,8 @@ const handleClose = () => {
   }
 
   &.alert-info {
-    @apply bg-sky-50;
-    @apply border-sky-300;
+    @apply bg-sky-50
+    border-sky-300;
 
     .alert-icon,
     .alert-description {
@@ -168,8 +169,8 @@ const handleClose = () => {
   }
 
   &.alert-warning {
-    @apply bg-orange-50;
-    @apply border-orange-300;
+    @apply bg-orange-50
+    border-orange-300;
 
     .alert-icon,
     .alert-description {
@@ -183,8 +184,8 @@ const handleClose = () => {
   }
 
   &.alert-error {
-    @apply bg-red-50;
-    @apply border-red-300;
+    @apply bg-red-50
+    border-red-300;
 
     .alert-icon,
     .alert-description {
diff --git a/packages/components/src/components/button/Button.vue b/packages/components/src/components/button/Button.vue
index a46dbdf58..f9bf15e04 100644
--- a/packages/components/src/components/button/Button.vue
+++ b/packages/components/src/components/button/Button.vue
@@ -94,24 +94,24 @@ function handleClick() {
 </script>
 <style lang="scss">
 .btn {
-  @apply rounded-base;
-  @apply inline-flex;
-  @apply flex-shrink-0;
-  @apply cursor-pointer;
-  @apply select-none;
-  @apply flex-wrap;
-  @apply items-center;
-  @apply justify-center;
-  @apply transition-all;
-  @apply text-center;
-  @apply text-sm;
-  @apply no-underline;
-  @apply h-9;
-  @apply px-4;
-  @apply outline-0;
-  @apply border-none;
-  @apply appearance-none;
-  @apply align-middle;
+  @apply rounded-base
+  inline-flex
+  flex-shrink-0
+  cursor-pointer
+  select-none
+  flex-wrap
+  items-center
+  justify-center
+  transition-all
+  text-center
+  text-sm
+  no-underline
+  h-9
+  px-4
+  outline-0
+  border-none
+  appearance-none
+  align-middle;
 
   &:hover {
     @apply opacity-90;
@@ -122,8 +122,8 @@ function handleClick() {
   }
 
   &:disabled {
-    @apply opacity-50;
-    @apply cursor-not-allowed;
+    @apply opacity-50
+    cursor-not-allowed;
   }
 }
 
@@ -153,9 +153,9 @@ function handleClick() {
 }
 
 .btn-icon {
-  @apply h-5 w-5;
-  @apply text-white;
-  @apply mr-3;
+  @apply h-5 w-5
+  text-white
+  mr-3;
 }
 
 .btn-loading {
@@ -166,37 +166,39 @@ function handleClick() {
 }
 
 .btn-lg {
-  @apply h-11;
-  @apply px-5;
-  @apply text-lg;
+  @apply h-11
+  px-5
+  text-lg;
 }
 
 .btn-sm {
-  @apply h-7;
-  @apply px-3;
-  @apply text-xs;
+  @apply h-7
+  px-3
+  text-xs;
 
   .btn-icon {
-    @apply h-3 w-3;
-    @apply mr-2;
+    @apply h-3
+    w-3
+    mr-2;
   }
 }
 
 .btn-xs {
-  @apply h-6;
-  @apply px-2;
-  @apply text-xs;
+  @apply h-6
+  px-2
+  text-xs;
 
   .btn-icon {
-    @apply h-3 w-3;
-    @apply mr-2;
+    @apply h-3
+    w-3
+    mr-2;
   }
 }
 
 .btn-circle {
-  @apply w-9;
-  @apply p-0;
-  @apply rounded-full;
+  @apply w-9
+  p-0
+  rounded-full;
 }
 
 .btn-lg.btn-circle {
diff --git a/packages/components/src/components/card/Card.vue b/packages/components/src/components/card/Card.vue
index ed468e34a..1efac2cd8 100644
--- a/packages/components/src/components/card/Card.vue
+++ b/packages/components/src/components/card/Card.vue
@@ -33,22 +33,24 @@ defineProps({
 </template>
 <style lang="scss">
 .card-wrapper {
-  @apply box-border flex flex-col;
-  @apply bg-white;
-  @apply shadow-sm;
-  @apply overflow-hidden;
-  @apply rounded-base;
+  @apply box-border
+  flex
+  flex-col
+  bg-white
+  shadow-sm
+  overflow-hidden
+  rounded-base;
   border: 1px solid #eaecf0;
 
   .card-header {
-    @apply flex;
-    @apply justify-between;
+    @apply flex
+    justify-between;
     border-bottom: 1px solid #eaecf0;
 
     .card-header-title {
-      @apply self-center;
-      @apply text-base;
-      @apply font-bold;
+      @apply self-center
+      text-base
+      font-bold;
       padding: 12px 16px;
     }
 
diff --git a/packages/components/src/components/checkbox/CheckBox.vue b/packages/components/src/components/checkbox/CheckBox.vue
index 766cb2e37..4663f9b3f 100644
--- a/packages/components/src/components/checkbox/CheckBox.vue
+++ b/packages/components/src/components/checkbox/CheckBox.vue
@@ -48,9 +48,9 @@ function handleChange(e: Event) {
 </template>
 <style lang="scss">
 .checkbox-wrapper {
-  @apply flex;
-  @apply items-center;
-  @apply box-border;
-  @apply flex-grow-0;
+  @apply flex
+  items-center
+  box-border
+  flex-grow-0;
 }
 </style>
diff --git a/packages/components/src/components/input/Input.vue b/packages/components/src/components/input/Input.vue
index 55527fc3d..3790435bb 100644
--- a/packages/components/src/components/input/Input.vue
+++ b/packages/components/src/components/input/Input.vue
@@ -52,21 +52,21 @@ function handleInput(e: Event) {
 
 <style lang="scss">
 .input-wrapper {
-  @apply box-border;
-  @apply relative;
-  @apply w-full;
-  @apply inline-flex;
+  @apply box-border
+  relative
+  w-full
+  inline-flex;
   input {
-    @apply outline-0;
-    @apply bg-white;
-    @apply antialiased;
-    @apply resize-none;
-    @apply w-full;
-    @apply text-black;
-    @apply block;
-    @apply transition-all;
-    @apply appearance-none;
-    @apply rounded-base;
+    @apply outline-0
+    bg-white
+    antialiased
+    resize-none
+    w-full
+    text-black
+    block
+    transition-all
+    appearance-none
+    rounded-base;
     border: 1px solid #ced4da;
 
     &:active {
@@ -78,32 +78,32 @@ function handleInput(e: Event) {
     }
 
     &:disabled {
-      @apply opacity-50;
-      @apply cursor-not-allowed;
+      @apply opacity-50
+      cursor-not-allowed;
     }
 
     &.input-lg {
-      @apply h-11;
-      @apply px-4;
-      @apply text-lg;
+      @apply h-11
+      px-4
+      text-lg;
     }
 
     &.input-md {
-      @apply h-9;
-      @apply px-3;
-      @apply text-sm;
+      @apply h-9
+      px-3
+      text-sm;
     }
 
     &.input-sm {
-      @apply h-7;
-      @apply px-3;
-      @apply text-xs;
+      @apply h-7
+      px-3
+      text-xs;
     }
 
     &.input-xs {
-      @apply h-6;
-      @apply px-2;
-      @apply text-xs;
+      @apply h-6
+      px-2
+      text-xs;
     }
   }
 
diff --git a/packages/components/src/components/menu/MenuItem.vue b/packages/components/src/components/menu/MenuItem.vue
index b09893f52..b76b102c6 100644
--- a/packages/components/src/components/menu/MenuItem.vue
+++ b/packages/components/src/components/menu/MenuItem.vue
@@ -78,19 +78,19 @@ function handleClick() {
 }
 
 .menu-item-title {
-  @apply transition-all;
-  @apply text-base;
-  @apply flex;
-  @apply select-none;
-  @apply relative;
-  @apply p-2;
-  @apply font-normal;
-  @apply rounded-base;
+  @apply transition-all
+  text-base
+  flex
+  select-none
+  relative
+  p-2
+  font-normal
+  rounded-base;
 
   &:hover,
   &.active {
-    @apply bg-gray-100;
-    @apply font-medium;
+    @apply bg-gray-100
+    font-medium;
   }
 
   &.active::after {
diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index 105a4fec8..61df3e2f4 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -46,7 +46,7 @@ function handleClose() {
 }
 </script>
 <template>
-  <Teleport to="body" :disabled="true">
+  <Teleport :disabled="true" to="body">
     <div
       v-show="rootVisible"
       :class="wrapperClasses"
@@ -106,49 +106,55 @@ function handleClose() {
 
 <style lang="scss">
 .modal-wrapper {
-  @apply fixed;
-  @apply top-0 left-0;
-  @apply h-full w-full;
-  @apply flex flex-row;
-  @apply items-center justify-center;
+  @apply fixed
+  top-0
+  left-0
+  h-full
+  w-full
+  flex
+  flex-row
+  items-center
+  justify-center;
   z-index: 999;
 
   .modal-layer {
-    @apply flex-none;
-    @apply absolute;
-    @apply top-0 left-0;
-    @apply h-full w-full;
-    @apply transition-opacity;
-    @apply bg-gray-500;
-    @apply bg-opacity-75;
+    @apply flex-none
+    absolute
+    top-0
+    left-0
+    h-full
+    w-full
+    transition-opacity
+    bg-gray-500
+    bg-opacity-75;
   }
 
   .modal-content {
-    @apply flex;
-    @apply flex-col;
-    @apply relative;
-    @apply bg-white;
-    @apply items-stretch;
-    @apply shadow-xl;
-    @apply rounded-base;
+    @apply flex
+    flex-col
+    relative
+    bg-white
+    items-stretch
+    shadow-xl
+    rounded-base;
     width: calc(100vw - 20px);
     max-height: calc(100vh - 20px);
 
     .modal-header {
-      @apply flex;
-      @apply justify-between;
-      @apply border-b;
+      @apply flex
+      justify-between
+      border-b;
 
       .modal-header-title {
-        @apply self-center;
-        @apply text-base;
-        @apply font-bold;
+        @apply self-center
+        text-base
+        font-bold;
         padding: 12px 16px;
       }
 
       .modal-header-actions {
-        @apply self-center;
-        @apply h-full;
+        @apply self-center
+        h-full;
         .modal-header-action {
           @apply cursor-pointer;
           padding: 12px 16px;
@@ -161,8 +167,9 @@ function handleClose() {
     }
 
     .modal-body {
-      @apply overflow-y-auto overflow-x-hidden;
-      @apply flex-1;
+      @apply overflow-y-auto
+      overflow-x-hidden
+      flex-1;
       word-wrap: break-word;
       padding: 12px 16px;
     }
diff --git a/packages/components/src/components/radio/Radio.vue b/packages/components/src/components/radio/Radio.vue
index 00b986373..372f3176b 100644
--- a/packages/components/src/components/radio/Radio.vue
+++ b/packages/components/src/components/radio/Radio.vue
@@ -49,21 +49,21 @@ function handleChange(e: Event) {
 </template>
 <style lang="scss">
 .radio-wrapper {
-  @apply flex;
-  @apply items-center;
-  @apply box-border;
-  @apply flex-grow-0;
+  @apply flex
+  items-center
+  box-border
+  flex-grow-0;
 
   .radio-inner {
-    @apply self-center;
-    @apply relative;
+    @apply self-center
+    relative;
   }
 
   .radio-label {
-    @apply flex;
-    @apply self-center;
-    @apply items-start;
-    @apply ml-3;
+    @apply flex
+    self-center
+    items-start
+    ml-3;
   }
 }
 </style>
diff --git a/packages/components/src/components/select/Select.vue b/packages/components/src/components/select/Select.vue
index c229b8c01..106d4755a 100644
--- a/packages/components/src/components/select/Select.vue
+++ b/packages/components/src/components/select/Select.vue
@@ -48,21 +48,21 @@ function handleChange(e: Event) {
 </template>
 <style lang="scss">
 .select-wrapper {
-  @apply box-border;
-  @apply relative;
-  @apply w-full;
-  @apply inline-flex;
+  @apply box-border
+  relative
+  w-full
+  inline-flex;
 
   select {
-    @apply outline-0;
-    @apply bg-white;
-    @apply antialiased;
-    @apply w-full;
-    @apply text-black;
-    @apply block;
-    @apply transition-all;
-    @apply appearance-none;
-    @apply rounded-base;
+    @apply outline-0
+    bg-white
+    antialiased
+    w-full
+    text-black
+    block
+    transition-all
+    appearance-none
+    rounded-base;
     border: 1px solid #ced4da;
 
     &:active {
@@ -74,32 +74,32 @@ function handleChange(e: Event) {
     }
 
     &:disabled {
-      @apply opacity-50;
-      @apply cursor-not-allowed;
+      @apply opacity-50
+      cursor-not-allowed;
     }
 
     &.select-lg {
-      @apply h-11;
-      @apply px-4;
-      @apply text-lg;
+      @apply h-11
+      px-4
+      text-lg;
     }
 
     &.select-md {
-      @apply h-9;
-      @apply px-3;
-      @apply text-sm;
+      @apply h-9
+      px-3
+      text-sm;
     }
 
     &.select-sm {
-      @apply h-7;
-      @apply px-3;
-      @apply text-xs;
+      @apply h-7
+      px-3
+      text-xs;
     }
 
     &.select-xs {
-      @apply h-6;
-      @apply px-2;
-      @apply text-xs;
+      @apply h-6
+      px-2
+      text-xs;
     }
   }
 }
diff --git a/packages/components/src/components/space/Space.vue b/packages/components/src/components/space/Space.vue
index c00f3dd96..20761ddc0 100644
--- a/packages/components/src/components/space/Space.vue
+++ b/packages/components/src/components/space/Space.vue
@@ -35,8 +35,8 @@ const wrapperClasses = computed(() => {
 </template>
 <style lang="scss">
 .space-wrapper {
-  @apply inline-flex;
-  @apply box-border;
+  @apply inline-flex
+  box-border;
 
   &.space-direction-row {
     @apply flex-row;
diff --git a/packages/components/src/components/switch/Switch.vue b/packages/components/src/components/switch/Switch.vue
index 9d6c14acc..f4bd2ecb3 100644
--- a/packages/components/src/components/switch/Switch.vue
+++ b/packages/components/src/components/switch/Switch.vue
@@ -41,36 +41,36 @@ const handleChange = () => {
 </template>
 <style lang="scss">
 .switch-wrapper {
-  @apply inline-flex;
-  @apply box-border;
+  @apply inline-flex
+  box-border;
 
   .switch-inner {
-    @apply relative;
-    @apply inline-flex;
-    @apply flex-shrink-0;
-    @apply h-6;
-    @apply w-11;
-    @apply border-2;
-    @apply border-transparent;
-    @apply rounded-full;
-    @apply cursor-pointer;
-    @apply transition-colors;
-    @apply ease-in-out;
-    @apply duration-200;
+    @apply relative
+    inline-flex
+    flex-shrink-0
+    h-6
+    w-11
+    border-2
+    border-transparent
+    rounded-full
+    cursor-pointer
+    transition-colors
+    ease-in-out
+    duration-200;
 
     .switch-indicator {
-      @apply pointer-events-none;
-      @apply inline-block;
-      @apply h-5;
-      @apply w-5;
-      @apply rounded-full;
-      @apply bg-white;
-      @apply shadow;
-      @apply transform;
-      @apply ring-0;
-      @apply transition;
-      @apply ease-in-out;
-      @apply duration-200;
+      @apply pointer-events-none
+      inline-block
+      h-5
+      w-5
+      rounded-full
+      bg-white
+      shadow
+      transform
+      ring-0
+      transition
+      ease-in-out
+      duration-200;
     }
   }
 }
diff --git a/packages/components/src/components/tabs/Tabbar.vue b/packages/components/src/components/tabs/Tabbar.vue
index ee3b974e4..b3c4c3231 100644
--- a/packages/components/src/components/tabs/Tabbar.vue
+++ b/packages/components/src/components/tabs/Tabbar.vue
@@ -62,19 +62,19 @@ const handleChange = (id: number | string) => {
 <style lang="scss">
 .tabbar-wrapper {
   .tabbar-items {
-    @apply flex;
-    @apply items-center;
-    @apply flex-row;
+    @apply flex
+    items-center
+    flex-row;
   }
 
   .tabbar-item {
-    @apply flex;
-    @apply cursor-pointer;
-    @apply self-center;
-    @apply transition-all;
-    @apply text-base;
-    @apply justify-center;
-    @apply gap-2;
+    @apply flex
+    cursor-pointer
+    self-center
+    transition-all
+    text-base
+    justify-center
+    gap-2;
 
     .tabbar-item-label,
     .tabbar-item-icon {
@@ -92,16 +92,16 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10;
-      @apply px-5;
-      @apply py-1;
-      @apply border-b-gray-100;
+      @apply h-10
+      px-5
+      py-1
+      border-b-gray-100;
 
       border-bottom-width: 2px;
 
       &.tabbar-item-active {
-        @apply text-secondary;
-        @apply border-b-secondary;
+        @apply text-secondary
+        border-b-secondary;
       }
     }
   }
@@ -113,15 +113,15 @@ const handleChange = (id: number | string) => {
     }
 
     .tabbar-item {
-      @apply h-10;
-      @apply px-9;
-      @apply py-1;
-      @apply opacity-70;
-      @apply rounded-base;
+      @apply h-10
+      px-9
+      py-1
+      opacity-70
+      rounded-base;
 
       &.tabbar-item-active {
-        @apply bg-gray-100;
-        @apply opacity-100;
+        @apply bg-gray-100
+        opacity-100;
       }
 
       &:hover {
@@ -131,26 +131,26 @@ const handleChange = (id: number | string) => {
   }
 
   &.tabbar-outline {
-    @apply p-1;
-    @apply bg-gray-100;
-    @apply rounded-base;
+    @apply p-1
+    bg-gray-100
+    rounded-base;
 
     .tabbar-items {
-      @apply gap-1;
-      justify-content: flex-start;
+      @apply gap-1
+      justify-start;
     }
 
     .tabbar-item {
-      @apply h-10;
-      @apply px-9;
-      @apply py-1;
-      @apply opacity-70;
-      @apply rounded-base;
+      @apply h-10
+      px-9
+      py-1
+      opacity-70
+      rounded-base;
 
       &.tabbar-item-active {
-        @apply bg-white;
-        @apply opacity-100;
-        @apply shadow-sm;
+        @apply bg-white
+        opacity-100
+        shadow-sm;
       }
 
       &:hover {
diff --git a/packages/components/src/components/tag/Tag.vue b/packages/components/src/components/tag/Tag.vue
index 33f7b655d..adf163b69 100644
--- a/packages/components/src/components/tag/Tag.vue
+++ b/packages/components/src/components/tag/Tag.vue
@@ -33,31 +33,36 @@ const classes = computed(() => {
 </template>
 <style lang="scss">
 .tag-wrapper {
-  @apply rounded-base;
-  @apply inline-flex;
-  @apply flex-shrink-0;
-  @apply flex-wrap;
-  @apply box-border;
-  @apply cursor-pointer;
-  @apply text-center;
-  @apply items-center;
-  @apply justify-center;
-  @apply w-auto;
-  @apply align-middle;
-  @apply h-5;
-  @apply text-xs;
-  @apply border border-solid;
+  @apply rounded-base
+  inline-flex
+  flex-shrink-0
+  flex-wrap
+  box-border
+  cursor-pointer
+  text-center
+  items-center
+  justify-center
+  w-auto
+  align-middle
+  h-5
+  text-xs
+  border
+  border-solid;
 
   &.tag-default {
     border: 1px solid #d9d9d9;
   }
 
   &.tag-primary {
-    @apply text-white bg-primary border-primary;
+    @apply text-white
+    bg-primary
+    border-primary;
   }
 
   &.tag-secondary {
-    @apply text-white bg-secondary border-secondary;
+    @apply text-white
+    bg-secondary
+    border-secondary;
   }
 
   &.tag-danger {
diff --git a/packages/components/src/components/textarea/Textarea.vue b/packages/components/src/components/textarea/Textarea.vue
index bfabad461..0b144c1dd 100644
--- a/packages/components/src/components/textarea/Textarea.vue
+++ b/packages/components/src/components/textarea/Textarea.vue
@@ -37,23 +37,22 @@ function handleInput(e: Event) {
 </template>
 <style lang="scss">
 .textarea-wrapper {
-  @apply box-border;
-  @apply relative;
-  @apply w-full;
-  @apply inline-flex;
+  @apply box-border
+  relative
+  w-full
+  inline-flex;
   textarea {
-    @apply outline-0;
-    @apply bg-white;
-    @apply antialiased;
-    @apply w-full;
-    @apply text-black;
-    @apply block;
-    @apply transition-all;
-    @apply appearance-none;
-
-    @apply p-3;
-    @apply text-sm;
-    @apply rounded-base;
+    @apply outline-0
+    bg-white
+    antialiased
+    w-full
+    text-black
+    block
+    transition-all
+    appearance-none
+    p-3
+    text-sm
+    rounded-base;
     border: 1px solid #ced4da;
 
     &:active {
@@ -65,8 +64,8 @@ function handleInput(e: Event) {
     }
 
     &:disabled {
-      @apply opacity-50;
-      @apply cursor-not-allowed;
+      @apply opacity-50
+      cursor-not-allowed;
     }
   }
 }