fix(input): modify select element

swwind · Mar 19, 2023 · 26b376b · 26b376b
1 parent 20a7227
commit 26b376b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 9 deletions.
diff --git a/packages/alnus/src/components/button.css b/packages/alnus/src/components/button.css
@@ -1,25 +1,27 @@
 .btn {
-  @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900;
+  @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900;
+
+  @apply active:scale-95;
 
   /* variants */
 
   /* default variant */
-  @apply bg-slate-900 text-white hover:bg-slate-700 active:bg-slate-900 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100 dark:active:bg-slate-900;
+  @apply bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-100;
 
   &.btn-danger {
-    @apply bg-red-500 text-white hover:bg-red-600 active:bg-red-500 dark:hover:bg-red-600 dark:active:bg-red-500;
+    @apply bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600;
   }
 
   &.btn-outline {
-    @apply border border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100 active:bg-transparent dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800 dark:active:bg-transparent;
+    @apply border border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800;
   }
 
   &.btn-subtle {
-    @apply bg-slate-100 text-slate-900 hover:bg-slate-200 active:bg-slate-100 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800 dark:active:bg-slate-700;
+    @apply bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800;
   }
 
   &.btn-ghost {
-    @apply bg-transparent text-slate-900 hover:bg-slate-100 active:bg-transparent dark:text-slate-100 dark:hover:bg-slate-800 dark:hover:text-slate-100 dark:active:bg-transparent;
+    @apply bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-100 dark:hover:bg-slate-800 dark:hover:text-slate-100;
   }
 
   &.btn-link {

diff --git a/packages/alnus/src/components/input.css b/packages/alnus/src/components/input.css
@@ -1,7 +1,27 @@
 .input {
-  @apply flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 invalid:text-red-500 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900;
+  @apply relative flex w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 invalid:text-red-500 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900;
 
-  &[type="file"]::-webkit-file-upload-button {
-    @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border border-solid border-slate-200 bg-transparent text-sm font-medium text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 active:bg-transparent disabled:pointer-events-none disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-800 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:active:bg-transparent;
+  &[type="file"] {
+    @apply items-center overflow-hidden py-0 pl-0;
+
+    &::file-selector-button {
+      @apply pointer-events-none mr-3 h-full border-none bg-slate-100 px-3 py-2 text-slate-900 dark:bg-slate-700 dark:text-slate-100;
+    }
+  }
+
+  &:not(select[multiple]) {
+    @apply h-10;
+  }
+
+  &:is(select[multiple]) {
+    @apply overflow-auto;
+  }
+
+  &:is(select) > option {
+    @apply bg-slate-100 text-slate-900 dark:bg-slate-700 dark:text-slate-100;
+  }
+
+  &:is(select) > optgroup > option {
+    @apply disabled:pointer-events-none disabled:opacity-50;
   }
 }
diff --git a/packages/docs/src/routes/docs/components/input/index.mdx b/packages/docs/src/routes/docs/components/input/index.mdx
@@ -45,6 +45,23 @@ import Preview from "~/components/preview/preview";
         <option value="Cherry">Cherry</option>
       </select>
     </label>
+    <label class="flex w-full flex-col gap-1.5">
+      <span class="text-sm">Multiple Select</span>
+      <select multiple size="8" class="input">
+        <optgroup label="4-legged pets">
+          <option value="dog">Dog</option>
+          <option value="cat">Cat</option>
+          <option value="hamster" disabled>
+            Hamster
+          </option>
+        </optgroup>
+        <optgroup label="Flying pets">
+          <option value="parrot">Parrot</option>
+          <option value="macaw">Macaw</option>
+          <option value="albatross">Albatross</option>
+        </optgroup>
+      </select>
+    </label>
     <label class="flex w-full flex-col gap-1.5">
       <span class="text-sm">Number</span>
       <input type="number" class="input" />