Tags Input

- Fix missing border
appwrite · Nov 24, 2023 · 2fd860f · 2fd860f
1 parent 46633da
commit 2fd860f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 49 deletions.
diff --git a/packages/ui/src/6-elements/form/_index.scss b/packages/ui/src/6-elements/form/_index.scss
@@ -3,7 +3,6 @@
 @forward "helper";
 @forward "placeholder";
 @forward "text-inputs";
-@forward "tags-input";
 @forward "password-meter";
 @forward "radio-and-checkbox";
 @forward "switch";

diff --git a/packages/ui/src/6-elements/form/_tags-input.scss b/packages/ui/src/6-elements/form/_tags-input.scss
diff --git a/packages/ui/src/6-elements/form/_text-inputs.scss b/packages/ui/src/6-elements/form/_text-inputs.scss
@@ -288,4 +288,46 @@ input[type="datetime-local" i]::-webkit-calendar-picker-indicator {
     flex:1;
     &:empty::before { content: attr(data-placeholder); }
   }
+}
+
+/* tags input partial */
+.tags-input {
+  @extend .input-text;
+  min-block-size:pxToRem(40); padding-block:pxToRem(5); padding-inline:pxToRem(15);
+  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
+  &-text { all:unset; flex:1; font-size:pxToRem(14); }
+  &.is-focus {box-shadow: var(--focus-box-shadow); }
+
+  /* default not read-only!!! this pseudo-class affect on div element and I need to overwrite this behavior */
+  &.is-read-only {
+    #{$theme-dark} &{
+      --p-bg-color: var(--color-neutral-80);
+      --p-border-color: var(--color-neutral-60);
+      .tag {
+        --tag-bg-color: var(--color-neutral-60);
+        --tag-text-color: var(--color-neutral-15);
+      }
+    }
+  }
+
+}
+.tags {
+  display:contents;
+  &-list { display:contents; gap:10px; flex-wrap:wrap; }
+}
+.input-tag {
+  --p-bg-color: var(--tag-bg-color, var(--color-neutral-15));
+  --p-text-color: var(--tag-text-color, var(--color-neutral-60));
+  display:flex; height:pxToRem(28); gap:6px; align-items:center;
+  background-color:hsl(var(--p-bg-color)); padding-inline:pxToRem(8); padding-block:pxToRem(6); border-radius:var(--border-radius-xsmall);
+  color:hsl(var(--p-text-color));
+  &-delete-button {
+    aspect-ratio:1 / 1; line-height:1; border-radius:var(--border-radius-xsmall); text-align:center;
+    [class*="icon"]::before { vertical-align:middle; }
+  }
+  &.is-disabled {  --p-text-color:var(--color-neutral-20); }
+  #{$theme-dark} &{
+    --tag-bg-color: var(--color-neutral-80);
+    --tag-text-color: var(--color-neutral-20);
+  }
 }