tiny ui updates & backend lib patches

1 files changed, 71 insertions, 0 deletions

diff --git a/extension/src/assets/inputs.scss b/extension/src/assets/inputs.scss
new file mode 100644
index 0000000..62d03d4
--- /dev/null
+++ b/extension/src/assets/inputs.scss
@@ -0,0 +1,71 @@
+input.input,
+select.input,
+textarea.input {
+    @apply duration-100 ease-in-out outline-none border px-2 py-1.5;
+    @apply border-gray-200 bg-inherit dark:border-dark-400 dark:text-white hover:border-gray-300 hover:dark:border-dark-200;
+}
+
+
+/* CHECKBOXES */
+
+label.checkbox {
+    @apply flex items-center cursor-pointer;
+
+    input[type="checkbox"] {
+        @apply ease-in-out duration-100 w-5 h-5;
+        @apply border-2 rounded-sm border-gray-300 dark:border-dark-500;
+
+        &:checked {
+            @apply text-primary-500 dark:text-primary-600 border-primary-500 dark:border-primary-600;
+        }
+    }
+
+    &.primary {
+        input[type="checkbox"] {
+            @apply appearance-none;
+            @apply hover:border-primary-500 dark:hover:border-primary-600;
+
+            &:checked {
+                @apply bg-primary-500 dark:bg-primary-600 border-primary-500 dark:border-primary-600;
+            }
+
+            &+span.check {
+                clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+                @apply bg-white dark:bg-dark-500;
+            }
+        }
+
+        span.check {
+            margin: 0px 0px 1px 4px;
+            @apply absolute h-3 w-3;
+        }
+    }
+
+}
+
+/*Select */
+select.input {
+    option {
+        @apply dark:bg-dark-700 ;
+    }
+}
+
+select.input.options {
+    @apply text-current;
+}
+
+select.input:disabled{
+    @apply appearance-none;
+}
+
+/*Validation inputs*/
+input.input.dirty.data-valid,
+select.input.dirty.data-valid {
+    @apply border-primary-500 dark:border-primary-600;
+}
+
+input.input.dirty.data-invalid,
+select.input.dirty.data-invalid {
+    @apply border-red-600 dark:border-red-500;
+}
+