style: created custom tagify scss file and updated gulp file

gulpfile.ts

@@ -43,20 +43,21 @@ export function attributesIcons() {
 export function css() {
   console.log("(re)building css");
 
-  return src(sassSrc).
-    pipe(init()).
-    pipe(
+  return src(sassSrc)
+    .pipe(init())
+    .pipe(
       sass({
         errLogToConsole: true,
         outputStyle: "expanded",
         includePaths: ["./node_modules/foundation-sites/scss"],
       }).on("error", sass.logError)
-    ).
-    pipe(minifyCSS()).
-    pipe(write(".")).
-    pipe(dest("./html/css/dist"));
+    )
+    .pipe(minifyCSS())
+    .pipe(write("."))
+    .pipe(dest("./html/css/dist"));
 }
 
+
 export function copyJs() {
   return src([
     "./node_modules/@webcomponents/**/webcomponentsjs/**/*.js",
@@ -133,16 +134,17 @@ function copyCss() {
     "./node_modules/leaflet/dist/leaflet.css",
     "./node_modules/leaflet.markercluster/dist/MarkerCluster.css",
     "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
-    "./node_modules/@yaireo/tagify/dist/tagify.css",
+    // "./node_modules/@yaireo/tagify/dist/tagify.css", // This line should be commented out or removed
     "./node_modules/cropperjs/dist/cropper.css",
     "./node_modules/select2/dist/css/select2.min.css",
-  ]).
-    pipe(init()).
-    pipe(minifyCSS()).
-    pipe(write(".")).
-    pipe(dest("./html/css/dist"));
+  ])
+  .pipe(init())
+  .pipe(minifyCSS())
+  .pipe(write("."))
+  .pipe(dest("./html/css/dist"));
 }
 
+
 function copyImages() {
   return src(imagesSrc).pipe(dest("./html/css/dist"));
 }

scss/app-ltr.scss

@@ -1,4 +1,6 @@
 @import "variables";
+@import "custom-tagify";
+@import "variables";
 @import "settings";
 @import "sveetoy/f5_settings";
 @import "foundation";

scss/app-rtl.scss

@@ -1,4 +1,6 @@
 @import "variables";
+@import "custom-tagify";
+@import "variables";
 @import "settings-rtl";
 @import "sveetoy/f5_settings";
 @import "foundation";

scss/custom-tagify.scss

@@ -0,0 +1,34 @@
+@import "../node_modules/@yaireo/tagify/src/tagify.scss";
+@import "variables"; 
+
+// Placeholder style for Tagify input
+.tagify__input::placeholder {
+  color: $dark;
+}
+
+// Hover state for Tagify tags
+.tagify__tag:hover {
+  background-color: $skyblue;
+  border-color: lighten($paleblue, 10%);
+}
+
+// Style for the remove button in tags
+.tagify__tag .tagify__tag__removeBtn {
+  background-color: $text-color-dark;
+}
+
+// Hover state for the remove button in tags
+.tagify__tag .tagify__tag__removeBtn:hover {
+  background-color: $off-pink;
+}
+
+// Hover state for dropdown items
+.tagify__dropdown__item--active,
+.tagify__dropdown__item:hover {
+  background-color: $skyblue;
+}
+
+// Style for dropdown items
+.tagify__dropdown__item {
+  border-color: $paleblue;
+}

templates/web/common/site_layout.tt.html

@@ -19,6 +19,7 @@
     <link rel="stylesheet" href="[% static_subdomain %]/css/dist/app-[% edq(lang('text_direction')) %].css?v=[% css_timestamp %]" data-base-layout="true">
     <link rel="stylesheet" href="[% static_subdomain %]/css/dist/jqueryui/themes/base/jquery-ui.css" data-base-layout="true">
     <link rel="stylesheet" href="[% static_subdomain %]/css/dist/select2.min.css">
+	<link rel="stylesheet" href="[% static_subdomain %]/css/dist/custom-tagify.css" data-base-layout="true">
     <link rel="search" href="[% formatted_subdomain %]/cgi/opensearch.pl" type="application/opensearchdescription+xml" title="[% edq(lang('site_name')) %]">
 	[% header %]
     <style media="all">