updated the template CSS

yairEO · May 8, 2024 · 1355b13 · 1355b13
1 parent 4fb9885
commit 1355b13
Show file tree

Hide file tree

Showing 18 changed files with 288 additions and 126 deletions.
diff --git a/docs/examples/dist/RTL.html b/docs/examples/dist/RTL.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/advance-options.html b/docs/examples/dist/advance-options.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/basic.html b/docs/examples/dist/basic.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/different-look.html b/docs/examples/dist/different-look.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/disabled-user-input.html b/docs/examples/dist/disabled-user-input.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/disabled.html b/docs/examples/dist/disabled.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/drag-sort.html b/docs/examples/dist/drag-sort.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/extra-properties.html b/docs/examples/dist/extra-properties.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/input-suggestions-styled-as-tags.html b/docs/examples/dist/input-suggestions-styled-as-tags.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/input.html b/docs/examples/dist/input.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/manual-suggestions.html b/docs/examples/dist/manual-suggestions.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;

diff --git a/docs/examples/dist/mix.html b/docs/examples/dist/mix.html
@@ -20,16 +20,25 @@
         <style>
           html, body{ min-height:100%; scroll-behavior: smooth; }
           body{
-            font:14px Arial;
-            margin:0;
-            overflow-x:hidden;
+            font: 14px Arial;
+            margin: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: grid;
+            place-items: center;
           }
 
-          tags + input, tags + textarea {
-            position: initial !important;
-            left: 0 !important;
+          .tagify {
+            min-width: 300px;
+            max-width: 500px;
+          }
+
+          .tagify + input, .tagify + textarea {
+            position: fixed !important;
+            bottom: 10px;
+            left: 10px !important;
+            right: 10px;
             transform: none !important;
-            width: 100%;
             padding: 6px;
             border: 2px solid #999;
             margin-bottom: 1em;