refactor classes to be clearer

lyqht · Aug 9, 2023 · 5e2cc2e · 5e2cc2e · vercel · Aug 9, 2023
1 parent a56a4d1
commit 5e2cc2e
Showing 1 changed file with 18 additions and 21 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -648,49 +648,46 @@ label {
   @apply text-gray-700 dark:text-gray-100 text-lg font-semibold;
 }
 
-.text-input,
-.secondary-button {
-  @apply bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow hover:shadow-md transition-shadow rounded-lg;
-}
-
-.text-input,
-input[type='color'],
-input[type='radio'],
-.button,
-.secondary-button,
-.icon-button {
-  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
-}
-
 .text-input {
+  @apply bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100;
+  @apply shadow hover:shadow-md transition-shadow rounded-lg;
+  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
   @apply resize-none appearance-none ms-1 p-4 rounded w-full;
 }
 
-.color-input {
+input[type='color'] {
+  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
   @apply bg-transparent shadow p-0 border rounded box-border text-zinc-700 dark:text-zinc-100 focus-visible:shadow;
 }
 
-.vertical-border {
-  @apply h-6 bg-slate-300 dark:bg-slate-700 w-1;
+input[type='radio'] {
+  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
+  @apply m-3;
 }
 
 .button {
-  @apply bg-zinc-100 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-200 shadow-sm hover:shadow p-2 focus-visible:shadow-md rounded-lg;
+  @apply bg-zinc-100 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-200;
+  @apply shadow-sm hover:shadow p-2 focus-visible:shadow-md rounded-lg;
+  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
 }
 
 .secondary-button {
+  @apply bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100;
+  @apply shadow hover:shadow-md transition-shadow rounded-lg;
+  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
   @apply outline-none p-1.5;
 }
 
 .icon-button {
+  @apply outline-none focus-visible:ring-1 focus-visible:ring-zinc-700 dark:focus-visible:ring-zinc-200;
   @apply outline-none hover:shadow rounded-sm;
 }
 
-input[type='radio'] {
-  @apply m-3;
+.vertical-border {
+  @apply h-6 bg-slate-300 dark:bg-slate-700 w-1;
 }
 
-.radio-group {
+.radiogroup {
   @apply flex flex-row items-center gap-1;
 }